Nous avions précisé dans les premiers post (‘Un point sur les facelets et JSF‘) de ce blog qu’il était possible de garder le ‘Look And Feel’ de l’application ‘MonDossierWeb’ d’origine ; nous allons apporter ici un peu plus de précisions.
En effet, si nous savions qu’il était possible de garder les mêmes class de style que dans l’application d’origine, il y a un point que nous n’avions pas abordé : le javascript.
L’application d’origine utilise par exemple du javascript sur l’action onMouseOver des lignes (<tr>) de ses ‘table’ pour les afficher en surbrillance lorsque l’on place la souris dessus. Exemple pour la page qui liste les inscriptions d’un étudiant:
<tr onMouseOver=”javascript:this.className=’uportal-background-highlight’”onMouseOut=”javascript:this.className=’uportal-background-content’”> |
Or, pour cette même page nous utilisons (dans la nouvelle version) une dataTable pour afficher le contenu d’une liste (‘linsciae’ la liste des inscriptions iae par exemple), attribut du bean ‘Etudiant’. Nous n’utilisons donc pas la balise <tr> puisqu’elle est générée automatiquement en utilisant les balises ‘column’ de la dataTable. Exemple :
<t:dataTable id=”tableiae” value=”#{etudiant.linsciae}” var=”ins” cellpadding=”5″ border=”0″ width=”100%”><h:column><f:facet name=”header”><u>Année</u></f:facet><h:outputText value=”#{ins.cod_anu}”/></h:column><h:column><f:facet name=”header”><u>Code</u></f:facet><h:outputText value=”#{ins.cod_etp}”/></h:column><h:column><f:facet name=”header”><u>Vers.</u></f:facet><h:outputText value=”#{ins.cod_vrs_vet}”/></h:column><h:column><f:facet name=”header”><u>Etape</u></f:facet><h:outputText value=”#{ins.lib_etp}”/></h:column></t:dataTable> |
Heureusement la librairie tomahawk fournit une ‘dataTable’ plus évoluée que la librairie jsf. La dataTable tomahawk fournit par exemple les attributs ‘rowOnMouseOver’ et ‘rowOnMouseOut’ chargés de remplacer ‘onMouseOver’ et ‘onMouseOut’ de la balise <tr>. Il ne reste ainsi qu’à modifier :
<t:dataTable id=”tableiae” value=”#{etudiant.linsciae}” var=”ins” cellpadding=”5″ border=”0″ width=”100%”> |
En
<t:dataTable id=”tabledac” value=”#{etudiant.linscdac}” var=”insd” cellpadding=”5″ rendered=”#{etudiant.existeInsDac}”rowOnMouseOver=”javascript:this.className=’uportal-background-neutral-light’”rowOnMouseOut=”javascript:this.className=’uportal-background-content’”> |
pour obtenir le même rendu que dans l’application d’origine.
