SlideShare une entreprise Scribd logo
Java pour le développement 
d’applications Web : Java EE 
JSF : Java Server Faces 
Mickaël BARON - 2007 (Rév. Mai 2011) 
mailto:baron.mickael@gmail.com ou mailto:baron@ensma.fr
JSF - M. Baron - Page 2 
keulkeul.blogspot.com 
Licence 
Creative Commons 
Contrat Paternité 
Partage des Conditions Initiales à l'Identique 
2.0 France 
http://creativecommons.org/licenses/by-sa/2.0/fr
JSF - M. Baron - Page 3 
keulkeul.blogspot.com Déroulement du cours JSF 
 Pédagogie du cours 
 Illustration avec de nombreux exemples 
 Des bulles d’aide 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 personnalisées) 
 Structuration du cours 
 Démarrage par les bases de JSF (Bean et Navigation) 
 Pour chaque nouveau concept introduit, le présenter en détail 
 Terminer par des concepts plus complexes 
Remerciements 
Developpez.com [djo.mos pour ses commentaires]
keulkeul.blogspot.com Introduction : qu’est-ce-que c’est ... 
 Java Server Faces est un framework de développement 
d’applications Web en Java permettant de respecter le 
modèle d’architecture MVC et basé sur des composants côté 
présentation 
JSF - M. Baron - Page 4 
 Java Server Faces permet 
 une séparation de la couche présentation des autres couches (MVC) 
 un mapping entre l’HTML et l’objet 
 un ensemble de composants riches et réutilisables 
 une liaison simple entre les actions côté client de l’utilisateur (event 
listener) et le code Java côté serveur 
 Création de nouveaux composants graphiques 
 JSF peut être utilisé pour générer autre chose que du HTML (XUL, 
XML, WML, …)
keulkeul.blogspot.com Introduction : meilleur que Struts, les avantages … 
JSF - M. Baron - Page 5 
 Possibilité de créer de nouveaux composants 
 JSF permet de combiner plusieurs composants pour aboutir à un 
composant plus complexe 
Support différentes technologies d’affichage 
JSF ne se limite pas à l’HTML (XUL, Flash, …) 
 Accès aux Beans par leurs noms en utilisant les Expressions 
Language 
Pour Struts nécessité de mémoriser le nom du formulaire 
 Simplification des définitions des contrôleurs et des Beans 
 Simplification du fichier de configuration 
 L’orientation composants graphiques permet à JSF d’être 
utilisé de manière plus simple dans les environnements de 
développement (voir Sun Java Studio Creator 2)
keulkeul.blogspot.com Introduction : meilleur que Struts … et les inconvénients 
JSF - M. Baron - Page 6 
 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 contrôleurs 
(form.do) avaient différentes URL’s 
 JSF utilisent les mêmes noms pour la vue et le contrôleur 
La validation dans JSF n’est pas aussi fournie que Struts 
 Possibilité de générer du JavaScript avec Struts pas JSF 
 Possibilité de vérifier la syntaxe d’une carte de crédit, utilisation 
d’expressions régulières, … 
Moins de documentation et de ressources 
Nous allons tenter d’y remédier …
keulkeul.blogspot.com Introduction : une spec et plusieurs implémentations 
 JSF comme la plupart des technologies proposées par Sun est 
définie dans une spécification JSR-127 (version 1.1) puis 
JSR-252 (1.2) 
Il existe donc plusieurs implémentations de JSF 
Sun Reference : http://java.sun.com/javaee/javaserverfaces 
JSF - M. Baron - Page 7 
Apache MyFaces : http://myfaces.apache.org 
 L’implémentation proposée par Apache est appelée MyFaces 
 Apache fournit des fonctionnalités 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 associée à Java EE 5
keulkeul.blogspot.com Introduction : documentations et ressources 
 Même si JSF n’est pas aussi utilisé et documenté que Struts, 
de nombreux sites commencent à apparaître pour proposer 
tutoriels et exemples (peu de ressource en français) 
JSF - M. Baron - Page 8 
 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 référence : http://java.sun.com/javaee/javaserverfaces 
 Site du projet : http://javaserverfaces.dev.java.net 
 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 9 
keulkeul.blogspot.com Bibliothèque … 
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 
Core JavaServer Faces 
Auteur : David Geary and Cay Horstmann 
Éditeur : Prentice Hall Ptr 
Edition : 2004 - 658 pages - ISBN : 0-13146-305-5
Introduction : comment ça marche … 
JSF - M. Baron - Page 10 
keulkeul.blogspot.com 
 L’interface utilisateur construite dans la page JSP est 
générée à l’aide de la technologie JSF (résultat myUI) 
 Elle fonctionne sur le serveur et le rendu est retourné au 
client 
 JSF s’appuie sur les technologies précédentes 
 Génération en Servlet 
 Utilisation des composants JSF 
dans les pages JSP 
 Les composants JSF sont exposés 
aux JSPs grâce aux balises personnalisés
keulkeul.blogspot.com Introduction : principe pour traiter un formulaire 
1. Construire le formulaire dans une page JSP en utilisant les 
JSF - M. Baron - Page 11 
balises JSF 
2. Développer un Bean qui effectue un « Mapping » avec les 
valeurs du formulaire 
3. Modifier le formulaire pour spécifier l’action et l’associer au 
Bean 
4. Fournir des Converters et des Validators pour traiter les 
données du formulaire 
5. Paramétrer le fichier faces-config.xml pour déclarer le Bean 
et les règles de navigation 
6. Créer les pages JSP correspondant à chaque condition de 
retour 
7. Protéger les pages JSP utilisées par le contexte JSF de façon 
à éviter d’y accéder directement
JSF - M. Baron - Page 12 
keulkeul.blogspot.com Plan du cours JSF 
 Configuration : utiliser JSF dans une application Java EE 
 Bean Managé : stocker, afficher les valeurs d’un formulaire 
 Cycle de vie : comprendre les rouages d’un composant JSF 
 Navigation : choisir une vue selon un message 
 Composants CORE et HTML : gérer 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 d’un formulaire 
 Validators : valider les valeurs saisies d’un formulaire 
 Evénements : gérer les actions utilisateur 
 Comp. Tomahawk : ajouter de nouveaux composants 
 Création de composants JSF : étendre la bibliothèque
keulkeul.blogspot.com Configuration : JSF dans le web.xml 
 Nécessite la configuration du fichier web.xml de façon à ce 
JSF - M. Baron - Page 13 
que JSF soit pris en compte 
 Paramétrer le fonctionnement général de l’application : le contrôleur 
 Identifier la servlet principale : javax.faces.webapp.FacesServlet 
 Spécifier le nom et le chemin du fichier de configuration 
 Nom du paramètre : javax.faces.application.CONFIG_FILES 
 Exemple : /WEB-INF/faces-config.xml 
Spécifie où l’état de l’application doit être sauvé 
 Nom du paramètre : javax.faces.STATE_SAVING_METHOD 
 Valeurs possibles : client ou server 
Valider ou pas les fichiers XML 
 Nom du paramètre : com.sun.faces.validateXml 
 Valeurs possibles : true ou false (défaut : false)
keulkeul.blogspot.com Configuration : JSF dans le web.xml 
 Indique si les objets développés tels que les Beans, les 
composants, les validators et les converters doivent être 
créés au démarrage de l’application 
Nom du paramètre : com.sun.faces.verifyObjects 
Valeurs possibles : true ou false (défaut : false) 
 La servlet principale est le point d’entrée d’une application JSF 
 On trouve plusieurs manières de déclencher des ressources JSF 
JSF - M. Baron - Page 14 
Préfixe /faces/ 
Suffixes *.jsf ou *.faces 
Exemples (le contexte de l’application est myAppli) 
http://localhost/myAppli/faces/index.jsp 
http://localhost/myAppl/index.jsf 
Avec Struts nous utilisions généralement le 
suffixe « .do » pour atteindre le contrôleur
keulkeul.blogspot.com Configuration : JSF dans le web.xml 
Exemple : paramétrer une application Web de type JSF 
JSF - M. Baron - Page 15 
... 
context-param 
param-namecom.sun.faces.validateXml/param-name 
param-valuetrue/param-value 
/context-param 
servlet 
servlet-nameFaces Servlet/servlet-name 
servlet-classjavax.faces.webapp.FacesServlet/servlet-class 
load-on-startup1/load-on-startup 
/servlet 
servlet-mapping 
servlet-nameFaces Servlet/servlet-name 
url-pattern/faces/*/url-pattern 
/servlet-mapping 
servlet-mapping 
servlet-nameFaces Servlet/servlet-name 
url-pattern*.faces/url-pattern 
/servlet-mapping 
... 
La Servlet qui gère les entrées 
au contexte JSF 
Utilisation de context-param pour 
paramétrer le fonctionnement des JSF 
Comment accéder à la Servlet 
« Faces Servlet » 
web.xml
keulkeul.blogspot.com Configuration : accès restreints aux pages JSP 
 Quand une page JSP utilise des composants JSF elle doit être 
traitée 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 appelée directement sans 
passer par la Servlet principale une erreur est générée 
JSF - M. Baron - Page 16 
 http://localhost/myAppli/index.jsp : erreur !!! 
 Empêcher donc les clients d’accéder directement aux pages 
JSP qui exploitent des composants JSF 
 Solutions 
 Utiliser la balise security-constraint dans le fichier web.xml 
 Déclarer chaque page JSP qui doit être protégée (celles qui utilisent 
des composants JSF)
keulkeul.blogspot.com Configuration : accès restreints aux pages JSP 
JSF - M. Baron - Page 17 
Exemple : restreindre l’accès aux pages JSP 
... 
context-param 
param-namecom.sun.faces.validateXml/param-name 
param-valuetrue/param-value 
/context-param 
... 
securiy-constraint 
web-resource-collection 
web-resource-nameNo-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 
/web-resource-collection 
auth-constraint 
descriptionPas de rôles, donc pas d’accès direct/description 
/auth-constraint 
/security-constraint 
... 
Ajouter la balise security-constraint 
dans le fichier web.xml 
Les pages JSP qui utilisent 
des composants JSF 
Protéger efficacement toutes les pages 
JSP qui utilisent des composants JSF
keulkeul.blogspot.com Configuration : le fichier contrôleur « faces-config.xml » 
 Le fichier gérant la logique de l’application web s’appelle par 
JSF - M. Baron - Page 18 
défaut faces-config.xml 
 Il est placé dans le répertoire WEB-INF au même niveau que 
web.xml 
 Il décrit essentiellement six principaux éléments : 
les Beans managés managed-bean 
les règles de navigation navigation-rule 
les ressources éventuelles suite à des messages message-bundle 
la configuration de la localisation resource-bundle 
la configuration des Validators et des Converters validator 
converter 
d’autres éléments liés à des nouveaux composants JSF render-kit 
 Le fichier de configuration est un fichier XML décrit par une 
DTD. La balise de départ est faces-config 
(version 1.1)
keulkeul.blogspot.com Configuration : le fichier contrôleur « faces-config.xml » 
 La description de l’ensemble des balises peut être trouvée 
http://www.horstmann.com/corejsf/faces-config.html 
JSF - M. Baron - Page 19 
?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 l’application JSF 
La version 1.2 de JSF utilise un 
schéma au lieu d’une DTD
keulkeul.blogspot.com Configuration : balises personnalisées dans les JSP 
 Les composants JSF sont utilisés dans les pages JSP au 
moyen de balises personnalisées dédiées aux JSF 
CORE : noyau qui gère les vues 
HTML : composants JSF 
Le détail de CORE et HTML 
sera donné plus tard 
 Description des balises personnalisées Core et HTML 
http://java.sun.com/javaee/javaserverfaces/1.2_MR1/docs/tlddocs 
 http://www.horstmann.com/corejsf/jsf-tags.html 
 Possibilité d’utiliser d’autres balises (Tomahawk, ADF Faces) 
 Les composants JSF doivent être encadrés par une vue JSF 
déclarée 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 % 
... 
core:view 
JSF - M. Baron - Page 20 
... 
/core:view 
... 
Utilisation des 
composants JSF Possibilité d’utiliser des balises 
HTML classiques c’est du JSP!!!
bin 
lib 
classes ... 
JSF - M. Baron - Page 21 
keulkeul.blogspot.com Configuration : JSF et Tomcat 
 Pour exploiter et déployer 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 copiées soit en locale à l’appli web 
sont en globale dans le répertoire Tomcat 
*.html, *.jsp, ... 
WEB-INF 
web.xml 
faces-config.xml 
lib 
classes Tomcat 
conf 
Locale à 
l’application 
jsf-api.jar 
jsf-impl.jar 
jstl-1.2.jar 
… 
jsf-api.jar 
jsf-impl.jar 
jstl-1.2.jar 
… 
Globale à 
l’application 
MyApp
org.apache.myfaces.webapp.StartupServletContextListener 
JSF - M. Baron - Page 22 
keulkeul.blogspot.com Configuration : JSF et Tomcat 
 Selon la version et le serveur d’application, le fichier web.xml 
doit être complété (Tomcat 6 pour nos tests) 
 Pour la version 1.1.5 de JSF (MyFaces) 
web-app ... 
... 
listener 
listener-class 
/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 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% 
JSF - M. Baron - Page 23 
html 
head 
meta http-equiv=Content-Type content=text/html; charset=UTF-8 
titleHello World avec JSF/title 
/head 
body 
core:view 
h1html:outputText value=Hello World avec JSF //h1br 
La même chose avec du HTML : h1Hello World avec JSF/h1 
/core:view 
/body 
/html 
welcomeJSF.jsp du projet 
HelloWorld
keulkeul.blogspot.com Le premier exemple « Hello World avec JSF » 
 Exemple (suite) : afficher le message « Hello World » … 
JSF - M. Baron - Page 24 
?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/web-app_ 
2_4.xsd 
servlet 
servlet-nameFaces Servlet/servlet-name 
servlet-classjavax.faces.webapp.FacesServlet/servlet-class 
load-on-startup1/load-on-startup 
/servlet 
servlet-mapping 
servlet-nameFaces Servlet/servlet-name 
url-pattern/faces/*/url-pattern 
/servlet-mapping 
security-constraint 
display-nameConstraint1/display-name 
web-resource-collection 
web-resource-nameNo-JSP-JSF-Page/web-resource-name 
url-pattern/welcomeJSF.jsp/url-pattern 
/web-resource-collection 
auth-constraint 
descriptionPas de rôles, donc pas d’accès direct/description 
/auth-constraint 
/security-constraint 
/web-app 
web.xml du projet HelloWorld
keulkeul.blogspot.com Le premier exemple « Hello World avec JSF » 
 Exemple (suite) : afficher le message « Hello World » … 
Considérons que la page welcomeJSF.jsp n’est pas protégée et que la 
ressource est accédée directement (sans passer par la Servlet principale) 
JSF - M. Baron - Page 25 
Retour d’un message d’erreur car les éléments 
JSF ne sont pas traités par la Servlet principale
keulkeul.blogspot.com Le premier exemple « Hello World avec JSF » 
 Exemple (suite) : afficher le message « Hello World » … 
Considérons que la ressource welcomeJSF.jsp est protégée et que la 
ressource est accédée directement (sans passer par la Servlet principale) 
JSF - M. Baron - Page 26 
Retour d’un message d’erreur car la page est protégée
keulkeul.blogspot.com Le premier exemple « Hello World avec JSF » 
 Exemple (suite) : afficher le message « Hello World » … 
JSF - M. Baron - Page 27 
?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 
faces-config.xml 
du projet 
HelloWorld 
Dans cet exemple aucune configuration 
est nécessaire. Nous verrons dans la 
suite les règles de navigation et la 
déclaration de Bean managés
JSF - M. Baron - Page 28 
keulkeul.blogspot.com Bean Managé : principe 
 Rappelons qu’un Bean est une classe Java respectant un 
ensemble de directives 
Un constructeur public sans argument 
Les propriétés d’un Bean sont accessibles au travers de méthodes 
getXXX et setXXX portant le nom de la propriété 
L’utilisation des Beans dans JSF permet 
l’affichage des données provenant de la couche métier 
le stockage des valeurs d’un formulaire 
la validation des valeurs 
l’émission de messages pour la navigation (reçus par faces-config.xml) 
Dans la suite nous verrons que les Beans 
peuvent retourner des messages 
exploitables par le contrôleur JSF : 
principe de la Navigation
JSF - M. Baron - Page 29 
keulkeul.blogspot.com Bean Managé : principe 
 Un Bean managé est un Bean dont la vie est gérée par JSF 
et déclaré dans le fichier de configuration faces-config.xml 
 Définir la durée de vie (scope) d’un Bean 
 Initialiser les propriétés d’un Bean 
 A la différence des Beans utilisés dans Struts, les Beans 
managés de JSF n’héritent pas d’une classe particulière 
 Les classes sont stockées dans le répertoire WEB-INF/classes 
*.html, *.jsp, ... 
WEB-INF 
web.xml, faces-config-xml 
classes 
lib 
Beans 
Librairie JSF
keulkeul.blogspot.com Bean managé : configuration dans faces-config.xml 
 Pour créer un Bean managé il faut le déclarer dans le fichier 
de configuration de JSF à l’aide de la balise managed-bean 
JSF - M. Baron - Page 30 
 Trois éléments essentiels sont à préciser 
 managed-bean-name définit un nom qui servira d’étiquette quand le 
Bean sera exploité dans les pages JSP 
 managed-bean-class déclare le nom de la classe de type 
package.class 
 managed-bean-scope précise le type de scope utilisé pour le Bean 
none, application, session, request 
... 
navigation-rule.../navigation-rule 
managed-bean 
managed-bean-nameMyBean/managed-bean-name 
managed-bean-classmypackage.MyFirstBean/managed-bean-class 
managed-bean-scopesession/managed-bean-scope 
/managed-bean 
... 
faces-config.xml 
Etudiée dans la 
partie Navigation
keulkeul.blogspot.com Bean managé : JSP, Bean et Expression Language (EL) 
 Un formulaire JSF doit être construit dans un groupe défini 
JSF - M. Baron - Page 31 
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 
 La balise html:commandButton contient un attribut action 
qui permet d’indiquer un message traité par les règles de 
navigation définies dans faces-config.xml 
Nous verrons dans la partie 
Navigation le traitement de la valeur 
indiquée dans l’attribut action
keulkeul.blogspot.com 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 
JSF - M. Baron - Page 32 
head 
titlePremier 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 
beanform1.jsp du projet 
ManagedBean
keulkeul.blogspot.com Bean managé : JSP, Bean et Expression Language (EL) 
 Les Expressions Languages (EL) sont utilisées pour accéder 
JSF - M. Baron - Page 33 
aux éléments du Bean dans les pages JSP 
 Un EL permet d’accéder simplement aux Beans des différents 
scopes de l’application (page, request, session et application) 
 Forme d’un Expression Language JSF 
#{expression} 
 Les EL JSF sont différentes des EL JSP qui utilisent la notation 
${expression} 
 Une EL est une expression dont le résultat est évaluée au 
moment où JSF effectue le rendu de la page
keulkeul.blogspot.com Bean managé : JSP, Bean et Expression Language (EL) 
managed-bean-nameMyBean/managed-bean-name 
managed-bean-classmypackage.MyFirstBean/managed-bean-class 
managed-bean-scopesession/managed-bean-scope 
JSF - M. Baron - Page 34 
 L’écriture #{MyBean.value} indique à JSF 
de chercher un objet qui porte le nom de MyBean dans son contexte 
puis invoque la méthode getValue() (chercher la propriété value) 
 Le nom de l’objet est déterminé dans le fichier 
faces-config.xml 
... 
navigation-rule.../navigation-rule 
managed-bean 
/managed-bean 
... 
 Possibilité d’accéder à un objet contenu dans le Bean 
 #{MyBean.myobject.value} : propriété value de myobject contenu 
dans MyBean
keulkeul.blogspot.com Bean managé : JSP, Bean et Expression Language (EL) 
 JSF définit un ensemble d’objets implicites utilisables dans les 
JSF - M. Baron - Page 35 
Expressions Languages : 
 param : éléments définis dans les paramètres de la requête HTTP 
 param-values : les valeurs des éléments param 
 cookies : éléments définis dans les cookies 
initParam : paramètres d’initialisation de l’application 
requestScope : éléments défini dans la requête 
facesContext : instance de la classe FacesContext 
View : instance de UIViewRoot 
Etudiée au niveau de la 
partie cycle de vie 
Expliquer au niveau des 
composants graphiques
keulkeul.blogspot.com Bean managé : JSP, Bean et Expression Language (EL) 
JSF - M. Baron - Page 36 
 Exemple : objets implicites JSF dans une JSP 
html 
... 
body 
core:view 
phtml:outputText 
value=#{param.test} //p 
phtml:outputText 
value=#{cookie.JSESSIONID.value} //p 
phtml:outputText 
value=#{facesContext.externalContext.requestPathInfo} //p 
phtml:outputText 
value=#{facesContext.externalContext.requestServletPath} //p 
/core:view 
/body 
/html 
implicitobjects.jsp du 
projet ImplicitObjects
keulkeul.blogspot.com Bean managé : modifier/afficher la propriété d’un Bean 
 Un formulaire regroupe un ensemble de composants 
JSF - M. Baron - Page 37 
contenant chacun une valeur (attribut value) 
 Chaque valeur d’un composant peut être stockée dans une 
propriété du Bean 
 Pour définir une propriété dans un Bean 
 Créer l’attribut correspondant à la propriété 
 Définir des méthodes set et get pour accéder en lecture et en écriture 
aux propriétés 
 Pour stocker la valeur d’un composant vers le Bean ou 
afficher la valeur d’une propriété dans un composant : 
utilisation des EL dans l’attribut value du composant JSF 
 JSF associe automatiquement la propriété d’un Bean à la 
valeur d’un composant
keulkeul.blogspot.com Bean managé : modifier/afficher la propriété d’un Bean 
 Exemple : gestion d’un formulaire « email et mot de passe » 
JSF - M. Baron - Page 38 
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; 
} 
} 
RegistrationBean.java du 
projet ManagedBean 
possède deux propriétés et 
des modifieurs et accesseurs
keulkeul.blogspot.com Bean managé : modifier/afficher la propriété d’un Bean 
JSF - M. Baron - Page 39 
 Exemple (suite) : gestion d’un formulaire … 
... 
core:view 
html:form 
html:outputText value=Adresse Email / 
html:inputText value=#{registrationbean.email}/br 
html:outputText value=Mot de Passe / 
html:inputSecret value=#{registrationbean.password}/br 
html:commandButton value=Connecter / 
/html:form 
/core:view 
/body 
/html 
beanform2.jsp du projet 
ManagedBean 
Affichage de la valeur 
d’initialisation du Bean 
EL pour accéder à la 
propriété email 
EL pour accéder à la 
propriété password
keulkeul.blogspot.com Bean managé : modifier/afficher la propriété d’un Bean 
JSF - M. Baron - Page 40 
 Exemple (suite) : gestion d’un 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 
faces-config.xml du projet 
ManagedBean 
Identifiant utilisé pour accéder 
au Bean défini par la classe 
beanpackage.RegistrationBean
keulkeul.blogspot.com Bean managé : initialisation des propriétés d’un Bean 
 Possibilité d’initialiser la propriété d’un Bean dans 
JSF - M. Baron - Page 41 
le Bean lui-même 
le fichier faces-config.xml 
 Dans le fichier faces-config.xml utilisation des EL 
Accès aux objets implicites 
Accès aux autres Beans managés 
 L’initialisation d’un Bean est obtenue à l’intérieur de la balise 
managed-bean dans la balise managed-property 
 Chaque propriété à initialiser est déclarée par la balise 
property-name contenu dans managed-property 
 Une propriété peut être de différentes types 
List : définit une propriété de type liste 
Map : définit une propriété de type Map (une clé / valeur) 
Value : définit une propriété sur une valeur
keulkeul.blogspot.com Bean managé : initialisation des propriétés d’un Bean 
 Si la propriété est de type List, l’initialisation des valeurs de la 
propriété est effectuée dans la balise list-entries 
 Dans la balise list-entries deux informations sont à indiquer 
JSF - M. Baron - Page 42 
value-class : le type d’objet contenu dans la liste 
value : une valeur dans la liste (autant d’élément de la liste) 
managed-bean 
... 
managed-property 
property-namecities/property-name 
list-entries 
value-classjava.lang.String/value-class 
valuePoitiers/value 
valueLimoges/value 
valueViroflay/value 
/list-entries 
/managed-property 
/managed-bean
Bean managé : initialisation des propriétés d’un Bean 
 Si la propriété est de type Map, l’initialisation des valeurs de la 
propriété est effectuée dans la balise map-entries 
 Dans la balise map-entries trois informations sont à donner 
 La balise map-entry contient deux informations 
JSF - M. Baron - Page 43 
keulkeul.blogspot.com 
key-class : le type de la clé 
value-class : le type d’objet contenu dans la Map 
map-entry : contient une clé et une valeur 
key : la clé 
value : la valeur associée à la clé 
managed-property 
property-nameprices/property-name 
map-entries 
map-entrie 
keySwimmingPool High Pressure/key 
value250/value 
/map-entrie 
/map-entries
keulkeul.blogspot.com Bean managé : initialisation des propriétés d’un Bean 
 Si la propriété est de type Value, l’initialisation de la valeur de 
la propriété est effectuée dans la balise value 
managed-bean 
JSF - M. Baron - Page 44 
... 
managed-property 
property-nameemail/property-name 
valueuser@host/value 
/managed-property 
managed-property 
property-namename/property-name 
valueyour name/value 
/managed-property 
managed-property 
property-nameadress/property-name 
valueyour adress/value 
/managed-property 
/managed-bean 
faces-config.xml du 
projet 
ManagedBean
keulkeul.blogspot.com Bean managé : initialisation des propriétés d’un Bean 
 Exemple : initialisation de propriétés dans faces-config.xml 
JSF - M. Baron - Page 45 
/managed-bean 
managed-bean 
managed-bean-nameregistrationbeanbis/managed-bean-name 
managed-bean-class 
beanPackage.RegistrationBeanBis 
/managed-bean-class 
managed-bean-scoperequest/managed-bean-scope 
managed-property 
property-nameemail/property-name 
value#{registrationbean.email}/value 
/managed-property 
managed-property 
property-nameadress/property-name 
valueYour Adress/value 
/managed-property 
/managed-bean 
Utilisation d’une EL pour 
accéder au Bean défini 
par registrationbean 
faces-config.xml du projet 
ManagedBean
keulkeul.blogspot.com Bean managé : initialisation des propriétés d’un Bean 
JSF - M. Baron - Page 46 
 Exemple (suite) : initialisation de propriétés … 
html 
head 
titleTroisième 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 
beanform3.jsp du projet 
ManagedBean
keulkeul.blogspot.com Cycle de vie d’une JSF : généralités 
Update 
Model 
Values 
JSF - M. Baron - Page 47 
Restore 
View 
Apply 
Requests 
Process 
Events 
Process 
Validations 
Invoke 
Application 
Render 
Response 
Process 
Events 
Process 
Events 
Process 
Events 
Erreurs de Conversion 
et / ou de Validation 
Erreurs de Conversion 
Requête 
Faces 
Réponse 
Faces 
Réponse 
Complète 
Réponse 
Complète 
Réponse 
Complète 
Réponse 
Complète 
Détaillé au fur et à mesure : conversion, 
validation, événements, …
keulkeul.blogspot.com Cycle de vie d’une JSF : généralités 
 Restore View : JSF reconstruit l’arborescence des compo-sants 
JSF - M. Baron - Page 48 
qui composent la page. 
 Apply Requests : les valeurs des données sont extraites de 
la requête 
 Process Validations : procède à la validation des données 
 Update model values : mise à jour du modèle selon les 
valeurs reçues si validation ou conversion réussie 
 Invoke Application : les événements émis de la page sont 
traités. Elle permet de déterminer la prochaine page 
 Render Response : création du rendue de la page
keulkeul.blogspot.com Navigation : configuration de faces-config.xml 
 Le fichier de faces-config.xml joue le rôle de contrôleur, il 
décide de la ressource qui doit être appelée suite à la 
réception d’un message 
 Les messages sont des simples chaînes de caractères 
 Utilisation de la balise navigation-rule pour paramétrer les 
JSF - M. Baron - Page 49 
règles de navigation 
 La balise from-view-id indique la vue source où est 
effectuée la demande de redirection. La vue peut être un : 
Formulaire (action de soumission) 
Lien hypertext 
 Pour chaque valeur de message une page vue de direction est 
indiquée dans la balise navigation-case 
from-outcome : la valeur du message 
to-view-id : la vue de direction
keulkeul.blogspot.com Navigation : statique ou dynamique 
 JSF implémente une machine à états pour gérer la navigation 
JSF - M. Baron - Page 50 
entre des pages JSF 
 Pour schématiser nous distinguons deux sortes de navigation 
Navigation statique 
Navigation dynamique 
 Navigation statique 
La valeur de l’outcome est connue au moment de l’écriture de la JSP 
 Navigation dynamique 
La valeur de l’outcome est inconnue au moment de l’écriture de la JSP 
Elle peut être calculée par un Bean Managé ou autre chose … 
 Remarques 
Si une valeur d’outcome est inconnue la même page JSP est rechargée 
Si la valeur vaut null la page JSP est rechargée
keulkeul.blogspot.com Navigation statique : exemples 
 Exemple : redirection statique à partir d’un formulaire 
... 
html 
JSF - M. Baron - Page 51 
head 
titleRedirection Statique à partir d’un 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 
form1.jsp du projet 
Navigation
keulkeul.blogspot.com Navigation statique : exemples 
faces-config.xml 
JSF - M. Baron - Page 52 
 Exemple (suite) : redirection statique … 
... 
faces-config 
navigation-rule 
from-view-id/form1.jsp/from-view-id 
navigation-case 
from-outcomeregister/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 
... 
body 
core:view 
h1html:outputText value=Redirection Réussie //h1 
/core:view 
/body 
/html 
acceptedSimple.jsp 
du projet Navigation 
N’oubliez pas de protéger toutes les pages 
JSP : form1.jsp et acceptedSimple.jsp
keulkeul.blogspot.com Navigation dynamique : exemples 
 Exemple : redirection dynamique à partir d’un Bean 
Cette méthode retourne 
soit « Accepted » soit 
« Rejected » 
JSF - M. Baron - Page 53 
package beanPackage; 
public class BeanController2 { 
private String email = user@host; 
private String name = ; 
... 
public String loginConnect() { 
if (this.email.isEmpty()) { 
return Rejected; 
} 
if (this.name.isEmpty()) { 
return Rejected; 
} 
return Accepted; 
} 
} 
BeanController2.java 
du projet Navigation 
Cette méthode permet de 
valider les valeurs et de 
choisir le message à retourner 
au contrôler JSF 
Il s’agit ici d’une technique pour la 
validation des informations saisies 
dans un formulaire. Nous 
approfondirons cet aspect dans la 
partie Validators
keulkeul.blogspot.com Navigation dynamique : exemples 
 Exemple (suite) : redirection dynamique à partir d’un Bean 
JSF - M. Baron - Page 54 
faces-config 
navigation-rule 
from-view-idform2.jsp/from-view-id 
navigation-case 
from-outcomeAccepted/from-outcome 
to-view-id/accepted.jsp/to-view-id 
/navigation-case 
navigation-case 
from-outcomeRejected/from-outcome 
to-view-id/rejected.jsp/to-view-id 
/navigation-case 
/navigation-rule managed-bean 
managed-bean-namebeancontroller2/managed-bean-name 
managed-bean-class 
beanPackage.BeanController2 
/managed-bean-class 
... 
/faces-config 
faces-config.xml du 
projet Navigation
keulkeul.blogspot.com Navigation dynamique : exemples 
 Exemple (suite) : redirection dynamique à partir d’un Bean 
JSF - M. Baron - Page 55 
... 
html 
head 
titleRedirection Dynamique à partir d’un 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 
/core:view 
/body 
/html 
form2.jsp du projet 
Navigation 
Accès au Bean identifié par 
beancontroller2 et à la 
méthode loginConnect
keulkeul.blogspot.com Navigation dynamique : exemples 
 Exemple (suite) : redirection dynamique à partir d’un Bean 
%@taglib uri=http://java.sun.com/jsf/core prefix=core% 
%@taglib uri=http://java.sun.com/jsf/html prefix=html% 
accepted.jsp du 
projet 
Navigation 
JSF - M. Baron - Page 56 
html 
head 
titleRésultat du traitement du formulaire/title 
/head 
body 
core:view 
h1html:outputText value=Connexion de : / 
html:outputText value=#{beancontroller2.name} //h1 
/core:view 
/body 
/html 
Page affichée à la suite de la 
soumission. Lecture de la 
propriété email du Bean 
identifié par beancontroller2
keulkeul.blogspot.com Composants graphiques : présentation 
 JSF fournit un ensemble de composants graphiques pour la 
JSF - M. Baron - Page 57 
conception de l’IHM 
 Un composant JSF est développé à partir de : 
 classes qui codent le comportement et l’état 
 classes de « rendu » qui traduisent la représentation graphique 
(HTML, FLASH, XUL, …) 
 classes qui définissent les balises personnalisées relation entre JSP et 
classes Java 
 classes qui modélisent la gestion des événements 
 classes qui prennent en compte les Converters et les Validators 
 Pour exploiter les composants JSF dans les pages JSP, des 
balises personnalisées sont utilisées …
keulkeul.blogspot.com Composants graphiques : balises CORE 
 Les balises personnalisées décrites dans CORE s’occupent 
d’ajouter des fonctionnalités aux composants JSF 
 Pour rappel pour avoir un descriptif de l’ensemble des balises 
CORE : 
http://java.sun.com/javaee/javaserverfaces/1.2/docs/tlddocs 
 La bibliothèque contient un ensemble de balises 
facet : déclare un élément spécifique pour un composant 
view et subview : ajoute une vue ou une sous vue 
attribute et param : ajoute un attribut ou paramètre à un composant 
selectionitem et selectionitems : définit un ou plusieurs éléments 
convertDataTime et convertNumber : conversion de données 
validator, validateDoubleRange, … : ajoute des validators 
actionListener, valueChangeListener : différents écouteurs 
loadBundle : chargement de bundle (fichier de ressources …) 
JSF - M. Baron - Page 58
keulkeul.blogspot.com Composants graphiques : balises HTML 
 Les balises personnalisées décrites dans HTML s’occupent de 
la description de l’interface graphique d’une JSF 
 La spécification JSF décrit un ensemble fini de composants 
graphiques. Des bibliothèques tiers (My Faces) proposent des 
composants complémentaires 
 Pour rappel pour avoir un descriptif de l’ensemble des balises 
HTML : 
http://java.sun.com/javaee/javaserverfaces/1.2/docs/tlddocs 
 La bibliothèque HTML propose 25 composants qui sont 
JSF - M. Baron - Page 59 
classifiables en quatre catégories 
Composants de saisies notés I (pour input) 
Composants de sorties notés O (pour output) 
Composants de commandes notés C (pour commandes) 
Composants de regroupement notés R (pour …)
keulkeul.blogspot.com Composants graphiques : balises HTML 
JSF - M. Baron - Page 60 
 Famille des regroupements 
form 
panelGroup 
panelGrid 
 Famille des saisis 
inputHidden 
inputSecret 
inputText 
inputTextArea 
selectBooleanCheckbox 
selectManyCheckbox 
selectManyListbox 
selectManyMenu 
 selectOneListbox 
selectOneMenu 
selectOneRadio 
 Famille des sorties 
column 
message et messages 
dataTable 
outputText 
outputFormat 
outputLink 
graphicImage 
Famille des commandes 
commandButton 
commandLink
keulkeul.blogspot.com Composants graphiques : balises HTML saisis 
selectOneListbox 
JSF - M. Baron - Page 61 
intputText 
intputSecret 
intputTextarea 
selectBooleanCheckbox 
selectManyCheckbox 
selectManyMenu 
selectOneRadio 
selectOneMenu 
selectManyListbox
dataTable 
JSF - M. Baron - Page 62 
keulkeul.blogspot.com 
Composants graphiques : balises HTML sorties et 
commandes 
graphicImage 
outputText 
outputLink 
panelGrid 
commandButton 
commandLink
keulkeul.blogspot.com Composants graphiques : détail balises HTML 
 Une balise contient généralement trois types d’attributs 
JSF - M. Baron - Page 63 
Des attributs basiques (description) 
Des attributs HTML (description de présentation) 
Des attributs DHTML (description pour la partie dynamique) 
 Selon la nature du composant graphique (saisie, sortie, 
commande et autre) le nombre d’attributs varie … 
 Nous décrirons rapidement les attributs les plus significatifs. 
Au fur et à mesure de la présentation des composants 
graphiques nous les détaillerons via des exemples 
 Les transparents qui suivent sont réalisés dans une optique 
de présentation rapide …
keulkeul.blogspot.com Composants graphiques : détail balises HTML 
 Les attributs basiques sont utilisés pour ajouter une descri-ption 
JSF - M. Baron - Page 64 
spécifique à JSF 
 Attributs basiques 
id : identifiant du composant 
binding : association avec un Bean « Backing » 
rendered : true composant affiché, false composant caché 
styleClass : précise le nom d’une CSS à appliquer au composant 
value : valeur du composant 
valueChangeListener : associer à une méthode pour le changement de 
valeur 
converter : nom de la classe pour une conversion de données 
validator : nom de la classe pour une validation de données 
required : true valeur obligatoire, false valeur optionnelle
keulkeul.blogspot.com Composants graphiques : détail balises HTML 
 Les attributs HTML sont utilisés pour modifier l’apparence 
JSF - M. Baron - Page 65 
graphique d’un composant JSF 
 Attributs HTML (les plus répandus …) 
alt : texte alternatif au cas où le composant ne s'affiche pas 
border : bordure du composant 
 disabled : désactive un composant de saisie ou un bouton 
 maxlength : maximum de caractères pour un composant de texte 
readonly : mode lecture uniquement 
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 …)
keulkeul.blogspot.com Composants graphiques : détail balises HTML 
 Les attributs DHTML sont utilisés pour ajouter un aspect 
dynamique pour les composants JSF (appel à du JavaScript) 
JSF - M. Baron - Page 66 
 Attributs DHTML 
onblur : élément perd le focus 
onClick : clique souris sur un élément 
ondblClick : double clique souris sur un élément 
onfocus : élément gagne le focus 
onkeydown, onkeyup : touche clavier enfoncée et relâchée 
onkeypress : touche clavier pressée puis relâchée 
onmousedown, onmouseup : bouton souris enfoncé et relâché 
onmouseout, onmouseover : curseur souris sort et entre 
onreset : formulaire est initialisé 
onselect : texte est sélectionné dans un champ de texte 
onsubmit : formulaire soumis 
La gestion des 
événements sera 
expliquée dans une 
partie dédiée
keulkeul.blogspot.com Composants graphiques : html:panelGrid 
 La balise html:panelGrid est utilisée pour définir l’agencement 
JSF - M. Baron - Page 67 
des composants visuels 
 Il ne s’agit donc pas d’un composant visuel mais d’un 
conteneur dont l’organisation de ces composants enfants est 
réalisée suivant une grille 
 Les composants enfants sont ajoutés dans le corps 
 Principaux attributs : 
columns : nombre de colonnes de la grille 
bgcolor : couleur du fond 
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)
keulkeul.blogspot.com Composants graphiques : html:panelGrid 
 Exemple : organiser des composants dans une grille 
JSF - M. Baron - Page 68 
... 
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 
Création d'une 
grille avec deux 
colonnes 
Regroupement de 
deux composants 
dans une cellule 
outputcomponent.jsp 
du projet 
GraphicalComponents
keulkeul.blogspot.com Composants graphiques : html:dataTable 
 Le composant html:dataTable permet de visualiser des 
données sur plusieurs colonnes et plusieurs lignes 
 La table peut être utilisée quand le nombre d'éléments à 
JSF - M. Baron - Page 69 
afficher est inconnu 
 Les données (la partie modèle) peuvent être gérées par des 
Beans 
 Attributs de la balise : 
value : une collection de données (Array, List, ResultSet, …) 
 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
keulkeul.blogspot.com Composants graphiques : html:dataTable 
JSF - M. Baron - Page 70 
 Exemple : la représentation 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 ListPersonne refPersonne; 
public List getPersonne() { 
if (refPersonne == null) { 
refPersonne = new ArrayListPersonne(); 
refPersonne.add(new Personne(Baron, Mickael, 17081976, Développeur)); 
refPersonne.add(new Personne(Dupont, Marcel, 21041956, Boucher)); 
... 
} 
return refPersonne; 
} 
} 
Personne.java 
du projet 
GraphicalComponents 
OutputBean.java 
du projet 
GraphicalComponents
keulkeul.blogspot.com Composants graphiques : html:dataTable 
 Exemple (suite) : la représentation d'une table JSF 
JSF - M. Baron - Page 71 
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} / 
/html:column 
/html:dataTable 
/core:view 
datatablecomponent1.jsp 
du projet 
GraphicalComponents
keulkeul.blogspot.com Composants graphiques : html:dataTable 
 La modification des en-tête et pied de page d'une table est 
JSF - M. Baron - Page 72 
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 défini dans le corps de core:facet 
 Attribut du composant core:facet 
 name : nom de la filiation 
 Pour le composant table deux filiations possibles 
 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
keulkeul.blogspot.com Composants graphiques : html:dataTable 
 Exemple : table JSF avec des noms de colonnes 
core:view 
html:dataTable value=#{outputbean.personne} var=personne border=1 
Ne sera jamais affiché car 
core:facet n'est associé 
à aucun autre composant 
JSF - M. Baron - Page 73 
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:verbatimPrénom/verbatim 
/core:facet 
html:outputText value=#{personne.firstname} / 
/html:column 
html:column 
core:facet name=header  
Date de naissance 
/core:facet 
html:outputText value=#{personne.birthdata} / 
/html:column 
html:facet name=footer 
html:outputText value=#{outputbean.caption} / 
/html:facet 
... 
/html:dataTable 
/core:view 
datatablecomponent2.jsp 
du projet 
GraphicalComponents
keulkeul.blogspot.com 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 
JSF - M. Baron - Page 74 
 Les attributs : 
headerClass : style CSS pour la partie en-tête 
footerClass : style CSS pour le bas de page 
rowClasses : liste de styles CSS pour les lignes 
 L'attribut rowClasses permet de définir une liste de style CSS 
qui sera appliquée pour chaque ligne et répétée autant de 
fois qu'il y a de lignes (définition d'un motif) 
 Exemple : 
 Soit la définition suivante : rowClasses=row1, row2, row2 
 Répétition du motif row1, row2, row2, row1, row2, …
keulkeul.blogspot.com Composants graphiques : html:dataTable 
datatablecomponent3.jsp 
du projet GraphicalComponents 
JSF - M. Baron - Page 75 
 Exemple : table JSF « maquillé » 
head 
... 
link href=output.css tel=stylesheet type=text/css  
/head 
body 
core:view 
html:dataTable value=#{outputbean.personne} var=personne border=1 
cellspacing=4 width=60% rowClasses=row1,row2 
headerClass=heading footerClass=footer  
... 
/html:dataTable 
/core:view 
.heading { 
font-family: Arial, Helvetica, sans-serif; 
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 Composants graphiques : html:dataTable 
 Exemple : table JSF avec des composants JSF de saisie 
JSF - M. Baron - Page 76 
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:verbatimPrénom/verbatim 
/core:facet 
html:outputText value=#{personne.firstname} / 
/html:column 
/html:dataTable 
/core:view 
datatablecomponent4.jsp 
du projet 
GraphicalComponents
keulkeul.blogspot.com Composants graphiques : items 
 Les balises HTML de type sélection (selectOneRadio, 
selectOneMenu) permettent de gérer un ensemble d'éléments 
JSF - M. Baron - Page 77 
 Les éléments peuvent être « peuplés » par : 
 core:selectItem : affiche un seul élément 
core:selectItems : affiche plusieurs éléments 
 Les balises HTML de sélection s'occupent de gérer la sélection 
courante (une ou plusieurs) au travers de leur attribut value 
 Le type de la sélection courante (retourné au serveur) est 
donné par les éléments de sélection (int, String, Object, …) 
 La balise html:selectBooleanCheckbox n'est pas concernée 
puisqu'elle ne gère qu'un seul élément
keulkeul.blogspot.com Composants graphiques : core:selectItem 
 La balise core:selectItem est utilisée pour spécifier un seul 
JSF - M. Baron - Page 78 
élément 
 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 retournée au serveur 
 Un objet SelectItem est exploitable directement dans un Bean 
 Différents 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
keulkeul.blogspot.com Composants graphiques : core:selectItem 
JSF - M. Baron - Page 79 
 Exemple : choix d'un élément unique 
... 
html:outputText value=Fruit préféré avec SelectItem :  / 
html:selectOneRadio layout=pageDirection 
value=#{inputbean.oneRadioValue} / 
core:selectItem value=#{inputbean.bananeItem} / 
core:selectItem value=#{inputbean.orangeItem} / 
core:selectItem itemValue=Clémentine / 
core:selectItem itemValue=Pomme / 
core:selectItem itemValue=Framboise / 
/html:selectOneRadio 
... 
Utilisation d'un binding 
d'un composant 
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); 
} 
... 
} 
intputcomponent.jsp 
du projet 
GraphicalComponents 
Retourne un objet 
SelectItem
keulkeul.blogspot.com Composants graphiques : core:selectItems 
 L’utilisation de la balise core:selectItem peut alourdir l’écriture 
des différents éléments des composants de sélection 
 Cette balise est plutôt adaptée pour un nombre réduits 
JSF - M. Baron - Page 80 
d’éléments 
 La balise core:selectItems allège donc l’écriture puisqu’une 
seule occurrence de core:selectItems remplace toutes les 
occurrences de core:selectItem 
 L’attribut value est une valeur binding qui pointe vers une 
structure de type SelectItem 
 La structure de type SelectItem peut être de type 
 instance unique 
 map : les entrées sont les itemLabels et itemValues de SelectItem 
 collection 
 tableau
keulkeul.blogspot.com Composants graphiques : core:selectItems 
JSF - M. Baron - Page 81 
 Exemple : choisir de nombreux éléments 
html:selectOneRadio 
html:selectManyCheckbox 
html:selectOneListbox 
html:selectManyListbox 
html:selectOneMenu 
html:selectManyMenu
keulkeul.blogspot.com Composants graphiques : core:selectItems 
 Exemple (suite) : choisir de nombreux éléments 
Simplification 
d’écriture avec la 
balise selectItems 
JSF - M. Baron - Page 82 
h4html:outputText value=Fruit préféré avec SelectItems :  / 
html:selectOneRadio value=#{inputbean.oneRadioValue} / 
code:selectItems value=#{inputbean.oneRadioItems} / 
/html:selectOneRadio/h4 
h4html:outputText value=Ajouter des périphériques :  / 
html:selectManyCheckBox value=#{inputbean.manyCheckBoxValues} / 
code:selectItems value=#{inputbean.manyCheckBoxItems} / 
/html:selectManyCheckBox /h4 
h4html:outputText value=Accessoire préféré :  / 
html:selectOneListBox value=#{inputbean.oneListBoxValues} / 
code:selectItems value=#{inputbean.manyAndOneListBoxItems} / 
/html:selectOneListBox/h4 
h4html:outputText value=Choisir équipements préférés :  / 
html:selectManyListBox value=#{inputbean.manyListBoxValues} / 
code:selectItems value=#{inputbean.manyAndOneListBoxItems} / 
/html:selectManyListBox/h4 
h4html:outputText value=Choisir une marque de voiture :  / 
html:selectOneMenu value=#{inputbean.oneMenuValue} / 
code:selectItems value=#{inputbean.manyAndOneMenuItems} / 
/html:selectOneMenu/h4 
h4html:outputText value=Choisir plusieurs marques de voiture :  / 
html:selectManyMenu value=#{inputbean.manyMenuValue} / 
code:selectItems value=#{inputbean.manyAndOneMenuItems} / 
/html:selectManyMenu/h4 
Principe identique 
quelque soit le 
composant de 
sélection 
Une seule valeur 
sélectionnable 
Une seule valeur 
sélectionnable 
intputcomponent.jsp
keulkeul.blogspot.com Composants graphiques : core:selectItems 
 Exemple (suite) : choisir de nombreux éléments 
JSF - M. Baron - Page 83 
public class InputBean { 
private SelectItem[] manyCheckBoxItems = new SelectItem[] { 
new SelectItem(Clavier), 
new SelectItem(Souris), 
new SelectItem(Ecran), 
new SelectItem(Unité Centrale), 
new SelectItem(Haut Parleur) 
}; 
private String[] manyCheckBoxValues; 
public SelectItem[] getManyCheckBoxItems() { 
return manyCheckBoxItems; 
} 
public String[] getManyCheckBoxValues() { 
return this.manyCheckBoxValues; 
} 
public void setManyCheckBoxValues(String[] p) { 
manyCheckBoxValues = p; 
} 
} 
Utilisées pour 
peupler les éléments 
du composant 
selectManyCheckBox 
Utilisée pour 
afficher la valeur 
sélectionnée 
courante 
Utilisée pour 
modifier la valeur 
sélectionnée 
courante
keulkeul.blogspot.com Composants graphiques : API JSF 
 Les classes qui modélisent l'état et le comportement d'un 
composant sont les classes principales où dépendent toutes 
les autres (rendu, description balises, événements …) 
 Les composants JSF héritent de la classe de plus haut ni-veau 
JSF - M. Baron - Page 84 
UIComponent qui est abstraite 
 La classe UIComponentBase est la classe utilisée comme 
implémentation par défaut 
 Rappelons qu'un composant JSF peut contenir un ensemble 
de sous composants (notion de hiérarchie) 
 UIComponentBase fournit les services suivants 
 API pour la gestion du cycle de vie du composant 
 API pour le rendu du composant 
 … (complété et détaillé dans la dernière partie)
keulkeul.blogspot.com Composants graphiques : API JSF 
Associée à la 
commandButton 
JSF - M. Baron - Page 85 
 Hiérarchie des principaux composants JSF 
UIComponent 
UIComponentBase 
Objet représentant la racine de 
l'arbre après la phase de 
(plus de détail dans la dernière 
UIOutput UIInput 
Restore View 
partie) 
HtmlOutputText 
HtmlInputText 
UICommand 
balise 
HtmlCommandButton 
UIViewRoot 
… 
Classe abstraite 
Implémentation par 
défaut 
Associée à la 
balise 
outputText 
Associée à la 
balise 
intputText
JSF - M. Baron - Page 86 
keulkeul.blogspot.com FacesContext : principe 
 FacesContext permet de représenter toutes les informations 
contextuelles associées à la requête et à la réponse 
 FacesContext est défini par une classe abstraite dont l'instan-ciation 
est réalisée (si pas créée) au début 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 
FacesContext libère les ressources. L'instance de l'objet est 
conservé (utilisation de la méthode release() ) 
 A chaque nouvelle requête, ré-utilisation des instances de 
FacesContext
keulkeul.blogspot.com FacesContext : utilisation explicite 
 FacesContext est essentiellement utilisé par les mécanismes 
internes de JSF. Toutefois il est possible d'en extraire des 
informations intéressantes 
 Un objet FacesContext est exploitable dans un Bean ou dans 
JSF - M. Baron - Page 87 
une JSP via son objet implicite associé 
 Que peut-on donc faire avec cet objet ? 
ExternalContext : accéder aux éléments de la requête et de la réponse 
Message Queue : stocker des messages (voir partie suivante) 
 ViewRoot : accéder à la racine de l'arbre des composants (UIViewRoot) 
 Modifier le déroulement du cycle de vie (voir partie événement) 
Pleins d'autres choses qui sortent du cadre de ce cours …
keulkeul.blogspot.com FacesContext : utilisation explicite 
JSF - M. Baron - Page 88 
 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 paramètre :  + next); 
Map requestParameterValuesMap = context.getRequestParameterValuesMap(); 
Object tabParameter = requestParameterValuesMap.get((String)next); 
if (tabParameter instanceof String[]) { 
System.out.println(Valeur du paramètre :  + ((String[])tabParameter)[0]); 
} 
} 
} 
} 
FacesContextBean.java 
du projet 
FacesContext
keulkeul.blogspot.com FacesContext : utilisation explicite 
 Exemple (suite) : manipuler l'objet FacesContext 
JSF - M. Baron - Page 89 
... 
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
JSF - M. Baron - Page 90 
keulkeul.blogspot.com Backing bean : principe 
 Rappelons que les « Beans Managés » sont utilisés comme 
des modèles de vues 
 L'accès aux « références » des composants de la vue ne peut 
se faire directement (assez tordu avec FacesContext) 
 Il peut être intéressant d’accéder directement à la référence 
d’un composant graphique pour en modifier son état (à la 
suite d’un événement ou lors du processus de validation) 
 Le framework JSF offre la possibilité d’encapsuler tout ou 
partie des composants qui composent une vue 
 Il s’agit d’un type de Bean appelée « Backing Bean » qui 
correspond ni plus ni moins à un Bean managé 
 Un Backing Bean est donc un bean dont certaines propriétés 
sont de type UIComponent
JSF - M. Baron - Page 91 
keulkeul.blogspot.com Backing bean : principe 
 Dans le Bean, il faut déclarer des accesseurs et des 
modifieurs sur des propriétés 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; 
} 
} 
Le « Backing Bean » 
se comporte comme 
un Bean Managé 
Stocker et relayer la 
référence d’un 
composant JSF 
 Au niveau de la page JSP, la liaison entre le « Backing Bean » 
est la vue se fait par l’attribut binding 
html:commandButton binding=#{backingbean.nomAction} /
backingbean1.jsp 
du projet 
BackingBean 
JSF - M. Baron - Page 92 
keulkeul.blogspot.com Backing bean : principe 
 Exemple : activer/désactiver 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 
Une valeur dans un 
composant texte 
Un bouton activé 
La valeur a changé (sans 
passer par le Bean) 
Un bouton 
désactivé
JSF - M. Baron - Page 93 
keulkeul.blogspot.com Backing bean : principe 
 Exemple (suite) : activer/désactiver 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); 
} 
} 
} 
BackingBean.java 
du projet 
BackingBean
keulkeul.blogspot.com Message : manipulation et affichage 
 Pour l’instant avec un Bean managé il est possible de 
JSF - M. Baron - Page 94 
Stocker et afficher les valeurs d’un formulaire 
Générer les actions pour l’automate de navigation 
 L’API JSF fournit l’objet FacesMessage pour empiler des 
messages qui pourront être afficher dans une page JSP 
 Un objet FacesMessage est caractérisé par : 
 Sévérité : SEVERITY_INFO, SEVERITY_WARN, SEVERITY_ERROR 
et SEVERIRY_FATAL 
Résumé : texte rapide décrivant le message 
Détail : texte détaillé décrivant le message 
L’API fournit des modifieurs et accesseurs 
setSeverity(FacesMessage.Severity) / getSeverity() 
setSummary(String) / getSummary() 
setDetail(String) / getDetail()
keulkeul.blogspot.com Message : manipulation et affichage 
 Un objet FacesMessage est donc construit dans une classe 
JSF - M. Baron - Page 95 
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 (défini par id) 
Si id est null le message n’est pas associé à un composant 
 Exemple de construction et transmission d’un FacesMessage : 
// Déclaration d’un Message 
FacesMessage myFacesMessage = new FacesMessage(); 
myFacesMessage.setSeverity(FacesMessage.SEVERITY_INFO); 
myFacesMessage.setSummary(Un petit résumé); 
myFacesMessage.setDetail(Mon message qui ne sert à rien); 
// Transmission d’un Message 
FacesContext myFacesContext = FacesContext.getCurrentInstance(); 
myFacesContext.addMessage(null, myFacesMessage);
keulkeul.blogspot.com Message : manipulation et affichage 
La bibliothèque HTML propose deux balises personnalisées 
JSF - M. Baron - Page 96 
pour afficher les messages 
html:messages : affiche tous les messages 
html:message : affiche les messages associés à un id de composant 
 Les balises contiennent les attributs suivants : 
for : indique l’id du composant (uniquement pour message) 
showDetail : booléen qui précise si le message est détaillé 
showSummary : booléen qui précise si le message est résumé 
tooltip : booléen qui précise si une bulle d’aide est affichée 
layout : précise la manière d’afficher les messages. Valeurs possibles 
table ou list (par défaut)
keulkeul.blogspot.com Message : manipulation et affichage 
 Exemple : afficher les messages en un seul bloc 
JSF - M. Baron - Page 97 
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)); 
} 
... 
} 
BeanMessages du 
projet Messages
keulkeul.blogspot.com Message : manipulation et affichage 
 Exemple (suite) : afficher les messages en un seul bloc 
Affichage sous la 
forme d’un tableau 
JSF - M. Baron - Page 98 
%@taglib prefix=core uri=http://java.sun.com/jsf/core% 
%@taglib prefix=html uri=http://java.sun.com/jsf/html% 
html 
... 
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 
form1.jsp du projet 
Messages
keulkeul.blogspot.com Message : manipulation et affichage 
 Exemple : afficher les message en plusieurs blocs 
JSF - M. Baron - Page 99 
%@taglib prefix=core uri=http://java.sun.com/jsf/core% 
%@taglib prefix=html uri=http://java.sun.com/jsf/html% 
html 
... 
body 
core:view 
html:form id=logonForm 
Identifiant du composant 
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 
html:commandButton value=Valider action=#{beanmessage.validAction}/ 
html:commandButton value=Annuler action=#{beanmessage.cancelAction}/ 
/html:form 
/core:view 
/body 
/html 
Nécessaire pour identifier 
les sous composants 
form2.jsp du projet 
Messages 
Les identifiants sont 
utilisés pour « localiser » 
les messages 
inputText 
Précise que le message est 
associé à l’id myname
keulkeul.blogspot.com Message : manipulation et affichage 
 Exemple (suite) : afficher les message en plusieurs blocs 
JSF - M. Baron - Page 100 
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; } 
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 
myIdName et logonForm 
sont des identifiants de 
composants 
Précise que myIdName 
appartient à logonForm
keulkeul.blogspot.com Message : Internationalisation 
 faces-config.xml permet de configurer les localisations 
acceptées pour l’application WEB dans la balise application 
 Dans information deux informations sont à renseigner 
message-bundle : la ressource contenant les messages localisés 
local-config : indique la locale par défaut et les locales autorisées 
 Balise local-config deux informations sont à renseigner 
default-locale : la localisation par défaut 
supported-locale : la localisation supportée par l’application 
... 
application 
message-bundleresources.ApplicationMessage/message-bundle 
locale-config 
JSF - M. Baron - Page 101 
default-localeen/default-locale 
supported-localefr/supported-locale 
supported-localesp/supported-locale 
/locale-config 
/application faces-config.xml
keulkeul.blogspot.com Message : Internationalisation 
 Dans la version 1.2 possibilité de déclarer 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 localisés 
var : alias permettant d’accéder à la ressource base-name 
application 
resource-bundle 
base-nameresources.ApplicationMessage/base-name 
varbundle/var 
/resource-bundle 
/application 
 Dans la version 1.1 le chargement des ressources est effectué 
dans la page JSP à l’aide de la balise core:loadbundle 
core:loadBundle basename=resources.ApplicationMessage var=bundle / 
 Les ressources sont exploitées par l’intermédiaire des alias 
JSF - M. Baron - Page 102 
(attribut var) en utilisant les EL
keulkeul.blogspot.com Message : Internationalisation 
 Exemple : formulaire utilisant une ressource de localisation 
Solution pour 
la version 1.1 
de JSF 
JSF - M. Baron - Page 103 
%@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 
titleFormulaire JSF avec un Bean Managé/title 
/head 
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 
/html 
CoursesMessages_fr.xml 
EMAIL_ADRESS_MESSAGE = Adresse Email 
PASSWORD_MESSAGE = Mot de Passe 
LOGIN_MESSAGE = Connecter 
managedbeanviewbundle.jsp
keulkeul.blogspot.com Message : Internationalisation 
 Exemple (bis) : formulaire qui utilise une ressource pour la 
JSF - M. Baron - Page 104 
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 
application 
resource-bundle 
base-nameresources.ApplicationMessage/base-name 
varbundle/var 
/resource-bundle 
/application 
faces-config.xml 
Solution pour 
la version 1.2 
de JSF
keulkeul.blogspot.com Conversion de données : principe 
 Conversion des données du modèle et de la vue 
 les paramètres d'une requête sont de type chaînes de caractères 
 les Beans sont définis par des attributs représentés par des types de 
données (int, long, Object, …) 
 la conversion de données s'assurent alors qu'une chaîne de caractères 
peut être traduit en un type de donnée précis 
JSF - M. Baron - Page 105 
Respect du formatage en entrée et en sortie 
 Formatage en sortie : affichage d'une date 
 Afficher la date suivant un format compréhensible par l’utilisateur 
(fonction de la localisation et du type d’utilisateur) 
 Conformité en entrée : saisie d'une date 
 Associé à un composant de type saisie 
 Assurer que l’utilisateur a saisi une chaîne de texte respectant le 
format de l’entrée
keulkeul.blogspot.com Conversion de données : principe 
 Les convertisseurs de données sont appelés Converters 
 Tous les composants affichant une valeur et utilisés lors de 
la saisie fournissent une conversion de données 
 Les converters sont utilisables dans une JSP via une balise 
JSF - M. Baron - Page 106 
 Pour utiliser un converter : 
 soit utiliser les standards fournis par la bibliothèque JSF dans une JSP 
 soit le définir programmatiquement (dans un Bean) et l’utiliser dans 
une JSP 
 Converters standards de la bibliothèque JSF : 
core:convertDateTime : pour la conversion de date et d’heure 
core:convertNumber : pour la conversion de nombre
keulkeul.blogspot.com Conversion de données : cycle de vie 
Update 
Model 
Values 
JSF - M. Baron - Page 107 
Restore 
View 
Apply 
Requests 
Process 
Events 
Process 
Validations 
6 5 
Invoke 
Application 
Render 
Response 
Process 
Events 
Process 
Events 
Process 
Events 
Erreurs de Conversion 
et / ou de Validation 
Erreurs de Conversion 
Requête 
Faces 
Réponse 
Faces 
Réponse 
Complète 
Réponse 
Complète 
Réponse 
Complète 
Réponse 
Complète 
1 
2 
3 
4
keulkeul.blogspot.com Conversion de données : cycle de vie 
 Dans le cas d'un composant de la famille de type UIInput 
JSF - M. Baron - Page 108 
(par exemple un composant html:inputText) 
L'étape Process Validations réceptionne les valeurs des para-mètres 
(submittedValues) et applique les conversions 
1 
 Si la conversion a réussi, le traitement continu 
 L'étape Update Model Values modifie le modèle associé (un 
Bean par exemple) puis conversion des valeurs du modèle 
 Si la conversion a réussi, continuer processus … 
 Si la conversion a échoué, génération de messages d'erreurs et 
direction étape Render Response 
2 
3 
 Si la conversion a échoué, le traitement est abandonné (pas de 
changement de page) et des messages d'erreur sont générés et 
direction étape Render Response 
4 
6 
6 
5
keulkeul.blogspot.com Conversion de données : cycle de vie 
 Dans le cas d'un composant de la famille de type UIOutput 
JSF - M. Baron - Page 109 
(par exemple composant html:outputText) 
L'étape Process Validations et l'étape Update Model Values ne 
traitent pas de paramètres car il n'y en a pas … 
 Puis conversion des attributs du modèle présents dans le Bean 
 Si la conversion a réussi, continuer processus … 
 Si la conversion a échoué, génération de messages d'erreur et 
direction étape Render Response 
1 
2 
5 
4 
6 
La seconde conversion consiste à 
s'assurer de la cohérence des 
données du modèle et du format 
de conversion
keulkeul.blogspot.com Conversion de données : cycle de vie (via l'API) 
 Tous composants qui implémentent l'interface ValueHolder 
peuvent exploiter des Converters (UIOutput et UIInput) 
 L'implémentation de l'interface ValueHolder doit fournir des 
JSF - M. Baron - Page 110 
propriétés pour : 
 Effectuer la conversion via un objet Converter 
 Stocker la valeur convertie par l'objet Converter 
 Stocker la valeur propre du composant utilisée pour modifier le 
modèle de la vue et fournir une donnée à la réponse 
Ensemble de méthodes 
(accesseurs et modifieurs) pour la 
manipulation de ces propriétés
keulkeul.blogspot.com Conversion de données : cycle de vie (via l'API) 
JSF - M. Baron - Page 111 
 Un objet Converter fournit deux méthodes : 
 Object getAsObject(…) throws ConverterException appelée lors de 
l'étape Process Validation 
 String getAsString(…) throws ConverterException appelée après 
l'étape Update Model Values 
 Dans le cas des objets UIInput les valeurs des paramètres 
sont stockées dans l'attribut submittedValue (interface 
EditableValueHolder) 
Nous décrirons la classe 
Converter au moment de la 
création de notre propre 
converter 
Par son intermédiaire la 
phase Process 
Validations peut récupérer 
les valeurs qui étaient issues 
des paramètres
keulkeul.blogspot.com Conversion de données : cycle de vie (via l'API) 
JSF - M. Baron - Page 112 
 Processus de conversion par l'API 
submittedValue est convertie par getAsObject(…) et stockée dans 
localValue (si exception de getAsObject(…) arrêt du processus) 
 Si localValue != null, sa valeur est transmise à value 
 value transmet la valeur à une propriété du modèle de la vue 
(via un modifieur du Bean) 
 value récupère la valeur d'une propriété du modèle de la vue 
(via un accesseur du Bean) 
Si localValue == null, value récupère la valeur d'une propriété du 
modèle 
 value est convertie par getAsString(…) et envoyée à la réponse (si 
exception de getAsString(…) arrêt du processus
keulkeul.blogspot.com Conversion de données : tag convertNumber 
La balise core:convertNumber permet la conversion de 
JSF - M. Baron - Page 113 
chaînes de caractères en valeur numérique 
 À utiliser dans le corps d’une balise graphique JSF 
 Différents attributs disponibles 
 type : type de valeur (number, currency ou percent) 
 pattern : motif de formatage 
 (max/min)FractionDigits : (int) nombre maxi/mini sur la décimale 
 (max/min)IntegerDigits : (int) nombre maxi/mini sur la partie entière 
 integerOnly : (booléen) seule la partie entière est prise en compte 
 groupingUsed : (booléen) précise si les caractères de regroupement 
sont utilisés (exemple : « , », « ; », « : », … ) 
 locale : définit la localisation de la conversion 
 currencyCode : code de la monnaie utilisée pour la conversion 
 currencySymbol : spécifie le caractère (exclusif avec currencyCode)
keulkeul.blogspot.com Conversion de données : tag convertNumber 
 Exemple : utilisation d’un converter en « sortie » 
JSF - M. Baron - Page 114 
html 
... 
body 
core:view 
html:form 
html:outputText value=#{beanconverter1.price} 
core:convertNumber type=currency currencyCode=EUR 
minFractionDigits=4 / 
/html:outputText 
/html:form 
/core:view 
/body 
/html 
public class BeanConverter1 { 
private double price; 
public BeanConverter1() { 
this.price = 50.50d; 
} 
public double getPrice() { 
return price; 
} 
public void setPrice(double pPrice) { 
this.price = pPrice; 
} 
} 
converters1.jsp du 
projet Converters 
BeanConverter1 du 
projet Converters
keulkeul.blogspot.com Conversion de données : tag convertNumber 
 Exemple (suite) : utilisation d’un converter en « entrée » 
JSF - M. Baron - Page 115 
html 
... 
body 
core:view 
html:form 
Prix : 
html:intputText value=#{beanconverter1.price}  
core:convertNumber minFractionDigits=2 / 
/html:inputTextbr 
html:commandButton value=Envoyer / 
/html:form 
/core:view 
/body 
/html 
converters2.jsp du 
projet Converters 
Avant la conversion, au 
moment de la saisie … 
Après la conversion
keulkeul.blogspot.com Conversion de données : tag convertDateTime 
La balise core:convertDateTime permet la conversion de 
html:outputText value=#{packageBean.facturedate} 
core:convertDateTime type=date dateStyle=long/ 
JSF - M. Baron - Page 116 
chaînes de caractères en date ou heure 
 À utiliser également dans le corps d’une balise graphique JSF 
/html:outputText 
 Différents attributs disponibles 
 type : type de valeur (date, time ou both) 
 dateStyle : style possible de la date (short, medium, long, full, both) 
timeStyle : style possible de l’heure (short, medium, long, full, both) 
Pattern : motif utilisé pour une Date 
Locale : choix de la localisation
keulkeul.blogspot.com Conversion de données : tag convertDateTime 
 Exemple : utilisation d’un converter date en « entrée » 
JSF - M. Baron - Page 117 
... 
body 
core:view 
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:inputTextbr 
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 
converters3.jsp du 
projet Converters
keulkeul.blogspot.com Conversion de données : tag convertDateTime 
 Exemple (suite) : utilisation d’un converter Date en « entrée » 
JSF - M. Baron - Page 118 
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; } 
} 
BeanConverter2.java 
du projet Converters
keulkeul.blogspot.com Conversion de données : messages 
 Dans le cas où des erreurs de conversion sont provoquées, 
JSF - M. Baron - Page 119 
des messages sont ajoutés au FacesContext 
 En utilisant les balises html:message et html:messages 
possibilité d'afficher un message précis ou l'ensemble 
 Généralement à chaque composant est associé un id, ce qui 
permettra de localiser précisément l'origine de l'erreur 
 Exemple : 
... 
html:outputText value=Prix :  / 
html:intputText id=priceId value=#{beanconverter1.price}  
core:convertNumber minFractionDigits=2 / 
/html:inputTexthtml:message for=priceId /br 
html:commandButton value=Envoyer / 
... 
Converters2.jsp du 
projet Converters
keulkeul.blogspot.com Conversion de données : messages 
 Exemple : converter date en « entrée » avec messages 
JSF - M. Baron - Page 120 
... 
core:view 
html:form 
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:inputTexthtml:message for=ticketsId /br 
html:outputText value=Date :  / 
html:inputText id=dateId value=#{beanconverter2.date} 
core:convertDateTime type=date dateStyle=medium / 
/html:inputTexthtml:message for=dateId /br 
html:outputText value=Liste des messages :  /br 
html:messages / 
html:commandButton value=Valider / 
/html:form 
/core:view 
/body 
/html 
converters3.jsp du 
projet Converters
keulkeul.blogspot.com Conversion de données : messages personnalisés 
 Les messages sont déclarés par des clés stockées dans un 
fichier ressource dont le nom dépend de la localisation 
 Les fichiers ressources (fichier au format properties) sont 
stockés dans le répertoire javax.faces de la librairie 
implémentation de JSF (myfaces-impl-1.x.x.jar) 
 Pour modifier un message pour un converter donné 
JSF - M. Baron - Page 121 
Créer un fichier properties dans le répertoire source 
Déclarer le fichier properties dans le faces-config.xml 
Copier les clés à redéfinir 
Modifier la valeur du texte dans les clés
keulkeul.blogspot.com Conversion de données : messages personnalisés 
 Exemple : modification des messages d'erreurs de conversion 
JSF - M. Baron - Page 122 
... 
application 
messsage-bundlebeanPackage.MyMessages/message-bundle 
/application 
/faces-config 
... 
javax.faces.convert.NumberConverter.CONVERSION = Problème pour le champs 
Nombre de tickets 
Javax.faces.convert.NumberConverter.CONVERSION_detail = {0} : La donnée 
n'est pas un nombre valide 
... 
*.html, *.jsp, ... 
WEB-INF 
web.xml 
faces-config.xml 
classes 
MyApp 
MyMessages.properties 
faces-config.xml du 
projet Converters 
MyMessages.properties
keulkeul.blogspot.com Conversion de données : attribut immediate 
 Rappelons que toute requête JSF passe obligatoirement par 
JSF - M. Baron - Page 123 
un traitement défini par le cycle de vie JSF 
 La conversion de données est obligatoirement traitée par le 
cycle de vie JSF même si par exemple une requête donnée 
n’est pas de valider un formulaire (annuler le traitement) 
 Si une requête est d’annuler la saisie du formulaire (redirec-tion 
vers une autre page), le processus effectuera toujours la 
conversion de données de tous les composants d’une vue JSF 
 Il peut donc être utile de passer outre le processus de con-version 
: utilisation de l’attribut immediate pour une balise de 
composant qui doit soumettre le formulaire 
 La présence de l’attribut immediate (valeur à true) modifie le 
déroulement du cycle de vie d’une requête JSF
keulkeul.blogspot.com Conversion de données : attribut immediate 
 Le composant passé à immediate sera géré en premier dans 
JSF - M. Baron - Page 124 
le cycle de vie 
 Le fonctionnement donné ci-dessous ne concerne que les 
composants de type Command (CommandButton par exemple) 
 Après la phase Apply Request Values, le traitement de la requête 
va être redirigé directement vers Render Response 
 De cette manière les phases Process Validations, Update Model 
Values, Invoke Application ne sont pas exécutées 
 Il n’y a donc pas de conversion, ni de modification dans le 
modèle 
 Les différentes saisies de l’utilisateur ne sont jamais traitées 
et il n’y a donc pas d’erreurs qui pourraient bloquées 
l’utilisateur Une explication détaillée de l’effet de bord de 
immediate (composant Input et Command) est 
donnée dans la partie événement
keulkeul.blogspot.com Conversion de données : attribut immediate 
Update 
Model 
Values 
JSF - M. Baron - Page 125 
Restore 
View 
Apply 
Requests 
Process 
Events 
Process 
Validations 
Invoke 
Application 
Render 
Response 
Process 
Events 
Process 
Events 
Process 
Events 
Erreurs de Conversion 
et / ou de Validation 
Erreurs de Conversion 
Requête 
Faces 
Réponse 
Faces 
Réponse 
Complète 
Réponse 
Complète 
Réponse 
Complète 
Réponse 
Complète 
Quand 
immediate == true 
Cycle de vie valable ssi le 
composant concerné par l’attribut 
immediate est de type Command
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01

Contenu connexe

Tendances

Support Java Avancé Troisième Partie
Support Java Avancé Troisième PartieSupport Java Avancé Troisième Partie
Support Java Avancé Troisième Partie
ENSET, Université Hassan II Casablanca
 
Support de cours EJB 3 version complète Par Mr Youssfi, ENSET, Université Ha...
Support de cours EJB 3 version complète Par Mr  Youssfi, ENSET, Université Ha...Support de cours EJB 3 version complète Par Mr  Youssfi, ENSET, Université Ha...
Support de cours EJB 3 version complète Par Mr Youssfi, ENSET, Université Ha...
ENSET, Université Hassan II Casablanca
 
Soa & services web
Soa & services webSoa & services web
Soa & services web
Ghazouani Mahdi
 
Chp3 - Les Services Web
Chp3 - Les Services WebChp3 - Les Services Web
Chp3 - Les Services Web
Lilia Sfaxi
 
Support NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDBSupport NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDB
ENSET, Université Hassan II Casablanca
 
Java Server Faces (JSF)
Java Server Faces (JSF)Java Server Faces (JSF)
Java Server Faces (JSF)
Heithem Abbes
 
Support de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfiSupport de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfi
ENSET, Université Hassan II Casablanca
 
Formation JAVA/J2EE
Formation JAVA/J2EEFormation JAVA/J2EE
Formation JAVA/J2EE
Ines Ouaz
 
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
ENSET, Université Hassan II Casablanca
 
Chp1- Introduction aux Technologies Web et SOA
Chp1- Introduction aux Technologies Web et SOAChp1- Introduction aux Technologies Web et SOA
Chp1- Introduction aux Technologies Web et SOA
Lilia Sfaxi
 
Chp2 - Vers les Architectures Orientées Services
Chp2 - Vers les Architectures Orientées ServicesChp2 - Vers les Architectures Orientées Services
Chp2 - Vers les Architectures Orientées Services
Lilia Sfaxi
 
Support POO Java Deuxième Partie
Support POO Java Deuxième PartieSupport POO Java Deuxième Partie
Support POO Java Deuxième Partie
ENSET, Université Hassan II Casablanca
 
Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
ENSET, Université Hassan II Casablanca
 
Support de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec SpringSupport de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec Spring
ENSET, Université Hassan II Casablanca
 
Architecture orientée service (SOA)
Architecture orientée service (SOA)Architecture orientée service (SOA)
Architecture orientée service (SOA)
Klee Group
 
Introduction aux web services
Introduction aux web servicesIntroduction aux web services
Introduction aux web services
mohammed addoumi
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring boot
Antoine Rey
 
Support de cours Spring M.youssfi
Support de cours Spring  M.youssfiSupport de cours Spring  M.youssfi
Support de cours Spring M.youssfi
ENSET, Université Hassan II Casablanca
 
Architecture réparties et les services web
Architecture réparties et les services webArchitecture réparties et les services web
Architecture réparties et les services web
CHOUAIB EL HACHIMI
 
Les web services
Les web servicesLes web services
Les web services
dihiaselma
 

Tendances (20)

Support Java Avancé Troisième Partie
Support Java Avancé Troisième PartieSupport Java Avancé Troisième Partie
Support Java Avancé Troisième Partie
 
Support de cours EJB 3 version complète Par Mr Youssfi, ENSET, Université Ha...
Support de cours EJB 3 version complète Par Mr  Youssfi, ENSET, Université Ha...Support de cours EJB 3 version complète Par Mr  Youssfi, ENSET, Université Ha...
Support de cours EJB 3 version complète Par Mr Youssfi, ENSET, Université Ha...
 
Soa & services web
Soa & services webSoa & services web
Soa & services web
 
Chp3 - Les Services Web
Chp3 - Les Services WebChp3 - Les Services Web
Chp3 - Les Services Web
 
Support NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDBSupport NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDB
 
Java Server Faces (JSF)
Java Server Faces (JSF)Java Server Faces (JSF)
Java Server Faces (JSF)
 
Support de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfiSupport de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfi
 
Formation JAVA/J2EE
Formation JAVA/J2EEFormation JAVA/J2EE
Formation JAVA/J2EE
 
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
 
Chp1- Introduction aux Technologies Web et SOA
Chp1- Introduction aux Technologies Web et SOAChp1- Introduction aux Technologies Web et SOA
Chp1- Introduction aux Technologies Web et SOA
 
Chp2 - Vers les Architectures Orientées Services
Chp2 - Vers les Architectures Orientées ServicesChp2 - Vers les Architectures Orientées Services
Chp2 - Vers les Architectures Orientées Services
 
Support POO Java Deuxième Partie
Support POO Java Deuxième PartieSupport POO Java Deuxième Partie
Support POO Java Deuxième Partie
 
Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
 
Support de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec SpringSupport de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec Spring
 
Architecture orientée service (SOA)
Architecture orientée service (SOA)Architecture orientée service (SOA)
Architecture orientée service (SOA)
 
Introduction aux web services
Introduction aux web servicesIntroduction aux web services
Introduction aux web services
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring boot
 
Support de cours Spring M.youssfi
Support de cours Spring  M.youssfiSupport de cours Spring  M.youssfi
Support de cours Spring M.youssfi
 
Architecture réparties et les services web
Architecture réparties et les services webArchitecture réparties et les services web
Architecture réparties et les services web
 
Les web services
Les web servicesLes web services
Les web services
 

Similaire à Jsf 110530152515-phpapp01

JEE_Chapter4_JSF_VF (1).pdf
JEE_Chapter4_JSF_VF (1).pdfJEE_Chapter4_JSF_VF (1).pdf
JEE_Chapter4_JSF_VF (1).pdf
MahmoudiOussama
 
Prsentation de-javaserver-faces4124
Prsentation de-javaserver-faces4124Prsentation de-javaserver-faces4124
Prsentation de-javaserver-faces4124Mejdeddine Bouzouita
 
Présentation de JavaServer Faces
Présentation de JavaServer FacesPrésentation de JavaServer Faces
Présentation de JavaServer Faces
JS Bournival
 
Presentation jsf2
Presentation jsf2Presentation jsf2
Presentation jsf2
Damien GOUYETTE
 
Jaxrs
JaxrsJaxrs
Java 110605092007-phpapp02
Java 110605092007-phpapp02Java 110605092007-phpapp02
Java 110605092007-phpapp02
Eric Bourdet
 
Présentation prime facesfinal
Présentation prime facesfinalPrésentation prime facesfinal
Présentation prime facesfinalAymen Drira
 
Architecture java j2 ee a partager
Architecture java j2 ee a partagerArchitecture java j2 ee a partager
Architecture java j2 ee a partager
aliagadir
 
J2eeintro
J2eeintroJ2eeintro
J2eeintromedbmb
 
Play framework - Human Talks Grenoble - 12.02.2013
Play framework - Human Talks Grenoble - 12.02.2013Play framework - Human Talks Grenoble - 12.02.2013
Play framework - Human Talks Grenoble - 12.02.2013Xavier NOPRE
 
Soutenance Stage Licence
Soutenance Stage LicenceSoutenance Stage Licence
Soutenance Stage LicenceMathias Kluba
 
Workshop Spring - Session 1 - L'offre Spring et les bases
Workshop Spring  - Session 1 - L'offre Spring et les basesWorkshop Spring  - Session 1 - L'offre Spring et les bases
Workshop Spring - Session 1 - L'offre Spring et les bases
Antoine Rey
 
ASI INFORMATIQUE - Cursus de formation XPages Standard
ASI INFORMATIQUE - Cursus de formation XPages StandardASI INFORMATIQUE - Cursus de formation XPages Standard
ASI INFORMATIQUE - Cursus de formation XPages Standard
Patrice Vialor
 
Et pourquoi pas JEE ?
Et pourquoi pas JEE ?Et pourquoi pas JEE ?
Et pourquoi pas JEE ?
PALO IT
 
Programmation_JEE_Version_imprimable.pdf
Programmation_JEE_Version_imprimable.pdfProgrammation_JEE_Version_imprimable.pdf
Programmation_JEE_Version_imprimable.pdf
ngombeemmanuel
 
java (1).pdf
java (1).pdfjava (1).pdf
java (1).pdf
TarikElMahtouchi1
 
cours-gratuit.com--id-1964.pdf
cours-gratuit.com--id-1964.pdfcours-gratuit.com--id-1964.pdf
cours-gratuit.com--id-1964.pdf
Rachida19
 

Similaire à Jsf 110530152515-phpapp01 (20)

JEE_Chapter4_JSF_VF (1).pdf
JEE_Chapter4_JSF_VF (1).pdfJEE_Chapter4_JSF_VF (1).pdf
JEE_Chapter4_JSF_VF (1).pdf
 
Prsentation de-javaserver-faces4124
Prsentation de-javaserver-faces4124Prsentation de-javaserver-faces4124
Prsentation de-javaserver-faces4124
 
Présentation de JavaServer Faces
Présentation de JavaServer FacesPrésentation de JavaServer Faces
Présentation de JavaServer Faces
 
Java Server Faces 2
Java Server Faces 2Java Server Faces 2
Java Server Faces 2
 
Presentation jsf2
Presentation jsf2Presentation jsf2
Presentation jsf2
 
Jaxrs
JaxrsJaxrs
Jaxrs
 
Struts
StrutsStruts
Struts
 
Java 110605092007-phpapp02
Java 110605092007-phpapp02Java 110605092007-phpapp02
Java 110605092007-phpapp02
 
Présentation prime facesfinal
Présentation prime facesfinalPrésentation prime facesfinal
Présentation prime facesfinal
 
JSF 2.0
JSF 2.0JSF 2.0
JSF 2.0
 
Architecture java j2 ee a partager
Architecture java j2 ee a partagerArchitecture java j2 ee a partager
Architecture java j2 ee a partager
 
J2eeintro
J2eeintroJ2eeintro
J2eeintro
 
Play framework - Human Talks Grenoble - 12.02.2013
Play framework - Human Talks Grenoble - 12.02.2013Play framework - Human Talks Grenoble - 12.02.2013
Play framework - Human Talks Grenoble - 12.02.2013
 
Soutenance Stage Licence
Soutenance Stage LicenceSoutenance Stage Licence
Soutenance Stage Licence
 
Workshop Spring - Session 1 - L'offre Spring et les bases
Workshop Spring  - Session 1 - L'offre Spring et les basesWorkshop Spring  - Session 1 - L'offre Spring et les bases
Workshop Spring - Session 1 - L'offre Spring et les bases
 
ASI INFORMATIQUE - Cursus de formation XPages Standard
ASI INFORMATIQUE - Cursus de formation XPages StandardASI INFORMATIQUE - Cursus de formation XPages Standard
ASI INFORMATIQUE - Cursus de formation XPages Standard
 
Et pourquoi pas JEE ?
Et pourquoi pas JEE ?Et pourquoi pas JEE ?
Et pourquoi pas JEE ?
 
Programmation_JEE_Version_imprimable.pdf
Programmation_JEE_Version_imprimable.pdfProgrammation_JEE_Version_imprimable.pdf
Programmation_JEE_Version_imprimable.pdf
 
java (1).pdf
java (1).pdfjava (1).pdf
java (1).pdf
 
cours-gratuit.com--id-1964.pdf
cours-gratuit.com--id-1964.pdfcours-gratuit.com--id-1964.pdf
cours-gratuit.com--id-1964.pdf
 

Dernier

De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
Université de Franche-Comté
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
OCTO Technology
 
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptxPRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
AlbertSmithTambwe
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
UNITECBordeaux
 
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
OCTO Technology
 
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdfOCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO Technology
 
COURS D'ADMINISTRATION RESEAU SOUS WINDOWS
COURS D'ADMINISTRATION RESEAU  SOUS WINDOWSCOURS D'ADMINISTRATION RESEAU  SOUS WINDOWS
COURS D'ADMINISTRATION RESEAU SOUS WINDOWS
AlbertSmithTambwe
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Laurent Speyser
 
Les écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptxLes écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptx
abderrahimbourimi
 

Dernier (9)

De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
 
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptxPRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
 
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
 
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdfOCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
 
COURS D'ADMINISTRATION RESEAU SOUS WINDOWS
COURS D'ADMINISTRATION RESEAU  SOUS WINDOWSCOURS D'ADMINISTRATION RESEAU  SOUS WINDOWS
COURS D'ADMINISTRATION RESEAU SOUS WINDOWS
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
 
Les écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptxLes écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptx
 

Jsf 110530152515-phpapp01

  • 1. Java pour le développement d’applications Web : Java EE JSF : Java Server Faces Mickaël BARON - 2007 (Rév. Mai 2011) mailto:baron.mickael@gmail.com ou mailto:baron@ensma.fr
  • 2. JSF - M. Baron - Page 2 keulkeul.blogspot.com Licence Creative Commons Contrat Paternité Partage des Conditions Initiales à l'Identique 2.0 France http://creativecommons.org/licenses/by-sa/2.0/fr
  • 3. JSF - M. Baron - Page 3 keulkeul.blogspot.com Déroulement du cours JSF Pédagogie du cours Illustration avec de nombreux exemples Des bulles d’aide 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 personnalisées) Structuration du cours Démarrage par les bases de JSF (Bean et Navigation) Pour chaque nouveau concept introduit, le présenter en détail Terminer par des concepts plus complexes Remerciements Developpez.com [djo.mos pour ses commentaires]
  • 4. keulkeul.blogspot.com Introduction : qu’est-ce-que c’est ... Java Server Faces est un framework de développement d’applications Web en Java permettant de respecter le modèle d’architecture MVC et basé sur des composants côté présentation JSF - M. Baron - Page 4 Java Server Faces permet une séparation de la couche présentation des autres couches (MVC) un mapping entre l’HTML et l’objet un ensemble de composants riches et réutilisables une liaison simple entre les actions côté client de l’utilisateur (event listener) et le code Java côté serveur Création de nouveaux composants graphiques JSF peut être utilisé pour générer autre chose que du HTML (XUL, XML, WML, …)
  • 5. keulkeul.blogspot.com Introduction : meilleur que Struts, les avantages … JSF - M. Baron - Page 5 Possibilité de créer de nouveaux composants JSF permet de combiner plusieurs composants pour aboutir à un composant plus complexe Support différentes technologies d’affichage JSF ne se limite pas à l’HTML (XUL, Flash, …) Accès aux Beans par leurs noms en utilisant les Expressions Language Pour Struts nécessité de mémoriser le nom du formulaire Simplification des définitions des contrôleurs et des Beans Simplification du fichier de configuration L’orientation composants graphiques permet à JSF d’être utilisé de manière plus simple dans les environnements de développement (voir Sun Java Studio Creator 2)
  • 6. keulkeul.blogspot.com Introduction : meilleur que Struts … et les inconvénients JSF - M. Baron - Page 6 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 contrôleurs (form.do) avaient différentes URL’s JSF utilisent les mêmes noms pour la vue et le contrôleur La validation dans JSF n’est pas aussi fournie que Struts Possibilité de générer du JavaScript avec Struts pas JSF Possibilité de vérifier la syntaxe d’une carte de crédit, utilisation d’expressions régulières, … Moins de documentation et de ressources Nous allons tenter d’y remédier …
  • 7. keulkeul.blogspot.com Introduction : une spec et plusieurs implémentations JSF comme la plupart des technologies proposées par Sun est définie dans une spécification JSR-127 (version 1.1) puis JSR-252 (1.2) Il existe donc plusieurs implémentations de JSF Sun Reference : http://java.sun.com/javaee/javaserverfaces JSF - M. Baron - Page 7 Apache MyFaces : http://myfaces.apache.org L’implémentation proposée par Apache est appelée MyFaces Apache fournit des fonctionnalités 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 associée à Java EE 5
  • 8. keulkeul.blogspot.com Introduction : documentations et ressources Même si JSF n’est pas aussi utilisé et documenté que Struts, de nombreux sites commencent à apparaître pour proposer tutoriels et exemples (peu de ressource en français) JSF - M. Baron - Page 8 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 référence : http://java.sun.com/javaee/javaserverfaces Site du projet : http://javaserverfaces.dev.java.net 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
  • 9. JSF - M. Baron - Page 9 keulkeul.blogspot.com Bibliothèque … 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 Core JavaServer Faces Auteur : David Geary and Cay Horstmann Éditeur : Prentice Hall Ptr Edition : 2004 - 658 pages - ISBN : 0-13146-305-5
  • 10. Introduction : comment ça marche … JSF - M. Baron - Page 10 keulkeul.blogspot.com L’interface utilisateur construite dans la page JSP est générée à l’aide de la technologie JSF (résultat myUI) Elle fonctionne sur le serveur et le rendu est retourné au client JSF s’appuie sur les technologies précédentes Génération en Servlet Utilisation des composants JSF dans les pages JSP Les composants JSF sont exposés aux JSPs grâce aux balises personnalisés
  • 11. keulkeul.blogspot.com Introduction : principe pour traiter un formulaire 1. Construire le formulaire dans une page JSP en utilisant les JSF - M. Baron - Page 11 balises JSF 2. Développer un Bean qui effectue un « Mapping » avec les valeurs du formulaire 3. Modifier le formulaire pour spécifier l’action et l’associer au Bean 4. Fournir des Converters et des Validators pour traiter les données du formulaire 5. Paramétrer le fichier faces-config.xml pour déclarer le Bean et les règles de navigation 6. Créer les pages JSP correspondant à chaque condition de retour 7. Protéger les pages JSP utilisées par le contexte JSF de façon à éviter d’y accéder directement
  • 12. JSF - M. Baron - Page 12 keulkeul.blogspot.com Plan du cours JSF Configuration : utiliser JSF dans une application Java EE Bean Managé : stocker, afficher les valeurs d’un formulaire Cycle de vie : comprendre les rouages d’un composant JSF Navigation : choisir une vue selon un message Composants CORE et HTML : gérer 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 d’un formulaire Validators : valider les valeurs saisies d’un formulaire Evénements : gérer les actions utilisateur Comp. Tomahawk : ajouter de nouveaux composants Création de composants JSF : étendre la bibliothèque
  • 13. keulkeul.blogspot.com Configuration : JSF dans le web.xml Nécessite la configuration du fichier web.xml de façon à ce JSF - M. Baron - Page 13 que JSF soit pris en compte Paramétrer le fonctionnement général de l’application : le contrôleur Identifier la servlet principale : javax.faces.webapp.FacesServlet Spécifier le nom et le chemin du fichier de configuration Nom du paramètre : javax.faces.application.CONFIG_FILES Exemple : /WEB-INF/faces-config.xml Spécifie où l’état de l’application doit être sauvé Nom du paramètre : javax.faces.STATE_SAVING_METHOD Valeurs possibles : client ou server Valider ou pas les fichiers XML Nom du paramètre : com.sun.faces.validateXml Valeurs possibles : true ou false (défaut : false)
  • 14. keulkeul.blogspot.com Configuration : JSF dans le web.xml Indique si les objets développés tels que les Beans, les composants, les validators et les converters doivent être créés au démarrage de l’application Nom du paramètre : com.sun.faces.verifyObjects Valeurs possibles : true ou false (défaut : false) La servlet principale est le point d’entrée d’une application JSF On trouve plusieurs manières de déclencher des ressources JSF JSF - M. Baron - Page 14 Préfixe /faces/ Suffixes *.jsf ou *.faces Exemples (le contexte de l’application est myAppli) http://localhost/myAppli/faces/index.jsp http://localhost/myAppl/index.jsf Avec Struts nous utilisions généralement le suffixe « .do » pour atteindre le contrôleur
  • 15. keulkeul.blogspot.com Configuration : JSF dans le web.xml Exemple : paramétrer une application Web de type JSF JSF - M. Baron - Page 15 ... context-param param-namecom.sun.faces.validateXml/param-name param-valuetrue/param-value /context-param servlet servlet-nameFaces Servlet/servlet-name servlet-classjavax.faces.webapp.FacesServlet/servlet-class load-on-startup1/load-on-startup /servlet servlet-mapping servlet-nameFaces Servlet/servlet-name url-pattern/faces/*/url-pattern /servlet-mapping servlet-mapping servlet-nameFaces Servlet/servlet-name url-pattern*.faces/url-pattern /servlet-mapping ... La Servlet qui gère les entrées au contexte JSF Utilisation de context-param pour paramétrer le fonctionnement des JSF Comment accéder à la Servlet « Faces Servlet » web.xml
  • 16. keulkeul.blogspot.com Configuration : accès restreints aux pages JSP Quand une page JSP utilise des composants JSF elle doit être traitée 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 appelée directement sans passer par la Servlet principale une erreur est générée JSF - M. Baron - Page 16 http://localhost/myAppli/index.jsp : erreur !!! Empêcher donc les clients d’accéder directement aux pages JSP qui exploitent des composants JSF Solutions Utiliser la balise security-constraint dans le fichier web.xml Déclarer chaque page JSP qui doit être protégée (celles qui utilisent des composants JSF)
  • 17. keulkeul.blogspot.com Configuration : accès restreints aux pages JSP JSF - M. Baron - Page 17 Exemple : restreindre l’accès aux pages JSP ... context-param param-namecom.sun.faces.validateXml/param-name param-valuetrue/param-value /context-param ... securiy-constraint web-resource-collection web-resource-nameNo-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 /web-resource-collection auth-constraint descriptionPas de rôles, donc pas d’accès direct/description /auth-constraint /security-constraint ... Ajouter la balise security-constraint dans le fichier web.xml Les pages JSP qui utilisent des composants JSF Protéger efficacement toutes les pages JSP qui utilisent des composants JSF
  • 18. keulkeul.blogspot.com Configuration : le fichier contrôleur « faces-config.xml » Le fichier gérant la logique de l’application web s’appelle par JSF - M. Baron - Page 18 défaut faces-config.xml Il est placé dans le répertoire WEB-INF au même niveau que web.xml Il décrit essentiellement six principaux éléments : les Beans managés managed-bean les règles de navigation navigation-rule les ressources éventuelles suite à des messages message-bundle la configuration de la localisation resource-bundle la configuration des Validators et des Converters validator converter d’autres éléments liés à des nouveaux composants JSF render-kit Le fichier de configuration est un fichier XML décrit par une DTD. La balise de départ est faces-config (version 1.1)
  • 19. keulkeul.blogspot.com Configuration : le fichier contrôleur « faces-config.xml » La description de l’ensemble des balises peut être trouvée http://www.horstmann.com/corejsf/faces-config.html JSF - M. Baron - Page 19 ?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 l’application JSF La version 1.2 de JSF utilise un schéma au lieu d’une DTD
  • 20. keulkeul.blogspot.com Configuration : balises personnalisées dans les JSP Les composants JSF sont utilisés dans les pages JSP au moyen de balises personnalisées dédiées aux JSF CORE : noyau qui gère les vues HTML : composants JSF Le détail de CORE et HTML sera donné plus tard Description des balises personnalisées Core et HTML http://java.sun.com/javaee/javaserverfaces/1.2_MR1/docs/tlddocs http://www.horstmann.com/corejsf/jsf-tags.html Possibilité d’utiliser d’autres balises (Tomahawk, ADF Faces) Les composants JSF doivent être encadrés par une vue JSF déclarée 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 % ... core:view JSF - M. Baron - Page 20 ... /core:view ... Utilisation des composants JSF Possibilité d’utiliser des balises HTML classiques c’est du JSP!!!
  • 21. bin lib classes ... JSF - M. Baron - Page 21 keulkeul.blogspot.com Configuration : JSF et Tomcat Pour exploiter et déployer 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 copiées soit en locale à l’appli web sont en globale dans le répertoire Tomcat *.html, *.jsp, ... WEB-INF web.xml faces-config.xml lib classes Tomcat conf Locale à l’application jsf-api.jar jsf-impl.jar jstl-1.2.jar … jsf-api.jar jsf-impl.jar jstl-1.2.jar … Globale à l’application MyApp
  • 22. org.apache.myfaces.webapp.StartupServletContextListener JSF - M. Baron - Page 22 keulkeul.blogspot.com Configuration : JSF et Tomcat Selon la version et le serveur d’application, le fichier web.xml doit être complété (Tomcat 6 pour nos tests) Pour la version 1.1.5 de JSF (MyFaces) web-app ... ... listener listener-class /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
  • 23. keulkeul.blogspot.com 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% JSF - M. Baron - Page 23 html head meta http-equiv=Content-Type content=text/html; charset=UTF-8 titleHello World avec JSF/title /head body core:view h1html:outputText value=Hello World avec JSF //h1br La même chose avec du HTML : h1Hello World avec JSF/h1 /core:view /body /html welcomeJSF.jsp du projet HelloWorld
  • 24. keulkeul.blogspot.com Le premier exemple « Hello World avec JSF » Exemple (suite) : afficher le message « Hello World » … JSF - M. Baron - Page 24 ?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/web-app_ 2_4.xsd servlet servlet-nameFaces Servlet/servlet-name servlet-classjavax.faces.webapp.FacesServlet/servlet-class load-on-startup1/load-on-startup /servlet servlet-mapping servlet-nameFaces Servlet/servlet-name url-pattern/faces/*/url-pattern /servlet-mapping security-constraint display-nameConstraint1/display-name web-resource-collection web-resource-nameNo-JSP-JSF-Page/web-resource-name url-pattern/welcomeJSF.jsp/url-pattern /web-resource-collection auth-constraint descriptionPas de rôles, donc pas d’accès direct/description /auth-constraint /security-constraint /web-app web.xml du projet HelloWorld
  • 25. keulkeul.blogspot.com Le premier exemple « Hello World avec JSF » Exemple (suite) : afficher le message « Hello World » … Considérons que la page welcomeJSF.jsp n’est pas protégée et que la ressource est accédée directement (sans passer par la Servlet principale) JSF - M. Baron - Page 25 Retour d’un message d’erreur car les éléments JSF ne sont pas traités par la Servlet principale
  • 26. keulkeul.blogspot.com Le premier exemple « Hello World avec JSF » Exemple (suite) : afficher le message « Hello World » … Considérons que la ressource welcomeJSF.jsp est protégée et que la ressource est accédée directement (sans passer par la Servlet principale) JSF - M. Baron - Page 26 Retour d’un message d’erreur car la page est protégée
  • 27. keulkeul.blogspot.com Le premier exemple « Hello World avec JSF » Exemple (suite) : afficher le message « Hello World » … JSF - M. Baron - Page 27 ?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 faces-config.xml du projet HelloWorld Dans cet exemple aucune configuration est nécessaire. Nous verrons dans la suite les règles de navigation et la déclaration de Bean managés
  • 28. JSF - M. Baron - Page 28 keulkeul.blogspot.com Bean Managé : principe Rappelons qu’un Bean est une classe Java respectant un ensemble de directives Un constructeur public sans argument Les propriétés d’un Bean sont accessibles au travers de méthodes getXXX et setXXX portant le nom de la propriété L’utilisation des Beans dans JSF permet l’affichage des données provenant de la couche métier le stockage des valeurs d’un formulaire la validation des valeurs l’émission de messages pour la navigation (reçus par faces-config.xml) Dans la suite nous verrons que les Beans peuvent retourner des messages exploitables par le contrôleur JSF : principe de la Navigation
  • 29. JSF - M. Baron - Page 29 keulkeul.blogspot.com Bean Managé : principe Un Bean managé est un Bean dont la vie est gérée par JSF et déclaré dans le fichier de configuration faces-config.xml Définir la durée de vie (scope) d’un Bean Initialiser les propriétés d’un Bean A la différence des Beans utilisés dans Struts, les Beans managés de JSF n’héritent pas d’une classe particulière Les classes sont stockées dans le répertoire WEB-INF/classes *.html, *.jsp, ... WEB-INF web.xml, faces-config-xml classes lib Beans Librairie JSF
  • 30. keulkeul.blogspot.com Bean managé : configuration dans faces-config.xml Pour créer un Bean managé il faut le déclarer dans le fichier de configuration de JSF à l’aide de la balise managed-bean JSF - M. Baron - Page 30 Trois éléments essentiels sont à préciser managed-bean-name définit un nom qui servira d’étiquette quand le Bean sera exploité dans les pages JSP managed-bean-class déclare le nom de la classe de type package.class managed-bean-scope précise le type de scope utilisé pour le Bean none, application, session, request ... navigation-rule.../navigation-rule managed-bean managed-bean-nameMyBean/managed-bean-name managed-bean-classmypackage.MyFirstBean/managed-bean-class managed-bean-scopesession/managed-bean-scope /managed-bean ... faces-config.xml Etudiée dans la partie Navigation
  • 31. keulkeul.blogspot.com Bean managé : JSP, Bean et Expression Language (EL) Un formulaire JSF doit être construit dans un groupe défini JSF - M. Baron - Page 31 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 La balise html:commandButton contient un attribut action qui permet d’indiquer un message traité par les règles de navigation définies dans faces-config.xml Nous verrons dans la partie Navigation le traitement de la valeur indiquée dans l’attribut action
  • 32. keulkeul.blogspot.com 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 JSF - M. Baron - Page 32 head titlePremier 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 beanform1.jsp du projet ManagedBean
  • 33. keulkeul.blogspot.com Bean managé : JSP, Bean et Expression Language (EL) Les Expressions Languages (EL) sont utilisées pour accéder JSF - M. Baron - Page 33 aux éléments du Bean dans les pages JSP Un EL permet d’accéder simplement aux Beans des différents scopes de l’application (page, request, session et application) Forme d’un Expression Language JSF #{expression} Les EL JSF sont différentes des EL JSP qui utilisent la notation ${expression} Une EL est une expression dont le résultat est évaluée au moment où JSF effectue le rendu de la page
  • 34. keulkeul.blogspot.com Bean managé : JSP, Bean et Expression Language (EL) managed-bean-nameMyBean/managed-bean-name managed-bean-classmypackage.MyFirstBean/managed-bean-class managed-bean-scopesession/managed-bean-scope JSF - M. Baron - Page 34 L’écriture #{MyBean.value} indique à JSF de chercher un objet qui porte le nom de MyBean dans son contexte puis invoque la méthode getValue() (chercher la propriété value) Le nom de l’objet est déterminé dans le fichier faces-config.xml ... navigation-rule.../navigation-rule managed-bean /managed-bean ... Possibilité d’accéder à un objet contenu dans le Bean #{MyBean.myobject.value} : propriété value de myobject contenu dans MyBean
  • 35. keulkeul.blogspot.com Bean managé : JSP, Bean et Expression Language (EL) JSF définit un ensemble d’objets implicites utilisables dans les JSF - M. Baron - Page 35 Expressions Languages : param : éléments définis dans les paramètres de la requête HTTP param-values : les valeurs des éléments param cookies : éléments définis dans les cookies initParam : paramètres d’initialisation de l’application requestScope : éléments défini dans la requête facesContext : instance de la classe FacesContext View : instance de UIViewRoot Etudiée au niveau de la partie cycle de vie Expliquer au niveau des composants graphiques
  • 36. keulkeul.blogspot.com Bean managé : JSP, Bean et Expression Language (EL) JSF - M. Baron - Page 36 Exemple : objets implicites JSF dans une JSP html ... body core:view phtml:outputText value=#{param.test} //p phtml:outputText value=#{cookie.JSESSIONID.value} //p phtml:outputText value=#{facesContext.externalContext.requestPathInfo} //p phtml:outputText value=#{facesContext.externalContext.requestServletPath} //p /core:view /body /html implicitobjects.jsp du projet ImplicitObjects
  • 37. keulkeul.blogspot.com Bean managé : modifier/afficher la propriété d’un Bean Un formulaire regroupe un ensemble de composants JSF - M. Baron - Page 37 contenant chacun une valeur (attribut value) Chaque valeur d’un composant peut être stockée dans une propriété du Bean Pour définir une propriété dans un Bean Créer l’attribut correspondant à la propriété Définir des méthodes set et get pour accéder en lecture et en écriture aux propriétés Pour stocker la valeur d’un composant vers le Bean ou afficher la valeur d’une propriété dans un composant : utilisation des EL dans l’attribut value du composant JSF JSF associe automatiquement la propriété d’un Bean à la valeur d’un composant
  • 38. keulkeul.blogspot.com Bean managé : modifier/afficher la propriété d’un Bean Exemple : gestion d’un formulaire « email et mot de passe » JSF - M. Baron - Page 38 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; } } RegistrationBean.java du projet ManagedBean possède deux propriétés et des modifieurs et accesseurs
  • 39. keulkeul.blogspot.com Bean managé : modifier/afficher la propriété d’un Bean JSF - M. Baron - Page 39 Exemple (suite) : gestion d’un formulaire … ... core:view html:form html:outputText value=Adresse Email / html:inputText value=#{registrationbean.email}/br html:outputText value=Mot de Passe / html:inputSecret value=#{registrationbean.password}/br html:commandButton value=Connecter / /html:form /core:view /body /html beanform2.jsp du projet ManagedBean Affichage de la valeur d’initialisation du Bean EL pour accéder à la propriété email EL pour accéder à la propriété password
  • 40. keulkeul.blogspot.com Bean managé : modifier/afficher la propriété d’un Bean JSF - M. Baron - Page 40 Exemple (suite) : gestion d’un 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 faces-config.xml du projet ManagedBean Identifiant utilisé pour accéder au Bean défini par la classe beanpackage.RegistrationBean
  • 41. keulkeul.blogspot.com Bean managé : initialisation des propriétés d’un Bean Possibilité d’initialiser la propriété d’un Bean dans JSF - M. Baron - Page 41 le Bean lui-même le fichier faces-config.xml Dans le fichier faces-config.xml utilisation des EL Accès aux objets implicites Accès aux autres Beans managés L’initialisation d’un Bean est obtenue à l’intérieur de la balise managed-bean dans la balise managed-property Chaque propriété à initialiser est déclarée par la balise property-name contenu dans managed-property Une propriété peut être de différentes types List : définit une propriété de type liste Map : définit une propriété de type Map (une clé / valeur) Value : définit une propriété sur une valeur
  • 42. keulkeul.blogspot.com Bean managé : initialisation des propriétés d’un Bean Si la propriété est de type List, l’initialisation des valeurs de la propriété est effectuée dans la balise list-entries Dans la balise list-entries deux informations sont à indiquer JSF - M. Baron - Page 42 value-class : le type d’objet contenu dans la liste value : une valeur dans la liste (autant d’élément de la liste) managed-bean ... managed-property property-namecities/property-name list-entries value-classjava.lang.String/value-class valuePoitiers/value valueLimoges/value valueViroflay/value /list-entries /managed-property /managed-bean
  • 43. Bean managé : initialisation des propriétés d’un Bean Si la propriété est de type Map, l’initialisation des valeurs de la propriété est effectuée dans la balise map-entries Dans la balise map-entries trois informations sont à donner La balise map-entry contient deux informations JSF - M. Baron - Page 43 keulkeul.blogspot.com key-class : le type de la clé value-class : le type d’objet contenu dans la Map map-entry : contient une clé et une valeur key : la clé value : la valeur associée à la clé managed-property property-nameprices/property-name map-entries map-entrie keySwimmingPool High Pressure/key value250/value /map-entrie /map-entries
  • 44. keulkeul.blogspot.com Bean managé : initialisation des propriétés d’un Bean Si la propriété est de type Value, l’initialisation de la valeur de la propriété est effectuée dans la balise value managed-bean JSF - M. Baron - Page 44 ... managed-property property-nameemail/property-name valueuser@host/value /managed-property managed-property property-namename/property-name valueyour name/value /managed-property managed-property property-nameadress/property-name valueyour adress/value /managed-property /managed-bean faces-config.xml du projet ManagedBean
  • 45. keulkeul.blogspot.com Bean managé : initialisation des propriétés d’un Bean Exemple : initialisation de propriétés dans faces-config.xml JSF - M. Baron - Page 45 /managed-bean managed-bean managed-bean-nameregistrationbeanbis/managed-bean-name managed-bean-class beanPackage.RegistrationBeanBis /managed-bean-class managed-bean-scoperequest/managed-bean-scope managed-property property-nameemail/property-name value#{registrationbean.email}/value /managed-property managed-property property-nameadress/property-name valueYour Adress/value /managed-property /managed-bean Utilisation d’une EL pour accéder au Bean défini par registrationbean faces-config.xml du projet ManagedBean
  • 46. keulkeul.blogspot.com Bean managé : initialisation des propriétés d’un Bean JSF - M. Baron - Page 46 Exemple (suite) : initialisation de propriétés … html head titleTroisième 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 beanform3.jsp du projet ManagedBean
  • 47. keulkeul.blogspot.com Cycle de vie d’une JSF : généralités Update Model Values JSF - M. Baron - Page 47 Restore View Apply Requests Process Events Process Validations Invoke Application Render Response Process Events Process Events Process Events Erreurs de Conversion et / ou de Validation Erreurs de Conversion Requête Faces Réponse Faces Réponse Complète Réponse Complète Réponse Complète Réponse Complète Détaillé au fur et à mesure : conversion, validation, événements, …
  • 48. keulkeul.blogspot.com Cycle de vie d’une JSF : généralités Restore View : JSF reconstruit l’arborescence des compo-sants JSF - M. Baron - Page 48 qui composent la page. Apply Requests : les valeurs des données sont extraites de la requête Process Validations : procède à la validation des données Update model values : mise à jour du modèle selon les valeurs reçues si validation ou conversion réussie Invoke Application : les événements émis de la page sont traités. Elle permet de déterminer la prochaine page Render Response : création du rendue de la page
  • 49. keulkeul.blogspot.com Navigation : configuration de faces-config.xml Le fichier de faces-config.xml joue le rôle de contrôleur, il décide de la ressource qui doit être appelée suite à la réception d’un message Les messages sont des simples chaînes de caractères Utilisation de la balise navigation-rule pour paramétrer les JSF - M. Baron - Page 49 règles de navigation La balise from-view-id indique la vue source où est effectuée la demande de redirection. La vue peut être un : Formulaire (action de soumission) Lien hypertext Pour chaque valeur de message une page vue de direction est indiquée dans la balise navigation-case from-outcome : la valeur du message to-view-id : la vue de direction
  • 50. keulkeul.blogspot.com Navigation : statique ou dynamique JSF implémente une machine à états pour gérer la navigation JSF - M. Baron - Page 50 entre des pages JSF Pour schématiser nous distinguons deux sortes de navigation Navigation statique Navigation dynamique Navigation statique La valeur de l’outcome est connue au moment de l’écriture de la JSP Navigation dynamique La valeur de l’outcome est inconnue au moment de l’écriture de la JSP Elle peut être calculée par un Bean Managé ou autre chose … Remarques Si une valeur d’outcome est inconnue la même page JSP est rechargée Si la valeur vaut null la page JSP est rechargée
  • 51. keulkeul.blogspot.com Navigation statique : exemples Exemple : redirection statique à partir d’un formulaire ... html JSF - M. Baron - Page 51 head titleRedirection Statique à partir d’un 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 form1.jsp du projet Navigation
  • 52. keulkeul.blogspot.com Navigation statique : exemples faces-config.xml JSF - M. Baron - Page 52 Exemple (suite) : redirection statique … ... faces-config navigation-rule from-view-id/form1.jsp/from-view-id navigation-case from-outcomeregister/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 ... body core:view h1html:outputText value=Redirection Réussie //h1 /core:view /body /html acceptedSimple.jsp du projet Navigation N’oubliez pas de protéger toutes les pages JSP : form1.jsp et acceptedSimple.jsp
  • 53. keulkeul.blogspot.com Navigation dynamique : exemples Exemple : redirection dynamique à partir d’un Bean Cette méthode retourne soit « Accepted » soit « Rejected » JSF - M. Baron - Page 53 package beanPackage; public class BeanController2 { private String email = user@host; private String name = ; ... public String loginConnect() { if (this.email.isEmpty()) { return Rejected; } if (this.name.isEmpty()) { return Rejected; } return Accepted; } } BeanController2.java du projet Navigation Cette méthode permet de valider les valeurs et de choisir le message à retourner au contrôler JSF Il s’agit ici d’une technique pour la validation des informations saisies dans un formulaire. Nous approfondirons cet aspect dans la partie Validators
  • 54. keulkeul.blogspot.com Navigation dynamique : exemples Exemple (suite) : redirection dynamique à partir d’un Bean JSF - M. Baron - Page 54 faces-config navigation-rule from-view-idform2.jsp/from-view-id navigation-case from-outcomeAccepted/from-outcome to-view-id/accepted.jsp/to-view-id /navigation-case navigation-case from-outcomeRejected/from-outcome to-view-id/rejected.jsp/to-view-id /navigation-case /navigation-rule managed-bean managed-bean-namebeancontroller2/managed-bean-name managed-bean-class beanPackage.BeanController2 /managed-bean-class ... /faces-config faces-config.xml du projet Navigation
  • 55. keulkeul.blogspot.com Navigation dynamique : exemples Exemple (suite) : redirection dynamique à partir d’un Bean JSF - M. Baron - Page 55 ... html head titleRedirection Dynamique à partir d’un 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 /core:view /body /html form2.jsp du projet Navigation Accès au Bean identifié par beancontroller2 et à la méthode loginConnect
  • 56. keulkeul.blogspot.com Navigation dynamique : exemples Exemple (suite) : redirection dynamique à partir d’un Bean %@taglib uri=http://java.sun.com/jsf/core prefix=core% %@taglib uri=http://java.sun.com/jsf/html prefix=html% accepted.jsp du projet Navigation JSF - M. Baron - Page 56 html head titleRésultat du traitement du formulaire/title /head body core:view h1html:outputText value=Connexion de : / html:outputText value=#{beancontroller2.name} //h1 /core:view /body /html Page affichée à la suite de la soumission. Lecture de la propriété email du Bean identifié par beancontroller2
  • 57. keulkeul.blogspot.com Composants graphiques : présentation JSF fournit un ensemble de composants graphiques pour la JSF - M. Baron - Page 57 conception de l’IHM Un composant JSF est développé à partir de : classes qui codent le comportement et l’état classes de « rendu » qui traduisent la représentation graphique (HTML, FLASH, XUL, …) classes qui définissent les balises personnalisées relation entre JSP et classes Java classes qui modélisent la gestion des événements classes qui prennent en compte les Converters et les Validators Pour exploiter les composants JSF dans les pages JSP, des balises personnalisées sont utilisées …
  • 58. keulkeul.blogspot.com Composants graphiques : balises CORE Les balises personnalisées décrites dans CORE s’occupent d’ajouter des fonctionnalités aux composants JSF Pour rappel pour avoir un descriptif de l’ensemble des balises CORE : http://java.sun.com/javaee/javaserverfaces/1.2/docs/tlddocs La bibliothèque contient un ensemble de balises facet : déclare un élément spécifique pour un composant view et subview : ajoute une vue ou une sous vue attribute et param : ajoute un attribut ou paramètre à un composant selectionitem et selectionitems : définit un ou plusieurs éléments convertDataTime et convertNumber : conversion de données validator, validateDoubleRange, … : ajoute des validators actionListener, valueChangeListener : différents écouteurs loadBundle : chargement de bundle (fichier de ressources …) JSF - M. Baron - Page 58
  • 59. keulkeul.blogspot.com Composants graphiques : balises HTML Les balises personnalisées décrites dans HTML s’occupent de la description de l’interface graphique d’une JSF La spécification JSF décrit un ensemble fini de composants graphiques. Des bibliothèques tiers (My Faces) proposent des composants complémentaires Pour rappel pour avoir un descriptif de l’ensemble des balises HTML : http://java.sun.com/javaee/javaserverfaces/1.2/docs/tlddocs La bibliothèque HTML propose 25 composants qui sont JSF - M. Baron - Page 59 classifiables en quatre catégories Composants de saisies notés I (pour input) Composants de sorties notés O (pour output) Composants de commandes notés C (pour commandes) Composants de regroupement notés R (pour …)
  • 60. keulkeul.blogspot.com Composants graphiques : balises HTML JSF - M. Baron - Page 60 Famille des regroupements form panelGroup panelGrid Famille des saisis inputHidden inputSecret inputText inputTextArea selectBooleanCheckbox selectManyCheckbox selectManyListbox selectManyMenu selectOneListbox selectOneMenu selectOneRadio Famille des sorties column message et messages dataTable outputText outputFormat outputLink graphicImage Famille des commandes commandButton commandLink
  • 61. keulkeul.blogspot.com Composants graphiques : balises HTML saisis selectOneListbox JSF - M. Baron - Page 61 intputText intputSecret intputTextarea selectBooleanCheckbox selectManyCheckbox selectManyMenu selectOneRadio selectOneMenu selectManyListbox
  • 62. dataTable JSF - M. Baron - Page 62 keulkeul.blogspot.com Composants graphiques : balises HTML sorties et commandes graphicImage outputText outputLink panelGrid commandButton commandLink
  • 63. keulkeul.blogspot.com Composants graphiques : détail balises HTML Une balise contient généralement trois types d’attributs JSF - M. Baron - Page 63 Des attributs basiques (description) Des attributs HTML (description de présentation) Des attributs DHTML (description pour la partie dynamique) Selon la nature du composant graphique (saisie, sortie, commande et autre) le nombre d’attributs varie … Nous décrirons rapidement les attributs les plus significatifs. Au fur et à mesure de la présentation des composants graphiques nous les détaillerons via des exemples Les transparents qui suivent sont réalisés dans une optique de présentation rapide …
  • 64. keulkeul.blogspot.com Composants graphiques : détail balises HTML Les attributs basiques sont utilisés pour ajouter une descri-ption JSF - M. Baron - Page 64 spécifique à JSF Attributs basiques id : identifiant du composant binding : association avec un Bean « Backing » rendered : true composant affiché, false composant caché styleClass : précise le nom d’une CSS à appliquer au composant value : valeur du composant valueChangeListener : associer à une méthode pour le changement de valeur converter : nom de la classe pour une conversion de données validator : nom de la classe pour une validation de données required : true valeur obligatoire, false valeur optionnelle
  • 65. keulkeul.blogspot.com Composants graphiques : détail balises HTML Les attributs HTML sont utilisés pour modifier l’apparence JSF - M. Baron - Page 65 graphique d’un composant JSF Attributs HTML (les plus répandus …) alt : texte alternatif au cas où le composant ne s'affiche pas border : bordure du composant disabled : désactive un composant de saisie ou un bouton maxlength : maximum de caractères pour un composant de texte readonly : mode lecture uniquement 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 …)
  • 66. keulkeul.blogspot.com Composants graphiques : détail balises HTML Les attributs DHTML sont utilisés pour ajouter un aspect dynamique pour les composants JSF (appel à du JavaScript) JSF - M. Baron - Page 66 Attributs DHTML onblur : élément perd le focus onClick : clique souris sur un élément ondblClick : double clique souris sur un élément onfocus : élément gagne le focus onkeydown, onkeyup : touche clavier enfoncée et relâchée onkeypress : touche clavier pressée puis relâchée onmousedown, onmouseup : bouton souris enfoncé et relâché onmouseout, onmouseover : curseur souris sort et entre onreset : formulaire est initialisé onselect : texte est sélectionné dans un champ de texte onsubmit : formulaire soumis La gestion des événements sera expliquée dans une partie dédiée
  • 67. keulkeul.blogspot.com Composants graphiques : html:panelGrid La balise html:panelGrid est utilisée pour définir l’agencement JSF - M. Baron - Page 67 des composants visuels Il ne s’agit donc pas d’un composant visuel mais d’un conteneur dont l’organisation de ces composants enfants est réalisée suivant une grille Les composants enfants sont ajoutés dans le corps Principaux attributs : columns : nombre de colonnes de la grille bgcolor : couleur du fond 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)
  • 68. keulkeul.blogspot.com Composants graphiques : html:panelGrid Exemple : organiser des composants dans une grille JSF - M. Baron - Page 68 ... 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 Création d'une grille avec deux colonnes Regroupement de deux composants dans une cellule outputcomponent.jsp du projet GraphicalComponents
  • 69. keulkeul.blogspot.com Composants graphiques : html:dataTable Le composant html:dataTable permet de visualiser des données sur plusieurs colonnes et plusieurs lignes La table peut être utilisée quand le nombre d'éléments à JSF - M. Baron - Page 69 afficher est inconnu Les données (la partie modèle) peuvent être gérées par des Beans Attributs de la balise : value : une collection de données (Array, List, ResultSet, …) 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
  • 70. keulkeul.blogspot.com Composants graphiques : html:dataTable JSF - M. Baron - Page 70 Exemple : la représentation 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 ListPersonne refPersonne; public List getPersonne() { if (refPersonne == null) { refPersonne = new ArrayListPersonne(); refPersonne.add(new Personne(Baron, Mickael, 17081976, Développeur)); refPersonne.add(new Personne(Dupont, Marcel, 21041956, Boucher)); ... } return refPersonne; } } Personne.java du projet GraphicalComponents OutputBean.java du projet GraphicalComponents
  • 71. keulkeul.blogspot.com Composants graphiques : html:dataTable Exemple (suite) : la représentation d'une table JSF JSF - M. Baron - Page 71 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} / /html:column /html:dataTable /core:view datatablecomponent1.jsp du projet GraphicalComponents
  • 72. keulkeul.blogspot.com Composants graphiques : html:dataTable La modification des en-tête et pied de page d'une table est JSF - M. Baron - Page 72 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 défini dans le corps de core:facet Attribut du composant core:facet name : nom de la filiation Pour le composant table deux filiations possibles 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
  • 73. keulkeul.blogspot.com Composants graphiques : html:dataTable Exemple : table JSF avec des noms de colonnes core:view html:dataTable value=#{outputbean.personne} var=personne border=1 Ne sera jamais affiché car core:facet n'est associé à aucun autre composant JSF - M. Baron - Page 73 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:verbatimPrénom/verbatim /core:facet html:outputText value=#{personne.firstname} / /html:column html:column core:facet name=header Date de naissance /core:facet html:outputText value=#{personne.birthdata} / /html:column html:facet name=footer html:outputText value=#{outputbean.caption} / /html:facet ... /html:dataTable /core:view datatablecomponent2.jsp du projet GraphicalComponents
  • 74. keulkeul.blogspot.com 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 JSF - M. Baron - Page 74 Les attributs : headerClass : style CSS pour la partie en-tête footerClass : style CSS pour le bas de page rowClasses : liste de styles CSS pour les lignes L'attribut rowClasses permet de définir une liste de style CSS qui sera appliquée pour chaque ligne et répétée autant de fois qu'il y a de lignes (définition d'un motif) Exemple : Soit la définition suivante : rowClasses=row1, row2, row2 Répétition du motif row1, row2, row2, row1, row2, …
  • 75. keulkeul.blogspot.com Composants graphiques : html:dataTable datatablecomponent3.jsp du projet GraphicalComponents JSF - M. Baron - Page 75 Exemple : table JSF « maquillé » head ... link href=output.css tel=stylesheet type=text/css /head body core:view html:dataTable value=#{outputbean.personne} var=personne border=1 cellspacing=4 width=60% rowClasses=row1,row2 headerClass=heading footerClass=footer ... /html:dataTable /core:view .heading { font-family: Arial, Helvetica, sans-serif; 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
  • 76. keulkeul.blogspot.com Composants graphiques : html:dataTable Exemple : table JSF avec des composants JSF de saisie JSF - M. Baron - Page 76 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:verbatimPrénom/verbatim /core:facet html:outputText value=#{personne.firstname} / /html:column /html:dataTable /core:view datatablecomponent4.jsp du projet GraphicalComponents
  • 77. keulkeul.blogspot.com Composants graphiques : items Les balises HTML de type sélection (selectOneRadio, selectOneMenu) permettent de gérer un ensemble d'éléments JSF - M. Baron - Page 77 Les éléments peuvent être « peuplés » par : core:selectItem : affiche un seul élément core:selectItems : affiche plusieurs éléments Les balises HTML de sélection s'occupent de gérer la sélection courante (une ou plusieurs) au travers de leur attribut value Le type de la sélection courante (retourné au serveur) est donné par les éléments de sélection (int, String, Object, …) La balise html:selectBooleanCheckbox n'est pas concernée puisqu'elle ne gère qu'un seul élément
  • 78. keulkeul.blogspot.com Composants graphiques : core:selectItem La balise core:selectItem est utilisée pour spécifier un seul JSF - M. Baron - Page 78 élément 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 retournée au serveur Un objet SelectItem est exploitable directement dans un Bean Différents 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
  • 79. keulkeul.blogspot.com Composants graphiques : core:selectItem JSF - M. Baron - Page 79 Exemple : choix d'un élément unique ... html:outputText value=Fruit préféré avec SelectItem : / html:selectOneRadio layout=pageDirection value=#{inputbean.oneRadioValue} / core:selectItem value=#{inputbean.bananeItem} / core:selectItem value=#{inputbean.orangeItem} / core:selectItem itemValue=Clémentine / core:selectItem itemValue=Pomme / core:selectItem itemValue=Framboise / /html:selectOneRadio ... Utilisation d'un binding d'un composant 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); } ... } intputcomponent.jsp du projet GraphicalComponents Retourne un objet SelectItem
  • 80. keulkeul.blogspot.com Composants graphiques : core:selectItems L’utilisation de la balise core:selectItem peut alourdir l’écriture des différents éléments des composants de sélection Cette balise est plutôt adaptée pour un nombre réduits JSF - M. Baron - Page 80 d’éléments La balise core:selectItems allège donc l’écriture puisqu’une seule occurrence de core:selectItems remplace toutes les occurrences de core:selectItem L’attribut value est une valeur binding qui pointe vers une structure de type SelectItem La structure de type SelectItem peut être de type instance unique map : les entrées sont les itemLabels et itemValues de SelectItem collection tableau
  • 81. keulkeul.blogspot.com Composants graphiques : core:selectItems JSF - M. Baron - Page 81 Exemple : choisir de nombreux éléments html:selectOneRadio html:selectManyCheckbox html:selectOneListbox html:selectManyListbox html:selectOneMenu html:selectManyMenu
  • 82. keulkeul.blogspot.com Composants graphiques : core:selectItems Exemple (suite) : choisir de nombreux éléments Simplification d’écriture avec la balise selectItems JSF - M. Baron - Page 82 h4html:outputText value=Fruit préféré avec SelectItems : / html:selectOneRadio value=#{inputbean.oneRadioValue} / code:selectItems value=#{inputbean.oneRadioItems} / /html:selectOneRadio/h4 h4html:outputText value=Ajouter des périphériques : / html:selectManyCheckBox value=#{inputbean.manyCheckBoxValues} / code:selectItems value=#{inputbean.manyCheckBoxItems} / /html:selectManyCheckBox /h4 h4html:outputText value=Accessoire préféré : / html:selectOneListBox value=#{inputbean.oneListBoxValues} / code:selectItems value=#{inputbean.manyAndOneListBoxItems} / /html:selectOneListBox/h4 h4html:outputText value=Choisir équipements préférés : / html:selectManyListBox value=#{inputbean.manyListBoxValues} / code:selectItems value=#{inputbean.manyAndOneListBoxItems} / /html:selectManyListBox/h4 h4html:outputText value=Choisir une marque de voiture : / html:selectOneMenu value=#{inputbean.oneMenuValue} / code:selectItems value=#{inputbean.manyAndOneMenuItems} / /html:selectOneMenu/h4 h4html:outputText value=Choisir plusieurs marques de voiture : / html:selectManyMenu value=#{inputbean.manyMenuValue} / code:selectItems value=#{inputbean.manyAndOneMenuItems} / /html:selectManyMenu/h4 Principe identique quelque soit le composant de sélection Une seule valeur sélectionnable Une seule valeur sélectionnable intputcomponent.jsp
  • 83. keulkeul.blogspot.com Composants graphiques : core:selectItems Exemple (suite) : choisir de nombreux éléments JSF - M. Baron - Page 83 public class InputBean { private SelectItem[] manyCheckBoxItems = new SelectItem[] { new SelectItem(Clavier), new SelectItem(Souris), new SelectItem(Ecran), new SelectItem(Unité Centrale), new SelectItem(Haut Parleur) }; private String[] manyCheckBoxValues; public SelectItem[] getManyCheckBoxItems() { return manyCheckBoxItems; } public String[] getManyCheckBoxValues() { return this.manyCheckBoxValues; } public void setManyCheckBoxValues(String[] p) { manyCheckBoxValues = p; } } Utilisées pour peupler les éléments du composant selectManyCheckBox Utilisée pour afficher la valeur sélectionnée courante Utilisée pour modifier la valeur sélectionnée courante
  • 84. keulkeul.blogspot.com Composants graphiques : API JSF Les classes qui modélisent l'état et le comportement d'un composant sont les classes principales où dépendent toutes les autres (rendu, description balises, événements …) Les composants JSF héritent de la classe de plus haut ni-veau JSF - M. Baron - Page 84 UIComponent qui est abstraite La classe UIComponentBase est la classe utilisée comme implémentation par défaut Rappelons qu'un composant JSF peut contenir un ensemble de sous composants (notion de hiérarchie) UIComponentBase fournit les services suivants API pour la gestion du cycle de vie du composant API pour le rendu du composant … (complété et détaillé dans la dernière partie)
  • 85. keulkeul.blogspot.com Composants graphiques : API JSF Associée à la commandButton JSF - M. Baron - Page 85 Hiérarchie des principaux composants JSF UIComponent UIComponentBase Objet représentant la racine de l'arbre après la phase de (plus de détail dans la dernière UIOutput UIInput Restore View partie) HtmlOutputText HtmlInputText UICommand balise HtmlCommandButton UIViewRoot … Classe abstraite Implémentation par défaut Associée à la balise outputText Associée à la balise intputText
  • 86. JSF - M. Baron - Page 86 keulkeul.blogspot.com FacesContext : principe FacesContext permet de représenter toutes les informations contextuelles associées à la requête et à la réponse FacesContext est défini par une classe abstraite dont l'instan-ciation est réalisée (si pas créée) au début 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 FacesContext libère les ressources. L'instance de l'objet est conservé (utilisation de la méthode release() ) A chaque nouvelle requête, ré-utilisation des instances de FacesContext
  • 87. keulkeul.blogspot.com FacesContext : utilisation explicite FacesContext est essentiellement utilisé par les mécanismes internes de JSF. Toutefois il est possible d'en extraire des informations intéressantes Un objet FacesContext est exploitable dans un Bean ou dans JSF - M. Baron - Page 87 une JSP via son objet implicite associé Que peut-on donc faire avec cet objet ? ExternalContext : accéder aux éléments de la requête et de la réponse Message Queue : stocker des messages (voir partie suivante) ViewRoot : accéder à la racine de l'arbre des composants (UIViewRoot) Modifier le déroulement du cycle de vie (voir partie événement) Pleins d'autres choses qui sortent du cadre de ce cours …
  • 88. keulkeul.blogspot.com FacesContext : utilisation explicite JSF - M. Baron - Page 88 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 paramètre : + next); Map requestParameterValuesMap = context.getRequestParameterValuesMap(); Object tabParameter = requestParameterValuesMap.get((String)next); if (tabParameter instanceof String[]) { System.out.println(Valeur du paramètre : + ((String[])tabParameter)[0]); } } } } FacesContextBean.java du projet FacesContext
  • 89. keulkeul.blogspot.com FacesContext : utilisation explicite Exemple (suite) : manipuler l'objet FacesContext JSF - M. Baron - Page 89 ... 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
  • 90. JSF - M. Baron - Page 90 keulkeul.blogspot.com Backing bean : principe Rappelons que les « Beans Managés » sont utilisés comme des modèles de vues L'accès aux « références » des composants de la vue ne peut se faire directement (assez tordu avec FacesContext) Il peut être intéressant d’accéder directement à la référence d’un composant graphique pour en modifier son état (à la suite d’un événement ou lors du processus de validation) Le framework JSF offre la possibilité d’encapsuler tout ou partie des composants qui composent une vue Il s’agit d’un type de Bean appelée « Backing Bean » qui correspond ni plus ni moins à un Bean managé Un Backing Bean est donc un bean dont certaines propriétés sont de type UIComponent
  • 91. JSF - M. Baron - Page 91 keulkeul.blogspot.com Backing bean : principe Dans le Bean, il faut déclarer des accesseurs et des modifieurs sur des propriétés 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; } } Le « Backing Bean » se comporte comme un Bean Managé Stocker et relayer la référence d’un composant JSF Au niveau de la page JSP, la liaison entre le « Backing Bean » est la vue se fait par l’attribut binding html:commandButton binding=#{backingbean.nomAction} /
  • 92. backingbean1.jsp du projet BackingBean JSF - M. Baron - Page 92 keulkeul.blogspot.com Backing bean : principe Exemple : activer/désactiver 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 Une valeur dans un composant texte Un bouton activé La valeur a changé (sans passer par le Bean) Un bouton désactivé
  • 93. JSF - M. Baron - Page 93 keulkeul.blogspot.com Backing bean : principe Exemple (suite) : activer/désactiver 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); } } } BackingBean.java du projet BackingBean
  • 94. keulkeul.blogspot.com Message : manipulation et affichage Pour l’instant avec un Bean managé il est possible de JSF - M. Baron - Page 94 Stocker et afficher les valeurs d’un formulaire Générer les actions pour l’automate de navigation L’API JSF fournit l’objet FacesMessage pour empiler des messages qui pourront être afficher dans une page JSP Un objet FacesMessage est caractérisé par : Sévérité : SEVERITY_INFO, SEVERITY_WARN, SEVERITY_ERROR et SEVERIRY_FATAL Résumé : texte rapide décrivant le message Détail : texte détaillé décrivant le message L’API fournit des modifieurs et accesseurs setSeverity(FacesMessage.Severity) / getSeverity() setSummary(String) / getSummary() setDetail(String) / getDetail()
  • 95. keulkeul.blogspot.com Message : manipulation et affichage Un objet FacesMessage est donc construit dans une classe JSF - M. Baron - Page 95 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 (défini par id) Si id est null le message n’est pas associé à un composant Exemple de construction et transmission d’un FacesMessage : // Déclaration d’un Message FacesMessage myFacesMessage = new FacesMessage(); myFacesMessage.setSeverity(FacesMessage.SEVERITY_INFO); myFacesMessage.setSummary(Un petit résumé); myFacesMessage.setDetail(Mon message qui ne sert à rien); // Transmission d’un Message FacesContext myFacesContext = FacesContext.getCurrentInstance(); myFacesContext.addMessage(null, myFacesMessage);
  • 96. keulkeul.blogspot.com Message : manipulation et affichage La bibliothèque HTML propose deux balises personnalisées JSF - M. Baron - Page 96 pour afficher les messages html:messages : affiche tous les messages html:message : affiche les messages associés à un id de composant Les balises contiennent les attributs suivants : for : indique l’id du composant (uniquement pour message) showDetail : booléen qui précise si le message est détaillé showSummary : booléen qui précise si le message est résumé tooltip : booléen qui précise si une bulle d’aide est affichée layout : précise la manière d’afficher les messages. Valeurs possibles table ou list (par défaut)
  • 97. keulkeul.blogspot.com Message : manipulation et affichage Exemple : afficher les messages en un seul bloc JSF - M. Baron - Page 97 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)); } ... } BeanMessages du projet Messages
  • 98. keulkeul.blogspot.com Message : manipulation et affichage Exemple (suite) : afficher les messages en un seul bloc Affichage sous la forme d’un tableau JSF - M. Baron - Page 98 %@taglib prefix=core uri=http://java.sun.com/jsf/core% %@taglib prefix=html uri=http://java.sun.com/jsf/html% html ... 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 form1.jsp du projet Messages
  • 99. keulkeul.blogspot.com Message : manipulation et affichage Exemple : afficher les message en plusieurs blocs JSF - M. Baron - Page 99 %@taglib prefix=core uri=http://java.sun.com/jsf/core% %@taglib prefix=html uri=http://java.sun.com/jsf/html% html ... body core:view html:form id=logonForm Identifiant du composant 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 html:commandButton value=Valider action=#{beanmessage.validAction}/ html:commandButton value=Annuler action=#{beanmessage.cancelAction}/ /html:form /core:view /body /html Nécessaire pour identifier les sous composants form2.jsp du projet Messages Les identifiants sont utilisés pour « localiser » les messages inputText Précise que le message est associé à l’id myname
  • 100. keulkeul.blogspot.com Message : manipulation et affichage Exemple (suite) : afficher les message en plusieurs blocs JSF - M. Baron - Page 100 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; } 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 myIdName et logonForm sont des identifiants de composants Précise que myIdName appartient à logonForm
  • 101. keulkeul.blogspot.com Message : Internationalisation faces-config.xml permet de configurer les localisations acceptées pour l’application WEB dans la balise application Dans information deux informations sont à renseigner message-bundle : la ressource contenant les messages localisés local-config : indique la locale par défaut et les locales autorisées Balise local-config deux informations sont à renseigner default-locale : la localisation par défaut supported-locale : la localisation supportée par l’application ... application message-bundleresources.ApplicationMessage/message-bundle locale-config JSF - M. Baron - Page 101 default-localeen/default-locale supported-localefr/supported-locale supported-localesp/supported-locale /locale-config /application faces-config.xml
  • 102. keulkeul.blogspot.com Message : Internationalisation Dans la version 1.2 possibilité de déclarer 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 localisés var : alias permettant d’accéder à la ressource base-name application resource-bundle base-nameresources.ApplicationMessage/base-name varbundle/var /resource-bundle /application Dans la version 1.1 le chargement des ressources est effectué dans la page JSP à l’aide de la balise core:loadbundle core:loadBundle basename=resources.ApplicationMessage var=bundle / Les ressources sont exploitées par l’intermédiaire des alias JSF - M. Baron - Page 102 (attribut var) en utilisant les EL
  • 103. keulkeul.blogspot.com Message : Internationalisation Exemple : formulaire utilisant une ressource de localisation Solution pour la version 1.1 de JSF JSF - M. Baron - Page 103 %@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 titleFormulaire JSF avec un Bean Managé/title /head 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 /html CoursesMessages_fr.xml EMAIL_ADRESS_MESSAGE = Adresse Email PASSWORD_MESSAGE = Mot de Passe LOGIN_MESSAGE = Connecter managedbeanviewbundle.jsp
  • 104. keulkeul.blogspot.com Message : Internationalisation Exemple (bis) : formulaire qui utilise une ressource pour la JSF - M. Baron - Page 104 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 application resource-bundle base-nameresources.ApplicationMessage/base-name varbundle/var /resource-bundle /application faces-config.xml Solution pour la version 1.2 de JSF
  • 105. keulkeul.blogspot.com Conversion de données : principe Conversion des données du modèle et de la vue les paramètres d'une requête sont de type chaînes de caractères les Beans sont définis par des attributs représentés par des types de données (int, long, Object, …) la conversion de données s'assurent alors qu'une chaîne de caractères peut être traduit en un type de donnée précis JSF - M. Baron - Page 105 Respect du formatage en entrée et en sortie Formatage en sortie : affichage d'une date Afficher la date suivant un format compréhensible par l’utilisateur (fonction de la localisation et du type d’utilisateur) Conformité en entrée : saisie d'une date Associé à un composant de type saisie Assurer que l’utilisateur a saisi une chaîne de texte respectant le format de l’entrée
  • 106. keulkeul.blogspot.com Conversion de données : principe Les convertisseurs de données sont appelés Converters Tous les composants affichant une valeur et utilisés lors de la saisie fournissent une conversion de données Les converters sont utilisables dans une JSP via une balise JSF - M. Baron - Page 106 Pour utiliser un converter : soit utiliser les standards fournis par la bibliothèque JSF dans une JSP soit le définir programmatiquement (dans un Bean) et l’utiliser dans une JSP Converters standards de la bibliothèque JSF : core:convertDateTime : pour la conversion de date et d’heure core:convertNumber : pour la conversion de nombre
  • 107. keulkeul.blogspot.com Conversion de données : cycle de vie Update Model Values JSF - M. Baron - Page 107 Restore View Apply Requests Process Events Process Validations 6 5 Invoke Application Render Response Process Events Process Events Process Events Erreurs de Conversion et / ou de Validation Erreurs de Conversion Requête Faces Réponse Faces Réponse Complète Réponse Complète Réponse Complète Réponse Complète 1 2 3 4
  • 108. keulkeul.blogspot.com Conversion de données : cycle de vie Dans le cas d'un composant de la famille de type UIInput JSF - M. Baron - Page 108 (par exemple un composant html:inputText) L'étape Process Validations réceptionne les valeurs des para-mètres (submittedValues) et applique les conversions 1 Si la conversion a réussi, le traitement continu L'étape Update Model Values modifie le modèle associé (un Bean par exemple) puis conversion des valeurs du modèle Si la conversion a réussi, continuer processus … Si la conversion a échoué, génération de messages d'erreurs et direction étape Render Response 2 3 Si la conversion a échoué, le traitement est abandonné (pas de changement de page) et des messages d'erreur sont générés et direction étape Render Response 4 6 6 5
  • 109. keulkeul.blogspot.com Conversion de données : cycle de vie Dans le cas d'un composant de la famille de type UIOutput JSF - M. Baron - Page 109 (par exemple composant html:outputText) L'étape Process Validations et l'étape Update Model Values ne traitent pas de paramètres car il n'y en a pas … Puis conversion des attributs du modèle présents dans le Bean Si la conversion a réussi, continuer processus … Si la conversion a échoué, génération de messages d'erreur et direction étape Render Response 1 2 5 4 6 La seconde conversion consiste à s'assurer de la cohérence des données du modèle et du format de conversion
  • 110. keulkeul.blogspot.com Conversion de données : cycle de vie (via l'API) Tous composants qui implémentent l'interface ValueHolder peuvent exploiter des Converters (UIOutput et UIInput) L'implémentation de l'interface ValueHolder doit fournir des JSF - M. Baron - Page 110 propriétés pour : Effectuer la conversion via un objet Converter Stocker la valeur convertie par l'objet Converter Stocker la valeur propre du composant utilisée pour modifier le modèle de la vue et fournir une donnée à la réponse Ensemble de méthodes (accesseurs et modifieurs) pour la manipulation de ces propriétés
  • 111. keulkeul.blogspot.com Conversion de données : cycle de vie (via l'API) JSF - M. Baron - Page 111 Un objet Converter fournit deux méthodes : Object getAsObject(…) throws ConverterException appelée lors de l'étape Process Validation String getAsString(…) throws ConverterException appelée après l'étape Update Model Values Dans le cas des objets UIInput les valeurs des paramètres sont stockées dans l'attribut submittedValue (interface EditableValueHolder) Nous décrirons la classe Converter au moment de la création de notre propre converter Par son intermédiaire la phase Process Validations peut récupérer les valeurs qui étaient issues des paramètres
  • 112. keulkeul.blogspot.com Conversion de données : cycle de vie (via l'API) JSF - M. Baron - Page 112 Processus de conversion par l'API submittedValue est convertie par getAsObject(…) et stockée dans localValue (si exception de getAsObject(…) arrêt du processus) Si localValue != null, sa valeur est transmise à value value transmet la valeur à une propriété du modèle de la vue (via un modifieur du Bean) value récupère la valeur d'une propriété du modèle de la vue (via un accesseur du Bean) Si localValue == null, value récupère la valeur d'une propriété du modèle value est convertie par getAsString(…) et envoyée à la réponse (si exception de getAsString(…) arrêt du processus
  • 113. keulkeul.blogspot.com Conversion de données : tag convertNumber La balise core:convertNumber permet la conversion de JSF - M. Baron - Page 113 chaînes de caractères en valeur numérique À utiliser dans le corps d’une balise graphique JSF Différents attributs disponibles type : type de valeur (number, currency ou percent) pattern : motif de formatage (max/min)FractionDigits : (int) nombre maxi/mini sur la décimale (max/min)IntegerDigits : (int) nombre maxi/mini sur la partie entière integerOnly : (booléen) seule la partie entière est prise en compte groupingUsed : (booléen) précise si les caractères de regroupement sont utilisés (exemple : « , », « ; », « : », … ) locale : définit la localisation de la conversion currencyCode : code de la monnaie utilisée pour la conversion currencySymbol : spécifie le caractère (exclusif avec currencyCode)
  • 114. keulkeul.blogspot.com Conversion de données : tag convertNumber Exemple : utilisation d’un converter en « sortie » JSF - M. Baron - Page 114 html ... body core:view html:form html:outputText value=#{beanconverter1.price} core:convertNumber type=currency currencyCode=EUR minFractionDigits=4 / /html:outputText /html:form /core:view /body /html public class BeanConverter1 { private double price; public BeanConverter1() { this.price = 50.50d; } public double getPrice() { return price; } public void setPrice(double pPrice) { this.price = pPrice; } } converters1.jsp du projet Converters BeanConverter1 du projet Converters
  • 115. keulkeul.blogspot.com Conversion de données : tag convertNumber Exemple (suite) : utilisation d’un converter en « entrée » JSF - M. Baron - Page 115 html ... body core:view html:form Prix : html:intputText value=#{beanconverter1.price} core:convertNumber minFractionDigits=2 / /html:inputTextbr html:commandButton value=Envoyer / /html:form /core:view /body /html converters2.jsp du projet Converters Avant la conversion, au moment de la saisie … Après la conversion
  • 116. keulkeul.blogspot.com Conversion de données : tag convertDateTime La balise core:convertDateTime permet la conversion de html:outputText value=#{packageBean.facturedate} core:convertDateTime type=date dateStyle=long/ JSF - M. Baron - Page 116 chaînes de caractères en date ou heure À utiliser également dans le corps d’une balise graphique JSF /html:outputText Différents attributs disponibles type : type de valeur (date, time ou both) dateStyle : style possible de la date (short, medium, long, full, both) timeStyle : style possible de l’heure (short, medium, long, full, both) Pattern : motif utilisé pour une Date Locale : choix de la localisation
  • 117. keulkeul.blogspot.com Conversion de données : tag convertDateTime Exemple : utilisation d’un converter date en « entrée » JSF - M. Baron - Page 117 ... body core:view 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:inputTextbr 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 converters3.jsp du projet Converters
  • 118. keulkeul.blogspot.com Conversion de données : tag convertDateTime Exemple (suite) : utilisation d’un converter Date en « entrée » JSF - M. Baron - Page 118 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; } } BeanConverter2.java du projet Converters
  • 119. keulkeul.blogspot.com Conversion de données : messages Dans le cas où des erreurs de conversion sont provoquées, JSF - M. Baron - Page 119 des messages sont ajoutés au FacesContext En utilisant les balises html:message et html:messages possibilité d'afficher un message précis ou l'ensemble Généralement à chaque composant est associé un id, ce qui permettra de localiser précisément l'origine de l'erreur Exemple : ... html:outputText value=Prix : / html:intputText id=priceId value=#{beanconverter1.price} core:convertNumber minFractionDigits=2 / /html:inputTexthtml:message for=priceId /br html:commandButton value=Envoyer / ... Converters2.jsp du projet Converters
  • 120. keulkeul.blogspot.com Conversion de données : messages Exemple : converter date en « entrée » avec messages JSF - M. Baron - Page 120 ... core:view html:form 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:inputTexthtml:message for=ticketsId /br html:outputText value=Date : / html:inputText id=dateId value=#{beanconverter2.date} core:convertDateTime type=date dateStyle=medium / /html:inputTexthtml:message for=dateId /br html:outputText value=Liste des messages : /br html:messages / html:commandButton value=Valider / /html:form /core:view /body /html converters3.jsp du projet Converters
  • 121. keulkeul.blogspot.com Conversion de données : messages personnalisés Les messages sont déclarés par des clés stockées dans un fichier ressource dont le nom dépend de la localisation Les fichiers ressources (fichier au format properties) sont stockés dans le répertoire javax.faces de la librairie implémentation de JSF (myfaces-impl-1.x.x.jar) Pour modifier un message pour un converter donné JSF - M. Baron - Page 121 Créer un fichier properties dans le répertoire source Déclarer le fichier properties dans le faces-config.xml Copier les clés à redéfinir Modifier la valeur du texte dans les clés
  • 122. keulkeul.blogspot.com Conversion de données : messages personnalisés Exemple : modification des messages d'erreurs de conversion JSF - M. Baron - Page 122 ... application messsage-bundlebeanPackage.MyMessages/message-bundle /application /faces-config ... javax.faces.convert.NumberConverter.CONVERSION = Problème pour le champs Nombre de tickets Javax.faces.convert.NumberConverter.CONVERSION_detail = {0} : La donnée n'est pas un nombre valide ... *.html, *.jsp, ... WEB-INF web.xml faces-config.xml classes MyApp MyMessages.properties faces-config.xml du projet Converters MyMessages.properties
  • 123. keulkeul.blogspot.com Conversion de données : attribut immediate Rappelons que toute requête JSF passe obligatoirement par JSF - M. Baron - Page 123 un traitement défini par le cycle de vie JSF La conversion de données est obligatoirement traitée par le cycle de vie JSF même si par exemple une requête donnée n’est pas de valider un formulaire (annuler le traitement) Si une requête est d’annuler la saisie du formulaire (redirec-tion vers une autre page), le processus effectuera toujours la conversion de données de tous les composants d’une vue JSF Il peut donc être utile de passer outre le processus de con-version : utilisation de l’attribut immediate pour une balise de composant qui doit soumettre le formulaire La présence de l’attribut immediate (valeur à true) modifie le déroulement du cycle de vie d’une requête JSF
  • 124. keulkeul.blogspot.com Conversion de données : attribut immediate Le composant passé à immediate sera géré en premier dans JSF - M. Baron - Page 124 le cycle de vie Le fonctionnement donné ci-dessous ne concerne que les composants de type Command (CommandButton par exemple) Après la phase Apply Request Values, le traitement de la requête va être redirigé directement vers Render Response De cette manière les phases Process Validations, Update Model Values, Invoke Application ne sont pas exécutées Il n’y a donc pas de conversion, ni de modification dans le modèle Les différentes saisies de l’utilisateur ne sont jamais traitées et il n’y a donc pas d’erreurs qui pourraient bloquées l’utilisateur Une explication détaillée de l’effet de bord de immediate (composant Input et Command) est donnée dans la partie événement
  • 125. keulkeul.blogspot.com Conversion de données : attribut immediate Update Model Values JSF - M. Baron - Page 125 Restore View Apply Requests Process Events Process Validations Invoke Application Render Response Process Events Process Events Process Events Erreurs de Conversion et / ou de Validation Erreurs de Conversion Requête Faces Réponse Faces Réponse Complète Réponse Complète Réponse Complète Réponse Complète Quand immediate == true Cycle de vie valable ssi le composant concerné par l’attribut immediate est de type Command