Première application JSF

Développez pas à pas votre première application JSF

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.

PNG - 103.5 ko
tutoriel-jsf-premiereapplication
- Cliquez sur Finish.
PNG - 7.1 ko
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
PNG - 15.9 ko
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
jstl.jar
standard.jar
Voici désormais l’état du projet dans eclipse :
PNG - 10.5 ko
tutoriel-jsf-premiereapplication-3
Configuration Contexte JSF dans web.xml
- Ajoutez la configuration de la servlet javax.faces.webapp.FacesContext
PNG - 33.3 ko
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.
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.
PNG - 13.4 ko
Bean métier
- Créeez dans un package com.objis.demojsf.domaine une classe UserBean ayant les propriété suivantes :
PNG - 12.1 ko
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 :
PNG - 10 ko
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
PNG - 24.8 ko
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).
PNG - 3.6 ko
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)
PNG - 30.6 ko
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
PNG - 22.2 ko
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.
PNG - 31 ko
- Déployez à nouveau
Ajoutez le code suivant dans UserBean
PNG - 7.3 ko
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
PNG - 5.6 ko
tutoriel-jsf-premiereapplication-13
- Ajouter la troisième règle de navigation :
PNG - 23.7 ko
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
PNG - 15.1 ko
tutoriel-jsf-premiere-appli-version-11


  • Application jsf,hibernat,spring,tutoriel jsf premier


Aucun commentaire:

Enregistrer un commentaire

commenatires

Les Outils Important