Tutoriel JSF N°3 : votre première application JSF

Développez pas à pas votre première application JSF. Découvrez la valeur ajoutée de JSF sur un exemple simple et fonctionnel, permettant de vous inscrire au Club Objis. Migrer le code de JSF 1.1 vers JSF 1.2 et JSF 2.

Objis, spécialiste de la formation Java, est heureux de vous offrir ce tutoriel, extrait de séances pratiques de la formation JSF dispensée par Objis.

Les + objis
70% de travaux pratiques
Clé USB avec tous les outils utilisés + Corrigés TPs
Bilan pédagogique individuel + conseils

Prérequis, outils et versions

Connaissances développement J2EE / JSTL

Objectifs

Développer une application JSF
Configurer JSF
Utiliser des composants JSF
Gérer la navigation entre pages

Programme

Contexte
Partie 1 : Version JSF 1.1
Partie 2 : Exercices
Partie 3 : Evolutions (JSF 1.2 et JSF 2)

Durée

30 min.

Contexte : service inscription Club Objis

L’inscription au Club Objis est ici une application JSF 1.1 que nous allons construire et analyser, puis identifier les opportunités d’amélioration et d’évolution vers JSF 1.2 puis JSF 2.

Cette application va permettre de toucher du doigt quelques unes des valeurs ajoutées de JSF permettant de simplifier le travail du développeur, comme le binding Vue/Bean , la navigation entre page et la validation du formulaire.

Ici, contrairement à l’option JSP/Servlet et à Struts, vous n’avez pas à gérer des aspects bas niveau comme les objets Httprequest/HttpResponse.

tutoriel-jsf-premiere-application-jsf-6

Cinématique de l’application

tutoriel-jsf-premiere-application-jsf-enchainement-ecrans-application-inscription-club-objis

Partie 1 : projet web avec JSF 1.1

Installez Tomcat 6
Intégrez tomcat à votre Eclipse (Ganymède ou Galileo entreprise)
A partir d’Eclipse, créez un projet web dynamique (File/new/Dynamic web project) ’premiereapplijsf’, ayant pour cible de déploiement Tomcat installé précédemment.

tutoriel-jsf-premiereapplication

Cliquez sur Finish.

tutoriel-jsf-premiereapplication-2

Téléchargez le projet Eclipse à cette étape.

premiereapplijsf

Ajout librairies JSF 1.1

A partir de la page de téléchargement de JSF, récupérez l’archive version 1.1 de JSF

tutoriel-jsf-premiere-appli-version-11-librairies

Ajouter dans le répertoire WEB-INF\lib du projet web eclipse les librairies suivantes, issues du répertoire lib de l’implémentation de référence de JSF 1.1 (Mojarra) :
— jsf-api.jar
— jsf-impl.jar

ainsi que les librairies suivantes :

— commons-beanutils.jar
— commons-collections.jar
— commons-digester.jar
— commons-logging.jar

Ajout librairies JSTL

Ajoutez les librairies suivantes, issues du répertoire lib de l’implémentation Apache de JSTL 1.2, analysé dans tutoriel JSTL N°1 : installation et analyse : :
— jstl.jar
— standard.jar

Voici désormais l’état du projet dans eclipse :

tutoriel-jsf-premiereapplication-3

Configuration Contexte JSF dans web.xml

Ajoutez la configuration de la servlet javax.faces.webapp.FacesContext

tutoriel-jsf-premiereapplication-4

QUESTION : quel est le role de cette servlet ? Où se trouve t’elle physiquement ?

QUESTION : à quelles occasions le serveur d’application fera appel à cette servlet.

page d’accueil (index.jsp) et page principale (main.jsp)

Analysez ci-dessous le contenu des pages index.jsp et main.jsp :

tutoriel-jsf-premiere-application-jsf-3

INFO : index.jsp est la page d’accueil de l’application. Ce n’est pas une page JSF. C’est une JSP classique.

BONNE PRATIQUE : la page d’accueil jsp ’forwarde’ vers une page JSF (ici main.jsp)

— 0 : La page d’accueil ’forwarde’ vers page JSF
— 1 : déclaration des bibliothèques de balise JSF ’core’ et ’html’
— 2 : f:view : déclaration d’un arbre de composants JSF visuels
— 3 : h:form : déclaration d’un formulaire JSF
— 4 : lien hypertexte (h:commandLink) . Notez que le rendu visuel est sous forme de lien mais que le composant agit comme un bouton. L’attribut ’action’ ouvre une porte sur le modèle évènementiel de JSF
— 5 : h:outputText

Créez un répertoire images et ajoutez-y le logo d’Objis.

tutoriel-jsf-premiereapplication-5

Déployez l’application dans Tomcat. L’écran suivant apparaît.

tutoriel-jsf-premiereapplication-6

QUESTION : que se passe t’il suite au clic sur le lien ?

Téléchargez le projet Eclipse à cette étape.

premiereapplijsf-jsf11-intermediaire

Bean métier

Créeez dans un package com.objis.demojsf.domaine une classe UserBean ayant les propriété suivantes :

tutoriel-jsf-premiere-application-jsf-8

Ajoutez les méthodes getters et setters du javabean

Ajoutez la méthode suivante, qui permettra une validation personnalisée du formulaire :

tutoriel-jsf-premiereapplication-9

Navigation entre pages : fichier faces-config.xml

Avec JSF, tout composant peut être à l’origine d’un changement d’écran. JSF est un framework orienté ’composant’.

Créez dans le répertoire WEB-INF un fichier faces-config.xml

tutoriel-jsf-premiereapplication-7

Notez 2 types de sections principales :
— section ’navigation-rules’ : décrit règles et condition (navigation-case) de passage de tel écran (from-view-id) à tel autre écran (to-view-id). Par exemple ici, montrez qu’à partir de l’écran main.jsp, on ne peut aller que sur l’écran register.jsp. A quelle condition ? A quoi sert le ’from-outcome’, comment est’il déterminé ?

INFO : le contenu de la balise ’from-outcome’ est à rapprocher de la valeur de l’attribut ’action’ d’un des composants JSF de la page main.jsp (ici le composant lien hypertexte h:commandLink).

tutoriel-jsf-premiereapplication-8

En d’autres terme : JSF passera de la page main.jsp à register.jsp s’il recoit un évènement (ActionEvent) ’register’ lancé à partir de la page main.jsp

INFO : l’attribut ’outcome’ JSF peut être fourni en dur ou bien créé dynamiquement comme retour d’une méthode déclenchée lorsqu’un boutton est cliqué

Ici lorsqu’on clique sur le lien ’Cliquez ici pour s’enregistrer’, c’est l’outcome (action) ’register’ qui est déclenché. Donc la règle de navigation surligné ci-dessus s’applique : JSF passe la main à la page register.jsp

— section ’managed-bean’ : décrit les bean métiers qui vont être utilisé et mappées (binding) avec les champs des écrans. En particulier, on découvre que l’alias ’UserBean’ utilisé dans la JSP fait référence à une classe concrète com.objis.demojsf.domaine.UserBean.

Citez le nombre de règles de navigation dans l’exemple ci-dessus.

Code du formulaire d’enregistrement

Ajoutez le formulaire d’enregistrement register.jsp dans le projet (WebContent)

tutoriel-jsf-premiere-application-jsf-7

A l’aide de la documentation des taglib JSF (taglib JSF 1.1 et taglib JSF 1.2 ), expliquez les balises suivantes :
— f:view
— h:form
— h:commandLink
— h:outputText
— h:inputText
— h:message
— h:selectOneRadio
— f:convertDateTime
— h:selectOneMenu
— f:selectItem

Expliquez le role des attributs ’id’ et ’required’

Déploiement de l’application

Déployez à nouveau l’application :

tutoriel-jsf-premiereapplication-6

Cliquez à nouveau sur le lien d’enregistrement. L’écran suivant apparaît :

tutoriel-jsf-premiere-appli-version-11-erreur-validation-0

Validation formulaire

Validez le formulaire sans remplir le moindre champ. L’écran suivant apparaît.

tutoriel-jsf-premiere-appli-version-11-erreur-validation-1

Les champs ont été déclaré comme obligatoire. Vous devez les remplir !

Remplissez les champs nom, prenom, sexe.
Remplissez de façon incorrecte les champs date naissance et mail

tutoriel-jsf-premiere-appli-version-11-erreur-validation-2

Expliquez la stratégie de validation des champs date et mail.

Confirmation

Ajoutez la page confirm.jsp au projet

tutoriel-jsf-premiereapplication-10

Ajoutez dans le fichier WEB-INF\faces-config.xml une règle de navigation permettant de passer de la page d’enregistrement (register.jsp) à la page de confirmation (confirm.jsp), dans laquelle :
— les informations saisies par l’utilisateur seront récapitulées et
— 2 boutons ’editer’ et ’confirmer’ permettront respectivement de confirmer l’inscription ou de modifier les informations saisies.

tutoriel-jsf-premiereapplication-11

Déployez à nouveau

tutoriel-jsf-premiere-application-jsf-9

Ajoutez le code suivant dans UserBean

tutoriel-jsf-premiereapplication-12

Ce code va être appelé dynamiquement pour déterminer l’évènement et donc la page à envoyer à l’utilisateur.

Analysez le code des boutons

tutoriel-jsf-premiereapplication-13

Ajouter la troisième règle de navigation :

tutoriel-jsf-premiereapplication-14

Expliquez

Ajoutez au projet la page finale done.jsp , qui valide l’inscription.

Déployez.

tutoriel-jsf-premiere-application-jsf-10

projet eclipse

tutoriel-jsf-premiere-appli-version-11

Correction

Téléchargez le projet final

premiereapplijsf_final

Partie 2 : exercices

Initialisez l’écran d’enregistrement avec un utilisateur par défaut, ayant les caractéristiques suivantes :
— Prénom : Michel
— Nom : DUPONT
— genre : homme
— email : michel.dupont@infotech.com

Ajoutez une propriété à l’utilisateur : le nombre de langages de programmation pratiqués.

Initialisez et affichez le nombre de langages connus de Mr Michel DUPONT à 3 langages : C, PHP, JAVA

INFO : utiliser list-entries dans faces-config.xml et h:dataTable dans register.jsp

Créez un nouveau bean Adresse avec propriétés rue, ville, pays et proposez un cas d’interdépendance entre les 2 beans managé.

Ajoutez une nouvelle propriété userId au bean UserBean, et imposez que cet identifiant soit initialisé dynamiquement suite à l’URL : http://localhost:8080/premiereapplijsf/faces/register.jsp ?userId=23

tutoriel-jsf-premiereapplication-15

Ajoutez un bouton ’Annuler’ sur la page d’enregistrement , afin de pouvoir revenir à la page d’accueil à partir de la page d’enregistrement . Rappelez la valeur ajoutée de l’attribut ’immediate’ du composant h:commandButton

Partie 3 : Optimisations

Rappel

tutoriel-jsf-objis-installation-analyse-mojarra-0ter

Migrer le code vers JSF 1.2

Identifiez les modifications à apporter pour migrer le code vers un code ’full’ JSF 1.2. Quels impacts. Quelle valeur ajoutée ?

RAPPEL :
— Avec JSF 1.2, vous pouvez utiliser la notation #, comme dans JSF 1.1
— Dans JSF 1.2, la notation # est évaluée à l’exécution (évaluation différée). La notation $ est évaluée à la compilation (évaluation immédiate)

Migrer le code vers JSF 2

Identifiez les modifications à apporter pour migrer le code vers JSF 2 Quels impacts. Quelle valeur ajoutée ?

Internationalisation
Comment faire en sorte que les messages d’erreurs soient en Français, avec un libellé que noous avons choisit ?
Comment modifier format de la date afin qu’il soit dd-mm-YY ?

Conclusion

Dans ce tutoriel, vous avez développé votre première application JSF.