JSF 2.0 et les composants 'composite'

JSF 2.0 et les composants 'composite'

Comme nous l’avons vu dans Premiers pas avec JSF, nous pouvons créer facilement des applications Web grâce au framework JSF.

Mais vous voudrez sûrement créer vos propres composants afin de définir votre bibliothèque d’éléments réutilisables.

Nous allons voir comment l’implémentation de JSF 2.0 va nous permettre de mettre en place ces composants rapidement.

Pour cela, les tags composite seront très utiles.

Environnement

Pour cet article, j’ai utilisé l’implémentation 2.0 de JSF sur un serveur GlassFish 3.

Création du projet

Nous créons tout d’abord un projet Web dynamique (Dynamic Web Project) sous Eclipse : JSFCreationComposant.

Dans la vue Navigator, voici l’arborescence :

JSFCreationComposant
 |- .settings/
 |- build/
 |- src/
 |- WebContent/
 |   |- META-INF/
 |   |- resources/
 |   |- WEB-INF/
 |   |- index.xhtml
 |- .classpath
 |- .project

Préparation

Dans un premier temps, il faut mettre en place les librairies JSF.

Pour cela, vous pouvez télécharger les JAR nécessaires à l’adresse suivante : https://javaserverfaces.dev.java.net/ ; dans la rubrique Downloads, choisissez la version 2.0.

Copiez les librairies dans le répertoire lib du projet.

Configuration

Éditez le fichier web.xml pour indiquer que toutes les requêtes *.jsf devront être interprétées par la servlet FacesServlet.

<?xml version="1.0" encoding="UTF-8"?>
<web-app
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    id="WebApp_ID"
    version="2.5">
  <display-name>JSFCreationComposant</display-name>

  <servlet>
    <display-name>JSF Servlet</display-name>
    <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>*.jsf</url-pattern>
  </servlet-mapping>
</web-app>

La configuration est maintenant terminée.

Création de la page

Créez une page index.xhtml dans le répertoire WebContent du projet.

<?xml version="1.0" encoding="UTF-8"?>
<!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:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html">
  <h:head>
    <title>Hello Word!</title>
  </h:head>
  <h:body>
    <f:view>
      Hello World!
    </f:view>
    </h:body>
</html>

Vous pouvez alors déployer l’application et démarrer le serveur.

Pour tester l’application, saisissez l’adresse suivante : http://localhost:8080/JSFCreationComposant/index.jsf.

Création du composant

Nous avons mis en place l’application, maintenant, nous allons créer un composant permettant de saluer une personne en affichant le message Hello Benjamin! (le prénom sera un paramètre).

Pour commencer, créez le répertoire tag dans le répertoire resources.

Puis créez le fichier hello.xhtml : ce fichier contiendra le corps de notre nouveau composant.

<!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:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:composite="http://java.sun.com/jsf/composite">
  <h:head>
    <title>Hello tag</title>
  </h:head>
  <h:body>
    <composite:interface>
      <composite:attribute name="nom" required="true" />
    </composite:interface>

    <composite:implementation>
      Hello #{cc.attrs.nom}!
    </composite:implementation>
  </h:body>
</html>

Comme vous pouvez le remarquer, ce fichier est composé des mêmes éléments qu’une page XHTML classique.

Les informations dans la partie head ne seront pas affichées lors du rendu du composant, en particulier l’élément title.

La représentation de notre composant se situe dans l’élément body :

  • composite:interface : définit comment le composant doit être utilisé, en particulier la liste des attributs
  • composite:implementation : définit le composant proprement dit

Vous pourrez trouver plus d’informations ici : http://java.sun.com/javaee/javaserverfaces/2.0/docs/pdldocs/facelets/index.html.

Dans notre exemple, le composant ne comporte qu’un seul attribut - nom - obligatoire (required="true").

Le composant permettra d’afficher le message Hello {nom}!.

Comme vous pouvez le remarquer, la valeur de l’attribut nom est récupérée par Expression Language : #{cc.attrs.nom}.

Utilisation du composant

Pour utiliser notre nouveau composant, il faut modifier le fichier index.xhtml comme suit :

<?xml version="1.0" encoding="UTF-8"?>
<!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:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:tag="http://java.sun.com/jsf/composite/tag">
  <h:head>
    <title>Hello Word!</title>
  </h:head>
  <h:body>
    <f:view>
      <tag:hello nom="Benjamin" />
    </f:view>
    </h:body>
</html>

La modification se fait en 2 étapes :

  • Ajout du namespace tag : xmlns:tag="http://java.sun.com/jsf/composite/tag"
  • Appel du composant : <tag:hello nom="Benjamin" />

Vous pouvez alors redéployer l’application et tester : http://localhost:8080/JSFCreationComposant/index.jsf.

Le message Hello Benjamin! s’affiche alors à l’écran.

Il vous suffit alors de modifier la valeur de l’attribut nom pour personnaliser le message.