Ce tutorial est dans la logique des précédents. Nous allons ajouter une difficulté supplémentaire qui vous permettra ensuite d’utiliser les fonctionnalités puissantes de templating. Maintenant que j’y ai goûté, j’aurais du mal à m’en passer.

Code

Ajouter dans le pom du war

<dependency>
<groupid>com.sun.facelets</groupid>
<artifactid>jsf-facelets</artifactid>
<version>1.1.15</version>
</dependency>

Entêtes des pages xhtml

Toutes les pages xhtml étant du xml, si vous souhaitez utiliser des taglibs au sein de cell-ci, il va falloir les déclarer, mais pas de la manière habituelle utilisée dans les JSP (non valide xml)

Ajout dans le faces-config.xml, celui ci indique que facelets est défini comme gestionnaire de vue.

<application>
    <view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
</application>

L’élèment html est utilisé pour déclarer tous les namespaces. L’exemple indiqué est loin d’être exaustif. Pour info, cette notation et prise en compte différement selon l’IDE. MyEclipse (dans sa version 6) ne le comprend pas. Je vous conseille d’utiliser jboss-tools, surtout si vous voulez ensuite utiliser les librairies de richfaces.

Découpage des pages web en templates & includes

• default.jsp : page de redirection
• index.xhtml page “templatées” que nous souhaitons afficher
• Layout.xhtml : template de page mettant en place les includes ci-dessous
• header.xhtml : entête de page réutilisable
• menu.xhtml : menu réutilisable
• footer.xhtml : pied de page réutilisables

Index.xhtml

<ui:composition template="”/WEB-INF/templates/layout.xhtml”">
<ui:define name="”titre”">Tutorial facelets</ui:define>
<p><strong>Appel au managed bean : <h:outputtext value="”#{serieBean.test}”"></h:outputtext></strong></p>
<ui:define name="”contenu”">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nulla erat. Proin augue metus, vulputate at, ullamcorper eu, accumsan non, leo. Sed eu magna nec massa consectetuer consequat. Mauris ipsum dolor, ullamcorper sed, lacinia eget, sagittis non, mauris. Sed molestie, augue id fermentum consequat, nibh tellus fermentum est, id gravida nunc nisi in diam. Vestibulum eu dui sed nibh posuere faucibus. Donec tristique elementum leo. Integer tellus. Nunc malesuada eros non purus. Mauris ac lectus. Proin venenatis libero vel eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin tortor turpis, elementum a, ornare in, vulputate eget, tellus. </ui:define>
</ui:composition>

ui:composition va spécifier le template que nous allons utiliser

ui:define transmet à ce layout une valeur qui va pouvoir utiliser pour valoriser la variable associée

Layout.xhtml

<ui:include src="header.xhtml"></ui:include>
<ui:include src="menu.xhtml"></ui:include>
<div id="”contenu”"><ui:insert name="”contenu”"> </ui:insert></div>
<ui:include src="footer.xhtml"></ui:include>

ui:include comme vous l’aurez compris est un simple include (mais doit rester valide xml)

ui:insert est associé à un:define, celui ci va réutiliser la variable fournie, et l’afficher.

Accès au code source :

Le code source de l’application est disponible

Références

https://facelets.dev.java.net/nonav/docs/dev/docbook.html

http://www-128.ibm.com/developerworks/java/library/j-facelets/