Atelier EDI Eclipse Ganymede N 2 : JSF

Transcription

1 Atelier EDI Eclipse Ganymede N 2 : JSF Etape 1 : configuration Définir «Web Page Editor» comme éditeur par défaut des pages *.jsp o Dans la fenêtre «Fenêtres/Préférences/Général/Editeurs/Associations de fichiers» o Dans la liste «Types de fichier» sélectionnez *.jsp o Dans la liste «Editeurs associés» sélectionnez «web page editor» et cliquez sur le bouton «Valeur par défaut» o Cliquez sur OK Etape 2 : Création du projet Fichier : Nouveau / projet web dynamique Project Name: jsf1 Target Runtime: IBM WASCE v2.1 version Module Web Dynamic: 2.5 Configuration: JavaServer Faces v1.2, cliquez sur Modify et dans la fenêtre Project Facets Cocher «WASCE Deployment» Select JavaServer Faces (preselected at Version 1.2). Select WASCE Deployment. Page 1/12

2 Cliquez sur OK Page 2/12

3 Cliquez sur suivant, dans la fenêtre «Module Web» cocher la case «Générer le descripteur de déploiement. Cochez la case «générer le descripteur de déploiement». et cliquez sur suivant deux fois Dans la la fenêtre «JSF capabilities», sélectionnez l option «Server side JSF implementation». Cliquez sur «Terminer» Elément JSF générés par l assistant : Un fichier de configuration WEB-INF/faces-config.xml. Une FacesServlet prédéfinie dans le fichier web.xml. Mapping des url /faces/* dans le fichier web.xml Page 3/12

4 Etape 3 : Création des pages JSP JSF Créer la page login.jsp Créer une nouvelle page jsp nommée «login.jsp», dans la fenêtre «Sélectionner Modèle JSP». sélectionnez le modèle «New JavaServer Faces (JSF) Page (html)» Cliquez sur «Terminer» Notez la présence des deux directives suivantes dans la page générée. <%@ taglib prefix="f" uri=" <%@ taglib prefix="h" uri=" Créer la page JSP JSF bienvenue.jsp Etape 4 : définir la navigation Ouvrez le fichier faces-config.xml et sélectionnez l onglet «Navigation rule». Sélectionnez l outil «page» à partir de la palette et cliquez à l intérieur de la page Dans la fenêtre «select JSP file» sélectionnez la page «login.jsp» Page 4/12

5 Cliquez sur «OK» Ajoutez de la même manière la page «bienvenue.jsp» Créez le lien de navigation entre les deux pages o Cliquez sur l outil «link» o Dessiner un lien de la page login vers la page bienvenue o Cliquez sur l outil Select dans la palette. o Sélectionnez le lien créé o Dans le panneau «propriétés» définissez la propriété suivante : From outcome : login Page 5/12

6 Lignes générées par l assistant dans le fichier faces-config.xml : <navigation-rule> <display-name>login</display-name> <from-view-id>/login.jsp</from-view-id> <navigation-case> <from-outcome>login</from-outcome> <to-view-id>/bienvenue.jsp</to-view-id> </navigation-case> </navigation-rule> Etape 5 : Création du bean managé : LoginBean Ouvrez le descripteur faces-config.xml, sélectionnez l onglet «Managed bean» Cliquez sur «Add» Sélectionnez «create a new java class» Définir le nom du package et le nom de la classe. Page 6/12

7 Cliquez sur suivant deux foix, puis cliquez sur «Terminer». Les lignes suivantes ont été ajoutées par l assistant dans le fichier faces-config.xml : <managed-bean> <managed-bean-name>loginbean</managed-bean-name> <managed-bean-class>ateliers.web.jsf.loginbean</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> </managed-bean> Compléter la classe «LoginBean». o Ajouter les propriétés privées suivantes et les méthodes set et get correspondantes : nom password Etape 6 : Compléter la page login.jsp Ouvrez la page login.jsp Ajouter un bouton de commande à bouton de commande à partir de la section «JSF HTML». Définir les propriétés : o Value : Login Page 7/12

8 o action: login Code généré par l assistant : <f:view> <h:form> </h:form> </f:view> <h:commandbutton value="login" action="login"></h:commandbutton> Ajouter un composant PanelGrid Définir la propriété value des composants OutputText (Item1 et Item3) comme suit : o Item1 : value=nom : o Item3 : value=password : Page 8/12

9 Remplacer le composant outputtext item2 par un composant InputText o Propriétés value: #{loginbean.nom}. Remplacer le composant outputtext item4 par un composant InputSecret o Propriétés : value : #{loginbean.password} Etape 6 : créer un composant de validation Page 9/12

10 Ajouter une classe (nommée atelies.web.jsf.validationmdp) qui implémente l interface Validator Cliquez sur «Terminer», la classe suivante est générée package ateliers.web.jsf; import javax.faces.component.uicomponent; import javax.faces.context.facescontext; import javax.faces.validator.validator; import javax.faces.validator.validatorexception; public class ValidationMdp implements Validator { public void validate(facescontext arg0, UIComponent arg1, Object arg2) throws ValidatorException { // TODO Auto-generated method stub } } Enregistrez Ouvrez le fichier faces-config.xml et sélectionnez l onglet «Component» Dans la section «Validators» cliquez sur le bouton «Add» Page 10/12

11 Sélectionnez la classe ValidationMdp Définir la propriété «Display Name» : Valider Mot de passe Définir la propriété «Validator ID» : ateliers.web.jsf.validationmdp Ajouter le composant JSF <f:validator> dans la page «login.jsp» <h:inputsecret value="#{loginbean.password}"> <f:validator validatorid="ateliers.web.jsf.validationmdp" /> </h:inputsecret> Etape 7 : Création d un fichier de ressources Ajouter un fichier dans le dossier ateliers.web. jsf nommé messages.properties Page 11/12

12 Ajouter le contenu suivant dans le fichier nom=nom mdp=mot de passe login=login bienvenue=bienvenue Dans la page login.jsp ajouter un composant JSF loadbundle <f:loadbundle basename="ateliers.web.jsf.messages" var="msg"/> </head> /> Remplacer la propiété value des composants OutputText de la manière suivante : <h:outputtext value="#{msg.login}"></h:outputtext> <h:inputtext value="#{loginbean.nom}"></h:inputtext> <h:outputtext value="#{msg.mdp}"></h:outputtext> <h:inputsecret value="#{loginbean.password}"> <f:validator validatorid="ateliers.web.jsf.validationmdp" </h:inputsecret> Etape8 : Compléter la page bienvenue.jsp. Ajouter un composant loadbundle Ajouter un composant outputlabel Page 12/12