Vous êtes sur la page 1sur 12

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

Nadiri Abdeljalil Contact : nadiri@itformation.com

21/01/2009 Eclipse Ganymede J EE WebSphere

Cliquez sur OK

Page 2/12

Nadiri Abdeljalil Contact : nadiri@itformation.com

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

Nadiri Abdeljalil Contact : nadiri@itformation.com

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

Nadiri Abdeljalil Contact : nadiri@itformation.com

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

Nadiri Abdeljalil Contact : nadiri@itformation.com

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

Nadiri Abdeljalil Contact : nadiri@itformation.com

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 : nadiri@itformation.com 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

Nadiri Abdeljalil Contact : nadiri@itformation.com

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

Nadiri Abdeljalil Contact : nadiri@itformation.com

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

Nadiri Abdeljalil Contact : nadiri@itformation.com

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

Nadiri Abdeljalil Contact : nadiri@itformation.com

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