Webapp avec maven, JSF, facelets

29 juin 2008 – 7:54

Introduction

Ce tutorial est dans la logique des précédents. Nous allons ajouter un difficulté supplémentaire qui vous permettra après d’utiliser les fonctionnalités puissantes de templating de facelets.
Depuis que j’y ai gouté, je ne peux plus m’en passer.

Code

Ajouter dans le pom du war

<!– Dependances facelets –>
<dependency>
<groupId>com.sun.facelets</groupId>
<artifactId>jsf-facelets</artifactId>
<version>1.1.9</version>
</dependency>

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>

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)

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html">

L’élèment html est utilisé pour déclarer tous les namespaces utilisés. L’exemple indiqué est très 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
+WEB-INF
– 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>

</html>

ui:consosition 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

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:ui=”http://java.sun.com/jsf/facelets”>
<head>
<title><ui:insert name=”titre”>Default title</ui:insert></title>
</head>
<body>
<ui:include src=”header.xhtml”/>
<ui:include src=”menu.xhtml”/>
<div id=”contenu”><ui:insert name=”contenu”> </ui:insert></div>
<ui:include src=”footer.xhtml”/>
</body>

</html>

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 ici :

http://www.cestpasdur.com/svn/webapp-maven-jsf-facelets/trunk/

Références :

https://facelets.dev.java.net/nonav/docs/dev/docbook.html
http://www-128.ibm.com/developerworks/java/library/j-facelets/

CestPasDur.com, tutoriaux et ressources du web