Dans cet article, nous allons commencer par un peu de théorie sur JSF, puis nous focaliser sur la réalisation d’une application simple avec JSF myFaces, qui pourra servir de base pour le développement d’applications plus avancées.

Introduction

La technologie JavaServer Faces (JSF) fournit des APIs standards et des Taglibs utiles aux développeurs Java qui développent des GUI web. Craig McClanahan, l’auteur du framework Apache Struts, est co-leader du projet JSF chez Sun. Comme pour le framework Struts, JSF définit un lot de taglibs JSP qui génèrent des éléments HTML pouvant être “bindés” à des propriétés de Java beans. Struts et JSF peuvent paraitre similaires, du point de vue développement, mais JSF bénéfieciera certainement de plus d’outils du fait de sa standardisation. De même, dans un futur proche, la plupart des serveurs d’application pourraient supporter JSF.

Qu’est ce que JSF

JavaServer Faces est un framework pour construire des applications Web, qui fournit les principales fonctionnalités suivantes:

  • Règles de navigation facilement configurables
  • GUI widgets (pouvant être étendus) pour:
    • Validation des entrées
    • Gestion simple des erreurs
    • Gestion des Java bean
    • Gestion des évènements
    • support du multilingue

Comment fonctionne JSF

Une application JSF fonctionne par traitement d’évènements déclenchés par des composants JSF. Ces évènements sont causés par des actions de l’utilisateur. Par exemple, si l’utilisateur clicke sur un bouton, le bouton déclenche un évènement. Le programmeur décide ensuite ce que l’application JSF devra faire une fois l’évènement déclenché. Ceci peut être fait en écrivant des “listeners” d’évènements. En d’autres mots, on comprend qu’une application JSF est “event driven”.

Lorsqu’un évènement se déclenche (l’utilisateur clicke sur le bouton), une notification est envoyée vers le serveur HTTP. Sur le serveur; il y a une servlet spéciale nommée FacesServlet. Chaque application JSF a sa propre FacesServlet dans le conteneur Web.

Pour que les requêtes JSF soient traitées elles doivent être redirigées vers la servlet FacesServlet. La redirection est possible en configurant la servlet dans le fichier web.xml :

Cela signifie que l’URl pour chaque requête doit contenir la chaine /faces/, comme spécifié dans l’élément url-pattern sous l’élément servlet-mapping.

FacesServlet crée un objet nommé FacesContext, qui contient toutes les informations nécessaires au traitement de la requête a savoir les objets ServletContext, ServletRequest et ServletResponse, passés à la méthode service() de la servlet FacesServlet.

Ensuite vient le traitement. Le processeur est l’objet LifeCycle. FacesServlet délègue le traitement a l’objet LifeCycle.

L’objet LifeCycle traite une requête JSF encapsulée dans l’objet FacesContext en 6 phases détaillées ci après:

  • Reconstitution de l’arbre des composants : Toute JSP dans une application JSF est représentée par un arbre de composants.
  • Application des valeurs de requete : Dans cette phase, la valeur locale de chaque composant de l’arbre est mise à jour a partir de la requête courante. Une valeur peut provenir d’un paramètre de requête, du header, d’un cookie, etc…. Dans cette phase, le composant peut déclencher des évènements.
  • Validation: Après la mise a jour, dans cette phase de validation, l’objet LifeCycle va valider ces valeurs si nécessaire.
  • Mise à jour du modèle: Cette phase n’est atteinte que si toutes les valeurs locales des composants de l’arbre sont valides. L’objet LifeCycle fait la mise a jour des données du modèle. Des évènements peuvent être déclenchés dans cette phase.
  • Invocation de l’application: Traitement des évènements déclenchés au niveau de l’application (Submit d’un formulaire, lien vers une autre page)
  • Rendu de la réponse pour le client.

Entre chaque phase, l’objet LifeCycle vérifie si il y a des “listeners” d’evenements a appeler. En ecrivant un listener d’evenements, le programmeur peut choisir après quelle phase il peut être appelé.


Fichier de configuration

Il est possible de configurer une qpplicqtion JSF facilement au moyen d’un fichier de configuration.

Dans ce fichier il est possible d’enregistrer les Java Beans nécessaires a l’application, définir le page flow du programme, définir des composants customs par exemple.

Le fichier est au format XML et peut etre localisé où l’on veut. Par simplicité, il est conseillé de le créer dans le répertoire WEB-INF et de l’appeler faces-config.xml.

L’élément racine du fichier de configuration est faces-config. Voici un squelette de fichier:

Pour chaque Java Bean que l’on souhaite enregistrer dans le fichier de configuration, on utilise l’élément managed-bean en dessous de faces-config. En dessous de l’élément managed-bean, on a les sous-éléments suivants:

managed-bean-name: définit le nom du bean tel qu’il sera appelé depuis une page JSP

managed-bean-class: Java bean class

managed-bean-scope: définit le scope du Java Bean (page, request, session, application)

Voici un exemple de déclaration de Java Bean:

Plus tard dans cet article on verra comment ajouter le page flow et les règles de navigation au fichier de configuration.

Ecrire une application JSF

Pour écrire une application JSF, les 3 steps suivants doivent être suivis :

  1. Ecrire les pages JSP, utiliser des tag libs représentant des composants JSF pour le rendu des éléments HTML
  2. Ecrire un JavaBean qui va servir a récupérer les entrées de l’utilisateur
  3. Ecrire un listener d’évènements qui va permettre de définir ce qui doit être fait quand l’utilisateur clicke le bouton Submit.

Ce dont on aura besoin

Pour l’exemple on aura besoin de :

Les librairies suivantes devront être copiées dans le rèpertoire WEB-INF/lib de la webapp:

Qu’allons nous réaliser

Nous allons écrire une application du type “Hello user” en utilisant JSF.

Il y aura deux pages JSP. La première demandera a l’utilisateur d’entrer son nom, la seconde affichera la valeur.
Créer les pages JSP

Pour créer les pages JSP il faut être un peu familier avec les composants JSF. Les éléments suivant sont utilisés dans l’exemple:

  • Le composant UIForm est rendu comme un élément HTML form.
  • Le composant UIInput est rendu comme un champs texte permettant d’accepter l’entrée de l’utilisateur
  • Le composant UIOutput est rendu comme un simple élément label pour afficher la sortie standard
  • Le composant UICommand est rendu comme un bouton

Dans la page JSP, on utilise des tag libs qui représentent les composants JSF. Les composants en question font partie des deux librairies de tags Core et Html, et sont inclues dans WEB-INF/lib. Le fichier descripteur de tags (TLD) est également inclu dans les .jar, donc on n’a pas besoin de s’en soucier.

Pour utiliser les tags dans notre page, on doit inclure en début de page JSP les deux directives suivantes :

Tous les tag libs représentant des composants doivent se situer entre les élément use_faces comme suit:

Voici les tag libs qui seront utilisés dans notre exemple :


Il y aura deux pages JSP. Présentons la première page, qui permettra à l’utilisateur d’entrer son nom:

En premier on déclare les directives des taglib.

On binde le fichier de ressources. Enfin, dans un formulaire, on déclare les controles qui permettront a l’utilisateur d’entrer son nom.

Finalement, une commande sur le bouton appelant la methode sayhello du bean.

Deuxième JSP (résultat) :

Je ne présente pas le fichier de déploiement web.xml sachant qu’il est conforme à celui que l’on a vu dans la première partie de cet article.

Le Modèle (Java Bean):

Le fichier de configuration:

Dans ce fichier on retrouve le mapping du Java Bean. On voit surtout le page Flow entre nos deux pages JSP sous le tag navigation-rules :
on ne peut aller que de input.jsp (from-view-id) vers result.jsp (to-view-id)

Ressources :

Core Java Server Faces (book)
myFaces

OTN : ADF Faces

Prochaine étape : créer des composants Ajax pour JSF

Lecture:
Pro JSF and Ajax