JSF 2.0 et les Facelets permettent de développer et réutiliser des bibliothèques de composants de manière extrêmement simple ; Il suffit de créer des fichiers .xhtml avec une balise ui:composition et de les enregistrer dans vos bibliothèques de balises (taglib) pour pouvoir les utiliser. Dans cet article, vous verrez comment créer un composant menu et le référencer depuis votre application. Pour rendre la chose plus compliquée, le composant a un paramètre plabel. Et ça tient en 1 page…
Pour commencez, je vais créer mon composant menu.xhtml que je stocke dans mon application, par exemple dans le répertoire WEB-INF/tags. Ce composant est un simple tableau avec un libellé; il est constitué de l’ensemble de ce qui est inclus dans la balise ui:composition. Le paramètre plabel du composant est simplement référencé par la syntaxe EL #{plabel}. Voici le code complet du composant :
<!-- WEB-INF/tags/menu.xhtml -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<ui:composition>
<table width="100%" border="1">
<tbody>
<tr><td width="0%">#{plabel}</td>
<td width="100%"> </td>
</tr>
</tbody>
</table>
</ui:composition>
</html>
L’étape suivante consiste à créer un fichier de bibliothèque de balises qui fait la correspondance entre un nom de balise et le composant développé précédemment. Ce fichier a le nom et la destination de votre choix. Pour simplifier, nous allons l’appeler arkzoyd.taglib.xml et le stocker dans le répertoire WEB-INF. La bibliothèque de balise contient :
- Un namespace unique, ici : http://arkzoyd.wpengine.com/jsf
- Les noms de vos balises, ici : menu
- Les composants correspondants, ici : tags/menu.xhtml
Voici le contenu de votre fichier de bibliothèque de balises :
<?xml version="1.0"?>
<!DOCTYPE facelet-taglib PUBLIC "-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN"
"http://java.sun.com/dtd/facelet-taglib_1_0.dtd">
<facelet-taglib>
<namespace>http://arkzoyd.wpengine.com/jsf</namespace>
<tag>
<tag-name>menu</tag-name>
<source>tags/menu.xhtml</source>
</tag>
</facelet-taglib>
Il faut ensuite que votre bibliothèque soit référencée dans l’application; pour cela, je déclare le fichier de taglib dans web.xml au moyen du contexte javax.faces.FACELETS_LIBRARIES :
<!DOCTYPE web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
<display-name>My App</display-name>
<description>Simple New Application</description>
<context-param>
<param-name>javax.faces.FACELETS_LIBRARIES</param-name>
<param-value>/WEB-INF/arkzoyd.taglib.xml</param-value>
</context-param>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>faces/hello.xhtml</welcome-file>
</welcome-file-list>
</web-app>
Voilà ! Pour utiliser la balise, ajoutez simplement le namespace dans votre fichier facelets et référencez votre tag depuis votre page. Vous pouvez positionner la valeur du paramètre de votre choix :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:my="http://arkzoyd.wpengine.com/jsf">
<head>
<title>The ArKZoYd Project</title>
</head>
<body>
<h1><my:menu plabel="Accueil"/></h1>
</body>
</html>
Vous avez développé un composant réutilisable très facilement dans toute votre application; il ne reste plus qu’à la déployer (dans Glassfish pour l’instant) et à découvrir que ça fonctionne comme attendu :
