Nadiri Abdeljalil Contact : nadiri@itformation.
com
21/01/2009 Eclipse Ganymede J EE WebSphere
Atelier EDI Eclipse Ganymede N2 : JSF
Etape 1 : configuration Dfinir Web Page Editor comme diteur par dfaut des pages *.jsp o Dans la fentre Fentres/Prfrences/Gnral/Editeurs/Associations de fichiers o Dans la liste Types de fichier slectionnez *.jsp o Dans la liste Editeurs associs slectionnez web page editor et cliquez sur le bouton Valeur par dfaut o Cliquez sur OK
Etape 2 : Cration 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 fentre Project Facets Cocher WASCE Deployment Select JavaServer Faces (preselected at Version 1.2). Select WASCE Deployment.
Page 1/12
21/01/2009 Eclipse Ganymede J EE WebSphere
Cliquez sur OK
Page 2/12
21/01/2009 Eclipse Ganymede J EE WebSphere
Cliquez sur suivant, dans la fentre Module Web cocher la case Gnrer le descripteur de dploiement. Cochez la case gnrer le descripteur de dploiement . et cliquez sur suivant deux fois Dans la la fentre JSF capabilities , slectionnez loption Server side JSF implementation . Cliquez sur Terminer
Elment
JSF gnrs par lassistant : Un fichier de configuration WEB-INF/faces-config.xml. Une FacesServlet prdfinie dans le fichier web.xml. Mapping des url /faces/* dans le fichier web.xml
Page 3/12
21/01/2009 Eclipse Ganymede J EE WebSphere
Etape 3 : Cration des pages JSP JSF Crer la page login.jsp Crer une nouvelle page jsp nomme login.jsp , dans la fentre Slectionner Modle JSP . slectionnez le modle New JavaServer Faces (JSF) Page (html) Cliquez sur Terminer
Notez la prsence des deux directives suivantes dans la page gnre. <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%> Crer la page JSP JSF bienvenue.jsp Etape 4 : dfinir la navigation Ouvrez le fichier faces-config.xml et slectionnez longlet Navigation rule . Slectionnez loutil page partir de la palette et cliquez lintrieur de la page Dans la fentre select JSP file slectionnez la page login.jsp
Page 4/12
21/01/2009 Eclipse Ganymede J EE WebSphere
Cliquez sur OK Ajoutez de la mme manire la page bienvenue.jsp Crez le lien de navigation entre les deux pages o Cliquez sur loutil link o Dessiner un lien de la page login vers la page bienvenue o Cliquez sur loutil Select dans la palette. o Slectionnez le lien cr o Dans le panneau proprits dfinissez la proprit suivante : From outcome : login
Page 5/12
21/01/2009 Eclipse Ganymede J EE WebSphere
Lignes gnres par lassistant 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 : Cration du bean manag : LoginBean Ouvrez le descripteur faces-config.xml, slectionnez longlet Managed bean Cliquez sur Add Slectionnez create a new java class Dfinir le nom du package et le nom de la classe.
Page 6/12
21/01/2009 Eclipse Ganymede J EE WebSphere
Cliquez sur suivant deux foix, puis cliquez sur Terminer .
Les lignes suivantes ont t ajoutes par lassistant 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>
Complter la classe LoginBean . o Ajouter les proprits prives suivantes et les mthodes set et get correspondantes : nom password
Etape 6 : Complter la page login.jsp Ouvrez la page login.jsp Ajouter un bouton de commande bouton de commande partir de la section JSF HTML . Dfinir les proprits : o Value : Login Page 7/12
Nadiri Abdeljalil Contact : [email protected] o action: login
21/01/2009 Eclipse Ganymede J EE WebSphere
Code gnr par lassistant : <f:view> <h:form> <h:commandButton value="Login" action="login"></h:commandButton> </h:form> </f:view>
Ajouter un composant PanelGrid Dfinir la proprit value des composants OutputText (Item1 et Item3) comme suit : o Item1 : value=Nom : o Item3 : value=Password :
Page 8/12
21/01/2009 Eclipse Ganymede J EE WebSphere
Remplacer le composant outputText item2 par un composant InputText o Proprits value: #{loginBean.nom}. Remplacer le composant outputText item4 par un composant InputSecret o Proprits : value : #{loginBean.password}
Etape 6 : crer un composant de validation
Page 9/12
21/01/2009 Eclipse Ganymede J EE WebSphere
Ajouter une classe (nomme atelies.web.jsf.ValidationMdp) qui implmente linterface Validator
Cliquez sur Terminer , la classe suivante est gnre package ateliers.web.jsf; import import import import javax.faces.component.UIComponent; javax.faces.context.FacesContext; javax.faces.validator.Validator; 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 slectionnez longlet Component Dans la section Validators cliquez sur le bouton Add Page 10/12
21/01/2009 Eclipse Ganymede J EE WebSphere
Slectionnez la classe ValidationMdp Dfinir la proprit Display Name : Valider Mot de passe Dfinir la proprit 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 : Cration dun fichier de ressources Ajouter un fichier dans le dossier ateliers.web. jsf nomm messages.properties
Page 11/12
21/01/2009 Eclipse Ganymede J EE WebSphere
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 propit value des composants OutputText de la manire 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 : Complter la page bienvenue.jsp. Ajouter un composant loadBundle Ajouter un composant outputLabel
Page 12/12
