Facelets

1. Présentation

Facelets est un langage déclaratif qui dérive de HTML et XML utilisé  pour écrire des pages web XHTML  par JSF;  en plus d'autres libraies qu'il peut utiliser, le langage de balises Facelets utilise, sa propre  librairie de tag,  la librairie de tags  JSTL et le  langage d'expression  EL.  On se sert  de Facelets pour le développement de vues (page web) pour  JSF; Facelets facilite la conception de templates et de composants composites sous forme d'arborescence.
Avec Facelets  on peut se servir aussi des balises de HTML5 et  les tags spécifiques aux composants composés (voir paragraphes sur les composants Composés).

Les caractéristiques de Facelets peuvent se résumer  comme suit:

• Utilisation de XHTML pour créer des pages web,
• un apport  en plus de  librairie de tags à celles de JSF,  de JSTL et de EL,
• Facelets utilise particulièrement le langage EL contrairement à  JSP qui pose des problèmes de compatibilité avec EL,
• Utilisation des templates, et des composants pour la réalisation de page web

Les avantages de Facelets pour des développements  de projets de grande envergure incluent:

• la possibilité, à travers les templates et les composants composés (voir définition au cours d'autres articles), de produire du code réutilisable
• une extensibilité fonctionnelle des composants et des autres éléments du serveur utilisé en facilitant la personnalisation
• un temps de compilation très rapide
• une très grande performance et un gain de productivité élevé

EL est l'une des technologies composant JSF et avec Facelets on s'en sert pour référencer des propriétés des méthodes Java Beans; on utilise EL  pour lier des composants ou des valeurs de composants à des méthodes ou des propriétés de Java Beans.

1.2. Présentation de quelques balises

ui:component
avec cette balise JSF définit un composant qui est créé et ajouté à l'arborescence des composants; elle a un comportement identique à la balise "composition" mais elle ajoute un composant UI en plus à l'arbre des composants.
ui:composition
Définit et spécifie qu'on utilise une template; elle prend comme paramètre le chemin vers le fichier contenant la template.
ui:debug
Définit un composant de debuggage qui est sera créée et ajouté à l'arbre des composants.
ui:decorate
Permet de décorer le contenu d'une page
ui:define
Définit le contenu qui sera inséré dans une page par une template.
ui:fragment
  crée un composant qui est rajouté à l'arbre des composants de la page en cours.
ui:include
Permet d'encapsuler et de réutiliser le contenu de plusieurs pages.
ui:insert
Permet de définir un morceau du template qui sera remplacé (ou pas) par une "instance" du template
ui:param
Utiliser pour passer des paramètres entre vues traitées  par le langage de balise Facelets.
ui:repeat
Cette balise est utilisée comme remplacement à la balise <c:forEach ...> de la librairie JSTL Core; elle  permet de faire des  itérations.
ui:remove
Cette balise précise un contenu qui sera enlevée de la page après compilation et exécution par le langage de balise  facelets. 

(à compléter...)

1.3. Cycle de vie d'une Facelet

Les étapes ci-dessous décrivent les étapes suivies par une application basée sur Facelets.

1. Quand un client, par exemple un browser web, fait une requête au sein d'une vue développée avec des facelets, un nouveau arbre de composants ou un javax.faces.component.UIViewRoot est créé et est placé dans FacesContext
2. L' arbre de composants UIViewRoot est appliqué aux Facelets et la vue est remplie avec les différents composants en retour pour affichage.
3. La vue ainsi construite est  retournée  pour affichage vers le client.
4. L'état de cette vue est conservé au sein du système au cas où la même requête est réalisée dans les mêmes conditions avec les mêmes données.
5. Le client peut communiquer avec la vue et demander une autre vue ou un changement de l'application JSF;  la vue sauvegardée est restituée de l'état conservé.
6. La vue restituée repassera par toutes les étapes du cycle de vie; cela produira finalement une nouvelle vue ou rendra à nouveau la vue même  s'il n'y a pas eu de problème de validation et qu'aucune action n'a été déclenchée.
7. Si la même vue est demandée,  elle retournée au client une nouvelle fois  telle qu'elle a été conservée.
8. Si une requête demande une nouvelle vue, le processus reprend de la même façon à partir de l'étape 2.
9. La nouvelle vue est retournée comme réponse aux clients qui a fait la requête bien sûr.

2. Facelet: Les éléments essentiels

2.1. les différentes balises

Les balises JSF

1. Les balises JSF «ui» servent à la composition des pages et à la création des modèles de page (templates)
   http://javaserverfaces.java.net/nonav/docs/2.1/vdldocs/facelets/ui/tld-summary.html
2. Les balises composant JSF «h» servent à afficher des composants graphiques HTML tels que boutons, liens, champs de saisies, formulaires, ...
   http://javaserverfaces.java.net/nonav/docs/2.1/vdldocs/facelets/h/tld-summary.html
3. Les balises des actions JSF «f» servent à gérer des actions tel que Ajax, ActionListener, la validation des champs saisis de manière indépendante du fournisseur de rendu
   http://javaserverfaces.java.net/nonav/docs/2.1/vdldocs/facelets/f/tld-summary.html
4. Les balises Primefaces «p» servent à afficher des composants graphiques plus évolués que «h»
   http://primefaces.org/

Les balises JSTL

1. Les balises JSTL «core» ou «c» servent à insérer des contrôles de flux (if, forEach, otherwise, ...)
   http://javaserverfaces.java.net/nonav/docs/2.1/vdldocs/facelets/c/tld-summary.html
2. Les balises JSTL « Functions » ou « fn » servent à manipuler des chaînes de caractères (indexOf, contains, trim, ...)
   http://javaserverfaces.java.net/nonav/docs/2.1/vdldocs/facelets/fn/tld-summary.html

2.2. les librairies usuelles

JSF Facelets  Tag Library:  http://java.sun.com/jsf/facelets
JSF HTML Tag Library : http://java.sun.com/jsf/html
JSF Core Tag Library : http://java.sun.com/jsf/core
JSTL Core Tag Library : http://java.sun.com/jsp/jstl/core
JSTL functions Tag Library: http://java.sun.com/jsp/jstl/functions

2.3. Facelets: Exemple

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <h:outputStylesheet library="css" name="default.css"/>
        <title>Guess Number Facelets Application</title>
    </h:head>
    <h:body>
        <h:form>
            <h:graphicImage value="#{resource['images:wave.med.gif']}"
                            alt="Duke waving his hand"/>
            <h2>
                Hi, my name is Duke. I am thinking of a number from
                #{userNumberBean.minimum} to #{userNumberBean.maximum}.
                Can you guess it?
            </h2>
            <p<h:inputText id="userNo"
                            title="Enter a number from 0 to 10:"
                            value="#{userNumberBean.userNumber}">
                   <f:validateLongRange minimum="#{userNumberBean.minimum}"
                                        maximum="#{userNumberBean.maximum}"/>
                </h:inputText>
                <h:commandButton id="submit" value="Submit"
                                 action="response"/>
            </p>
            <h:message showSummary="true" showDetail="false"
                       style="color: #d20005;
                       font-family: 'New Century Schoolbook', serif;
                       font-style: oblique;
                       text-decoration: overline"
                       id="errors1"
                       for="userNo"/>
        </h:form>
    </h:body>

Détails

Les deux premières lignes définissent la "Doctype" c'est à dire le type de document à utiliser:

• ici on va utiliser un document HTML  et l' identifiant public  spécifie qui publie la DTD (i.e  le W3C) et le langage dans lequel la DTD est écrite ( EN, pour l'anglais), suivie de l'adresse à laquelle on peut avoir le DTD.
• La section qui suit c'est la balise "<html ... " (avec ses identifiants ;  elle est fermée  ici : core">)  donne un certain nombre d'espace de noms concernant des librairies utilisée:
   xmlns="http://www.w3.org/1999/xhtml" ==>...
   xmlns: h= "http://xmlns.jcp.org/jsf/html" ==> la librairie utilisée est "jsf/html"...
   xmlns: f ="http://xmlns.jcp.org/jsf/core" ==> la librairie utilisée est "jsf/core"...

Il faut aussi comprendre l'utilisation des tags suivants:

• Les tags HTML de Facelets (ils commencent par h:) qui permettent d'ajouter des composants HTML
• Les tags propres de Facelets qui commence par f:

Le tag h:inputText :
Ce tag sert pour les saisies (les input voir HTML) des utilisateurs et permet de mettre à jour à travers le langage d'expression EL les valeurs des propriétés des Managed Beans associé à la vue contenant le tag ; ici on met à jour la  propriété userNumber de Managed Bean à travers l'expression EL #{userNumberBean.userNumber}. La valeur de "input" est validée par le tag validateur standard de JSF "f:validateLongRange".
Le fichier  'wave.med.gif' est ajoutée à la page en cours en tant que ressource. 
  h:commandButton
Ce tag  avec l'ID submit commence la validation de la valeur de la donnée saisie au moment où le 'utilisateur clique sur le bouton. Il se sert de la navigation implicite et redirige le client vers une autre vue (page) en l'occurrence ici la vue  "response.xhtml"

(à suivre).....