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.
Cliquez sur Finish. A partir de la page de téléchargement de JSF, récupérez l’archive version 1.1 de JSF 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 Ajoutez les librairies suivantes, issues du répertoire lib de l’implémentation Apache de JSTL
— jstl.jar
— standard.jar Ajoutez la configuration de la servlet javax.faces.webapp.FacesContext
Créez un répertoire images et ajoutez-y le logo d’Objis. Créeez dans un package com.objis.demojsf.domaine une classe UserBean ayant les propriété suivantes : Ajoutez les méthodes getters et setters du javabean Ajoutez la méthode suivante, qui permettra une validation personnalisée du formulaire : Créez dans le répertoire WEB-INF un fichier faces-config.xml Citez le nombre de règles de navigation dans l’exemple ci-dessus. Ajoutez le formulaire d’enregistrement register.jsp dans le projet (WebContent) 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’ Cliquez à nouveau sur le lien d’enregistrement. L’écran suivant apparaît : Validez le formulaire sans remplir le moindre champ. L’écran suivant apparaît. Remplissez les champs nom, prenom, sexe.
Remplissez de façon incorrecte les champs date naissance et mail Expliquez la stratégie de validation des champs date et mail. 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. Déployez à nouveauAjoutez le code suivant dans UserBean
Ce code va être appelé dynamiquement pour déterminer l’évènement et donc la page à envoyer à l’utilisateur. Ajouter la troisième règle de navigation : Expliquez Ajoutez au projet la page finale done.jsp , qui valide l’inscription. Déployez.
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.
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
— 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 :
- 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.
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
— 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.
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é ?
— 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.
Déployez à nouveau
- 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
- Application jsf,hibernat,spring,tutoriel jsf premier
Aucun commentaire:
Enregistrer un commentaire
commenatires