www.migniot.com

JSF Quickstart

Le tutorial ci-dessous permet d'obtenir un environnement de développement complet pour un projet JSF. Il permet également de développer les premières pages et le premier controlleur JSF pour comprendre les enchainements de page.
Ce tutorial est testé avec Eclipse Java EE IDE for Web Developers - Helios Service Release 2, avec un JDK 6 (1.6.0_25).

Création du projet

Ouvrir Eclipse et créer un nouveau projet "Dynamic Web Project".
Nommer le projet et sélectionner Dynamic web module version 3.0 - par défaut, et Configuration JavaServerFaces v2.0 Project. Cliquer sur Next.
Cocher Generate web.xml, cliquer sur Next.
Dans l'écran JSF Capabilities, sélectionner Disable Library Configuration. Ces librairies seront configurées plus tard. Cliquer sur Next.
Dans l'écran JSF Capabilities, sélectionner Disable Library Configuration. Ces librairies seront configurées plus tard. Cliquer sur Next puis Finish.

Configuration de Mojarra

Télécharger Mojarra depuis http://javaserverfaces.java.net/download.html. La version stable à l'écriture de ce tutorial est javax.faces-2.1.4.jar . Stocker ce jar dans un emplacement stable, par exemple C:\Program Files\eclipse\EpitechJars\javax.faces-2.1.4.jar .
Pour définir Mojarra comme une librairie dans Eclipse, aller dans le menu Window > Preferences > Java > Build Path > User Libraries puis cliquer sur le bouton New et renseigner le nom, par exemple Mojarra.
Cliquer sur le bouton Add JARs et sélectionner le jar stocké, par exemple C:\Program Files\eclipse\EpitechJars\javax.faces-2.1.4.jar . Sauvegarder.
Pour importer la nouvelle librairie dans le projet comme librairie de référence de JSF, sur le projet faire Clic droit > Properties > Project Facets > Java Server Faces. Sélectionner Library = User Library et cocher Mojarra ainsi que la case "Include ..."

Premiere JSP

Avant de continuer, passer le projet en UTF-8. Sur le projet faire Clic droit > Properties > Resource et sélectionner le Text file encoding UTF-8.
Créer une JSP dans le dossier WebContent du projet. Clic droit > New > JSP File.
Rentrer un nom, index.jsp puis Next.
Utiliser un template, sélectionner JSF + XHTML
Compléter la page JSP nouvellement créée. La page JSP peut contenir du XHTML et du java. Le code java situé dans les balises <%= et %> sera executé et son résultat sera marqué dans la sortie HTML.

Execution sous Tomcat

Dézipper Tomcat dans un emplacement stable, typiquement le dossier Programs.
Retourner dans Eclipse pour lancer tomcat. Sur le projet, faire Clic droit > Debug As > Debug on Server.
Dans la liste des serveurs disponibles, choisir Tomcat 7 et enregistrer ce serveur comme défaut pour le projet
Dans l'écran suivant renseigner le dossier d'installation de Tomcat. Attention, un JDK 6 est recommandé pour le faire fonctionner.
Le serveur démarre immédiatement, et le navigateur intégré à Eclipse se lance. Si ce navigateur ne se lance pas, utiliser un Firefox externe.

Premier formulaire

Dans le projet, double cliquer sur PROJET > WebContent > WEB-INF > faces-config.xml . C'est le fichier de configuration de JSF. Dans le sous-onglet ManagedBean, sélectionner le "scope" request et cliquer sur Add.
Sélectionner Create a new Java Class. Cette étape va créer une classe Java pour réceptionner les champs d'un formulaire HTML.
Dans l'écran de nouvelle classe, sélectionner un package, par exemple eu.epitech.epimarket.bean et rentrer le nom de la classe, par exemple LoginBean. Dans les interfaces, cliquer sur le bouton Add pour ajouter java.io.Serializable. Tous les Beans JSF doivent implémenter l'interface java.io.Serializable.
Remplir les renseignements, puis cliquer sur Next et Finish
Pour éditer le source de la classe, cliquer sur le lien souligné Managed Bean class* . Le source va être modifié pour que la classe contienne des attributs login et password.
Ajouter les attributs login et password et utiliser les quick fix eclipse (CTRL-1) pour créer les getters et setters pour ces attributs.
La classe complete doit contenir maintenant les get/set. Ajouter une methode authenticate():String qui n'effectue rien pour le moment .. mais existe.
En JSF, non seulement les attributs d'une classe Bean sont accessibles dans les pages dynamiques, mais également les méthodes
Compléter index.jsp pour contenir un champ login, un champ password et un bouton submit. Les tags jsf suivant y aident : h:inputText, h:inputSecret, h:commandButton
Penser au CTRL-ESPACE pour compléter les valeurs des attributs. Cela évite les fautes de frappe.
Constater que ca ne marche pas en rafraichissant le navigateur. C'est normal, en JSF une page ne doit pas être appelée directement, mais elle doit être passée à l'interpréteur JSF, ici la servlet FacesServlet déclarée dans le web.xml
Pour interpréter la page dynamique index.jsp au travers de la FacesServlet (coeur de JSF), appeler la page par l'url /faces/index.jsp . Constater qu'une étape est franchie (erreur différente) mais que ca ne fonctionne toujours pas.
Il manque 2 choses pour finir la page : (1) Il faut ajouter les JAR qui contiennent les tags utilisés h:inputText, h:inputSecret, h:commandButton. Dans le dossier de tomcat, copier TOMCAT/webapps/examples/WEB-INF/lib/*.jar dans PROJET/WebContent/WEB-INF/lib .
Ca ne fonctionne toujours pas, il faut encore déclarer ces librairies de tags dans la JSP pour pouvoir les utiliser : ajouter les lignes suivantes
  • <%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
  • <%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>

Enfin, pour éviter d'avoir une erreur sur la page d'accueil de l'application, changer le PROJET/WebContent/WEB-INF/web.xml en ne laissant qu'une seule page d'accueil:
Redémarrer le serveur en faisant sur le projet Clic droit > Debus As > Debug on server. Le serveur se lance et le formulaire s'affiche.
Pour se convaincre que JSF fait son travail, remplir les attributs de la classe LoginBean avant d'appeler LoginBean.authenticate(), Changer la méthode authenticate pour signaler la valeur des attributs.
Attendre que le serveur se rafraichisse automatiquement ou le redémarrer si besoin puis tenter le formulaire.
La méthode authenticate() est bien appelée et les champs du formulaire sont bien reflétés dans la classe LoginBean.

Créer une navigation

Changer une seconde fois la méthode authenticate.
Le but étant d'établir une navigation, créer la page greeting.jsp sur la base de index.jsp . Cette page sera exécutée lorsque l'authentification sera un succés.
Pour établir une navigation :
  • Ouvrir le faces-config.xml, sous onglet Navigation Rule.
  • Faire glisser chaque jsp sur la grille
  • Ouvrir la barre d'outils dépliable sur la bordure gauche de la grille de navigation
  • Relier les deux pages par un lien
  • Relier index.jsp à elle-même par un lien
  • Cliquer droit sur le lien entre index et greeting pour choisir > Show View > properties
  • Dans la vue properties, remplir From Outcome: success. Cela corresponds au retour de la chaine "success" par authenticate()
  • Afficher les properties du second lien de index vers index
  • Remplir From Outcome: failure

L'éditeur graphique a établi des modifications dans le source du faces-config.xml. Elles sont visibles dans le sous-onglet source.
Redémarrer le serveur et tester. Si les champs ne sont pas correctement remplis la navigation renvoie à index. Si les champs sont remplis correctement, greeting est affichée.

Aller plus loin

JSF permet de réaliser une application complète à partir de Beans, des simples classes Java. Ce qui est bon à savoir :
  • Pour créer un écran, écrire une page JSP
  • Pour récolter les données d'un formulaire, utiliser h:form et un Bean de scope Request. Il ne survit que le temps de l'appel
  • Pour avoir un composant global à l'application, enregistrer un bean de scope Application.
  • Les bean de scope Session sont sauvegardés dans la session de l'utilisateur, par exemple un Panier/ShoppingCart


Dernière aide, pour obtenir un bean application depuis un bean request, le code suivant est pratique:
		AccountManager manager = (AccountManager) FacesContext
				.getCurrentInstance().getExternalContext().getApplicationMap()
				.get("accountManager");