Grace à l’utilisation des facelets dans esup-mondossierweb, nous avons pu faire du templating, qui est non seulement utile pour éviter la recopie de code mais aussi pour passer facilement des servlets aux portlets car comme vous le savez les pages d’une portlet ne contiennent pas les balises html et head, contrairement aux pages d’une servlet.
Chaque page de l’application (.xhtml) est donc une composition d’une page template.xhtml, qui affiche ou non l’entête <html>, dont on redéfinie le contenu. Dans le cas de la partie « étudiant » de mondossierweb, chaque page est une composition de template-etu.xhtml qui est une composition de template.xhtml en y ajoutant le template-menu.xhmtl. template-xhtml ne définit que l’entête, qui différe suivant le type de déploiement, et utilise en decoration le template-page.xhtml qui contient les composants redifinissable menu (définit par template-etu.xhtml) et icones (pour ajouter des icones au menu dans la partie enseignant) et inclut le template-icone.xhtml qui affiche le bouton de retour à la page d’accueil dans le cas où l’utilisateur est un enseignant.
Voici par exemple la page index.xhtml pour la partie etudiant :
| <?xml version= »1.0″ encoding= »ISO-8859-1″?> <!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Transitional//EN » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd »><div xmlns:h= »http://java.sun.com/jsf/html » xmlns:e= »http://commons.esup-portail.org » xmlns:ui= »http://java.sun.com/jsf/facelets »> <ui:composition template= »/stylesheets/template/template-etu.xhtml »> <ui:define name= »body »> <table cellspacing= »0″ cellpadding= »5″ width= »100% » border= »0″> <tr> <td nowrap= »true » class= »uportal-channel-table-header »>Accueil</td><td width= »100% »></td> </tr> </table><p align= »justify » class= »uportal-channel-text »>Ce canal a pour but de vous permettre de consulter votre dossier Etudiant. En accédant à votre dossier, vous trouverez les informations suivantes : <ul> <li>Etat-civil : Nom, prénoms, date de naissance, numéro de dossier, baccalauréat…</li><li>Adresses : Adresse annuelle, Adresse fixe</li><li>Inscriptions : La liste de toutes vos inscriptions à l’Université…</li><li>Calendrier des exmanens : Dates, Salles, Durées…</li><li>Notes et résultats : Tous vos résultats aux diplômes, années intermédiaires, éléments pédagogiques et épreuves.</li> </ul> </p> </ui:define> </ui:composition></div> |
Cette page appelle le template-etu.xhtml suivant :
| <?xml version= »1.0″ encoding= »ISO-8859-1″?> <!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Transitional//EN » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd »><div xmlns:h= »http://java.sun.com/jsf/html » xmlns:e= »http://commons.esup-portail.org » xmlns:ui= »http://java.sun.com/jsf/facelets »><ui:composition template= »/stylesheets/template/template.xhtml »> <ui:define name= »menu »> <ui:include src= »/stylesheets/template/template-menu.xhtml »/> </ui:define> </ui:composition></div> |
Qui utilise template-menu.xhtml (qui ne sera pas décrit ici) et appelle le template.xhtml (formaté pour le déploiement portlet) suivant :
| <?xml version= »1.0″ encoding= »ISO-8859-1″?> <!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Transitional//EN » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd »><div xmlns:h= »http://java.sun.com/jsf/html » xmlns:e= »http://commons.esup-portail.org » xmlns:ui= »http://java.sun.com/jsf/facelets »> <ui:decorate template= »/stylesheets/template/template-page.xhtml »></ui:decorate></div> |
Qui utilise le template-page.xhtml:
<?xml version= »1.0″ encoding= »ISO-8859-1″?> <!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Transitional//EN » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd »><div xmlns:h= »http://java.sun.com/jsf/html » xmlns:e= »http://commons.esup-portail.org » xmlns:ui= »http://java.sun.com/jsf/facelets »><ui:composition><table width= »100% »><tr><td> <ui:insert name= »menu »></ui:insert> </td><td align= »right »> <ui:insert name= »icones »></ui:insert> </td><td align= »right »> <ui:include src= »/stylesheets/template/template-icone.xhtml »/> </td></tr></table><hr size= »1″ /><p><ui:insert name= »body »>Page Body</ui:insert></p></ui:composition> </div> |
Qui inclut elle-même la page template-icone.xhtml qui affiche un bouton de retour a l’accueil si l’utilisateur est un enseignant. Elle ne sera pas détaillée ici.
Dans le cas de la partie « enseignant » de mondossierweb, chaque page est une composition de template-ens.xhtml qui est une composition de template.xhtml en y ajoutant le composant titre dans le menu. template-xhtml ne définit que l’entête, qui différe suivant le type de déploiement, et utilise en décoration le template-page.xhtml qui contient les composants redifinissable menu (définit par template-ens.xhtml) et icones (pour ajouter des icones au menu) et inclut le template-icone.xhtml qui affiche le bouton de retour à la page d’accueil.
Voici par exemple la page resultatrechercheannuaire.xhtml:
| <?xml version= »1.0″ encoding= »ISO-8859-1″?> <!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Transitional//EN » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd »> <div xmlns:h= »http://java.sun.com/jsf/html » xmlns:e= »http://commons.esup-portail.org » xmlns:ui= »http://java.sun.com/jsf/facelets »> <ui:composition template= »/stylesheets/template/template-ens.xhtml »> <ui:define name= »titre »> Résultat de la recherche </ui:define> <ui:define name= »icones »> <h:form id= »liens »> <h:commandLink id= »linkmodifrecherche » action= »navigationRechercheAnnuaire »> <img border=’0′ src=’modify.gif’ alt=’Modifier la recherche’ title=’Modifier la recherche’ /> Modifier la recherche </h:commandLink> </h:form> </ui:define>
<div class=’channel-content’ id=’channel-content-c221-3′> |
Qui est une composition de template-ens.xhtml:
| <?xml version= »1.0″ encoding= »ISO-8859-1″?> <!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Transitional//EN » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd »><div xmlns:h= »http://java.sun.com/jsf/html » xmlns:e= »http://commons.esup-portail.org » xmlns:ui= »http://java.sun.com/jsf/facelets »><ui:composition template= »/stylesheets/template/template.xhtml »> <ui:define name= »menu »> <div class=’uportal-channel-table-header’> <ui:insert name= »titre »></ui:insert> </div> </ui:define> </ui:composition> </div> |
Qui est une composition de template.xhtml que nous avons déjà expliqué plus haut.
Ainsi nous avons donc deux pages template.xhtml : une pour le déploiement portlet (template-portlet.xhtml) et une pour le déploiement servlet (template-servlet.xhtml) ; et il suffit de renommer celle désirée en template.xhtml
Voici l’arborescence des fichiers :
Chaque partie de mondossierweb (etudiant et enseignant) se référe à des pages template-etu.xhtml ou template-ens.xhtml qui sont des composition de template.xhtml.
Un petit diagramme récapitulatif:
Mon Dossier Web 
Laisser un commentaire