Atelier EDI Eclipse Ganymede N°2 : JSF

Transcription

Nadiri Abdeljalil
Contact : [email protected]
21/01/2009
Eclipse Ganymede J EE WebSphere
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
Nadiri Abdeljalil
•
21/01/2009
Cliquez sur OK
Page 2/12
Nadiri Abdeljalil
•
•
•
•
Elément
•
•
•
21/01/2009
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 »
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
Nadiri Abdeljalil
21/01/2009
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="http://java.sun.com/jsf/core"%>
• <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
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
Nadiri Abdeljalil
•
•
•
21/01/2009
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
Nadiri Abdeljalil
21/01/2009

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
Nadiri Abdeljalil
•
21/01/2009
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
Nadiri Abdeljalil
o
21/01/2009
action: login
Code généré par l’assistant :
<f:view>
<h:form>
<h:commandButton value="Login" action="login"></h:commandButton>
</h:form>
</f:view>
•
•
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
Nadiri Abdeljalil
•
•
21/01/2009
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
Nadiri Abdeljalil
•
21/01/2009
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
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 sélectionnez l’onglet « Component »
Dans la section « Validators » cliquez sur le bouton « Add »
Page 10/12
Nadiri Abdeljalil
•
•
•
•
21/01/2009
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
Nadiri Abdeljalil
•
21/01/2009
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