Vous êtes sur la page 1sur 175

Java pour le dveloppement dapplications Web : Java EE

JSF : Java Server Faces

Mickal BARON - 2007 (Rv. Janvier 2009) mailto:baron.mickael@gmail.com ou mailto:baron@ensma.fr

Licence

Creative Commons
Contrat Paternit Partage des Conditions Initiales l'Identique
2.0 France

keulkeul.blogspot.com

http://creativecommons.org/licenses/by-sa/2.0/fr
JSF - M. Baron - Page 2

Droulement du cours JSF  Pdagogie du cours


 Illustration avec de nombreux exemples  Des bulles daide tout au long du cours Ceci est une alerte Ceci est une astuce

 Pr-requis
 Connaissance de Java  Connaissance des fondements du WEB (HTML, HTTP)  Connaissance des technologies fondatrices de Java EE (Servlet, JSP, balises personnalises)

 Structuration du cours
keulkeul.blogspot.com

 Dmarrage par les bases de JSF (Bean et Navigation)  Pour chaque nouveau concept introduit, le prsenter en dtail  Terminer par des concepts plus complexes

 Remerciements
 Developpez.com [djo.mos pour ses commentaires]JSF - M. Baron - Page
3

Introduction : quest-ce-que cest ...  Java Server Faces est un framework de dveloppement dapplications Web en Java permettant de respecter le modle darchitecture MVC et bas sur des composants ct prsentation  Java Server Faces permet
 une sparation de la couche prsentation des autres couches (MVC)  un mapping entre lHTML et lobjet  un ensemble de composants riches et rutilisables
keulkeul.blogspot.com

 une liaison simple entre les actions ct client de lutilisateur (event listener) et le code Java ct serveur  Cration de nouveaux composants graphiques  JSF peut tre utilis pour gnrer autre chose que du HTML (XUL, XML, WML, ) JSF - M. Baron - Page
4

Introduction : meilleur que Struts, les avantages  Possibilit de crer de nouveaux composants
 JSF permet de combiner plusieurs composants pour aboutir un composant plus complexe

 Support diffrentes technologies daffichage


 JSF ne se limite pas lHTML (XUL, Flash, )

 Accs aux Beans par leurs noms en utilisant les Expressions Language
 Pour Struts ncessit de mmoriser le nom du formulaire

 Simplification des dfinitions des contrleurs et des Beans


keulkeul.blogspot.com

 Simplification du fichier de configuration  Lorientation composants graphiques permet JSF dtre utilis de manire plus simple dans les environnements de dveloppement (voir Sun Java Studio CreatorJSF 2) - M. Baron - Page 5

Introduction : meilleur que Struts et les inconvnients  Maturit de Struts par rapport JSF
 Struts est largement utilis en industrie alors que JSF est encore un framework jeune

 Confusion des noms


 Avec Struts les noms des formulaires (form.jsp) et les contrleurs (form.do) avaient diffrentes URLs  JSF utilisent les mmes noms pour la vue et le contrleur

 La validation dans JSF nest pas aussi fournie que Struts


keulkeul.blogspot.com

 Possibilit de gnrer du JavaScript avec Struts pas JSF  Possibilit de vrifier la syntaxe dune carte de crdit, utilisation dexpressions rgulires,

 Moins de documentation et de ressources


 Nous allons tenter dy remdier
JSF - M. Baron - Page 6

Introduction : une spec et plusieurs implmentations  JSF comme la plupart des technologies proposes par Sun est dfinie dans une spcification JSR-127 (version 1.1) puis JSR-252 (1.2)  Il existe donc plusieurs implmentations de JSF
 Sun Reference : http://java.sun.com/javaee/javaserverfaces  Apache MyFaces : http://myfaces.apache.org

 Limplmentation propose par Apache est appele MyFaces


keulkeul.blogspot.com

 Apache fournit des fonctionnalits additionnels via le sous projet : Tomahawk


 Composants graphiques  Validators plus fournis La version 1.1 est associ J2EE 1.4 alors que la version 1.2 de JSF est associe Java EE 5
JSF - M. Baron - Page 7

Introduction : documentations et ressources  Mme si JSF nest pas aussi utilis et document que Struts, de nombreux sites commencent apparatre pour proposer tutoriels et exemples (peu de ressource en franais)  Tutoriels / Cours
 Java EE training and tutorials : http://www.coreservlets.com  Tutoriaux chez Developpez.com : http://www.developpez.com  JM Doudoux : http://www.jmdoudoux.fr/accueil.htm  Site de rfrence : http://java.sun.com/javaee/javaserverfaces  Site du projet : http://javaserverfaces.dev.java.net
keulkeul.blogspot.com

 Tutorial Java EE : http://java.sun.com/javaee/5/docs/tutorial/doc  FAQ : http://wiki.java.net/bin/view/Projects/JavaServerFacesSpecFaq

 Exemples et composants
 Exemples JSF (AJAX, composants) : http://jsftutorials.net  Communaut JSF : http://www.jsfcentral.com
JSF - M. Baron - Page 8

Bibliothque  Pro JSF & Ajax : Building Rich Internet


 Auteur : Jonas Jacobi  diteur : Apress  Edition : 2006 - 464 pages - ISBN : 1-59059-580-7

 JavaServer Faces in Action


 Auteur : Kito Mann  diteur : Manning Publications  Edition : 2005 - 702 pages - ISBN : 1-93239-412-2
keulkeul.blogspot.com

 Core JavaServer Faces


 Auteur : David Geary and Cay Horstmann  diteur : Prentice Hall Ptr  Edition : 2004 - 658 pages - ISBN : 0-13146-305-5
JSF - M. Baron - Page 9

Introduction : comment a marche  Linterface utilisateur construite dans la page JSP est gnre laide de la technologie JSF (rsultat myUI)  Elle fonctionne sur le serveur et le rendu est retourn au client

 JSF sappuie sur les technologies prcdentes


keulkeul.blogspot.com

 Gnration en Servlet  Utilisation des composants JSF dans les pages JSP  Les composants JSF sont exposs aux JSPs grce aux balises personnaliss
JSF - M. Baron - Page 10

Introduction : principe pour traiter un formulaire 1. Construire le formulaire dans une page JSP en utilisant les balises JSF 2. Dvelopper un Bean qui effectue un Mapping avec les valeurs du formulaire 3. Modifier le formulaire pour spcifier laction et lassocier au Bean 4. Fournir des Converters et des Validators pour traiter les donnes du formulaire
keulkeul.blogspot.com

5. Paramtrer le fichier faces-config.xml pour dclarer le Bean et les rgles de navigation 6. Crer les pages JSP correspondant chaque condition de retour 7. Protger les pages JSP utilises par le contexte JSF de faon JSF - M. Baron - Page 11 viter dy accder directement

Plan du cours JSF              Configuration : utiliser JSF dans une application Java EE Bean Manag : stocker, afficher les valeurs dun formulaire Cycle de vie : comprendre les rouages dun composant JSF Navigation : choisir une vue selon un message Composants CORE et HTML : grer et construire la vue FacesContext : manipuler informations du contexte BackingBean : manipuler les instances des composants Message : stocker et afficher des messages dans les JSP Converters : transformer les valeurs saisies dun formulaire Validators : valider les valeurs saisies dun formulaire Evnements : grer les actions utilisateur Comp. Tomahawk : ajouter de nouveaux composants Cration de composants JSF : tendre la JSF bibliothque - M. Baron - Page 12

keulkeul.blogspot.com

Configuration : JSF dans le web.xml  Ncessite la configuration du fichier web.xml de faon ce que JSF soit pris en compte
 Paramtrer le fonctionnement gnral de lapplication : le contrleur  Identifier la servlet principale : javax.faces.webapp.FacesServlet

 Spcifier le nom et le chemin du fichier de configuration


 Nom du paramtre : javax.faces.application.CONFIG_FILES  Exemple : /WEB-INF/faces-config.xml

 Spcifie o ltat de lapplication doit tre sauv


 Nom du paramtre : javax.faces.STATE_SAVING_METHOD
keulkeul.blogspot.com

 Valeurs possibles : client ou server

 Valider ou pas les fichiers XML


 Nom du paramtre : com.sun.faces.validateXml  Valeurs possibles : true ou false (dfaut : false)
JSF - M. Baron - Page 13

Configuration : JSF dans le web.xml  Indique si les objets dvelopps tels que les Beans, les composants, les validators et les converters doivent tre crs au dmarrage de lapplication
 Nom du paramtre : com.sun.faces.verifyObjects  Valeurs possibles : true ou false (dfaut : false)

 La servlet principale est le point dentre dune application JSF


 On trouve plusieurs manires de dclencher des ressources JSF  Prfixe /faces/  Suffixes *.jsf ou *.faces  Exemples (le contexte de lapplication est myAppli)
keulkeul.blogspot.com

 http://localhost/myAppli/faces/index.jsp  http://localhost/myAppl/index.jsf Avec Struts nous utilisions gnralement le suffixe .do pour atteindre le contrleur

JSF - M. Baron - Page 14

Configuration : JSF dans le web.xml  Exemple : paramtrer une application Web de type JSF
Utilisation de context-param pour paramtrer le fonctionnement des JSF
... <context-param> <param-name>com.sun.faces.validateXml</param-name> <param-value>true</param-value> La Servlet qui gre les entres </context-param> au contexte JSF <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>/faces/*</url-pattern> Comment accder la Servlet </servlet-mapping> Faces Servlet <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.faces</url-pattern> </servlet-mapping> ...

keulkeul.blogspot.com

web.xml

JSF - M. Baron - Page 15

Configuration : accs restreints aux pages JSP  Quand une page JSP utilise des composants JSF elle doit tre traite obligatoirement par la Servlet principale
 http://localhost/myAppli/faces/index.jsp : appel de la page index.jsp

 Dans le cas o une page JSP est appele directement sans passer par la Servlet principale une erreur est gnre
 http://localhost/myAppli/index.jsp : erreur !!!

 Empcher donc les clients daccder directement aux pages JSP qui exploitent des composants JSF
keulkeul.blogspot.com

 Solutions
 Utiliser la balise security-constraint dans le fichier web.xml  Dclarer chaque page JSP qui doit tre protge (celles qui utilisent des composants JSF) 16
JSF - M. Baron - Page

Configuration : accs restreints aux pages JSP  Exemple : restreindre laccs aux pages JSP
... <context-param> <param-name>com.sun.faces.validateXml</param-name> <param-value>true</param-value> Ajouter la balise security-constraint </context-param> dans le fichier web.xml ... <securiy-constraint> <web-resource-collection> <web-resource-name>No-JSF-JSP-Access</web-resource-name> <url-pattern>/welcome.jsp</url-pattern> <url-pattern>/form1.jsp</url-pattern> <url-pattern>/accepted.jsp</url-pattern> <url-pattern>/refused.jsp</url-pattern> <url-pattern>...</url-pattern> Les pages JSP qui utilisent </web-resource-collection> des composants JSF <auth-constraint> <description>Pas de rles, donc pas daccs direct</description> </auth-constraint> </security-constraint> ...

keulkeul.blogspot.com

Protger efficacement toutes les pages JSP qui utilisent des composants JSF

JSF - M. Baron - Page 17

Configuration : le fichier contrleur faces-config.xml  Le fichier grant la logique de lapplication web sappelle par dfaut faces-config.xml  Il est plac dans le rpertoire WEB-INF au mme niveau que web.xml  Il dcrit essentiellement six principaux lments :
 les Beans manags <managed-bean>  les rgles de navigation <navigation-rule>  les ressources ventuelles suite des messages <message-bundle>  la configuration de la localisation <resource-bundle>
keulkeul.blogspot.com

 la configuration des Validators et des Converters <validator> <converter>  dautres lments lis des nouveaux composants JSF <render-kit>

 Le fichier de configuration est un fichier XML dcrit par une DTD. La balise de dpart est <faces-config> (version 1.1) JSF - M. Baron - Page 18

Configuration : le fichier contrleur faces-config.xml  La description de lensemble des balises peut tre trouve
 http://www.horstmann.com/corejsf/faces-config.html
<?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN" "http://java.sun.com/dtd/web-facesconfig_1_1.dtd"> <faces-config> <navigation-rule> ... </navigation-rule> <managed-bean> ... </managed-bean> </faces-config>

Description de fonctionnement de lapplication JSF

keulkeul.blogspot.com

La version 1.2 de JSF utilise un schma au lieu dune DTD

JSF - M. Baron - Page 19

Configuration : balises personnalises dans les JSP  Les composants JSF sont utiliss dans les pages JSP au moyen de balises personnalises ddies aux JSF
 CORE : noyau qui gre les vues  HTML : composants JSF Le dtail de CORE et HTML sera donn plus tard

 Description des balises personnalises Core et HTML


 http://java.sun.com/javaee/javaserverfaces/1.2_MR1/docs/tlddocs  http://www.horstmann.com/corejsf/jsf-tags.html

 Possibilit dutiliser dautres balises (Tomahawk, ADF Faces)  Les composants JSF doivent tre encadrs par une vue JSF dclare par la balise <core:view>
<%@taglib uri="http://java.sun.com/jsf/core" prefix="core" %> <%@taglib uri="http://java.sun.com/jsf/html" prefix="html" %> ... Utilisation des <core:view> composants JSF ... Possibilit dutiliser des balises </core:view> HTML classiques cest du JSP!!! ... JSF - M. Baron - Page 20

keulkeul.blogspot.com

Configuration : JSF et Tomcat  Pour exploiter et dployer une application WEB avec JSF il faut
 des librairies JSF (Apache ou Sun) et JSTL  configurer le fichier web.xml selon la version de JSF

 Les librairies peuvent tre copies soit en locale lappli web sont en globale dans le rpertoire Tomcat
*.html, *.jsp, ... bin web.xml faces-config.xml jsf-api.jar jsf-impl.jar jstl-1.2.jar Tomcat

WEB-INF

Globale lapplication
lib classes ...

keulkeul.blogspot.com

MyApp

jsf-api.jar jsf-impl.jar jstl-1.2.jar

lib

conf

Locale lapplication

classes

JSF - M. Baron - Page 21

Configuration : JSF et Tomcat  Selon la version et le serveur dapplication, le fichier web.xml doit tre complt (Tomcat 6 pour nos tests)  Pour la version 1.1.5 de JSF (MyFaces)
<web-app ...> ... <listener> <listener-class> org.apache.myfaces.webapp.StartupServletContextListener </listener-class> </listener> </web-app>

 Pour la version 1.2 de JSF (Sun)


<web-app ...> ... <listener> <listener-class> com.sun.faces.config.ConfigureListener </listener-class> </listener> <listener> <listener-class> com.sun.faces.application.WebappLifecycleListener </listener-class> </listener> </web-app>

web.xml

keulkeul.blogspot.com

JSF - M. Baron - Page 22

Le premier exemple Hello World avec JSF  Exemple : afficher le message Hello World avec JSF
<%@page contentType="text/html"%> <%@page pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsf/core" prefix="core"%> <%@taglib uri="http://java.sun.com/jsf/html" prefix="html"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Hello World avec JSF</title> </head> <body> <core:view> <h1><html:outputText value="Hello World avec JSF" /></h1><br> La mme chose avec du HTML : <h1>Hello World avec JSF</h1> </core:view> </body> </html>

keulkeul.blogspot.com

welcomeJSF.jsp du projet HelloWorld


JSF - M. Baron - Page 23

Le premier exemple Hello World avec JSF  Exemple (suite) : afficher le message Hello World
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/webapp_2_4.xsd"> <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>/faces/*</url-pattern> </servlet-mapping> <security-constraint> <display-name>Constraint1</display-name> <web-resource-collection> <web-resource-name>No-JSP-JSF-Page</web-resource-name> <url-pattern>/welcomeJSF.jsp</url-pattern> </web-resource-collection> <auth-constraint> <description>Pas de rles, donc pas daccs direct</description> </auth-constraint> </security-constraint> </web-app>

keulkeul.blogspot.com

web.xml du projet HelloWorld

JSF - M. Baron - Page 24

Le premier exemple Hello World avec JSF  Exemple (suite) : afficher le message Hello World
Considrons que la page welcomeJSF.jsp nest pas protge et que la ressource est accde directement (sans passer par la Servlet principale)

keulkeul.blogspot.com

Retour dun message derreur car les lments JSF ne sont pas traits par la Servlet principale

JSF - M. Baron - Page 25

Le premier exemple Hello World avec JSF  Exemple (suite) : afficher le message Hello World
Considrons que la ressource welcomeJSF.jsp est protge et que la ressource est accde directement (sans passer par la Servlet principale)

keulkeul.blogspot.com

Retour dun message derreur car la page est protge


JSF - M. Baron - Page 26

Le premier exemple Hello World avec JSF  Exemple (suite) : afficher le message Hello World
<?xml version='1.0' encoding='UTF-8'?>

<!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN" "http://java.sun.com/dtd/web-facesconfig_1_1.dtd"> <faces-config>

</faces-config>
keulkeul.blogspot.com

Dans cet exemple aucune configuration est ncessaire. Nous verrons dans la suite les rgles de navigation et la dclaration de Bean manags

faces-config.xml du projet HelloWorld

JSF - M. Baron - Page 27

Bean Manag : principe  Rappelons quun Bean est une classe Java respectant un ensemble de directives
 Un constructeur public sans argument  Les proprits dun Bean sont accessibles au travers de mthodes getXXX et setXXX portant le nom de la proprit

 Lutilisation des Beans dans JSF permet


 laffichage des donnes provenant de la couche mtier  le stockage des valeurs dun formulaire  la validation des valeurs
keulkeul.blogspot.com

 lmission de messages pour la navigation (reus par faces-config.xml) Dans la suite nous verrons que les Beans peuvent retourner des messages exploitables par le contrleur JSF : principe de la Navigation

JSF - M. Baron - Page 28

Bean Manag : principe  Un Bean manag est un Bean dont la vie est gre par JSF et dclar dans le fichier de configuration faces-config.xml
 Dfinir la dure de vie (scope) dun Bean  Initialiser les proprits dun Bean

 A la diffrence des Beans utiliss dans Struts, les Beans manags de JSF nhritent pas dune classe particulire  Les classes sont stockes dans le rpertoire WEB-INF/classes
*.html, *.jsp, ...

WEB-INF

web.xml, faces-config-xml

keulkeul.blogspot.com

classes

Beans

lib

Librairie JSF

JSF - M. Baron - Page 29

Bean manag : configuration dans faces-config.xml  Pour crer un Bean manag il faut le dclarer dans le fichier de configuration de JSF laide de la balise <managed-bean>  Trois lments essentiels sont prciser
 <managed-bean-name> dfinit un nom qui servira dtiquette quand le Bean sera exploit dans les pages JSP  <managed-bean-class> dclare le nom de la classe de type package.class  <managed-bean-scope> prcise le type de scope utilis pour le Bean  none, application, session, request
keulkeul.blogspot.com

... Etudie dans la <navigation-rule>...</navigation-rule> partie Navigation <managed-bean> <managed-bean-name>MyBean</managed-bean-name> <managed-bean-class>mypackage.MyFirstBean</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> </managed-bean> ...

faces-config.xml

JSF - M. Baron - Page 30

Bean manag : JSP, Bean et Expression Language (EL)  Un formulaire JSF doit tre construit dans un groupe dfini par la balise <html:form> ... </html:form>
 ACTION est automatiquement SELF (URL courante)  METHOD est obligatoirement POST

 Utilisation de composants JSF pour saisir des informations


 <html:inputText> pour la balise HTML <INPUT TYPE="Text">  <html:inputSecret> pour la balise <INPUT TYPE="PASSWORD">  <html:commandButton> pour la balise <INPUT TYPE="SUBMIT">
keulkeul.blogspot.com

 La balise <html:commandButton> contient un attribut action qui permet dindiquer un message trait par les rgles de navigation dfinies dans faces-config.xml
Nous verrons dans la partie Navigation le traitement de la valeur indique dans lattribut action

JSF - M. Baron - Page 31

Bean manag : JSP, Bean et Expression Language (EL)  Exemple : formulaire JSP utilisant des composants JSF
<%@page contentType="text/html"%> <%@taglib uri="http://java.sun.com/jsf/core" prefix="core"%> <%@taglib uri="http://java.sun.com/jsf/html" prefix="html"%> <html> <head> <title>Premier formulaire avec JSF</title> </head> <body> <core:view> <html:form> <html:outputText value="Adresse Email " /><html:inputText/><br> <html:outputText value="Mot de Passe " /><html:inputSecret/><br> <html:commandButton value="Connecter" /> </html:form> </core:view> </body> </html>

keulkeul.blogspot.com

beanform1.jsp du projet ManagedBean

JSF - M. Baron - Page 32

Bean manag : JSP, Bean et Expression Language (EL)  Les Expressions Languages (EL) sont utilises pour accder aux lments du Bean dans les pages JSP  Un EL permet daccder simplement aux Beans des diffrents scopes de lapplication (page, request, session et application)  Forme dun Expression Language JSF
#{expression}

keulkeul.blogspot.com

 Les EL JSF sont diffrentes des EL JSP qui utilisent la notation

${expression}
 Une EL est une expression dont le rsultat est value au moment o JSF effectue le rendu de la page
JSF - M. Baron - Page 33

Bean manag : JSP, Bean et Expression Language (EL)  Lcriture #{MyBean.value} indique JSF
 de chercher un objet qui porte le nom de MyBean dans son contexte  puis invoque la mthode getValue() (chercher la proprit value)

 Le nom de lobjet est dtermin dans le fichier faces-config.xml


... <navigation-rule>...</navigation-rule> <managed-bean> <managed-bean-name>MyBean</managed-bean-name> <managed-bean-class>mypackage.MyFirstBean</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> </managed-bean> ...

keulkeul.blogspot.com

 Possibilit daccder un objet contenu dans le Bean


 #{MyBean.myobject.value} : proprit value de myobject contenu dans MyBean JSF - M. Baron - Page 34

Bean manag : JSP, Bean et Expression Language (EL)  JSF dfinit un ensemble dobjets implicites utilisables dans les Expressions Languages :
 param : lments dfinis dans les paramtres de la requte HTTP  param-values : les valeurs des lments param  cookies : lments dfinis dans les cookies  initParam : paramtres dinitialisation de lapplication  requestScope : lments dfini dans la requte
keulkeul.blogspot.com

Etudie au niveau de la partie cycle de vie

 facesContext : instance de la classe FacesContext  View : instance de UIViewRoot


Expliquer au niveau des composants graphiques
JSF - M. Baron - Page 35

Bean manag : JSP, Bean et Expression Language (EL)  Exemple : objets implicites JSF dans une JSP
<html> <...> <body> <core:view> <p><html:outputText value="#{param.test}" /></p> <p><html:outputText value="#{cookie.JSESSIONID.value}" /></p> <p><html:outputText value="#{facesContext.externalContext.requestPathInfo}" /></p> <p><html:outputText value="#{facesContext.externalContext.requestServletPath}" /></p> </core:view> </body> </html> keulkeul.blogspot.com

implicitobjects.jsp du projet ImplicitObjects

JSF - M. Baron - Page 36

Bean manag : modifier/afficher la proprit dun Bean  Un formulaire regroupe un ensemble de composants contenant chacun une valeur (attribut value)  Chaque valeur dun composant peut tre stocke dans une proprit du Bean  Pour dfinir une proprit dans un Bean
 Crer lattribut correspondant la proprit  Dfinir des mthodes set et get pour accder en lecture et en criture aux proprits
keulkeul.blogspot.com

 Pour stocker la valeur dun composant vers le Bean ou afficher la valeur dune proprit dans un composant : utilisation des EL dans lattribut value du composant JSF  JSF associe automatiquement la proprit dun Bean la valeur dun composant JSF - M. Baron - Page

37

Bean manag : modifier/afficher la proprit dun Bean  Exemple : gestion dun formulaire email et mot de passe
package beanPackage; public class RegistrationBean { private String email = "user@host"; private String password = ""; public String getEmail() { return email; } public void setEmail(String t) { this.email = t; } public String getPassword() { return password; } public void setPassword(String t) { this.password = t; } }
JSF - M. Baron - Page 38

RegistrationBean.java du
projet ManagedBean possde deux proprits et des modifieurs et accesseurs

keulkeul.blogspot.com

Bean manag : modifier/afficher la proprit dun Bean  Exemple (suite) : gestion dun formulaire
... <core:view> <html:form> <html:outputText value="Adresse Email "/> <html:inputText value="#{registrationbean.email}"/><br>

EL pour accder la proprit email

<html:outputText value="Mot de Passe "/> <html:inputSecret value="#{registrationbean.password}"/><br> <html:commandButton value="Connecter" /> </html:form> </core:view> </body> </html>

EL pour accder la proprit password

keulkeul.blogspot.com

beanform2.jsp du projet ManagedBean


Affichage de la valeur dinitialisation du Bean

JSF - M. Baron - Page 39

Bean manag : modifier/afficher la proprit dun Bean  Exemple (suite) : gestion dun formulaire
<faces-config> <managed-bean> <managed-bean-name> registrationbean </managed-bean-name> <managed-bean-class> beanpackage.RegistrationBean </managed-bean-class> <managed-bean-scope> request </managed-bean-scope> </managed-bean> </faces-config>

Identifiant utilis pour accder au Bean dfini par la classe beanpackage.RegistrationBean

keulkeul.blogspot.com

faces-config.xml du projet ManagedBean

JSF - M. Baron - Page 40

Bean manag : initialisation des proprits dun Bean  Possibilit dinitialiser la proprit dun Bean dans
 le Bean lui-mme  le fichier faces-config.xml

 Dans le fichier faces-config.xml utilisation des EL


 Accs aux objets implicites  Accs aux autres Beans manags

 Linitialisation dun Bean est obtenue lintrieur de la balise <managed-bean> dans la balise <managed-property>  Chaque proprit initialiser est dclare par la balise <property-name> contenu dans <managed-property>  Une proprit peut tre de diffrentes types
 List : dfinit une proprit de type liste  Map : dfinit une proprit de type Map (une cl / valeur)  Value : dfinit une proprit sur une valeur
JSF - M. Baron - Page 41

keulkeul.blogspot.com

Bean manag : initialisation des proprits dun Bean  Si la proprit est de type List, linitialisation des valeurs de la proprit est effectue dans la balise <list-entries>  Dans la balise <list-entries> deux informations sont indiquer
 <value-class> : le type dobjet contenu dans la liste  <value> : une valeur dans la liste (autant dlment de la liste)
<managed-bean> ... <managed-property> <property-name>cities</property-name> <list-entries> <value-class>java.lang.String</value-class> <value>Poitiers</value> <value>Limoges</value> <value>Viroflay</value> </list-entries> </managed-property> </managed-bean>
JSF - M. Baron - Page 42

keulkeul.blogspot.com

Bean manag : initialisation des proprits dun Bean  Si la proprit est de type Map, linitialisation des valeurs de la proprit est effectue dans la balise <map-entries>  Dans la balise <map-entries> trois informations sont donner
 <key-class> : le type de la cl  <value-class> : le type dobjet contenu dans la Map  <map-entry> : contient une cl et une valeur

 La balise <map-entry> contient deux informations


 <key> : la cl  <value> : la valeur associe la cl
keulkeul.blogspot.com <managed-property> <property-name>prices</property-name> <map-entries> <map-entrie> <key>SwimmingPool High Pressure</key> <value>250</value> </map-entrie> </map-entries>

JSF - M. Baron - Page 43

Bean manag : initialisation des proprits dun Bean  Si la proprit est de type Value, linitialisation de la valeur de la proprit est effectue dans la balise <value>
<managed-bean> ... <managed-property> <property-name>email</property-name> <value>user@host</value> </managed-property> <managed-property> <property-name>name</property-name> <value>your name</value> </managed-property> <managed-property> <property-name>adress</property-name> <value>your adress</value> </managed-property> </managed-bean>

keulkeul.blogspot.com

faces-config.xml du projet ManagedBean

JSF - M. Baron - Page 44

Bean manag : initialisation des proprits dun Bean  Exemple : initialisation de proprits dans faces-config.xml
</managed-bean> <managed-bean> <managed-bean-name>registrationbeanbis</managed-bean-name> <managed-bean-class> beanPackage.RegistrationBeanBis </managed-bean-class> <managed-bean-scope>request</managed-bean-scope> <managed-property> <property-name>email</property-name> <value>#{registrationbean.email}</value> </managed-property> Utilisation dune EL pour <managed-property> accder au Bean dfini <property-name>adress</property-name> par registrationbean <value>Your Adress</value> </managed-property> </managed-bean>

keulkeul.blogspot.com

faces-config.xml du projet ManagedBean


JSF - M. Baron - Page 45

Bean manag : initialisation des proprits dun Bean  Exemple (suite) : initialisation de proprits
<html> <head> <title>Troisime formulaire JSF avec un Bean Manag ...</title> </head> <body> <core:view> <html:form> <html:outputText value="Adresse Email "/> <html:inputText value="#{registrationbeanbis.email}"/><br> <html:outputText value="Adresse Postale "/> <html:inputTextvalue="#{registrationbeanbis.adress}"/><br> <html:commandButton value="Connecter" /> </html:form> </core:view> </body> </html> keulkeul.blogspot.com

beanform3.jsp du projet ManagedBean


JSF - M. Baron - Page 46

Cycle de vie dune JSF : gnralits


Rponse Complte Requte Faces
Restore View Apply Requests Process Events Process Validations

Rponse Complte
Process Events

Rponse Complte Rponse Faces


keulkeul.blogspot.com

Rponse Complte
Invoke Application Process Events Update Model Values

Render Response

Process Events

Erreurs de Conversion Erreurs de Conversion et / ou de Validation


JSF - M. Baron - Page 47

Dtaill au fur et mesure : conversion, validation, vnements,

Cycle de vie dune JSF : gnralits  Restore View : JSF reconstruit larborescence des composants qui composent la page.  Apply Requests : les valeurs des donnes sont extraites de la requte  Process Validations : procde la validation des donnes  Update model values : mise jour du modle selon les valeurs reues si validation ou conversion russie
keulkeul.blogspot.com

 Invoke Application : les vnements mis de la page sont traits. Elle permet de dterminer la prochaine page  Render Response : cration du rendue de la page
JSF - M. Baron - Page 48

Navigation : configuration de faces-config.xml  Le fichier de faces-config.xml joue le rle de contrleur, il dcide de la ressource qui doit tre appele suite la rception dun message  Les messages sont des simples chanes de caractres  Utilisation de la balise <navigation-rule> pour paramtrer les rgles de navigation  La balise <from-view-id> indique la vue source o est effectue la demande de redirection. La vue peut tre un :
 Formulaire (action de soumission)
keulkeul.blogspot.com

 Lien hypertext

 Pour chaque valeur de message une page vue de direction est indique dans la balise <navigation-case>
 <from-outcome> : la valeur du message  <to-view-id> : la vue de direction
JSF - M. Baron - Page 49

Navigation : statique ou dynamique  JSF implmente une machine tats pour grer la navigation entre des pages JSF  Pour schmatiser nous distinguons deux sortes de navigation
 Navigation statique  Navigation dynamique

 Navigation statique
 La valeur de loutcome est connue au moment de lcriture de la JSP

 Navigation dynamique
 La valeur de loutcome est inconnue au moment de lcriture de la JSP
keulkeul.blogspot.com

 Elle peut tre calcule par un Bean Manag ou autre chose

 Remarques
 Si une valeur doutcome est inconnue la mme page JSP est recharge  Si la valeur vaut null la page JSP est recharge
JSF - M. Baron - Page 50

Navigation statique : exemples  Exemple : redirection statique partir dun formulaire


... <html> <head> <title>Redirection Statique partir dun formulaire</title> </head> <body> <core:view> <html:form> <html:outputText value="Nom : " /> <html:inputText value="#{beancontroller1.name}"/><br> <html:outputText value="Adresse email : " /> <html:inputText value="#{beancontroller1.email}"/><br> <html:commandButton value="Connecter" action="register"/> </html:form> </core:view> </body> </html>

keulkeul.blogspot.com

form1.jsp du projet Navigation


JSF - M. Baron - Page 51

Navigation statique : exemples  Exemple (suite) : redirection statique


... faces-config.xml <faces-config> <navigation-rule> <from-view-id>/form1.jsp</from-view-id> <navigation-case> <from-outcome>register</from-outcome> <to-view-id>/accepted.jsp</to-view-id> </navigation-case> </navigation-rule> </faces-config>
<%@taglib uri="http://java.sun.com/jsf/core" prefix="core"%> <%@taglib uri="http://java.sun.com/jsf/html" prefix="html"%> <html> ... acceptedSimple.jsp <body> du projet Navigation <core:view> <h1><html:outputText value="Redirection Russie" /></h1> </core:view> </body> </html>

keulkeul.blogspot.com

Noubliez pas de protger toutes les pages JSP : form1.jsp et acceptedSimple.jsp JSF - M. Baron - Page

52

Navigation dynamique : exemples  Exemple : redirection dynamique partir dun Bean


package beanPackage; public class BeanController2 { private String email = "user@host"; private String name = ""; ...

keulkeul.blogspot.com

public String loginConnect() { if (this.email.isEmpty()) { return "Rejected"; } if (this.name.isEmpty()) { return "Rejected"; } Il sagit ici dune technique pour return "Accepted"; la validation des informations } }

Cette mthode permet de valider les valeurs et de choisir le message retourner Cette mthode retourne JSF au contrler soit Accepted soit Rejected

BeanController2.java du projet Navigation

saisies dans un formulaire. Nous approfondirons cet aspect dans la partie Validators
JSF - M. Baron - Page 53

Navigation dynamique : exemples  Exemple (suite) : redirection dynamique partir dun Bean
<faces-config> <navigation-rule> <from-view-id>form2.jsp</from-view-id> <navigation-case> <from-outcome>Accepted</from-outcome> <to-view-id>/accepted.jsp</to-view-id> </navigation-case> <navigation-case> <from-outcome>Rejected</from-outcome> <to-view-id>/rejected.jsp</to-view-id> </navigation-case> </navigation-rule> <managed-bean> <managed-bean-name>beancontroller2</managed-bean-name> <managed-bean-class> beanPackage.BeanController2 faces-config.xml du </managed-bean-class> projet Navigation ... </faces-config>
JSF - M. Baron - Page 54

keulkeul.blogspot.com

Navigation dynamique : exemples  Exemple (suite) : redirection dynamique partir dun Bean
... <html> <head> <title>Redirection Dynamique partir dun formulaire</title> </head> <body> <core:view> <html:form> <html:outputText value="Nom : " /> <html:inputText value="#{beancontroller2.name}"/><br> <html:outputText value="Adresse email : " /> <html:inputText value="#{beancontroller2.email}"/><br> <html:commandButton value="Connecter" action="#{beancontroller2.loginConnect}"/> </html:form> Accs au Bean identifi par </core:view> beancontroller2 et la </body> </html> mthode loginConnect

keulkeul.blogspot.com

form2.jsp du projet Navigation


JSF - M. Baron - Page 55

Navigation dynamique : exemples  Exemple (suite) : redirection dynamique partir dun Bean
<%@taglib uri="http://java.sun.com/jsf/core" prefix="core"%> <%@taglib uri="http://java.sun.com/jsf/html" prefix="html"%>

keulkeul.blogspot.com

accepted.jsp du <html> projet Navigation <head> <title>Rsultat du traitement du formulaire</title> </head> <body> <core:view> <h1><html:outputText value="Connexion de : "/> <html:outputText value="#{beancontroller2.name}" /></h1> </core:view> </body> </html>
Page affiche la suite de la soumission. Lecture de la proprit email du Bean identifi par beancontroller2
JSF - M. Baron - Page 56

Composants graphiques : prsentation  JSF fournit un ensemble de composants graphiques pour la conception de lIHM  Un composant JSF est dvelopp partir de :
 classes qui codent le comportement et ltat  classes de rendu qui traduisent la reprsentation graphique (HTML, FLASH, XUL, )  classes qui dfinissent les balises personnalises relation entre JSP et classes Java
keulkeul.blogspot.com

 classes qui modlisent la gestion des vnements  classes qui prennent en compte les Converters et les Validators

 Pour exploiter les composants JSF dans les pages JSP, des balises personnalises sont utilises
JSF - M. Baron - Page 57

Composants graphiques : balises CORE  Les balises personnalises dcrites dans CORE soccupent dajouter des fonctionnalits aux composants JSF  Pour rappel pour avoir un descriptif de lensemble des balises CORE :  http://java.sun.com/javaee/javaserverfaces/1.2/docs/tlddocs  La bibliothque contient un ensemble de balises
 facet : dclare un lment spcifique pour un composant  view et subview : ajoute une vue ou une sous vue  attribute et param : ajoute un attribut ou paramtre un composant
keulkeul.blogspot.com

 selectionitem et selectionitems : dfinit un ou plusieurs lments  convertDataTime et convertNumber : conversion de donnes  validator, validateDoubleRange, : ajoute des validators  actionListener, valueChangeListener : diffrents couteurs  loadBundle : chargement de bundle (fichier de ressources ) - Page JSF - M. Baron
58

Composants graphiques : balises HTML  Les balises personnalises dcrites dans HTML soccupent de la description de linterface graphique dune JSF  La spcification JSF dcrit un ensemble fini de composants graphiques. Des bibliothques tiers (My Faces) proposent des composants complmentaires  Pour rappel pour avoir un descriptif de lensemble des balises HTML :  http://java.sun.com/javaee/javaserverfaces/1.2/docs/tlddocs
keulkeul.blogspot.com

 La bibliothque HTML propose 25 composants qui sont classifiables en quatre catgories


 Composants de saisies nots I (pour input)  Composants de sorties nots O (pour output)  Composants de commandes nots C (pour commandes)  Composants de regroupement nots R (pour )
JSF - M. Baron - Page 59

Composants graphiques : balises HTML  Famille des regroupements


 form  panelGroup  panelGrid  selectOneListbox  selectOneMenu  selectOneRadio

 Famille des sorties


 column  message et messages  dataTable  outputText  outputFormat  outputLink  graphicImage

 Famille des saisis


 inputHidden  inputSecret  inputText  inputTextArea
keulkeul.blogspot.com

 selectBooleanCheckbox  selectManyCheckbox  selectManyListbox  selectManyMenu

 Famille des commandes


 commandButton  commandLink
JSF - M. Baron - Page 60

Composants graphiques : balises HTML saisis

intputText

selectBooleanCheckbox

selectManyCheckbox

intputSecret selectManyMenu selectOneListbox


keulkeul.blogspot.com

selectManyListbox

selectOneMenu

intputTextarea selectOneRadio
JSF - M. Baron - Page 61

Composants graphiques : balises HTML sorties et commandes


commandButton commandLink outputText graphicImage

outputLink

dataTable

keulkeul.blogspot.com

panelGrid

JSF - M. Baron - Page 62

Composants graphiques : dtail balises HTML  Une balise contient gnralement trois types dattributs
 Des attributs basiques (description)  Des attributs HTML (description de prsentation)  Des attributs DHTML (description pour la partie dynamique)

 Selon la nature du composant graphique (saisie, sortie, commande et autre) le nombre dattributs varie  Nous dcrirons rapidement les attributs les plus significatifs.
keulkeul.blogspot.com

Au fur et mesure de la prsentation des composants graphiques nous les dtaillerons via des exemples  Les transparents qui suivent sont raliss dans une optique de prsentation rapide
JSF - M. Baron - Page 63

Composants graphiques : dtail balises HTML  Les attributs basiques sont utiliss pour ajouter une description spcifique JSF  Attributs basiques
 id : identifiant du composant  binding : association avec un Bean Backing  rendered : true composant affich, false composant cach  styleClass : prcise le nom dune CSS appliquer au composant  value : valeur du composant
keulkeul.blogspot.com

 valueChangeListener : associer une mthode pour le changement de valeur  converter : nom de la classe pour une conversion de donnes  validator : nom de la classe pour une validation de donnes  required : true valeur obligatoire, false valeur optionnelle JSF - M. Baron - Page
64

Composants graphiques : dtail balises HTML  Les attributs HTML sont utiliss pour modifier lapparence graphique dun composant JSF  Attributs HTML (les plus rpandus )
 alt : texte alternatif au cas o le composant ne s'affiche pas  border : bordure du composant  disabled : dsactive un composant de saisie ou un bouton  maxlength : maximum de caractres pour un composant de texte  readonly : mode lecture uniquement
keulkeul.blogspot.com

 size : taille d'un champ de texte  style : information du style  target : nom de la frame dans lequel le document est ouvert  (et beaucoup pleins d'autres )
JSF - M. Baron - Page 65

Composants graphiques : dtail balises HTML  Les attributs DHTML sont utiliss pour ajouter un aspect dynamique pour les composants JSF (appel du JavaScript)  Attributs DHTML
 onblur : lment perd le focus  onClick : clique souris sur un lment  onfocus : lment gagne le focus  onkeydown, onkeyup : touche clavier enfonce et relche  onkeypress : touche clavier presse puis relche
keulkeul.blogspot.com

La gestion des vnements sera explique dans une partie ddie

 ondblClick : double clique souris sur un lment

 onmousedown, onmouseup : bouton souris enfonc et relch  onmouseout, onmouseover : curseur souris sort et entre  onreset : formulaire est initialis  onselect : texte est slectionn dans un champ de texte  onsubmit : formulaire soumis
JSF - M. Baron - Page 66

Composants graphiques : <html:panelGrid>  La balise html:panelGrid est utilise pour dfinir lagencement des composants visuels  Il ne sagit donc pas dun composant visuel mais dun conteneur dont lorganisation de ces composants enfants est ralise suivant une grille  Les composants enfants sont ajouts dans le corps  Principaux attributs :
 columns : nombre de colonnes de la grille  bgcolor : couleur du fond
keulkeul.blogspot.com

 cellpading, cellspacing : espacement entre les cellules  border : border autour de la grille

 Le composant html:panelGroup permet de regrouper des composants dans une cellule (une sorte de fusion) JSF - M. Baron - Page

67

Composants graphiques : <html:panelGrid>  Exemple : organiser des composants dans une grille
... <h4> <html:panelGrid cellspacing="25" columns="2" > <html:outputText value="Nom : " /> <html:panelGroup> <html:inputText size="15" required="true" /> <html:inputText /> </html:panelGroup> <html:outputText value="Mot de passe : " /> <html:inputSecret /> </html:panelGrid> </h4>
keulkeul.blogspot.com

Cration d'une grille avec deux colonnes

Regroupement de deux composants dans une cellule

outputcomponent.jsp du projet GraphicalComponents


JSF - M. Baron - Page 68

Composants graphiques : <html:dataTable>  Le composant <html:dataTable> permet de visualiser des donnes sur plusieurs colonnes et plusieurs lignes  La table peut tre utilise quand le nombre d'lments afficher est inconnu  Les donnes (la partie modle) peuvent tre gres par des Beans  Attributs de la balise :
 value : une collection de donnes (Array, List, ResultSet, )
keulkeul.blogspot.com

 var : nom donn la variable manipuler pour chaque ligne  border, bgcolor, width : attributs pour l'affichage  rowClasses, headerClass : attributs pour la gestion des styles (CSS)

 Pour chaque colonne de la table, la valeur afficher est obtenue par la balise <html:column> JSF - M. Baron - Page

69

Composants graphiques : <html:dataTable>  Exemple : la reprsentation d'une table JSF


public class Personne { private String name; private String firstName; private String birthName; private String job; public Personne(String pN, String pF, String pB, String pJ) { name = pN; firstName = pF; birthName = pB, job = pJ; } public String getName() { return name; } public void setName(String pName) { name = pName; } public String getFirstName() { return firstName; } public void setFirstName(String pFirstName) { firstName = pFirstName; } ... public class DataTableBean { private List<Personne> refPersonne; public List getPersonne() { if (refPersonne == null) { refPersonne = new ArrayList<Personne>(); refPersonne.add(new Personne("Baron", "Mickael", "17081976", "Dveloppeur")); refPersonne.add(new Personne("Dupont", "Marcel", "21041956", "Boucher")); ... } OutputBean.java return refPersonne; du projet } } GraphicalComponents

Personne.java du projet GraphicalComponents

keulkeul.blogspot.com

JSF - M. Baron - Page 70

Composants graphiques : <html:dataTable>  Exemple (suite) : la reprsentation d'une table JSF


<core:view> <html:dataTable value="#{outputbean.personne}" var="personne" border="1" cellspacing="4" width="60%" > <html:column> <html:outputText value="#{personne.name}" /> </html:column> <html:column> <html:outputText value="#{personne.firstname}" /> </html:column> <html:column> <html:outputText value="#{personne.birthdata}" /> </html:column> <html:column> <html:outputText value="#{personne.job}" /> datatablecomponent1.jsp </html:column> du projet </html:dataTable> GraphicalComponents </core:view>

keulkeul.blogspot.com

JSF - M. Baron - Page 71

Composants graphiques : <html:dataTable>  La modification des en-tte et pied de page d'une table est obtenue en utilisant la balise <core:facet>  <core:facet> s'occupe d'effectuer une relation de filiation entre un composant et un autre  La filiation consiste associer le composant <core:facet> est un composant dfini dans le corps de <core:facet>  Attribut du composant <core:facet>
 name : nom de la filiation

 Pour le composant table deux filiations possibles


keulkeul.blogspot.com

 header : une filiation entre une colonne et le nom de la colonne  footer : une filiation entre la table et un nom  caption : une filiation entre le titre de la table et un nom Le composant de filiation <core:facet> doit tre absolument un composant JSF

JSF - M. Baron - Page 72

Composants graphiques : <html:dataTable>  Exemple : table JSF avec des noms de colonnes
<core:view> <html:dataTable value="#{outputbean.personne}" var="personne" border="1" cellspacing="4" width="60%" > <html:column> <core:facet name="header" > <html:ouputText value="Nom" /> </core:facet> <html:outputText value="#{personne.name}" /> </html:column> <html:column> <core:facet name="header" > <html:verbatim>Prnom</verbatim> </core:facet> <html:outputText value="#{personne.firstname}" /> </html:column> Ne sera jamais affich car <html:column> <core:facet name="header" > <core:facet> n'est associ Date de naissance aucun autre composant </core:facet> <html:outputText value="#{personne.birthdata}" /> </html:column> <html:facet name="footer"> <html:outputText value="#{outputbean.caption}" /> </html:facet> datatablecomponent2.jsp ... du projet </html:dataTable> GraphicalComponents </core:view>

keulkeul.blogspot.com

JSF - M. Baron - Page 73

Composants graphiques : <html:dataTable>  Pour l'instant, seul l'aspect peuplement des informations a t trait,<html:dataTable> offre la possibilit de modifier l'apparence d'une table  Les attributs :
 headerClass : style CSS pour la partie en-tte  footerClass : style CSS pour le bas de page  rowClasses : liste de styles CSS pour les lignes

keulkeul.blogspot.com

 L'attribut rowClasses permet de dfinir une liste de style CSS qui sera applique pour chaque ligne et rpte autant de fois qu'il y a de lignes (dfinition d'un motif)  Exemple :
 Soit la dfinition suivante : rowClasses="row1, row2, row2"  Rptition du motif row1, row2, row2, row1, row2,
JSF - M. Baron - Page 74

Composants graphiques : <html:dataTable>  Exemple : table JSF maquill


<head> <...> <link href="output.css" tel="stylesheet" type="text/css" > </head> datatablecomponent3.jsp <body> du projet GraphicalComponents <core:view> <html:dataTable value="#{outputbean.personne}" var="personne" border="1" cellspacing="4" width="60%" rowClasses="row1,row2" headerClass="heading" footerClass="footer" > ... .heading { </html:dataTable> font-family: Arial, Helvetica, sans-serif; </core:view> font-weight: bold;
font-size: 20px; color: black; background-color:silver; text-align:center; } .row1 { background-color:#GFGFGF; } .row2 { Background-color:#CECECE; .footer { output.css background-color:#000009; du projet Color:white; GraphicalComponents }

keulkeul.blogspot.com

JSF - M. Baron - Page 75

Composants graphiques : <html:dataTable>  Exemple : table JSF avec des composants JSF de saisie
<core:view> <html:dataTable value="#{outputbean.personne}" var="personne" border="1" cellspacing="4" width="60%" rowClasses="..." > <html:column> <core:facet name="header" > <html:ouputText value="Nom" /> </core:facet> <html:inputText value="#{personne.name}" /> </html:column> <html:column> <core:facet name="header" > <html:verbatim>Prnom</verbatim> </core:facet> <html:outputText value="#{personne.firstname}" /> </html:column> </html:dataTable> </core:view>

keulkeul.blogspot.com

datatablecomponent4.jsp du projet GraphicalComponents


JSF - M. Baron - Page 76

Composants graphiques : items  Les balises HTML de type slection (selectOneRadio,

selectOneMenu) permettent de grer un ensemble d'lments


 Les lments peuvent tre peupls par :
 core:selectItem : affiche un seul lment  core:selectItems : affiche plusieurs lments

 Les balises HTML de slection s'occupent de grer la slection courante (une ou plusieurs) au travers de leur attribut value
keulkeul.blogspot.com

 Le type de la slection courante (retourn au serveur) est donn par les lments de slection (int, String, Object, )  La balise html:selectBooleanCheckbox n'est pas concerne puisqu'elle ne gre qu'un seul lment
JSF - M. Baron - Page 77

Composants graphiques : <core:selectItem>  La balise core:selectItem est utilise pour spcifier un seul lment  Principaux attributs de la balise core:selectItem :
 itemDescription : description (utilisable dans les outils uniquement)  itemDisabled : active ou pas l'item  value : valeur qui pointe vers un objet SelectItem  itemLabel : le texte afficher  itemValue : la valeur retourne au serveur

 Un objet SelectItem est exploitable directement dans un Bean


keulkeul.blogspot.com

 Diffrents constructeurs :
 SelectItem(Object value) : constructeur avec une valeur retourner et afficher  SelectItem(Object value, String label) : constructeur avec une valeur retourner au serveur et une valeur afficher JSF - M. Baron - Page 78

Composants graphiques : <core:selectItem>  Exemple : choix d'un lment unique


... <html:outputText value="Fruit prfr avec SelectItem : " /> <html:selectOneRadio layout="pageDirection" value="#{inputbean.oneRadioValue}" /> <core:selectItem value="#{inputbean.bananeItem}" /> <core:selectItem value="#{inputbean.orangeItem}" /> <core:selectItem itemValue="Clmentine" /> <core:selectItem itemValue="Pomme" /> <core:selectItem itemValue="Framboise" /> </html:selectOneRadio> ...

intputcomponent.jsp du projet GraphicalComponents

Utilisation d'un binding d'un composant SelectItem

keulkeul.blogspot.com

Retourne un objet SelectItem

public class InputBean { private String oneRadioValue; public String getOneRadioValue() { return oneRadioValue; } public void setOneRadioValue(String p) { oneRadioValue = p; } public SelectItem getBananeItem() { return new SelectItem("Banane"); } ... }

JSF - M. Baron - Page 79

Composants graphiques : <core:selectItems>  Lutilisation de la balise core:selectItem peut alourdir lcriture des diffrents lments des composants de slection  Cette balise est plutt adapte pour un nombre rduits dlments  La balise core:selectItems allge donc lcriture puisquune seule occurrence de core:selectItems remplace toutes les occurrences de core:selectItem  Lattribut value est une valeur binding qui pointe vers une structure de type SelectItem
keulkeul.blogspot.com

 La structure de type SelectItem peut tre de type


 instance unique  map : les entres sont les itemLabels et itemValues de SelectItem  collection  tableau
JSF - M. Baron - Page 80

Composants graphiques : <core:selectItems>  Exemple : choisir de nombreux lments

html:selectOneRadio

html:selectManyListbox

html:selectManyCheckbox html:selectOneMenu
keulkeul.blogspot.com

html:selectOneListbox html:selectManyMenu
JSF - M. Baron - Page 81

Composants graphiques : <core:selectItems>  Exemple (suite) : choisir de nombreux lments


<h4><html:outputText value="Fruit prfr avec SelectItems : " /> <html:selectOneRadio value="#{inputbean.oneRadioValue}" /> <code:selectItems value="#{inputbean.oneRadioItems}" /> </html:selectOneRadio></h4> <h4><html:outputText value="Ajouter des priphriques : " /> <html:selectManyCheckBox value="#{inputbean.manyCheckBoxValues}" /> <code:selectItems value="#{inputbean.manyCheckBoxItems}" /> </html:selectManyCheckBox ></h4> <h4><html:outputText value="Accessoire prfr : " /> <html:selectOneListBox value="#{inputbean.oneListBoxValues}" /> <code:selectItems value="#{inputbean.manyAndOneListBoxItems}" /> </html:selectOneListBox></h4> <h4><html:outputText value="Choisir quipements prfrs : " /> <html:selectManyListBox value="#{inputbean.manyListBoxValues}" /> <code:selectItems value="#{inputbean.manyAndOneListBoxItems}" /> </html:selectManyListBox></h4>

Simplification dcriture avec la balise selectItems

Principe identique quelque soit le composant de slection Une seule valeur slectionnable Une seule valeur slectionnable

keulkeul.blogspot.com

<h4><html:outputText value="Choisir une marque de voiture : " /> <html:selectOneMenu value="#{inputbean.oneMenuValue}" /> <code:selectItems value="#{inputbean.manyAndOneMenuItems}" /> </html:selectOneMenu></h4> <h4><html:outputText value="Choisir plusieurs marques de voiture : " /> <html:selectManyMenu value="#{inputbean.manyMenuValue}" /> <code:selectItems value="#{inputbean.manyAndOneMenuItems}" /> </html:selectManyMenu></h4>

intputcomponent.jsp

JSF - M. Baron - Page 82

Composants graphiques : <core:selectItems>  Exemple (suite) : choisir de nombreux lments


public class InputBean { private SelectItem[] manyCheckBoxItems = new SelectItem[] { new SelectItem("Clavier"), new SelectItem("Souris"), new SelectItem("Ecran"), new SelectItem("Unit Centrale"), Utilises pour new SelectItem("Haut Parleur") peupler les lments }; private String[] manyCheckBoxValues;

du composant selectManyCheckBox

public SelectItem[] getManyCheckBoxItems() { return manyCheckBoxItems; } public String[] getManyCheckBoxValues() { return this.manyCheckBoxValues; } public void setManyCheckBoxValues(String[] p) { manyCheckBoxValues = p; } }

Utilise pour afficher la valeur slectionne courante

keulkeul.blogspot.com

Utilise pour modifier la valeur slectionne courante


JSF - M. Baron - Page 83

Composants graphiques : API JSF  Les classes qui modlisent l'tat et le comportement d'un composant sont les classes principales o dpendent toutes les autres (rendu, description balises, vnements )  Les composants JSF hritent de la classe de plus haut niveau UIComponent qui est abstraite  La classe UIComponentBase est la classe utilise comme implmentation par dfaut  Rappelons qu'un composant JSF peut contenir un ensemble de sous composants (notion de hirarchie)  UIComponentBase fournit les services suivants
 API pour la gestion du cycle de vie du composant  API pour le rendu du composant  (complt et dtaill dans la dernire partie)
JSF - M. Baron - Page 84

keulkeul.blogspot.com

Composants graphiques : API JSF  Hirarchie des principaux composants JSF


UIComponent
Objet reprsentant la racine de l'arbre aprs la phase de Restore View (plus de dtail dans la dernire partie) Classe abstraite

UIComponentBase

Implmentation par dfaut

UIViewRoot
Associe la balise outputText

UIOutput

UIInput

UICommand

keulkeul.blogspot.com

Associe la balise commandButton

HtmlInputText

HtmlCommandButton
Associe la balise intputText

HtmlOutputText

JSF - M. Baron - Page 85

FacesContext : principe  FacesContext permet de reprsenter toutes les informations contextuelles associes la requte et la rponse  FacesContext est dfini par une classe abstraite dont l'instanciation est ralise (si pas cre) au dbut du cycle de vie  Notez qu'il y autant d'instances de type FacesContext qu'il y a de vues JSF  Quand le processus de traitement est termin, l'objet
keulkeul.blogspot.com

FacesContext libre les ressources. L'instance de l'objet est


conserv (utilisation de la mthode release() )  A chaque nouvelle requte, r-utilisation des instances de

FacesContext

JSF - M. Baron - Page 86

FacesContext : utilisation explicite  FacesContext est essentiellement utilis par les mcanismes internes de JSF. Toutefois il est possible d'en extraire des informations intressantes  Un objet FacesContext est exploitable dans un Bean ou dans une JSP via son objet implicite associ  Que peut-on donc faire avec cet objet ?
 ExternalContext : accder aux lments de la requte et de la rponse
keulkeul.blogspot.com

 Message Queue : stocker des messages (voir partie suivante)  ViewRoot : accder la racine de l'arbre des composants (UIViewRoot)  Modifier le droulement du cycle de vie (voir partie vnement)  Pleins d'autres choses qui sortent du cadre de ce cours
JSF - M. Baron - Page 87

FacesContext : utilisation explicite  Exemple : manipuler l'objet FacesContext


package beanPackage; public class FacesContextBean { private String name; public String getName() { return name; } public void setName(String pValue) { name = pValue; } public void apply() { ExternalContext context = FacesContext.getCurrentInstance().getExternalContext(); System.out.println(context.getRequestPathInfo()); System.out.println(context.getRequestServletPath()); Iterator myIterator = context.getRequestParameterNames(); while(myIterator.hasNext()) { Object next = myIterator.next(); System.out.println("Nom du paramtre : " + next); Map requestParameterValuesMap = context.getRequestParameterValuesMap(); Object tabParameter = requestParameterValuesMap.get((String)next); if (tabParameter instanceof String[]) { System.out.println("Valeur du paramtre : " + ((String[])tabParameter)[0]); } } } }

keulkeul.blogspot.com

FacesContextBean.java du projet FacesContext


JSF - M. Baron - Page 88

FacesContext : utilisation explicite  Exemple (suite) : manipuler l'objet FacesContext


... <body> <core:view> <html:form> <html:inputText value="#{facescontextbean.name}" /> <html:commandButton value="Valider" action="#{facescontextbean.apply}" /> </html:form> </core:view> </body>

facescontext.jsp du projet FacesContext


keulkeul.blogspot.com

JSF - M. Baron - Page 89

Backing bean : principe  Rappelons que les Beans Manags sont utiliss comme des modles de vues  L'accs aux rfrences des composants de la vue ne peut se faire directement (assez tordu avec FacesContext)  Il peut tre intressant daccder directement la rfrence dun composant graphique pour en modifier son tat ( la suite dun vnement ou lors du processus de validation)  Le framework JSF offre la possibilit dencapsuler tout ou partie des composants qui composent une vue
keulkeul.blogspot.com

 Il sagit dun type de Bean appele Backing Bean qui correspond ni plus ni moins un Bean manag  Un Backing Bean est donc un bean dont certaines proprits sont de type UIComponent
JSF - M. Baron - Page 90

Backing bean : principe  Dans le Bean, il faut dclarer des accesseurs et des modifieurs sur des proprits de type UIComponent
package beanPackage; public class BackingBeanExemple { private String nom; private UICommand refCommand; public String getNom() { return nom; } public void setNom(String pNom) { nom = pNom; } public void setNomAction(UICommand ref) { refCommand = ref; } public UICommand getNomAction() { return refCommand; } keulkeul.blogspot.com }

Le Backing Bean se comporte comme un Bean Manag

Stocker et relayer la rfrence dun composant JSF

 Au niveau de la page JSP, la liaison entre le Backing Bean est la vue se fait par lattribut binding
<html:commandButton binding="#{backingbean.nomAction}" />

JSF - M. Baron - Page 91

Backing bean : principe  Exemple : activer/dsactiver un bouton par un Bean


... <body> <core:view> <html:form> <html:inputText value="#{backingbean.name}" binding="#{backingbean.composantNom}" /> <html:commandButton value="Transformer" binding="#{backingbean.commandButton}" action="#{backingbean.doProcess}" /> </html:form> </core:view> </body>

Un bouton activ
keulkeul.blogspot.com

Une valeur dans un composant texte

backingbean1.jsp du projet BackingBean


Un bouton dsactiv

La valeur a chang (sans passer par le Bean)

JSF - M. Baron - Page 92

Backing bean : principe  Exemple (suite) : activer/dsactiver un bouton par un Bean


package beanPackage; public class BackingBean { private String nom = "Baron"; private HtmlInputText composantNom; private HtmlCommandButton commandButton; public String getName() {return name; } public void setName(String pName) {this.name = pName; } public void setComposantNom(HtmlInputText pCommand) {composantNom = pCommand; } public HtmlInputText getComposantNom() { return composantNom; } public void setcommandButton(HtmlCommandButton pCB) {this.commandButton = pCB; } public HtmlCommandButton getCommandButton() { return this.commandButton; } public void doProcess() { if (commandButton != null) { this.commandButton.setDisabled(true); } if (composantNom != null) { composantNom.setValue("Nouvelle Valeur"); } } }

keulkeul.blogspot.com

BackingBean.java du projet BackingBean

JSF - M. Baron - Page 93

Message : manipulation et affichage  Pour linstant avec un Bean manag il est possible de
 Stocker et afficher les valeurs dun formulaire  Gnrer les actions pour lautomate de navigation

 LAPI JSF fournit lobjet FacesMessage pour empiler des messages qui pourront tre afficher dans une page JSP  Un objet FacesMessage est caractris par :
 Svrit : SEVERITY_INFO, SEVERITY_WARN, SEVERITY_ERROR et SEVERIRY_FATAL  Rsum : texte rapide dcrivant le message
keulkeul.blogspot.com

 Dtail : texte dtaill dcrivant le message

 LAPI fournit des modifieurs et accesseurs


 setSeverity(FacesMessage.Severity) / getSeverity()  setSummary(String) / getSummary()  setDetail(String) / getDetail()
JSF - M. Baron - Page 94

Message : manipulation et affichage  Un objet FacesMessage est donc construit dans une classe Java (un Bean par exemple)  Pour exploiter des messages dans une page JSP il faut passer par le contexte courant JSF (FacesContext)
 addMessage(String id, FacesMessage message) : ajoute un message un composant (dfini par id)  Si id est null le message nest pas associ un composant

 Exemple de construction et transmission dun FacesMessage :


keulkeul.blogspot.com

// Dclaration dun Message FacesMessage myFacesMessage = new FacesMessage(); myFacesMessage.setSeverity(FacesMessage.SEVERITY_INFO); myFacesMessage.setSummary("Un petit rsum"); myFacesMessage.setDetail("Mon message qui ne sert rien"); // Transmission dun Message FacesContext myFacesContext = FacesContext.getCurrentInstance(); myFacesContext.addMessage(null, myFacesMessage);
JSF - M. Baron - Page 95

Message : manipulation et affichage  La bibliothque HTML propose deux balises personnalises pour afficher les messages
 <html:messages> : affiche tous les messages  <html:message> : affiche les messages associs un id de composant

 Les balises contiennent les attributs suivants :


 for : indique lid du composant (uniquement pour message)  showDetail : boolen qui prcise si le message est dtaill
keulkeul.blogspot.com

 showSummary : boolen qui prcise si le message est rsum  tooltip : boolen qui prcise si une bulle daide est affiche  layout : prcise la manire dafficher les messages. Valeurs possibles

table ou list (par dfaut)

JSF - M. Baron - Page 96

Message : manipulation et affichage  Exemple : afficher les messages en un seul bloc


public class BeanMessages { private String name; public String getName() { return name; } public void setName(String p) { this.name = p; } public void validAction() { FacesMessage facesMessage = new FacesMessage(); facesMessage.setSeverity(FacesMessage.SEVERITY_INFO); facesMessage.setSummary("Validation"); if (name == null || name.equals("")) { facesMessage.setDetail("(nom inconnu)"); } else { facesMessage.setDetail("(nom connu :" + name + ")"); } FacesContext facesContext = FacesContext.getCurrentInstance(); facesContext.addMessage(null, facesMessage); facesContext.addMessage(null, new FacesMessage( FacesMessage.SEVERITY_INFO, "Validation 2", "Une seconde ligne")); } ... }

keulkeul.blogspot.com

BeanMessages du projet Messages

JSF - M. Baron - Page 97

Message : manipulation et affichage  Exemple (suite) : afficher les messages en un seul bloc
<%@taglib prefix="core" uri="http://java.sun.com/jsf/core"%> <%@taglib prefix="html" uri="http://java.sun.com/jsf/html"%> <html> Affichage sous la ... forme dun tableau <body> <core:view> <html:form> <html:messages showDetail="true" layout="table" showSummary="true"/><br> <html:outputText value="Nom : "/> <html:inputText value="#{beanmessages.name}"/><br> <html:commandButton value="Valider" action="#{beanmessages.validAction}"/> <html:commandButton value="Annuler" action="#{beanmessages.cancelAction}"/> </html:form> </core:view> </body> </html>

keulkeul.blogspot.com

form1.jsp du projet Messages


JSF - M. Baron - Page 98

Message : manipulation et affichage  Exemple : afficher les message en plusieurs blocs


<%@taglib prefix="core" uri="http://java.sun.com/jsf/core"%> <%@taglib prefix="html" uri="http://java.sun.com/jsf/html"%>

Ncessaire pour identifier <html> form2.jsp du projet ... les sous composants Messages Identifiant du composant <body> <core:view> inputText <html:form id="logonForm"> <html:outputText value="Nom : "/> <html:inputText id="myIdName" value="#{beanmessage.name}"/><br> <html:message for="myIdName" tooltip="true" showDetail="true showSummary="true"/><br>
<html:outputText value="Email : "/> <html:inputText id="myIdEmail" value="#{beanmessage.email}"/><br> <html:message for="myIdEmail" tooltip="true" showDetail="true showSummary="true"/><br>

Prcise que le message est associ lid myname

keulkeul.blogspot.com

<html:commandButton value="Valider" action="#{beanmessage.validAction}"/> <html:commandButton value="Annuler" action="#{beanmessage.cancelAction}"/> </html:form> </core:view> </body> Les identifiants sont </html>

utiliss pour localiser les messages

JSF - M. Baron - Page 99

Message : manipulation et affichage  Exemple (suite) : afficher les message en plusieurs blocs
public class BeanMessage { private String name private String email; public String getName() { return name; } public void setName(String p) { this.name = p; } public String getEmail() { return email; } public void setEmail(String p) { this.email = p; }

myIdName et logonForm sont des identifiants de composants


Prcise que myIdName appartient logonForm

keulkeul.blogspot.com

public void validAction() { FacesContext facesContext = FacesContext.getCurrentInstance(); facesContext.addMessage("logonForm:myIdName", new FacesMessage(FacesMessage.SEVERITY_INFO, "Validation Name", "Nom saisi " + this.name)); facesContext.addMessage("logonForm:myIdEmail", new FacesMessage(FacesMessage.SEVERITY_INFO, "Validation Email", "Email saisi " + this.email)); } ... }

BeanMessage.java du projet Messages

JSF - M. Baron - Page 100

Message : Internationalisation  faces-config.xml permet de configurer les localisations acceptes pour lapplication WEB dans la balise <application>  Dans <information> deux informations sont renseigner
 <message-bundle> : la ressource contenant les messages localiss  <local-config> : indique la locale par dfaut et les locales autorises

 Balise <local-config> deux informations sont renseigner


 <default-locale> : la localisation par dfaut  <supported-locale> : la localisation supporte par lapplication
... <application> <message-bundle>resources.ApplicationMessage</message-bundle> <locale-config> <default-locale>en</default-locale> <supported-locale>fr</supported-locale> <supported-locale>sp</supported-locale> </locale-config> faces-config.xml </application>
JSF - M. Baron - Page 101

keulkeul.blogspot.com

Message : Internationalisation  Dans la version 1.2 possibilit de dclarer des variables qui pointent sur des fichiers properties <resource-bundle>  Dans <resource-bundle> deux informations sont indiquer
 <base-name> : nom de la ressource contenant les messages localiss  <var> : alias permettant daccder la ressource <base-name>
<application> <resource-bundle> <base-name>resources.ApplicationMessage</base-name> <var>bundle</var> </resource-bundle> </application>
keulkeul.blogspot.com

 Dans la version 1.1 le chargement des ressources est effectu dans la page JSP laide de la balise <core:loadbundle>
<core:loadBundle basename="resources.ApplicationMessage" var="bundle" />

 Les ressources sont exploites par lintermdiaire des alias (attribut var) en utilisant les EL

JSF - M. Baron - Page 102

Message : Internationalisation  Exemple : formulaire utilisant une ressource de localisation


<%@page contentType="text/html"%> <%@taglib uri="http://java.sun.com/jsf/core" prefix="core"%> <%@taglib uri="http://java.sun.com/jsf/html" prefix="html"%> <html> Solution pour <head> <title>Formulaire JSF avec un Bean Manag</title> la version 1.1 </head> de JSF <body> <core:view> <core:loadBundle basename="CoursesMessages" var="bundle" /> <html:form> <html:outputText value="#{bundle.EMAIL_ADRESS_MESSAGE}"/> <html:inputText value="#{registrationbean.email}"/><br> <html:outputText value="#{bundle.PASSWORD_MESSAGE}" /> <html:inputSecret value="#{registrationbean.password}"/><br> <html:commandButton value="#{bundle.LOGIN_MESSAGE}" /> </html:form> </core:view> </body> CoursesMessages_fr.xml </html> EMAIL_ADRESS_MESSAGE = Adresse Email PASSWORD_MESSAGE = Mot de Passe LOGIN_MESSAGE = Connecter

keulkeul.blogspot.com

managedbeanviewbundle.jsp
JSF - M. Baron - Page 103

Message : Internationalisation  Exemple (bis) : formulaire qui utilise une ressource pour la localisation version JSF 1.2
<html> ... <body> <core:view> <html:form> <html:outputText value="#{bundle.EMAIL_ADRESS_MESSAGE}"/> <html:inputText value="#{registrationbean.email}"/><br> <html:outputText value="#{bundle.PASSWORD_MESSAGE}" /> <html:inputSecret value="#{registrationbean.password}"/><br> <html:commandButton value="#{bundle.LOGIN_MESSAGE}" /> </html:form> </core:view> </body> </html> keulkeul.blogspot.com <application> <resource-bundle> <base-name>resources.ApplicationMessage</base-name> <var>bundle</var> </resource-bundle> </application>

Solution pour la version 1.2 de JSF


JSF - M. Baron - Page 104

faces-config.xml

Conversion de donnes : principe  Conversion des donnes du modle et de la vue


 les paramtres d'une requte sont de type chanes de caractres  les Beans sont dfinis par des attributs reprsents par des types de donnes (int, long, Object, )  la conversion de donnes s'assurent alors qu'une chane de caractres peut tre traduit en un type de donne prcis

 Respect du formatage en entre et en sortie


 Formatage en sortie : affichage d'une date
keulkeul.blogspot.com

 Afficher la date suivant un format comprhensible par lutilisateur (fonction de la localisation et du type dutilisateur)  Conformit en entre : saisie d'une date  Associ un composant de type saisie  Assurer que lutilisateur a saisi une chane de texte respectant le format de lentre JSF - M. Baron - Page 105

Conversion de donnes : principe  Les convertisseurs de donnes sont appels Converters  Tous les composants affichant une valeur et utiliss lors de la saisie fournissent une conversion de donnes  Les converters sont utilisables dans une JSP via une balise  Pour utiliser un converter :
 soit utiliser les standards fournis par la bibliothque JSF dans une JSP  soit le dfinir programmatiquement (dans un Bean) et lutiliser dans
keulkeul.blogspot.com

une JSP

 Converters standards de la bibliothque JSF :


 core:convertDateTime : pour la conversion de date et dheure  core:convertNumber : pour la conversion de nombre
JSF - M. Baron - Page 106

Conversion de donnes : cycle de vie


Rponse Complte Requte Faces
Restore View Apply Requests Process Events
1

Rponse Complte
Process Validations Process Events

Rponse Complte
6

Rponse Complte
5

Rponse Faces
keulkeul.blogspot.com

Render Response

Process Events

Invoke Application

Process Events

Update Model Values

Erreurs de Conversion Erreurs de Conversion et / ou de Validation

JSF - M. Baron - Page 107

Conversion de donnes : cycle de vie  Dans le cas d'un composant de la famille de type UIInput (par exemple un composant html:inputText)
1 L'tape Process Validations rceptionne les valeurs des para

mtres (submittedValues) et applique les conversions


2 Si la conversion a russi, le traitement continu 

 L'tape Update Model Values modifie le modle associ (un Bean par exemple) puis conversion des valeurs du modle
5 Si la conversion a russi, continuer processus  keulkeul.blogspot.com 4 Si la conversion a chou, gnration de messages d'erreurs et 

direction tape Render Response

3 Si la conversion a chou, le traitement est abandonn (pas de 

changement de page) et des messages d'erreur sont gnrs et direction tape Render Response
6

JSF - M. Baron - Page 108

Conversion de donnes : cycle de vie  Dans le cas d'un composant de la famille de type UIOutput (par exemple composant html:outputText)
1 L'tape Process Validations et l'tape Update Model Values ne 

traitent pas de paramtres car il n'y en a pas


2 Puis conversion des attributs du modle prsents dans le Bean  5 Si la conversion a russi, continuer processus  4 Si la conversion a chou, gnration de messages d'erreur et 

direction tape Render Response


keulkeul.blogspot.com

La seconde conversion consiste s'assurer de la cohrence des donnes du modle et du format de conversion

JSF - M. Baron - Page 109

Conversion de donnes : cycle de vie (via l'API)  Tous composants qui implmentent l'interface ValueHolder peuvent exploiter des Converters (UIOutput et UIInput)  L'implmentation de l'interface ValueHolder doit fournir des proprits pour :
 Effectuer la conversion via un objet Converter  Stocker la valeur convertie par l'objet Converter  Stocker la valeur propre du composant utilise pour modifier le
keulkeul.blogspot.com

modle de la vue et fournir une donne la rponse Ensemble de mthodes (accesseurs et modifieurs) pour la manipulation de ces proprits
JSF - M. Baron - Page 110

Conversion de donnes : cycle de vie (via l'API)  Un objet Converter fournit deux mthodes :
 Object getAsObject() throws ConverterException appele lors de l'tape Process Validation  String getAsString() throws ConverterException appele aprs l'tape Update Model Values

 Dans le cas des objets UIInput les valeurs des paramtres sont stockes dans l'attribut submittedValue (interface

EditableValueHolder)
keulkeul.blogspot.com

Nous dcrirons la classe Converter au moment de la cration de notre propre converter

Par son intermdiaire la phase Process Validations peut rcuprer les valeurs qui taient issues des paramtres
JSF - M. Baron - Page 111

Conversion de donnes : cycle de vie (via l'API)  Processus de conversion par l'API
 submittedValue est convertie par getAsObject() et stocke dans

localValue (si exception de getAsObject() arrt du processus)


 Si localValue != null, sa valeur est transmise value  value transmet la valeur une proprit du modle de la vue (via un modifieur du Bean)  value rcupre la valeur d'une proprit du modle de la vue (via un accesseur du Bean)
keulkeul.blogspot.com

 Si localValue == null, value rcupre la valeur d'une proprit du modle  value est convertie par getAsString() et envoye la rponse (si exception de getAsString() arrt du processus
JSF - M. Baron - Page 112

Conversion de donnes : tag convertNumber  La balise core:convertNumber permet la conversion de chanes de caractres en valeur numrique  utiliser dans le corps dune balise graphique JSF  Diffrents attributs disponibles
 type : type de valeur (number, currency ou percent)  pattern : motif de formatage  (max/min)FractionDigits : (int) nombre maxi/mini sur la dcimale  (max/min)IntegerDigits : (int) nombre maxi/mini sur la partie entire  integerOnly : (boolen) seule la partie entire est prise en compte
keulkeul.blogspot.com

 groupingUsed : (boolen) prcise si les caractres de regroupement sont utiliss (exemple : , , ; , : , )  locale : dfinit la localisation de la conversion  currencyCode : code de la monnaie utilise pour la conversion  currencySymbol : spcifie le caractre (exclusif avec currencyCode)
JSF - M. Baron - Page 113

Conversion de donnes : tag convertNumber  Exemple : utilisation dun converter en sortie


<html> converters1.jsp du ... projet Converters <body> <core:view> <html:form> <html:outputText value="#{beanconverter1.price}"> <core:convertNumber type="currency" currencyCode="EUR" minFractionDigits="4" /> </html:outputText> </html:form> </core:view> public class BeanConverter1 { </body> private double price; </html> public BeanConverter1() { this.price = 50.50d; } public double getPrice() { return price; } public void setPrice(double pPrice) { this.price = pPrice; } }

keulkeul.blogspot.com

BeanConverter1 du projet Converters

JSF - M. Baron - Page 114

Conversion de donnes : tag convertNumber  Exemple (suite) : utilisation dun converter en entre
<html> ... <body> <core:view> <html:form> Prix : <html:intputText value="#{beanconverter1.price}" > <core:convertNumber minFractionDigits="2" /> </html:inputText><br> <html:commandButton value="Envoyer" /> </html:form> </core:view> </body> </html> keulkeul.blogspot.com

Aprs la conversion

converters2.jsp du projet Converters

Avant la conversion, au moment de la saisie

JSF - M. Baron - Page 115

Conversion de donnes : tag convertDateTime  La balise core:convertDateTime permet la conversion de chanes de caractres en date ou heure  utiliser galement dans le corps dune balise graphique JSF
<html:outputText value="#{packageBean.facturedate}"> <core:convertDateTime type="date" dateStyle="long"/> </html:outputText>

 Diffrents attributs disponibles


 type : type de valeur (date, time ou both)
keulkeul.blogspot.com

 dateStyle : style possible de la date (short, medium, long, full, both)  timeStyle : style possible de lheure (short, medium, long, full, both)  Pattern : motif utilis pour une Date  Locale : choix de la localisation
JSF - M. Baron - Page 116

Conversion de donnes : tag convertDateTime  Exemple : utilisation dun converter date en entre
... <body> converters3.jsp du <core:view> projet Converters <html:form> <html:outputText value="Nom : " /> <html:inputText value="#{beanconverter2.name}" /><br> <html:outputText value="Nombre de tickets : " /> <html:inputText value="#{beanconverter2.tickets}" > <core:convertNumber type="number" integerOnly="true" /> </html:inputText><br> <html:outputText value="Date : " /> <html:inputText value="#{beanconverter2.date}"> <core:convertDateTime type="date" dateStyle="medium" /> </html:inputText> <html:commandButton value="Valider" /> </html:form> </core:view> </body> </html>

keulkeul.blogspot.com

JSF - M. Baron - Page 117

Conversion de donnes : tag convertDateTime  Exemple (suite) : utilisation dun converter Date en entre
public class BeanConverter2 { private long tickets; private String name; private Date date; public BeanConverter2() { tickets = 50; name = "Mon Nom"; date = new Date(); } public long getTickets() { return tickets; } public void setTickets(long pTickets) { tickets = pTickets; } public String getName() { return name; } public void setName(String pName) { name = pName; } public Date getDate() { return date; } public void setDate(Date pDate) { date = pDate; } }

keulkeul.blogspot.com

BeanConverter2.java du projet Converters

JSF - M. Baron - Page 118

Conversion de donnes : messages  Dans le cas o des erreurs de conversion sont provoques, des messages sont ajouts au FacesContext  En utilisant les balises html:message et html:messages possibilit d'afficher un message prcis ou l'ensemble  Gnralement chaque composant est associ un id, ce qui permettra de localiser prcisment l'origine de l'erreur  Exemple :
keulkeul.blogspot.com

Converters2.jsp du projet Converters

... <html:outputText value="Prix : " /> <html:intputText id="priceId" value="#{beanconverter1.price}" > <core:convertNumber minFractionDigits="2" /> </html:inputText><html:message for="priceId" /><br> <html:commandButton value="Envoyer" /> ...
JSF - M. Baron - Page 119

Conversion de donnes : messages  Exemple : converter date en entre avec messages


... <core:view> converters3.jsp du <html:form> projet Converters <html:outputText value="Nom : " /> <html:inputText value="#{beanconverter2.name}" /><br> <html:outputText value="Nombre de tickets : " /> <html:inputText id="ticketsId" value="#{beanconverter2.tickets}" > <core:convertNumber type="number" integerOnly="true" /> </html:inputText><html:message for="ticketsId" /><br> <html:outputText value="Date : " /> <html:inputText id="dateId" value="#{beanconverter2.date}"> <core:convertDateTime type="date" dateStyle="medium" /> </html:inputText><html:message for="dateId" /><br> <html:outputText value="Liste des messages : " /><br> <html:messages /> <html:commandButton value="Valider" /> </html:form> </core:view> </body> </html>

keulkeul.blogspot.com

JSF - M. Baron - Page 120

Conversion de donnes : messages personnaliss  Les messages sont dclars par des cls stockes dans un fichier ressource dont le nom dpend de la localisation  Les fichiers ressources (fichier au format properties) sont stocks dans le rpertoire javax.faces de la librairie implmentation de JSF (myfaces-impl-1.x.x.jar)  Pour modifier un message pour un converter donn
keulkeul.blogspot.com

 Crer un fichier properties dans le rpertoire source  Dclarer le fichier properties dans le faces-config.xml  Copier les cls redfinir  Modifier la valeur du texte dans les cls
JSF - M. Baron - Page 121

Conversion de donnes : messages personnaliss  Exemple : modification des messages d'erreurs de conversion
... <application> <messsage-bundle>beanPackage.MyMessages</message-bundle> </application> </faces-config>

faces-config.xml du projet Converters

... javax.faces.convert.NumberConverter.CONVERSION = Problme pour le champs "Nombre de tickets" Javax.faces.convert.NumberConverter.CONVERSION_detail = "{0}" : La donne n'est pas un nombre valide ...
*.html, *.jsp, ...

keulkeul.blogspot.com

WEB-INF MyApp

web.xml faces-config.xml

MyMessages.properties

classes

MyMessages.properties

JSF - M. Baron - Page 122

Conversion de donnes : attribut immediate  Rappelons que toute requte JSF passe obligatoirement par un traitement dfini par le cycle de vie JSF  La conversion de donnes est obligatoirement traite par le cycle de vie JSF mme si par exemple une requte donne nest pas de valider un formulaire (annuler le traitement)  Si une requte est dannuler la saisie du formulaire (redirection vers une autre page), le processus effectuera toujours la conversion de donnes de tous les composants dune vue JSF
keulkeul.blogspot.com

 Il peut donc tre utile de passer outre le processus de conversion : utilisation de lattribut immediate pour une balise de composant qui doit soumettre le formulaire  La prsence de lattribut immediate (valeur true) modifie le droulement du cycle de vie dune requte JSF JSF - M. Baron - Page 123

Conversion de donnes : attribut immediate  Le composant pass immediate sera gr en premier dans le cycle de vie  Le fonctionnement donn ci-dessous ne concerne que les composants de type Command (CommandButton par exemple)
 Aprs la phase Apply Request Values, le traitement de la requte va tre redirig directement vers Render Response  De cette manire les phases Process Validations, Update Model Values, Invoke Application ne sont pas excutes

 Il ny a donc pas de conversion, ni de modification dans le modle


keulkeul.blogspot.com

 Les diffrentes saisies de lutilisateur ne sont jamais traites et il ny a donc pas derreurs qui pourraient bloques lutilisateur Une explication dtaille de leffet de bord de
immediate (composant Input et Command) est donne dans la partie vnement JSF - M. Baron - Page
124

Conversion de donnes : attribut immediate


Rponse Complte Requte Faces
Restore View Apply Requests Process Events Process Validations Quand immediate == true Rponse Complte Invoke Application Process Events Update Model Values

Rponse Complte
Process Events

Rponse Complte Rponse Faces


keulkeul.blogspot.com

Render Response

Process Events

Erreurs de Conversion Cycle de vie valable ssi le Erreurs de Conversion composant concern par lattribut immediate est de type Commandet / ou de Validation
JSF - M. Baron - Page 125

Conversion de donnes : attribut immediate  Exemple : passer outre le processus de conversion


Les problmes de conversion ne sont pas pris en compte

keulkeul.blogspot.com

Les problmes de conversion sont pris en compte. Obligation de saisir correctement les donnes pour annuler
JSF - M. Baron - Page 126

Conversion de donnes : attribut immediate  Exemple (suite) : passer outre le processus de conversion
... <core:view> <html:form> ... <html:outputText value="Date : " /> <html:inputText id="dateId" value="#{beanconverter2.date}"> <core:convertDateTime type="date" dateStyle="medium" /> </html:inputText><html:message for="dateId" /><br> <html:outputText value="Liste des messages : " /><br> <html:messages /> <html:commandButton value="Valider" /> <html:commandButton value="Annuler (sans immediate)" action="CancelAction" /> <html:commandButton value="Annuler (avec immediate)" action="CancelAction" immediate="true" /> </html:form> <faces-config> </core:view> <navigation-rule> <from-view-id>*</from-view-id> <navigation-case> convertersImmadiate.jsp <from-outcome>CancelAction</from-outcome> <to-view-id>/index.jsp</to-view-id> du projet Converters </navigation-case> </navigation-rule> ... </faces-config> faces-config.xml du

keulkeul.blogspot.com

projet Converters

JSF - M. Baron - Page 127

Conversion de donnes : conversion personnalise  Pour bientt


 Ralisation de son propre Converter

keulkeul.blogspot.com

JSF - M. Baron - Page 128

Validation de donnes : principe  Lobjectif de la validation de donnes est de sassurer que les informations qui ont t converties sont valides  Les objets utiliss pour la validation sont appels Validators  Tous les composants utiliss pour la saisie de donnes peuvent exploiter des Validators  Pourquoi utiliser des Validators (vrification de surface et de fond) ?
 vrifier la prsence de donnes
keulkeul.blogspot.com

 vrifier le contenu dune donnes  vrifier la plage de valeurs (entier compris entre 20 et 50)  vrifier le format dune donne 
JSF - M. Baron - Page 129

Validation de donnes : cycle de vie


Rponse Complte Requte Faces
Restore View Apply Requests Process Events
1

Rponse Complte
Process Validations Process Events

Rponse Complte
6

Rponse Complte
Invoke Application Process Events Update Model Values
2

Rponse Faces
keulkeul.blogspot.com

Render Response

Process Events

Erreurs de Conversion Erreurs de Conversion et / ou de Validation

JSF - M. Baron - Page 130

Validation de donnes : cycle de vie  Composant de la famille de type UIInput (droulement proche du processus de conversion)
1 L'tape Process Validations rceptionne les valeurs des paramtres 

(submittedValues), applique les conversions et validations


2 Si la conversion et/ou la validation ont russi, le traitement continu 

 Voir partie conversion pour dtail de la suite  Si la conversion et/ou la valiation ont chou, le traitement est abandonn (pas de changement de page) et des messages d'erreur
keulkeul.blogspot.com

sont gnrs et direction tape Render Response De nombreux dtails ont t repris de la partie Converters, pour les aspects manquants (message, immediate ) sy rfrer

JSF - M. Baron - Page 131

Validation de donnes : cycle de vie (via lAPI)  Les composants implmentant l'interface EditableValueHolder peuvent exploiter des Validators (UIInput)  EditableValueHolder est une sous interface de ValueHolder  Un objet EditableValueHolder fourni les proprits pour ajouter un objet Validator et stocker ltat de validation  Un objet Validator fournit une mthode
keulkeul.blogspot.com

 validate(FacesContext ct, UIComponent component, Object value)

throws ValidatorException : en charge deffectuer la validation


Note : sil existe une erreur de validation, lancer une exception de type ValidatorException
JSF - M. Baron - Page 132

Validation de donnes : principe dutilisation  Pour utiliser un Validator


 soit utiliser les standards fournis par la bibliothque JSF  soit dfinir programmatiquement (dans un Bean)

 Utiliser les standards fournis


 core:validateDoubleRange : valide les donnes de type Double  core:validateLongRange : valide les donnes de type Long  core:validateLength : valide la longueur de type Integer
keulkeul.blogspot.com

 Dans tous les cas, ces balises fournissent trois attributs


 maximum : valeur maximale  minimum : valeur minimale  binding : value une instance du validator en question
JSF - M. Baron - Page 133

Validation de donnes : validators standards  Exemple : un formulaire, des champs et des validators
... <html:form> <p> <html:outputText value="Veuillez saisir votre numro de compte (10 chiffres) : " /> <html:inputText id="compteId" value="#{validatorbean.compte}" > <core:validateLength maximum="10" minimum="10" /> </html:inputText><html:message for="compteId" /> </p> <p> <html:outputText value="Veuillez saisir votre taille (comprise entre 1.2 et 2.0) : " /> <html:inputText id="tailleId" value="#{validatorbean.taille}" > <core:validateDoubleRange maximum="2.80" minimum="1.20"/> </html:inputText><html:message for="tailleId" /><br> <html:commandButton value="Envoyer" /> </p> </html:form> ...

keulkeul.blogspot.com

standardvalidator.jsp du projet Validators

JSF - M. Baron - Page 134

Validation de donnes : validators personnaliss  Nous avons vu que JSF proposait en standard un ensemble restreint de Validators  Il peut tre intressant de pouvoir dvelopper ses propres Validators  JSF offre la possibilit de dfinir programmatiquement les validators souhaits en utilisant des classes Java  Deux approches de mise en uvre sont distinguer :
keulkeul.blogspot.com

 Utilisation de la balise <core:validator>  Utilisation de lattribut validator

 Rappelons que la mise en place de validators ne concerne que les composants de type UIInput
JSF - M. Baron - Page 135

Validation de donnes : validators personnaliss  Lutilisation dune balise pour lier un validator un composant passe par limplmentation de linterface Validator  Un objet Validator fournit une mthode
 validate(FacesContext ct, UIComponent cp, Object value) throws ValidatorException : en charge deffectuer la validation  ct : permet daccder au contexte de lapplication JSF  cp : rfrence sur le composant dont la donne est valider  value : la valeur de la donne
keulkeul.blogspot.com

 Lexception permet dindiquer si la validation ne sest pas correctement passe  Si exception dclenche, au dveloppeur prendre en charge les messages retourner via lobjet FacesContext
JSF - M. Baron - Page 136

Validation de donnes : validators personnaliss  Pour utiliser une classe de type Validator, il faut la dclarer dans le fichier de configuration faces-config.xml  Il faut identifier dans la balise validator la classe utilise pour implmenter le Validator
<validator> <validator-id>myValidatorId</validator-id> <validator-class>beanPackage.MyValidator</validator-class> </validator>

keulkeul.blogspot.com

 Pour utiliser le validator dans une page JSP, il faut utiliser la balise <validator> dans le corps dun composant JSF
<html:inputText value="#{...}" ... > <core:validator validatorId="myValidatorId" /> </html:inputText>
JSF - M. Baron - Page 137

Validation de donnes : validators personnaliss  Exemple : utilisation de la balise <core:validator>


public class PersoValidator implements Validator { public void validate(FacesContext fc, UIComponent comp, Object ref) throws ValidatorException { String myValue = null; if (fc == null || comp == null || ref == null) { throw new NullPointerException(); } myValue = ref.toString();

PersoValidator.java du projet Validators

keulkeul.blogspot.com

final String magicNumber = "123456789"; if (!myValue.equals(magicNumber)) { throw new ValidatorException(new FacesMessage( FacesMessage.SEVERITY_ERROR, "Problme de validation", "numro magique erron")); } } } ...

faces-config.xml du

<validator> projet Validators <validator-id>myValidatorId</validator-id> <validator-class>beanPackage.PersoValidator</validator-class> </validator> </faces-config> JSF - M. Baron - Page 138

Validation de donnes : validators personnaliss  Exemple (suite) : utilisation de la balise <core:validator>


<core:view> <h4><html:outputText value="Utilisation d'un validator personnalis : balise validator" /></h4> <html:form> <p> <html:outputText value="Veuillez saisir votre numro magique (10 chiffres) : " /> <html:inputText id="compteId" value="#{persobean.magicnumber}" > <core:validator validatorId="persoValidatorId"/> </html:inputText><html:message for="compteId" showDetail="true" showSummary="true"/> </p> <p> persotagvalidator.jsp du <html:commandButton value="Envoyer" /> projet Validators </p> </html:form> </core:view>

keulkeul.blogspot.com

JSF - M. Baron - Page 139

Validation de donnes : validators personnaliss  Lutilisation de lattribut validator du composant UIInput valider sappuie sur lutilisation dun Bean  Il faut donc fournir lattribut validator une expression qui dsigne la mthode de validation
<html:inputText value="#{...}" validator="#{myVal.validate}" ... </html:inputText> ... >

 Le nom de la mthode nest pas impos, toutefois elle devra


keulkeul.blogspot.com

respecter la signature de la mthode validate() de linterface

Validator
 Linconvnient de cette approche est quelle est fortement lie lapplication et il devient difficile de rutiliser le validator
JSF - M. Baron - Page 140

Validation de donnes : validators personnaliss  Exemple : utilisation de lattribut validator


public class PersoBeanValidator { private String magicNumber; public String getMagicnumber() { return magicNumber; } public void setMagicnumber(String magicNumber) { this.magicNumber = magicNumber; }

PersoBeanValidator.java du projet Validators

public void validatePerso(FacesContext fc, UIComponent comp, Object ref) throws ValidatorException { String myValue = null; if (fc == null || comp == null || ref == null) { throw new NullPointerException(); } myValue = ref.toString(); final String magicNumber = "123456789"; if (!myValue.equals(magicNumber)) { throw new ValidatorException(new FacesMessage( FacesMessage.SEVERITY_ERROR, "Problme de validation", "numro magique erron")); } } }

keulkeul.blogspot.com

JSF - M. Baron - Page 141

Validation de donnes : validators personnaliss  Exemple (suite) : utilisation de lattribut validator


<core:view> <h4><html:outputText value="Utilisation d'un validator personnalis : attribut validator" /></h4> <html:form> <p><html:outputText value="Veuillez saisir votre numro magique (10 chiffres) : " /> <html:inputText id="compteId" value="#{persobeanvalidator.magicnumber}" validator="#{persobeanvalidator.validatePerso}" /> <html:message for="compteId" showDetail="true" showSummary="true"/> </p> <p><html:commandButton value="Envoyer" /></p> </html:form> </core:view>

keulkeul.blogspot.com

persoattributvalidator.jsp du projet Validators

JSF - M. Baron - Page 142

Conversion et Validation de donnes : criture balises  Pour bientt


 Ecriture de ses propres balises pour la conversion et la validation

keulkeul.blogspot.com

JSF - M. Baron - Page 143

La gestion des vnements : gnralits  JSF fournit un mcanisme dvnements se rapprochant des modles de gestion dvnements des API Swing et SWT  Certains composants JSF peuvent mettre des vnements
 Cest une source

 Des objets peuvent recevoir des vnements


 Ce sont des couteurs (listeners en anglais)

 Le mcanisme dvnements est fond sur la notion dabonnement entre une source et un couteur
keulkeul.blogspot.com

 LAPI JSF fournit deux types dvnements


 Changement de valeur (ValueChangeEvent) : mis lors du changement de la valeur dun composant de type UIInput  Li une action (ActionEvent) : mis lors dune action sur un composant de type UICommand JSF - M. Baron - Page 144

La gestion des vnements : cycle de vie


Rponse Complte Requte Faces
Restore View Apply Requests Process Events Les ValueChangeListeners sont notifis Process Validations

Rponse Complte
Process Events

Rponse Complte Rponse Faces


keulkeul.blogspot.com

Rponse Complte
Invoke Application Process Events Update Model Values

Render Response

Process Events

Les ActionListeners sont notifis

Erreurs de Conversion Erreurs de Conversion et / ou de Validation


JSF - M. Baron - Page 145

La gestion des vnements : cycle de vie  Les couteurs sont notifis partir du moment o
 la valeur du composant change  le formulaire encapsulant le composant doit tre soumis

 La notification intervient diffrent endroit du cycle de vie  Pour les listeners de type ValueChangeListener la notification se produit aprs la phase de Process Validations  Pour les listeners de type ActionListener la notification se produit aprs la phase de Invoke Application
keulkeul.blogspot.com

 Le traitement dun couteur peut affecter le cycle de vie


 Laisser le cycle de vie se drouler normalement  Passer les diffrentes phases jusqu celle de Render Response via un appel FacesContext.renderResponse()  Passer toutes les phases via FacesContext.responseComplete()
JSF - M. Baron - Page 146

La gestion des vnements : gnralits  Deux approches sont exploitables pour abonner un couteur un composant JSF (type UIInput ou UICommand)
 utiliser un attribut (valueChangeListener ou actionListener) de la balise du composant JSF
<html:inputText onchange="submit()" value="#{databean.name}" valueChangeListener="#{databean.inputChangement}" />

Lattribut valueChangeListener prcise une mthode appele si le listener est dclench

 utiliser une balise de CORE (core:valueChangeListener ou


keulkeul.blogspot.com

core:actionListener) dans le corps du composant JSF


<html:inputText onchange="submit()" value="#{databean.name}" > <core:valueChangeListener type="beanPackage.InputTextChangeListener" /> </html>

Cette classe contient une mthode qui est appele si le listener est dclench

JSF - M. Baron - Page 147

La gestion des vnements : gnralits  Dans les deux cas, il faut fournir les mthodes qui seront appeles lors du dclenchement des couteurs  Dans le cas de lattribut une mthode doit tre fournie dans le Bean (ici inputChangement) avec en paramtre le type dvnement traiter (ValueChangeEvent ou ActionEvent)  Dans le cas de la balise une classe implmentant linterface

ValueChangeListener ou ActionListener doit tre fournie


keulkeul.blogspot.com

 A noter quil est possible quun Bean (au sens qui stocke des valeurs du paramtres) peut implmenter les interfaces des listeners  Exemples pour chacun des couteurs
JSF - M. Baron - Page 148

La gestion des vnements : changement de valeur  Les vnements associs au changement de valeur sont dclenchs quand une valeur dun composant est modifi (si la valeur est identique pas de dclenchement)  Lvnement transmis est de type ValueChangeEvent
 UIComponent getComponent() : renvoie la source  Object getNewValue() : retourne la nouvelle valeur  Object getOldValue() : retourne lancienne valeur 

 Prciser un couteur de type ValueChangeListener


keulkeul.blogspot.com

 par lattribut valueChangeListener (sa valeur est une mthode)  par la balise valueChangeListener (sa valeur est une classe)

 Implmentation de linterface ValueChangeListener


 void processValueChange(ValueChangeEvent) : mthode qui traite le changement de valeur JSF - M. Baron - Page 149

La gestion des vnements : changement de valeur  Exemple : abonnement via un attribut


<html:form> <p> <html:outputText value="Veuillez saisir votre nom : " /> <html:inputText onchange="submit()" value="#{databean.name}" valueChangeListener="#{databean.inputChangement}" /> </p> <p> <html:outputText value="Choisissez votre priphrique : " /> <html:selectOneMenu onchange="submit()" value="#{databean.oneMenuValue}" valueChangeListener="#{databean.selectChangement}"> <core:selectItems value="#{databean.manyCheckBoxItems}" /> </html:selectOneMenu> </p> </html:form>

keulkeul.blogspot.com

valueChangeListenerAttribut.jsp du projet Event

JSF - M. Baron - Page 150

La gestion des vnements : changement de valeur  Exemple (suite) : abonnement via un attribut
public class DataBean { private String menuValue; private String name= ""; ... public void inputChangement(ValueChangeEvent event) { System.out.println("InputText"); System.out.println(event.getOldValue()); System.out.println(event.getNewValue()); System.out.println(event.getComponent().getClass()); } public void selectChangement(ValueChangeEvent event) { System.out.println("SelectOneMenu"); System.out.println(event.getOldValue()); System.out.println(event.getNewValue()); System.out.println(event.getComponent().getClass()); } }

keulkeul.blogspot.com

DataBean.java du projet Event


JSF - M. Baron - Page 151

La gestion des vnements : changement de valeur  Exemple : abonnement via une balise
<html:form> <p>

<html:outputText value="Veuillez saisir votre nom : " />


<html:inputText onchange="submit()" value="#{databean.name}" > <core:valueChangeListener type="beanPackage.InputTextChangeListener"/> </html:inputText> </p> <p> <html:outputText value="Choisissez votre priphrique : " /> <html:selectOneMenu onchange="submit()" value="#{databean.oneMenuValue}" > <core:valueChangeListener type="beanPackage.SelectOneMenuListener" /> <core:selectItems value="#{databean.manyCheckBoxItems}" /> </html:selectOneMenu> </p> </html:form>

keulkeul.blogspot.com

valueChangeListenerTag.jsp du projet Event

JSF - M. Baron - Page 152

La gestion des vnements : changement de valeur  Exemple (suite) : abonnement via une balise
public class InputTextChangeListener implements ValueChangeListener { public void processValueChange(ValueChangeEvent event) throws AbortProcessingException { System.out.println("InputText"); System.out.println(event.getOldValue()); System.out.println(event.getNewValue()); System.out.println(event.getComponent().getClass()); } }

SelectOneMenuListener.java du projet Event


keulkeul.blogspot.com

InputTextChangeListener.java du projet Event

public class SelectOneMenuListener implements ValueChangeListener { public void processValueChange(ValueChangeEvent event) throws AbortProcessingException { System.out.println("SelectOneMenu"); } }

JSF - M. Baron - Page 153

La gestion des vnements : changement de valeur  Exemple : abonnement via une balise et un attribut
<html:form> valueChangeListenerTagBis.jsp du <p> <html:outputText value="Veuillez saisir votre nom : " /> projet Event <html:inputText onchange="submit()" value="#{mixdatabean.name}" valueChangeListener="#{mixdatabean.inputChangement}" /> </p> <p> <html:outputText value="Choisissez votre priphrique : " /> <html:selectOneMenu onchange="submit()" value="#{mixdatabean.oneMenuValue}" > <core:valueChangeListener type="beanPackage.DataBeanBis" /> <core:selectItems value="#{mixdatabean.manyCheckBoxItems}" /> </html:selectOneMenu> </p> public class DataBeanBis implements ValueChangeListener { </html:form> ... public void inputChangement(ValueChangeEvent event) { System.out.println("InputText"); System.out.println(event.getOldValue()); System.out.println(event.getNewValue()); System.out.println(event.getComponent().getClass()); } DataBeanBis.java public void processValueChange(ValueChangeEvent event) throws AbortProcessingException { du projet Event System.out.println("SelectOneMenu"); } }

keulkeul.blogspot.com

JSF - M. Baron - Page 154

La gestion des vnements : actions  Les vnements associs aux actions sont dclenchs quand des cliques sur des boutons ou des liens sont raliss  Lvnement transmis est de type ActionEvent
 UIComponent getComponent() : renvoie la source 

 Prciser un couteur de type ActionListener


 par lattribut actionListener (sa valeur est une mthode)
keulkeul.blogspot.com

 par la balise actionListener (sa valeur est une classe)

 Implmentation de linterface ActionListener


 void processAction(ActionEvent) : mthode qui traite laction
JSF - M. Baron - Page 155

La gestion des vnements : actions  Exemple : quatre saisons (abonnement via attribut)
<html:form> <h1><html:outputText value="Quatre Saisons ... " /></h1> <html:panelGrid columns="2" >

actionListenerAttribut.jsp du projet Event

<html:commandButton disabled="false" value="Hivers" id="Hivers" binding="#{saisonbean.hivers}" actionListener="#{saisonbean.traiterHivers}"/> <html:commandButton disabled="true" value="Printemps" id="Printemps" binding="#{saisonbean.printemps}" actionListener="#{saisonbean.traiterPrintemps}"/> <html:commandButton disabled="true" value="Et" id="Ete" binding="#{saisonbean.ete}" actionListener="#{saisonbean.traiterEteAutomne}"/> <html:commandButton disabled="true" value="Automne" id="Automne" binding="#{saisonbean.automne}" actionListener="#{saisonbean.traiterEteAutomne}" /> </html:panelGrid> </html:form>

keulkeul.blogspot.com

JSF - M. Baron - Page 156

La gestion des vnements : actions  Exemple (suite) : quatre saisons (abonnement via attribut)
public class SaisonBean { public void traiterHivers(ActionEvent e) { hivers.setDisabled(true); printemps.setDisabled(false); } public void traiterPrintemps(ActionEvent e) { printemps.setDisabled(true); ete.setDisabled(false); } public void traiterEteAutomne(ActionEvent e) { String id = e.getComponent().getId(); if (id.equals("Ete")) { automne.setDisabled(false); ete.setDisabled(true); } if (id.equals("Automne")) { automne.setDisabled(true); hivers.setDisabled(false); } } public HtmlCommandButton getAutomne() { return automne; } public void setAutomne(HtmlCommandButton automne) { this.automne = automne; } ... }

SaisonBean.java du projet Event

keulkeul.blogspot.com

JSF - M. Baron - Page 157

La gestion des vnements : actions  Exemple : des liens (abonnement par balise)
<html:form> actionListenerTag.jsp du projet <h1><html:outputText value="Des liens ..." /></h1> Event <html:commandLink value="Confirmer" id="confirmer"> <core:actionListener type="beanPackage.ActionBean" /> </html:commandLink> <html:commandLink value="Annuler" id="annuler"> <core:actionListener type="beanPackage.ActionBean" /> </html:commandLink> </html:form>
public class ActionBean implements ActionListener { public void processAction(ActionEvent event) throws AbortProcessingException { String id = event.getComponent().getId(); if (id.equals("confirmer")) { System.out.println("Action Confirmation"); } if (id.equals("annuler")) { System.out.println("Action Annulation"); } } }

keulkeul.blogspot.com

ActionBean.java du projet Event


JSF - M. Baron - Page 158

La gestion des vnements : immediate  Rappelons la position de dclenchement des vnements dans le cycle de vie JSF
 ValueChangeEvent aprs la phase de Process Validations  ActionEvent aprs la phase Invoke Application

 Toutefois, il serait intressant de pouvoir dclencher ces vnements juste aprs la phase Apply Request  Pourquoi, quel est lintrt de dclencher des vnements immdiatement ?
keulkeul.blogspot.com

 Dclencher les vnements dun composant avant tous les vnements des autres composants  Court-circuiter le processus de cycle de vie pour dsactiver ou pas la conversion et la validation des autres composants
JSF - M. Baron - Page 159

La gestion des vnements : immediate


ValueChangeEvent immdiat: Conversion et Validation puis les ValueChangeListener sont notifis ActionEvent immdiat : les ActionListener sont notifis Rponse Complte
Process Events Process Validations

Rponse Complte
Process Events

Requte Faces

Restore View

Apply Requests

Rponse Complte
keulkeul.blogspot.com

Rponse Complte
Invoke Application Process Events Update Model Values

Rponse Faces

Render Response

Process Events

Erreurs de Conversion Erreurs de Conversion et / ou de Validation


JSF - M. Baron - Page 160

La gestion des vnements : immediate  Pour dclencher des vnements immdiatement, il faut modifier la valeur de lattribut immediate true  Si un composant de saisie un dclenchement immdiat
 la conversion et la validation sont ralises aprs la phase Apply Request Values  les ValueChangeListener sont ensuite dclenchs  le cycle de vie continue sa progression (phase Process Validations)  Pour le stopper appel explicite renderResponse() de FacesContext

 Si un composant de command un dclenchement immdiat


keulkeul.blogspot.com

 les ActionListener sont dclenchs  le cycle de vie est court-circuit car appel implicite RenderResponse (FacesContext)

 Il est noter que le dernier cas a dj t rencontr dans la partie Conversion des donnes JSF - M. Baron - Page 161

La gestion des vnements : immediate  Exemple : changement de localisation sans validation

Ecran de dmarrage

Si validation via le bouton de soumission, le champ Tlphone notifie dune erreur de saisie
keulkeul.blogspot.com

Si changement de localisation (composant SelectOneMenu) avec lattribut immediate true, la validation nest pas effectue

JSF - M. Baron - Page 162

La gestion des vnements : immediate  Exemple (suite) : changement de localisation sans validation
<core:view> <core:loadBundle basename="EventMessages" var="bundle" /> <html:form> <p> <html:outputText value="#{bundle.PHONE_NUMBER_MESSAGE}"/> <html:inputText id="priceId" value="#{selectimmediate.phonenumber}" > <core:validateLength minimum="10" maximum="10"/> </html:inputText><html:message for="priceId" /> </p> <p> <html:outputText value="#{bundle.COUNTRY_MESSAGE}"/> <html:selectOneMenu onchange="submit()" immediate="true" valueChangeListener="#{selectimmediate.countryChanged}" value="#{selectimmediate.countryValue}" > <core:selectItems value="#{selectimmediate.countryNames}" /> </html:selectOneMenu> </p> <p> <html:commandButton value="#{bundle.VALID_MESSAGE}"/> </p> immediateAttribut.jsp du projet </html:form> </core:view> Event

keulkeul.blogspot.com

JSF - M. Baron - Page 163

La gestion des vnements : immediate  Exemple (suite) : changement de localisation sans validation
public class DataBeanSelectImmediate { private static final String FRENCH_COUNTRY_NAME = "Franais"; private static final String ENGLISH_COUNTRY_NAME = "English"; private SelectItem[] countryNames = new SelectItem[] { new SelectItem(FRENCH_COUNTRY_NAME), new SelectItem(ENGLISH_COUNTRY_NAME) };

public void System.out.println("DataBeanSelectImmediate.countryChanged()"); FacesContext current = FacesContext.getCurrentInstance(); if (FRENCH_COUNTRY_NAME.equals(e.getNewValue())) { current.getViewRoot().setLocale(Locale.FRENCH); } else { current.getViewRoot().setLocale(Locale.ENGLISH); } current.renderResponse(); }

DataBeanSelectImmediate.java du projet Event countryChanged(ValueChangeEvent e) {

keulkeul.blogspot.com

Court-circuite le cycle de vie par un appel explicite Ne traite pas les autres composants JSF (pas de conversion ni validation)

EventMessages_fr.properties du projet Event


PHONE_NUMBER_MESSAGE = Tlphone COUNTRY_MESSAGE = Pays VALID_MESSAGE = Valider

JSF - M. Baron - Page 164

La gestion des vnements : cycle de vie  Avant et aprs chaque phase du cycle de vie JSF, des vnements de type PhaseEvent sont dclenchs  Labonnement peut tre utile lors de phases de dboguage  Le traitement des PhaseEvent est ralis par un objet de type PhaseListener  Labonnement se fait via le fichier de configuration JSF en dclarant le nom de la classe qui implmente PhaseListener
keulkeul.blogspot.com

 Modification du fichier faces-config.xml


 Ajouter la balise <lifecycle> et la sous balise <phase-listener>  Prciser le nom de la classe de type PhaseListener
JSF - M. Baron - Page 165

La gestion des vnements : cycle de vie  Evnement PhaseEvent


 getFacesContext() : retourne linstance du FacesContext pour la requte en cours de traitement  getPhaseId() : retourne lID de la phase du cycle de vie en cours de traitement

 Ecouteur PhaseListener
 afterPhase(PhaseEvent) : appele quand une phase du cycle de vie se termine  beforePhase(PhaseEvent) : appele avant le dmarrage dune phase du cycle de vie  PhaseId getPhaseId() : retourne un objet PhaseId permettant didentifier le listener la phase

keulkeul.blogspot.com

 La classe PhaseId dfinit un ensemble de constantes permettant didentifier les diffrentes phases du cycle de vie JSF - M. Baron - Page 166

La gestion des vnements : cycle de vie  Exemple : traiter les vnements de toutes les phases
<faces-config> ... faces-config.xml du projet Event <lifecycle> <phase-listener>beanPackage.LifeCycleListener</phase-listener> </lifecycle> </faces-config> public class LifeCycleListener implements PhaseListener { public void afterPhase(PhaseEvent phaseEvent) { System.out.println("LifeCycleListener.afterPhase()" + phaseEvent.getPhaseId()); } public void beforePhase(PhaseEvent phaseEvent) { System.out.println("LifeCycleListener.beforePhase()" + phaseEvent.getPhaseId()); } public PhaseId getPhaseId() { return PhaseId.ANY_PHASE; }

keulkeul.blogspot.com

LifeCycleListener.java du projet Event

JSF - M. Baron - Page 167

Composants additionnels : Apache Tomahawk  La spcification JSF dcrit un ensemble de composants qui ont t implments entre autre par Apache MyFaces  Ces composants sont l'utilisation trs limits au niveau interaction  Apache a donc fourni la bibliothque Tomahawk dont l'objectif est d'ajouter des fonctionnalits supplmentaires
 http://myfaces.apache.org/tomahawk

 Cette bibliothque fournit


 Des composants graphiques (extension html)
keulkeul.blogspot.com

 Des composants fonctionnels (extension core)  Des validators  Et pleins d'autres choses A voir galement Tabago qui est une autre bibliothque de composants
http://myfaces.apache.org/tobago
JSF - M. Baron - Page 168

 Adresse dexemples
 http://www.irian.at/myfaces

Apache Tomahawk : composants graphiques

JSCook Menu Popup Tree 2

keulkeul.blogspot.com

TabbedPane

Calendar
JSF - M. Baron - Page 169

Apache Tomahawk : composants graphiques (suite)


Extended Data Table

HtmlEditor

keulkeul.blogspot.com

Data Scroller Tree Table


JSF - M. Baron - Page 170

Apache Tomahawk : composants graphiques (suite)

Panel Navigation 2

Schedule

Panel Navigation

keulkeul.blogspot.com

JSF - M. Baron - Page 171

Apache Tomahawk : Validators  Tomahawk fournit galement des validators complmentaires ceux fournis par la spcification JSF  validateCreditCard
 Pour valider un numro de carte de crdit  Permet de choisir la marque (parmi amex, visa, mastercard, discover)

 validateUrl
 Pour valider une URL

 validateEmail
 Pour valider une adresse lectronique
keulkeul.blogspot.com

 validateRegExpr  Pour valider des expressions rgulires


<html:inputText id="regExprValue" value="#{validateForm.regExpr}" required="true"> <t:validateRegExpr pattern='\d{5}'/> </html:inputText>

JSF - M. Baron - Page 172

Apache Tomahawk : installation  Apache Tomahawk nest ni plus ni moins quune librairie de balise  Se rendre ladresse : http://myfaces.apache.org/download  Tlcharger larchive tomahawk-x.x.x-bin.zip  Dcompresser dans le rpertoire WEB-INF/lib de lapplication web  Importer les balises personnalises de Tomahawk
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t" %> keulkeul.blogspot.com

 Utiliser les balises de votre choix


<html:inputText id="regExprValue" value="#{validateForm.regExpr}" required="true"> <t:validateRegExpr pattern='\d{5}'/> </html:inputText>

JSF - M. Baron - Page 173

Composant personnalis : principe  Pour bientt


 Gnralit sur la conception de composants personnaliss  Balises personnaliss, code du composant, rendu  Exemple : thermomtre tendu

keulkeul.blogspot.com

JSF - M. Baron - Page 174

Bilan : cours JSF  Premires impressions dun novice


 Une impression que cest pas aussi souple que Struts  La disponibilit de la spcification de JSF et du tutorial sont vraiment utiles (surtout pour comprendre le fonctionnement du cycle de vie)  Mes coups de coeur : lapproche par composants et la prsence dun cycle de vie qui tient la route  Les outils, gratuits, sous Eclipse de bonne qualit sont peu nombreux (utilisation du plugin Amateras : http://ameteras.sourceforge.jp)

 Les choses non tudis, prochainement


keulkeul.blogspot.com

 Terminer : crer son converter , crer ses propres balises pour la convertion et la validation puis composant personnalis  Comparatif des outils pour grer du JSF avec plaisir ;-)  Proprifier les sources des exemples et les diffuser  Les Facelets (systme de template pour JSF)
JSF - M. Baron - Page 175

Vous aimerez peut-être aussi