Vous êtes sur la page 1sur 34

JavaServer Faces - JSF

Chapitres traits
Pour afficher graphiquement les informations provenant du serveur, nous avons besoin d'une interface
utilisateur. Les applications utilisant les interfaces pour interagir avec l'utilisateur sont de diffrents types
: applications de bureau, applications web s'excutant dans un navigateur ou applications mobiles sur un
terminal portable. Nous nous intressons ici sur les interfaces web.
Initialement, le World Wide Web tait un moyen de partager des documents crits en HTML. Le protocole
HTTP a t conu pour vhiculer ces documents, qui taient l'origine essentiellement statiques (leur
contenu n'voluait pas beaucoup au cours du temps).
Les pages statiques sont composes de HTML pur contenant ventuellement des graphiques eux aussi statiques (JPG, PNG, par
exemple).
1.
Les pages dynamiques sont en revanche composes en temps rel ( la vole) partir de donnes calcules partir d'informations
fournies par l'utilisateur.
2.
Pour crer un contenu dynamique, il faut analyser les requtes HTTP, comprendre leur signification et crer des rponses dans un
format que le navigateur saura traiter. Les servlets simplifie le processus en fournissant une vue oriente objet du monde HTTP
(HttpRequest, HttpResponse, etc.).
Cependant, le modle des servlets tait de trop bas niveau et c'est la raison pour laquelle, les pages JSP (JavaServer Pages) ont
ensuite pris le relais pour simplifier la cration des pages web dynamiques. En coulisse, une JSP est une servlet, sauf qu'elle est crite
essentiellement en HTML - avec un peu de Java pour effectuer les traitements.
Ceci dit, les servlets peuvent toujours tre utiles dans le cas de traitements spcifiques qui ne consistent pas crer, pour la rponse
au navigateur, de page web en format HTML. Nous pourrions, par exemple, fabriquer une vignette correspondant une photo grand
format archive sur le serveur.
JSF (JavaServer Faces, ou simplement Faces) a t cr en rponse certaines limitations de JSP et utilise un autre modle
consistant porter des composants graphiques vers le Web. Inspir par le modle Swing, JSF permet aux dveloppeurs de penser en
termes de composants, d'vnements, de beans grs et de leur interactions plutt qu'en termes de requtes, de rponses et de
langages marqueurs.
Son but est de faciliter et d'acclrer le dveloppement des applications web en fournissant des composants graphiques (comme des
zones de texte, les listes, les onglets, les grilles, etc.) afin d'adopter une approche RAD (Rapid Application Development).
Introduction JSF
Les applications JSF sont des applications web classiques qui interceptent HTTP via la servlet Faces et produisent du HTML.
En coulisse, cette architecture permet de greffer n'importe quel langage de dclaration de page (PDL), de l'afficher sur des dispositifs
diffrents (navigateur web, terminaux mobiles, etc.) et de crer des pages au moyen d'vnements, d'couteurs et de composants,
comme en Swing.
JSF fournit un ensemble de widgets standard (boutons, liens hypertextes, cases cocher, zone de saisie, tableaux dynamiques, etc.) et
facilite son extension par l'ajout de composants tiers.
La figure ci-dessous reprsente les parties les plus importantes de l'architecture JSF qui la rendent aussi riche et aussi souple :
JavaServer Faces http://manu.kegtux.org/Java/Tutoriels/J2EE/JSF.html
1 sur 61 13/12/2012 11:40
FacesServlet : est la servlet principale de l'application qui sert de contrleur. JSF utilise le patron de conception MVC
(Modle-Vue-Contrleur). MVC permet de dcoupler la vue (la page) et le modle (le traitement des donnes affiches dans
la vue). Le contrleur prend en charge les actions de l'utilisateur qui pourraient impliquer des modifications dans le
modle et dans les vues. Avec JSF, ce contrleur est la servlet FacesServlet. Toutes les requtes de l'utilisateur passent
sytmatiquement par elle, qui les examine et appelle les diffrentes actions correspondantes du modle en utilisant les
beans grs. Il est possible de configurer le comportement de cette servlet au travers d'annotations spcifiques (sur les
beans grs, les convertisseurs, les composants, les moteurs de rendu et les validateurs).
1.
Pages et composants : Le framework JSF doit envoyer une page sur le dispositif de sortie du client (un navigateur, pas
exemple) et exige donc une technologie d'affichage appele PDL. Dans sa version la plus rcente, JSF utilise plutt les
Facelets. Facelets est forme d'une arborescence de composants (galement appels widgets ou contrles) fournissant
des fonctionnalits spcifiques pour interagir avec l'utilisateur (champ de saisie, boutons, liste, etc.).
JSF dispose d'un ensemble standard de composants (graphiques ou sans apparences visuelles) et permet de
crer galement facilement les vtres (composants personnaliss). Pour grer cette arborescence, une page
passe par un cycle de vie complexe (initialisation, vnements, affichage, etc.).
Le code ci-dessous correspond la page web de conversion vue plus haut et reprsente une page Facelets en
XHTML qui utilise les marqueurs xmln:h et xmlns:f pour afficher un formulaire avec les deux zones de saisies
(uro et Franc) et un bouton (pour la conversion). Cette page est compose de plusieurs composants JSF :
certains n'ont pas d'apparence visuelle, comme ceux qui dclare l'en-tte <h:head>, le corps <h:body> ou le
formulaire <h:form>. D'autres ont une reprsentation graphique et affichent un texte en sortie <h:outputText>,
2.
JavaServer Faces http://manu.kegtux.org/Java/Tutoriels/J2EE/JSF.html
2 sur 61 13/12/2012 11:40
une zone de saisie <h:inputText> ou un bouton <h:commandButton>. Vous remarquez que nous pouvons
galement utiliser des marqueurs HTML purs : <html>, <h3>, <hr />.
Moteurs de rendu : JSF reconnait deux modles de programmation pour afficher les composants : l'implmentation directe
et l'implmentation dlgue. Avec le modle direct, les composants doivent eux-mme s'encoder vers une reprsentation
graphique et rciproquement. Avec le mode dlgu, ces oprations sont confies un moteur de rendu, ce qui permet
aux composants d'tre indpendants de la technologie d'affichage (navigateur, terminal mobile, etc.) et donc d'avoir
plusieurs reprsentations graphiques possibles.
Un moteur de rendu s'occupe d'afficher un composant et de traduire la saisie d'un utilisateur en valeur de
composants. Nous pouvons donc le considrer comme un traducteur plac entre le client et le serveur : il
dcode la requte de l'uilisateur pour initialiser les valeurs du composant et encode la rponse pour crer une
reprsentation du composant que le client pourra comprendre et afficher.
3.
Convertisseurs et validateurs : Lorsque la page est affiche, l'utilisateur peut s'en servir pour entrer des donnes. Comme
il n'y a pas de contraintes sur les types, un moteur de rendu ne peut pas prvoir l'affichage de l'objet. Voil pourquoi les
convertisseurs existent : ils traduisent un objet (Integer, Date, Enum, Boolean, etc.) en chane de caractres afin qu'il
puisse s'afficher (protocole HTTP est un protocole uniquement textuel) et, inversement, construisent un objet partir
d'une chane qui a t saisie. JSF fournit un ensemble de convertisseurs pour les types classiques dans la paquetage
javax.faces.convert, mais vous pouvez dvelopper les vtres ou ajouter des types provenant de tierces parties.
Parfois, les donnes doivent galement tre valides avant d'tre traites par le back-end : c'est le rle des
validateurs ; nous pouvons ainsi associer un ou plusieurs validateurs un composant unique afin de garantir
que les donnes saisies sont correctes. JSF fournit quelques validateurs (LengthValidator, RegexValidator, etc.)
et vous permet d'en crer d'autres en utilisant vos propres classes annotes. En cas d'erreur de conversion ou
de validation, un message est envoy dans la rponse afficher.
4.
Beans grs et navigation : Tous les concepts que nous venons de prsenter - qu'est-ce qu'une page, qu'est-ce qu'un
composant, comment sont-il affichs convertis et valids - sont lis une page unique, mais les applications web sont
gnralement formes de plusieurs pages et doivent raliser un traitement mtier (en appelant une couche EJB, par
exemple). Le passage d'une page une autre, l'invocation d'EJB et la synchronisation des donnes avec les composants
sont pris en charge par les beans grs.
5.
L'exemple ci-dessous visualise un projet d'entreprise de gestion complte d'une bibliothque. Nous dcouvrons ainsi toute
la partie mtier au travers d'un certain nombre d'EJB session, comme GrerAuteurs, GrerLivres, etc. qui s'occupent
galement de la persistance l'aide d'entits adaptes. La couche prsentation est traite au moyen de JSF o nous
dcouvrons toute la structure interne. Tout d'abord la servlet FacesServlet qui joue le rle de contrleur et qui prend en
compte toute les requtes venant du client dport. Ensuite, la partie visuelle est reprsente par les diffrentes pages web
comme auteurs.xhtml, livres.xhtml, etc. Enfin, ce qui permet de mettre en relation la logique mtier avec cette partie visuelle,
dans ce que nous appelons le back-end, nous trouvons les beans grs comme GestionAuteurs, GestionLivres, etc.
JavaServer Faces http://manu.kegtux.org/Java/Tutoriels/J2EE/JSF.html
3 sur 61 13/12/2012 11:40
Vous remarquez qu'un bean gr est systmatiquement associ une page xhtml. Ce n'est pas absolument indispensable.
Nous pouvons tout aussi bien avoir plusieurs beans pour une mme page et inversement, un seul bean gr peut s'occuper
de plusieurs pages.
Un bean gr est classe Java spcialise qui synchronise les valeurs avec les composants, traite la logique mtier et gre
la navigation entre les pages. Nous associons un composant une proprit ou une action spcifique d'un bean gr en
utilisant EL (Expression Language) :
Ainsi, par exemple, la premire zone de saisie lie directement la valeur du champ la proprit euro. Cette valeur
est alors automatiquement synchronise avec la proprit du bean gr.
5.
JavaServer Faces http://manu.kegtux.org/Java/Tutoriels/J2EE/JSF.html
4 sur 61 13/12/2012 11:40
Un bean gr peut galement traiter des vnements et associer un bouton de soumission une action
spcifique. Ainsi, lorsque nous cliquons sur la bouton de conversion, celui-ci dclenchera un vnement sur le
bean gr, qui excutera alors une mthode couteur - ici, euroFranc().
Le bean gr est une classe Java annote par @ManagedBean et possde deux proprits, euro et franc, qui
sont synchronises avec les valeurs des composants de la page. La mthode euroFranc() de ce bean manag
ralise le traitement de la conversion.
Support d'Ajax : Une application web doit fournir une interface riche et rapide. Cette ractivit peut tre obtenue en ne
modifiant que de petites parties de la page de faon asynchrone, sans que la page ne soit recharge entirement, et c'est
exactement pour cela qu'Ajax a t conu.
Par exemple, sur notre application web de conversion, nous pourrions souhaiter que seule la zone des francs
soit change lors de la soumission de la requte de conversion partir des uros :
6.
JavaServer Faces http://manu.kegtux.org/Java/Tutoriels/J2EE/JSF.html
5 sur 61 13/12/2012 11:40
Voici le code correspondant :
Cycle de vie
Une page JSF est une arborescence de composants avec un cycle de vie spcifique qu'il faut bien avoir compris pour savoir quel moment
les composants sont valids ou quand le modle est mis jour.
Un clic sur un bouton provoque l'envoi d'une requte du navigateur vers le serveur et cette requte est traduite en vnement qui
peut tre trait par l'application sur le serveur.
1.
Toutes les donnes saisie par l'utilisateur passent par une tape de validation avant que le modle soit mis jour et que du code
mtier soit appel.
2.
JSF se charge alors de vrifier que chaque composant graphique (composants parent et fils) est correctement rendu par le
navigateur.
3.
Le cycle de vie de JSF se divise en six phases :
Restauration de la vue : JSF trouve la vue cible et lui applique les entres de l'utilisateur. S'il s'agit de la premire visite,
JSF cre la vue comme un composant UIViewRoot (racine de l'arborescence de composants, qui constitue une page
particulire). Pour les requtes suivantes, il rcupre l'UIViewRoot prcdemment sauvegarde pour traiter la requte
HTTP courante.
1.
Application des valeurs de la requte : Les valeurs fournies avec la requte (champ de saisie, d'un formulaire, valeurs des
cookies ou partir des en-ttes HTTP) sont appliques aux diffrents composants de la page. Seuls les composants UI (de
la page) modifient leur tat, non les objets mtiers qui forment le modle.
2.
Validations : Lorsque tous les composants UI ont reu leurs valeurs, JSF traverse l'arborescence de composants et
demande chacun d'eux de s'assurer que la valeur qui leur a t soumise est correcte. Si la conversion et la validation
russissent pour tous les composants, le cycle de vie passe la phase suivante. Sinon il passe la phase de Rendu de la
rponse avec les messages d'erreur de validation et de conversion appropris.
3.
Modification des valeurs du modle : Lorsque toutes les valeurs des composants ont t affectes et valides, les beans
grs qui leur sont associs peuvent tre mis jour.
4.
Appel de l'application : Nous pouvons maintenant excuter la logique mtier. Les actions qui ont t dclenches seront
excutes sur le bean gr. La navigation entre en jeu car c'est la valeur qu'elle renvoie qui dterminera la rponse.
5.
Rendu de la rponse : Le but principal de cette phase consiste renvoyer la rponse l'utilisateur. Son but secondaire est 6.
JavaServer Faces http://manu.kegtux.org/Java/Tutoriels/J2EE/JSF.html
6 sur 61 13/12/2012 11:40
de sauvegarder l'tat de la vue pour pouvoir la restaurer dans la phase de restauration si l'utilisateur redemande la vue.
Le thread d'excution d'un cycle requte/rponse peut passer ou non par chacune de ces tapes en fonction de la requte et
de ce qui se passe au cours de son traitement : en cas d'erreur notamment, le flux d'excution passe directement la phase
de Rendu de la rponse. Quatre de ces tapes peuvent produire des messages d'erreur : Application des valeurs de la
requte (2), Validation (3), Modification des valeurs du modle (4) et Appel de l'application (5). Avec ou sans erreur, la phase
de Rendu de la rponse (6) renvoie toujours le rsultat l'utilisateur.
Petit rsum
Nous venons de le voir, crer des pages contenant des composants graphiques ne suffit pas : ces pages doivent interagir avec un back-end
(un processus en arrire plan), il faut pouvoir naviguer entre les pages et valider et convertir les donnes. JSF est une spcification trs riche
: les beans grs permettent d'invoquer la couche mtier, de naviguer dans votre application, et, grce un ensemble de classes, vous
pouvez convertir les valeurs des composants ou les valider pour qu'ils correspondent aux rgles mtiers. Grces aux annotations, le
dveloppement de convertisseurs et de validateurs personnaliss est dsormais chose facile.
JSF 2.0 apporte la simplicit et la richesse aux interfaces utilisateurs dynamiques. Il reconnait nativement Ajax en fournissant une
bibliothque JavaSript permettant d'effectuer des appels asynchrones vers le serveur et de rafrachir une page par parties.
La cration d'interfaces utilisateurs, le contrle de la navigation dans les appels synchrones ou asynchrones de la logique mtier sont
possibles parce que JSF utilise le modle de conception MVC (Modle-Vue-Contrleur). Chaque partie est donc isole des autres, ce
qui permet de modifier l'interface utilisateur sans consquence sur la logique mtier et vice versa.

Le modle MVC et architecture JSF
JSF encourage la sparation des problmes en utilisant une des variantes du modle MVC. Ce dernier est un modle d'architecture
permettant d'isoler la logique mtier de l'interface utilisateur car la premire ne se mlange pas bien avec la seconde.
Avec PHP ou JSP, le mlange de la logique mtier et de l'interface utilisateur produit des applications plus difficiles maintenir et qui
supportent moins bien la monte en charge. En effet, une page JSP qui contient la fois du code Java et des instructions SQL au
millieu des balises HTML : bien que ce soit techniquement correct, imaginez la difficult de maintenir une telle page... Elle mlange
deux types de dveloppement diffrents (celui du concepteur graphique et celui de programmeur mtier) et pourrait finir par utiliser
bien plus d'API encore (accs aux bases de donnes, appels d'EJB, etc.), par grer les exceptions ou par effectuer des traitements
mtiers complexes.
Avec MVC, l'application utilise un couplage faible, ce qui facilite la modification de son aspect visuel ou des rgles mtiers
sous-jacentes sans pour autant affecter l'autre composante. Par exemple, nous avons travailler sur deux vues diffrentes
(conversion.xhtml), avec ou sans prise en compte d'une action Ajax, sans que nous ayons modifier quoi que ce soit sur le bean gr.
Revoici d'ailleurs les deux alternatives :
JavaServer Faces http://manu.kegtux.org/Java/Tutoriels/J2EE/JSF.html
7 sur 61 13/12/2012 11:40
Comme le montre la figure ci-dessous, la partie modle de MVC reprsente les donnes (et leurs diffrents traitements) de
l'applications ; la vue correspond l'interface utilisateur et le contrleur gre la communication entre les deux :
Le modle est reprsent par le contenu, qui est quelque fois stock dans une base de donnes et affich dans la vue ; il
ne se soucie pas de l'aspect que verra l'utilisateur. Avec JSF, il peut tre form de backing beans, d'appels EJB, d'entits
JPA, etc.
1.
La vue JSF est la vritable page XHTML (XHTML est rserve aux interfaces web, mais il pourrait s'agir d'autre type de vue,
comme WML pour les dispositifs mobiles). Une vue fournit une reprsentation graphique d'un modle et un modle peut
avoir plusieurs vues pour prvoir un affichage sous forme de formulaire ou sous forme de liste, par exemple.
2.
JavaServer Faces http://manu.kegtux.org/Java/Tutoriels/J2EE/JSF.html
8 sur 61 13/12/2012 11:40
Lorsqu'un utilisateur manipule une vue, celle-ci informe un contrleur des modifications souhaites. Ce contrleur se
charge alors de rassembler, convertir et valider les donnes, appelle la logique mtier puis produit le contenu en XHTML.
Avec JSF, le contrleur est un objet FacesServlet.
Cette servlet est dj fabrique. Nous n'avons aucun code crire en son sein. Nous pouvons toutefois
influencer son comportement au moyen d'annotations spcifiques, comme par exemple @ManagedBean. Dans
ce cas l, la servlet s'occupera alors de gnrer un nouvel objet correspondant la classe du bean gr avec
une dure de vie adapte.
3.
Architecture JSF au travers de l'exemple complet de conversion
Nous allons valider tous les diffrents concepts que nous venons de dcouvrir durant tout le dbut de cette tude au travers du projet de
conversion sur lequel nous avons galement travaill. Nous en profiterons pour dcouvrir l'architecture d'une application web trait avec JSF
et de voir comment se traite la gestion des resources ainsi que le descripteur de dploiement (web.xml).
Nous allons maintenant suivre toute la procdure pour raliser ce projet au travers de l'environnement Netbeans. Ce projet, je le
rappelle, permet de raliser la conversion montaire des uros vers les francs (uniquement dans ce sens).
Mise en place du projet
Cration d'un projet de type application Web : 1.
JavaServer Faces http://manu.kegtux.org/Java/Tutoriels/J2EE/JSF.html
9 sur 61 13/12/2012 11:40
Nom du projet Francs : 2.
Choix du serveur d'applications et des rglages de base : 3.
Prise en compte de la technologie JSF pour cette application web : 4.
JavaServer Faces http://manu.kegtux.org/Java/Tutoriels/J2EE/JSF.html
10 sur 61 13/12/2012 11:40
Feuille de style CSS et gestion des ressources
La plupart des composants ont besoin de ressources externes pour s'afficher correctement : <h:graphicImage> a besoin d'une
image, <h:commandButton> peut galement afficher une image pour reprsenter le bouton, <h:outputScript> rfrence un fichier
JavaScript et surtout les composants peuvent galement appliquer des styles CSS (Sujet qui m'intresse ici).
Avec JSF, une ressource est un lment statique qui peut tre transmis aux lments afin d'tre affich (images) ou trait
(CSS) par le navigateur. JSF 2.0 permet d'assembler directement les ressources dans un fichier jar spar, avec un numro
de version et une locale, et de les placer la racine de l'application web, sous le rpertoire suivant :
resources/<identifiant_ressource>
ou
META-INF/resources/<identifiant_ressource>
<identifiant_ressource> est form de plusieurs sous-rpertoire indiqus sous la forme :
[locale/ ] [nomBibliothque/ ] nomRessource [ /versionRessource]
Tous les lments entre crochets sont facultatifs. La locale est le code du langage, suivi ventuellement d'un code
de pays (en, en_US, pt, pt_BR). Comme l'indique cette syntaxe, vous pouvez ajouter un numro de version la
bibliothque ou la ressource elle-mme.
Voici quelques exemples :
resources/principal.css
resources/css/principal.css
Aprs toutes ces considrations techniques, nous allons maintenant laborer l'ensemble de nos styles de la page dans une
feuille spare. La suite nous montre la procdure suivre :
Netbeans permet de prendre en compte les feuilles de styles : 1.
JavaServer Faces http://manu.kegtux.org/Java/Tutoriels/J2EE/JSF.html
11 sur 61 13/12/2012 11:40
Le plus important et de bien choisir l'emplacement, avec bien sr le nom de votre feuille de style : 2.
Voici le rsultat avec la prise en compte de l'emplacement : 3.
JavaServer Faces http://manu.kegtux.org/Java/Tutoriels/J2EE/JSF.html
12 sur 61 13/12/2012 11:40
principal.css
root {
display: block;
}
body {
background-color: orange;
color: maroon;
font-family: Verdana,Arial,Helvetica,sans-serif;
text-align: center;
}
.saisie, .resultat {
background-color: yellow;
text-align: right;
font-weight: bold;
color: green;
}
.resultat {
color: red;
}
.erreur {
color: black;
}
Le fait de choisir une feuille de style plutt que d'intgrer les styles directement dans la vue me parat tre une attitude de
bon dveloppeur. Il faut toujours sparer la mise en forme de votre page web par rapport son ossature, surtout si vous
devez en construire plusieurs. Toutes les pages respecterons ainsi la mme charte graphique. A tout moment, vous pouvez
changer cette charte sans remettre en cause les structures de dveloppement de vos diffrentes vues. Pour finir, lorsque
vous prenez une feuille de style part entire, vous bnficiez d'un diteur CSS intgr, ce qui n'est pas ngligeable.
Le contrleur FacesServlet et le descripteur de dploiement web.xml
Lorsqu'un utilisateur manipule une vue, celle-ci informe un contrleur des modifications souhaites. Ce contrleur se charge alors
de rassembler, convertir et valider les donnes, appelle la logique mtier puis produit le contenu en XHTML. Avec JSF, le contrleur
est un objet FacesServlet.
FacesServlet est une implmentation de javax.servlet.Servlet qui sert de contrleur central par lequel passent toutes les
requtes. Comme le montre la figure ci-dessous, la survenue d'un vnement, lorsque l'utilisateur clique sur un bouton, par
exemple, provoque l'envoi d'une notification au serveur via HTTP ; celle-ci est intercepte par
JavaServer Faces http://manu.kegtux.org/Java/Tutoriels/J2EE/JSF.html
13 sur 61 13/12/2012 11:40
javax.faces.webapp.FacesServlet, qui examine la requte et excute diffrentes actions sur le modle l'aide des beans
grs.
En coulissse, la FacesServlet prend les requtes entrantes et donne le contrle l'objet javax.faces.lifecycle.LifeCycle. A
l'aide d'une mthode de fabrique, elle cre un objet javax.faces.contextFacesContext qui contient et traite les informations
d'tat de chaque requte. L'objet Lifecycle utilise ce FacesContext en six tapes (dcrites au chapitre prcdent) avant de
produire la rponse.
Les requtes qui doivent tre traites par la FacesServlet sont rediriges l'aide d'une association de servlet dans le
descripteur de dploiement (web.xml) qui se situe dans le rpertoire WEB-INF. Les pages web, les beans grs, les
convertisseurs, etc. doivent tre assembls l'aide de ce fichier.
Ce fichier dfinit la javax.faces.webapp.FacesServlet en lui donnant un nom (Faces Servlet, ici) et une association. Dans
cet exemple, toutes les requtes dont le prfixe est faces/ sont associes pour tre gres par la servlet - toute requte de
la forme http://localhost:8080/Francs/faces/*.xhtml sera donc trait par JSF.
1.
Nous pouvons en profiter pour dfinir la page d'accueil l'aide du marqueur <welcome-file>, ici conversion.xhtml. Cette
balise est optionnelle. Si vous ne voulez pas la dfinir, la page d'accueil doit alors s'appeler index.xhtml.
2.
En option, vous pouvez galement configurer quelques paramtres spcifiques JSF dans l'lment <context-param>.
dont la liste est propose ci-dessous :
Paramtre Description
javax.faces.CONFIG_FILES Dfinit une liste de chemins de ressources lies au contexte
dans lequel JSF recherchera les ressources.
javax.faces.DEFAULT_SUFFIX Permet de ffinir une liste de suffixes possibles pour les
pages ayant du contenu JSF (.xhtml, par exemple).
javax.faces.LIFECYCLE_ID Identifie l'instance LifeCycle utilise pour traiter les
requtes JSF.
javax.faces.STATE_SAVING_METHOD Dfinit l'emplacement de sauvegarde de l'tat. Les valeurs
possibles sont server (valeur par dfaut qui indique que
l'tat sera gnralement sauvegard dans un objet
3.
JavaServer Faces http://manu.kegtux.org/Java/Tutoriels/J2EE/JSF.html
14 sur 61 13/12/2012 11:40
HttpSession) et client (l'tat sera sauvegard dans champ
cach lors du prochain envoi de formulaire).
javax.faces.PROJECT_STAGE Dcrit l'tape dans laquelle se trouve cette application JSF
dans le cycle de vie (Development, UnitTest, SystemTest ou
Production). Cette information peut tre utilise par une
implmentation de JSF pour amliorer les performances
lors de la phase de production en utilisant un cache pour
les ressources, par exemple.
javax.faces.DISABLE_FACELET_JSF_VIEWHANDLER Dsactive Facelets comme langage de dclaration de page
(PDL).
javax.faces.LIBRARIES Liste des chemins qui seront considrs comme une
bibliothque de marqueurs Facelets.
Le bean gr Conversion
Comme nous l'avons voqu plus haut dans ce chapitre, le modle MVC encourage la sparation entre le modle, la vue et le
contrleur. Avec Java EE, les pages JSF forment la vue et la FacesServlet est le contrleur. Les beans grs, quant eux, sont une
passerelle vers le modle.
Les beans grs sont des classes Java annotes. Ils constituent le coeur des applications web car ils excutent la logique
mtier (ou la dlguent aux EJB, par exemple), grent la navigation entre les pages et stockent les donnes. Une
application JSF typique contient un ou plusieurs beans grs qui peuvent tre partags par plusieurs pages.
1.
Les donnes sont stockes dans les attributs du bean gr, qui, en ce cas, est galement appel "backing bean". Un
backing bean dfinit les donnes auxquelles est li un composant de l'interface utilisateur (la cible d'un formulaire, par
exemple). Pour tablir cette liaison, nous utilisons EL, le langage d'expressions.
2.
Ecrire un bean gr est aussi simple qu'crire un EJB ou une entit JPA puisqu'il s'agit simplement de crer une classe
Java annote par @ManagedBean (ou @Named, nous verrons la diffrence entre les deux critures lors du prochain
chapitre).
3.
Les beans grs sont des classes Java prises en charge par la FacesServlet. Les composants de l'interface utilisateur sont
lis aux proprits du bean (backing bean) et peuvent invoquer des mthodes d'action.
4.
Bien qu'un bean gr puisse tre une simple classe annote, sa configuration peut tre personnalise grce aux lments
de @ManagedBean et @ManagedProperty (voir pour plus de dtail dans le chapitre suivant).
5.
La prsence de l'annotation @javax.faces.model.ManagedBean sur une classe l'enregistre automatiquement comme un
bean gr. C'est la FacesServlet qui gre cette classe. Par dfaut, le nom du bean gr (objet) est celui de la classe
commenant par une minuscule. Il est possible de choisir un autre nom en spcifiant l'attribut name de l'annotation
@ManagedBean.
6.
Les composants de l'interface utilisateur tant lis aux proprits du bean gr, changer son nom par dfaut a des
rpercussions sur la faon d'appeler une proprit ou une mthode.
7.
Les objets crs dans le cadre d'un bean gr ont une certaine dure de vie et peuvent ou non tre accessibles aux
composants de l'interface utilisateur ou aux objets de l'application. Cette dure de vie et cette accessibilt sont
regroupes dans la notion de porte. Plusieurs annotations (que nous tudierons plus en dtail dans la chapitre suivant)
permettent de dfinir la porte d'un bean gr.
8.
La porte que je choisi pour le bean gr est @ViewScoped. Cet objet est alors disponible dans une vue donne jusqu' sa
modification. Son tat persiste jusqu' ce que l'utilisateur navigue vers une autre vue, auquel cas il est supprim.
9.
Aprs toutes ces rflexions, je vous propose maintenant de crer notre bean gr Conversion l'aide de notre outil de
dveloppement Netbeans. Voici la procdure suivre :
Cration d'un nouveau bean gr : 1.
JavaServer Faces http://manu.kegtux.org/Java/Tutoriels/J2EE/JSF.html
15 sur 61 13/12/2012 11:40
Demande de cration d'un bean gr dont le nom de l'objet sera conv issu de la classe Conversion et dont la dure de vie
correspond exactement la dure de vie de la page afficher :
2.
Nous plaons toute la logique mtier dans ce bean gr, et c'est lui qui ralise la conversion ncessaire. Voir le code
ci-dessous.
3.
bean.Conversion.java
package bean;
import javax.faces.bean.*;
@ManagedBean(name="conv")
@ViewScoped
public class Conversion {
private final double TAUX = 6.55957;
private double euro;
private double franc;
public double getEuro() { return euro; }
public void setEuro(double euro) { this.euro = euro; }
public double getFranc() { return franc; }
public void setFranc(double franc) { this.franc = euro * TAUX; }

JavaServer Faces http://manu.kegtux.org/Java/Tutoriels/J2EE/JSF.html
16 sur 61 13/12/2012 11:40
public void euroFranc() { franc = euro * TAUX; }
}
Mise part les annotations, nous retrouvons une classe normale avec des proprits et une mthode de traitement. 1.
Ces proprits sont indispensables pour que la page web puisse y accder et qu'il y ait une interaction possible entre le
modle et la vue.
2.
L'annotation @ManagedBean est galement indispensable pour stipuler que cette classe doit tre prise en compte par le
contrleur (tre gre). C'est finalement l'quivalent d'un dispositif de configuration puisque nous demandons ainsi que le
nom de l'objet correspondant s'appelle conv. Par ailleurs, nous configurons galement la dure de vie de cet objet pour
qu'il soit en adquation avec la vue au moyen de l'annotation @ViewScoped.
3.
Grce ces simples annotations, il est trs facile de changer de nom d'objet ainsi que sa dure de vie. 4.
La vue conversion.xhtml
Le modle, vous venez de le dcouvrir est trs simple. Nous nous intressons maintenant notre dernier lment de l'application
wen, savoir la vue, plus prcisment la page conversion.xhtml.
Lorsque vous travaillez avec la vue, vous disposez d'un certain nombre de composants (marqueurs) dj construits qui sont
installs dans des bibliothques spcifiques qu'il faut prendre en compte lors de l'laboration de vos pages web si vous
dsirez les utiliser. Voici le tableau qui recense les bibliothques prfabriques :
URI
Prfixe
classique
Description
http://java.sun.com/jsf/html h Contient les composants et leurs rendus HTML (h:commandButton, h:inputText,
etc.)
http://java.sun.com/jsf/core f Contient les actions personnalises indpendantes d'un rendu particulier
(f:convertNumber, f:validateDoubleRange, f:param, etc.)
http://java.sun.com
/jsf/facelets
ui Marqueurs pour le support les modles de page.
http://java.sun.com
/jsf/composite
composite Sert dclarer et dfinir des nouveaux composants personnaliss.
http://java.sun.com
/jsp/jstl/core
c Les pages Facelets peuvent ventuellement utiliser certains marqueurs issus de
JSP (c:if, c:forEach et c:catch). A viter si possible.
http://java.sun.com/jsp/jstl
/functions
fn Les pages Facelets peuvent utiliser tous les marqueurs de fonctions issus de la
technologie JSP.
conversion.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title><h:outputText value="Conversion entre les uros et les francs" /></title>
</h:head>

<h:outputStylesheet library="css" name="principal.css" />

<h:body>
<h3><h:outputText value="Conversion entre les uros et les francs" /></h3>
<hr />
<h:form>
<h:inputText value="#{conv.euro}"
styleClass="saisie"
id="euro"
converterMessage="Il faut une valeur montaire"
validatorMessage="Uniquement les nombres positifs"
required="true"
requiredMessage="Prcisez votre valeur montaire">

<f:convertNumber type="currency" currencySymbol=""/>
<f:validateDoubleRange minimum="0.0" />
</h:inputText>

<h:commandButton value="Conversion" action="#{conv.euroFranc}" />

<h:inputText value="#{conv.franc}" readonly="true" styleClass="resultat">
<f:convertNumber type="currency" currencySymbol="F"/>
</h:inputText>

<p><h:message for="euro" styleClass="erreur"/></p>
</h:form>
</h:body>
</html>
Au dbut, dans la balise <html>, vous spcifiez les bibliothques qui vous serons utiles pour la constitution de votre page. 1.
JavaServer Faces http://manu.kegtux.org/Java/Tutoriels/J2EE/JSF.html
17 sur 61 13/12/2012 11:40
Par exemple, sauf cas trs rare, nous avons toujours besoin des marqueurs relatifs au rendu, comme les zones de saisie,
les boutons etc. Aussi, nous proposons l'espace de nom h (pour HTML) associ la bibliothque
xmlns:h="http://java.sun.com/jsf/html".
2.
Pour les marqueurs qui ralise du traitement en coulisse, comme les convertisseurs et les validateurs, nous introduisons
la bibliothque xmlns:f="http://java.sun.com/jsf/core". (Nous aurions pu prendre l'espace de nom c, mais il est
gnralement dj utilis par la JSTL). Quelquefois, je prend comme espace de nom core.
3.
La balise <h:outputStylesheet library="css" name="principal.css" /> nous permet de prendre en compte la feuille de style
principal.css que nous avons mise en oeuvre au pralable, dans la bibliothque (rpertoire) css. Vous pouvez placer votre
feuille de style directement dans le rpertoire resources (donc sans bibliothque), auquel cas vous n'avez plus spcifier
l'attribut library.
4.
Nous retrouvons pratiquement le mme code que nous avons dj consult mainte fois. Vous remarquez toutefois la
prsence d'un nouveau marqueur <h:message for="euro" styleClass="erreur"/> qui permet d'avertir l'utilisateur d'une
mauvaise utilisation sur la zone de saisie des uros.
5.
Cette balise doit toujours tre rattache une autre au moyen de l'attribut for. De la mme faon, la balise en question,
comme ici <h:inputText value="#{conv.euro}" id="euro">, doit possder l'attribut id l'intrieur duquel vous spcifiez un
nom de variable prendre en compte.
6.
Toujours dans cette balise, vous avez la possibilit de spcifier les messages qui s'afficheront automatiquement lors d'une
erreur de saisie particulire. Ici, nous proposons des messages d'erreur de conversion, de validation et de champ non
vide, respectivement avec les atttributs converterMessage, validatorMessage et requiredMessage.
7.
Voici d'ailleurs les diffrents rsultats obtenus suivant les cas d'utilisation : 8.
JavaServer Faces http://manu.kegtux.org/Java/Tutoriels/J2EE/JSF.html
18 sur 61 13/12/2012 11:40
N'oubliez pas que nous ici dans la technique des pages web dynamiques, c'est--dire que tout les marqueurs que nous
proposons ne sont pas envoys au client. La page web conversion.xhtml reste sur le serveur et le systme JSF envoie une
page web au format HTML classique suivant la requte propose par le client (pas besoin d'une installation Java spcifique).
Voici justement le code source de la page web qui est envoye par rapport aux valeurs proposes ci-dessus :
Conclusion
JavaServer Faces http://manu.kegtux.org/Java/Tutoriels/J2EE/JSF.html
19 sur 61 13/12/2012 11:40

Les beans grs et la navigation
Comme nous l'avons voqu plus haut dans ce chapitre, le modle MVC encourage la sparation entre le modle, la vue et le contrleur. Avec
Java EE, les pages JSF forment la vue et la FacesServlet est le contrleur. Les beans grs, quant eux, sont une passerelle vers le modle.
Je rappelle les points importants que nous avons dj voqu dans le chapitre prcdent :
Les beans grs sont des classes Java annotes. Ils constituent le coeur des applications web car ils excutent la logique mtier (ou
la dlguent aux EJB, par exemple), grent la navigation entre les pages et stockent les donnes. Une application JSF typique
contient un ou plusieurs beans grs qui peuvent tre partags par plusieurs pages.
1.
Les donnes sont stockes dans les attributs du bean gr, qui, en ce cas, est galement appel "backing bean". Un backing bean
dfinit les donnes auxquelles est li un composant de l'interface utilisateur (la cible d'un formulaire, par exemple). Pour tablir cette
liaison, nous utilisons EL, le langage d'expressions.
2.
Ecrire un bean gr est aussi simple qu'crire un EJB ou une entit JPA puisqu'il s'agit simplement de crer une classe Java
annote par @ManagedBean ou @Named.
3.
Les beans grs sont des classes Java prises en charge par la FacesServlet. Les composants de l'interface utilisateur sont lis aux
proprits du bean (backing bean) et peuvent invoquer des mthodes d'action.
4.
Bien qu'un bean gr puisse tre une simple classe annote, sa configuration peut tre personnalise grce aux lments de
@ManagedBean et @ManagedProperty.
5.
La prsence de l'annotation @javax.faces.model.ManagedBean ou @javax.inject.Named sur une classe l'enregistre automatiquement
comme un bean gr. C'est la FacesServlet qui gre cette classe. Par dfaut, le nom du bean gr (objet) est celui de la classe
commenant par une minuscule. Il est possible de choisir un autre nom en spcifiant l'attribut name de l'annotation @ManagedBean
ou de l'annotation @Named.
6.
Les composants de l'interface utilisateur tant lis aux proprits du bean gr, changer son nom par dfaut a des rpercussions
sur la faon d'appeler une proprit ou une mthode.
7.
Pour conclure sur cette premire approche, un bean gr doit respecter les contraintes suivantes
Le classe doit tre annote par @ManagedBean ou @Named. 1.
La classe doit avoir une porte (qui vaut par dfaut @RequestScoped). (Nous dcouvrirons les diffrentes portes dans la suite du
chapitre).
2.
La classe doit tre publique et non finale ni abstraite. 3.
JavaServer Faces http://manu.kegtux.org/Java/Tutoriels/J2EE/JSF.html
20 sur 61 13/12/2012 11:40
La classe doit fournir un constructeur public sans paramtre qui sera utilis par le conteneur pour crer les instances. 4.
La classe ne doit pas dfinir de mthode finalize(). 5.
Pour tre lis un composant graphique de la vue, les attributs doivent avoir des getters et des setters public (ce que nous
appelons des proprits). En ralit, le point de contact d'un composant graphique avec la proprit se fait toujours au travers des
mthodes. Du coup, dans certains cas, il n'est pas toujours ncessaire d'avoir un attribut qui conserve la valeur. Par contre, la
syntaxe du getter et du setter doit tre respecte.
6.
!es beans C"#
Jusqu' prsent, nous avons surtout travaill sur les beans manags au travers de l'annotation @ManagedBean. Cependant, les beans
manags sont assez limits. JSF, avec sa dernire version, dfinie un modle de bean gr plus flexible, nomm CDI (Contexts and
Dependency Injection). Ce bean, comme son nom l'indique, est li un context (comme, par exemple, la requte en cours, la session actuelle
du navigateur, ou mme le cycle de vie du context de l'utilisateur.
CDI spcifie un mcanisme pour injecter des beans grs, pour intercepter les mthodes d'appel, et prendre en compte la vole les
vnements lies aux diffrentes requtes du client web.
Ceci dit, nous pouvons continuer prendre des beans manags. Dans bien des cas ils sont gnralement suffisants, notamment si
nous n'avons pas besoin d'interaction. Ils permettent d'avoir une gestion autonome du modle.
L o les beans CDI sont importants, c'est justement lorsque nous dsirons avoir une forte interaction avec les autres lments du
serveur d'applications, comme les beans sessions, les entits, les applications web de type Rest. Ainsi, par exemple, l'injection permet
d'avoir un bean session qui sert galement de bean gr en relation directe avec la vue, condition toutefois que ce bean session soit
de type stateful afin de permettre le suivi des diffrentes requtes de l'application web.
Aprs toutes ces dfinissions, venons en maintenant l'criture proprement dite. Nous retrouvons pratiquement la mme syntaxe que
les beans manags. Vous avez juste utiliser l'annotation @Named en lieu et place de l'annotation @ManagedBean, comme ci-dessous
:
bean.Conversion.java
package bean;
import javax.io.Serializable;
import javax.inject.Named; // importation diffrente
import javax.enterprise.context.SessionScoped; // importation diffrente
@Named("conv")
@SessionScoped // la dure de vie Vue n'existe pas dans les beans CDI
public class Conversion implementation Serializable { // Nous devons galement faire en sorte que l'objet soit srialis
private final double TAUX = 6.55957;
private double euro;
private double franc;
public double getEuro() { return euro; }
public void setEuro(double euro) { this.euro = euro; }
public double getFranc() { return franc; }
public void setFranc(double franc) { this.franc = euro * TAUX; }

public void euroFranc() { franc = euro * TAUX; }
}
Mise part quelques petits dtails, le code du bean gr correspondant la conversion demeure similaire. 1.
Notamment nous pouvons conserver la mme vue que prcdemment. Ainsi, l'accs une proprit de ce bean se fait
exactement de la mme faon : #{conv.euro}, par exemple.
2.
Les diffrences notables concerne les importations d'une part, et surtout, notre bean doit tre srialis. 3.
Il existe des dures de vie diffrentes dans les deux types de bean. 4.
La mise en oeuvre des beans CDI est galement diffrente avec Netbeans. Nous verrons comment procder lors du
prochain exemple.
5.
Porte et dure de vie des beans grs
Les objets crs dans le cadre d'un bean gr ont une certaine dure de vie et peuvent ou non tre accessibles aux composants de l'interface
utilisateur ou aux objets de l'application. Cette dure de vie et cette accessibilt sont regroupes dans la notion de porte. Plusieurs
annotations permettent de dfinir la porte d'un bean gr.
Lorsque vous dfinissez un bean gr, vous tes obligs de spcifier galement sa porte. Trois portes sont communes au beans
manags et beans CDI : les portes de type Session, de type Requte et de type Application.
JSF 2.0 rajoute les portes de type Vue et de type Personnalise qui ne sont pas supportes par les beans CDI mais qui proposent en
contre partie une porte plus puissante qui s'appelle Conversation.
Avec JSF 2.0, vous pouvez utiliser les annotations suivantes pour prendre en compte les portes communes : @SessionScoped,
@RequestScoped et @ApplicationScoped. Notez que ces annotations sont dcrites dans le paquetage javax.faces.bean pour les beans
manags et dans le paquetage javax.enterprise.context pour les beans CDI.
JavaServer Faces http://manu.kegtux.org/Java/Tutoriels/J2EE/JSF.html
21 sur 61 13/12/2012 11:40
Dfinition de chacune des portes
@ApplicationScoped : Il s'agit de l'annotation la moins restrictive, avec la plus longue dure de vie. Les objets crs sont
disponibles dans tous les cycles requte/rponse de tous les clients utilisant l'application tant que celle-ci est active. Ces objets
peuvent tre appels de faon concurrente et doivent dont tre thread-safe (c'est--dire utiliser le mot-cl synchronized). Les objets
ayant cette porte peuvent utiliser d'autres objets sans porte ou avec une porte d'application.
Ce type de bean est construit ds l'apparition de la premire requte d'un client et reste actif jusqu' ce que l'application
web soit enleve du serveur d'applications. Cependant, il est possible de faire en sorte que ce bean soit actif plus tt, bien
avant que la premire page soit affiche, ds que l'application web est dploye sur le serveur, au moyen de l'attribut
eager, comme suit :
@ManagedBean(eager=true)
1.
@SessionScoped : Ces objets sont disponibles pour tous les cycles requte/rponse de la session du client. Leur tat persiste entre
les requtes et dure jusqu' la fin de la session. Ils peuvent utiliser d'autres objets sans porte, avec une porte de session ou
d'application.
Rappelez-vous que le protocole HTTP est sans tat. Le navigateur envoie une requte au serveur, le serveur renvoie la
rponse, et ni le navigateur ni le serveur sont dans l'obligation, dans ce protocole, de garder en mmoire la transaction.
2.
@ViewScoped : (Uniquement pour les beans manags) : Ces objets sont disponibles dans une vue donne jusqu' sa modification.
Leur tat persiste jusqu' ce que l'utilisateur navigue vers une autre vue, auquel cas il est supprim. Ils peuvent utiliser d'autres
objets sans porte, avec une porte de vue, de session ou d'application.
3.
@RequestScoped : Il s'agit de la porte par dfaut. Ces objets sont disponibles du dbut d'une requte jusqu'au moment o la
rponse est envoye au client. Un client pouvant excuter plusieurs requtes tout en restant sur la mme vue, la dure
@ViewScoped est suprieure celle de @RequestScoped. Les objets ayant cette porte peuvent utiliser d'autres objets sans porte,
avec une porte de requte, de vue, de session ou d'application.
Avec cette porte, la dure de vie est trs courte. La cration du bean se ralise ds qu'une requte est propose et se
dtruit rapidement ds que la rponse t renvoye au client. Cela veut dire qu'une nouvelle instance est cre chaque
requte du client. Du coup, pour une mme vue, beaucoup de mmoires risquent d'tre utilises pour rien.
4.
@NoneScoped : Les beans grs ayant cette porte ne sont visibles dans aucune page JSF; ils dfinissent des objets utiliss par
d'autres beans grs de l'application. Ils peuvent utiliser d'autres objets avec la mme porte.
5.
@ConversationScoped : (Uniquement pour les beans CDI) : Cette porte est intressante lorsque vous avez besoin de grer
plusieurs onglets pour une mme session. C'est un petit peu l'intermdiaire entre la porte de type requte et la porte de type
session.
6.
La porte des beans grs doit tre judicieusement choisie : vous ne devez leur donner que la porte dont ils ont besoin. Des beans
ayant une porte trop grande (@ApplicationScoped, par exemple) augmentent l'utilisation mmoire et l'utilisation du disque pour leur
persistance ventuelle. Il n'y a aucune raison de donner une porte d'application un objet qui n'est utilis que dans un seul
composant. Inversement, un objet ayant une porte trop restreinte (@RequestScoped, par exemple) ne sera pas disponible dans
certaines parties de l'application, et ventuellement beaucoup d'objets (avec donc beaucoup de mmoires) risquent d'tre crs pour
rien.
#n$ection de valeurs dans les beans %&'anagedProperty et &#n$ect(
Dans un bean gr, vous pouvez demander au systme d'injecter une valeur dans une proprit (un attribut avec un getter et un setter) en
utilisant l'annotation @javax.faces.model.ManagedProperty (pour les beans manags) ou @javax.inject.Inject (pour les beans CDI), dont
l'attribut value peut recevoir une chane ou une expression EL.
Annotation du cycle de vie et des mthodes de rappel
L'introduction nous a montr le cycle de vie d'une page (qui compte six phases, de la rception de la requte la production de la rponse),
mais le cycle de vie des beans grs est totalement diffrent : en fait il est totalement identique celui des beans sessions sans tat.
Les beans grs qui s'excutent dans un conteneur de servlet peuvent utiliser les annotations @PostConstruct et @PreDestroy.
Ainsi, aprs avoir cr une instance de bean gr, le conteneur appelle la mthode de rappel @PostConstruct s'il y en a une.
Puis le bean est li une porte et rpond toutes les requtes de tous les utilisateurs. Toutefois, avant de supprimer le
bean, le conteneur appelle la mthode @PreDestroy. Ces mthodes permettent ainsi d'initialiser les attributs ou de crer et
librer les ressources externes.
bean.GestionLivre.java
@ManagedBean ou @Named
public class GestionLivre {
JavaServer Faces http://manu.kegtux.org/Java/Tutoriels/J2EE/JSF.html
22 sur 61 13/12/2012 11:40
...
@PostConstruct
public void dbut() { ... }
...
@PreDestroy
public void fin() { ... }
}
!angage d'expressions )!
Les instructions EL fournissent une syntaxe simple d'utilisation afin de se connecter une proprit ou proposer une action spcifique sur
un bean gr. Elles permettent facilement d'afficher les valeurs des variables ou d'accder aux attributs des objets, aux travers de leurs
proprits, et disposent galement d'un grand nombre d'oprateurs mathmatiques, logiques et relationnels.
La syntaxe de base d'une instruction EL est de la forme :
#{expression}
Les expressions EL peuvent utiliser la plupart des oprateurs Java habituels :
Arithmtiques : + - * / (division) % (modulo) 1.
Relationnels : == (galit) != (ingalit) < (infrieur) > (suprieur) <= (infrieur ou gal) >= (suprieur ou gal) 2.
Logiques : && (et) || (ou) ! (non) 3.
Autre : empty (vide) () (parenthses) [ ] (crochets) . (sparateur) ?: (if arithmtique) 4.
L'oprateur empty teste si un objet est null ou si les collections (tableaux, List, Map, etc. ) sont vides. Nous pouvons ainsi
contrler, par exemple, qu'un livre est dfini ou pas :
#{empty livre}
L'oprateur point permet d'accder un attribut d'un objet. Une autre syntaxe possible consiste utiliser l'oprateur [ ]. Nous
pouvons ainsi accder l'attribut titre de l'objet livre de la faon suivante :
#{livre.titre} ou #{livre[titre]}
Appel de mthodes
Il est galement possible d'appeler des mthodes. Si vous dsirez par exemple acheter un livre en appelant la mthode acheter() de
l'objet livre :
#{livre.acheter}
Depuis la toute dernire version de JSF, nous pouvons galement proposer des paramtres aux appels de mthode :
<h:commandButton value="Suivant" action="#{unBean.naviguer(1)}" />
<h:commandButton value="Prcdent" action="#{unBean.naviguer(-1)}" />
A condition que cette mthode soit effectivement dclare avec le bon paramtre :
@ManagedBean
public class UnBean {
...
public void naviguer(int sens) { ... }
}
Actions *ondamentales
Les actions fondamentales, numres dans le tableau ci-dessous, fournissent des marqueurs pour manipuler les beans grs, des variables,
traiter des erreurs, effectuer des tests et excuter des boucles et des itrations :
Action "escription
<c:remove> Supprime une variable.
<c:catch> Capture une exception java.lang.Throuwable lance par l'une de ses actions imbriques.
<c:if> Teste si une expression est vrai (la plupart du temps, il est prfrable d'utiliser plutt l'attribut rendered prsent dans
toutes les balises de JSF).
<c:choose> Fournit plusieurs alternatives exclusives.
<c:when> Reprsente une alternative dans une section <c:choose>.
<c:otherwise> Reprsente la dernire alternative d'une action <c:choose>.
<c:forEach> Rpte son corps pour chaque lment d'une collection ou un nombre fix de fois.
JavaServer Faces http://manu.kegtux.org/Java/Tutoriels/J2EE/JSF.html
23 sur 61 13/12/2012 11:40
+b$ets prd*inies
Il existe des identificateurs spciaux, que nous pouvons atteindre directement dans les diffrentes vues, qui correspondent des objets
spcifiques dj prdfinis. Ce sont des objets implicites parce qu'une page peut les utiliser sans avoir besoin de les dclarer ou de les
initialiser explicitement. Ces objets (numrs dans le tableau ci-dessous) sont utilisable l'aide des expressions EL.
+b$et implicite "escription ,ype renvoy
application Reprsente l'environnement de l'application web. Sert obtenir les paramtres de configuration de
cette application.
Object
applicationScope Associe les noms des attributs de l'application leurs valeurs. Map
component Dsigne le composant courant. UIComponent
cc Dsigne le composant composite courant. UIComponent
cookie Dsigne un Map contenant les noms des cookies (cls) et des objets Cookie. Map
facesContext Dsigne l'instance FacesContext de cette requte. FacesContext
header Fait correspondre chaque nom d'en-tte HTTP une seule valeur de type String. Map
headerValue Fait correspondre chaque nom d'en-tte HTTP un tableau String[] contenant toutes les valeurs de cet
en-tte.
Map
initParam Fait correspondre les noms des paramtres d'initialisation du contexte leurs valeurs de type String. Map
param Fait correspondre chaque nom de paramtre une seule valeur de type String. Map
paramValues Fait correspondre chaque nom de paramtre un tableau String[] contenant toutes les valeurs de ce
paramtre.
Map
request Reprsente l'objet requte HTTP. Object
requestScope Fait correspondre les noms des attributs de la requte leurs valeurs. Map
resource Indique l'objet ressource. Object
session Reprsente l'objet session HTTP. Object
sessionScope Fait correspondre les noms des attributs de la session leurs valeurs. Map
view Reprsente la vue courante. UIViewRoot
viewScope Fait correspondre les noms des attributs de la vue leurs valeurs. Map
Tous ces objets implicites sont de vrais objets avec des interfaces. Vous pouvez accder leurs attributs avec EL :
Ainsi, #{view.locale}, par exemple, permet d'obtenir le pays dans lequel est consult cette page (en_US, fr_FR, etc.). 1.
Si vous stockez un livre dans la porte de la session, par exemple, vous pouvez l'atteindre avec #{sessionScope.livre}. 2.
Vous pouvez mme utiliser un alogorithme plus labor pour afficher tous les en-ttes HTTP et leurs valeurs :
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:c="http://java.sun.com/jsp/jstl/core">

<h:body style="background-color: yellow; font-weight: bold">
<h3>
<h:outputText value="Lecture des en-ttes de la requte HTTP" />
<h:outputText value=" (En france)" rendered="#{view.locale == 'fr_FR'}" />
</h3>
<hr />
<c:forEach items="#{headerValues}" var="lment">
<h:outputText value="#{lment.key}" style="color: mediumslateblue" /> =
<c:forEach var="valeur" items="#{lment.value}">
<h:outputText value="#{valeur}" escape="false" style="color: brown" />
<br />
</c:forEach>
</c:forEach>
</h:body>
</html>
3.
JavaServer Faces http://manu.kegtux.org/Java/Tutoriels/J2EE/JSF.html
24 sur 61 13/12/2012 11:40
-avigation
Les applications web sont formes de plusieurs pages entre lesquelles vous devez naviguer. Selon le cas, il peut exister diffrents niveaux de
navigation avec des flux de pages plus ou moins labors.
JSF dispose de plusieurs options de navigation et vous permet de contrler le flux page par page ou pour toute l'application.
Navigation statique
Les composants <h:commandButton> et <h:commandLink> permettent de passer simplement d'une page une autre en cliquant
sur un bouton ou sur un lien sans effectuer aucun traitement intrinsque. Il suffit d'initialiser leur attribut action avec le nom de la
page vers laquelle vous voulez vous rendre. Ici, par exemple, nous sommes dans la page de configuration du jeu qui se nomme
justement "configurer.xhtml". Voici le bouton de navigation que nous pourrions avoir dans cette page pour demander passer la
page "alea.xhtml" correspondant au jeu lui-mme :
<h:commandButton value="Commencer le jeu" action="alea.xhtml" />
Navigation dynamique
Cependant, la plupart du temps, ceci ne suffira pas car vous aurez besoin d'accder une couche mtier ou une base de donnes
pour rcuprer ou traiter des donnes. En ce cas, vous aurez besoin d'un bean gr. Par exemple, avant de commencer jouer,
nous avons besoin de faire un certain nombre de traitement avant que le jeu soit totalement prt. Dans cette situation, le flux des
pages reste simple, mais ces deux pages ont pourtant besoin d'un bean gr (Nombre) pour traiter la fois la logique mtier ainsi
que la navigation. Elles utilisent toujours les composants bouton (ou lien) pour naviguer et interagir avec ce bean.
Il suffit juste de prciser la mthode du bean gr qui va traiter la logique mtier (prparer le jeu) et s'occuper ensuite de la
navigation. Ici, par exemple, c'est la mthode recommencer() du bean nombre qui est appele :
<h:commandButton value="Commencer le jeu" action="#{nombre.recommencer}" />
Les composants bouton et lien n'appellent pas directement la page vers laquelle ils doivent se rendre : ils appellent des
mthodes du bean gr qui prennent en charge cette navigation et laissent le code dcider de la page qui sera charge
ensuite. La navigation utilise un ensemble de rgles qui dfinissent tous les chemins de navigation possibles de
l'application. Dans la forme la plus simple de ces rgles de navigation, chaque mthode du bean gr dfinit directement la
page vers laquelle elle doit aller.
@Named
@SessionScoped
public class Nombre implements Serializable {
...
public String recommencer() {
alea = (int)(Math.random()*valeurMax)+1;
tentative = 0;
valeur = 0;
test = false;
return "alea.xhtml";
}
}
Ainsi, quand le <h:commandButton> invoque la mthode recommencer(), celle-ci initialise le jeu, tire le nombre alatoire et
renvoie le nom de la page vers laquelle naviguer ensuite : alea.xhtml. La FacesServlet redirigera alors le flux de page vers la
page dsire. Remarquez au passage, le type de retour String de cette mthode recommencer().
La chane renvoye peut prendre plusieurs formes. Ici, nous avons utilis la plus simple : le nom de la page. L'extension de
fichier par dfaut tant .xhtml, nous aurions mme pu simplifi le code en supprimant l'extension.
JavaServer Faces http://manu.kegtux.org/Java/Tutoriels/J2EE/JSF.html
25 sur 61 13/12/2012 11:40
@Named
@SessionScoped
public class Nombre implements Serializable {
...
public String recommencer() {
alea = (int)(Math.random()*valeurMax)+1;
tentative = 0;
valeur = 0;
test = false;
return "alea";
}
}
Les exemples prcdentes nous ont montr une navigation simple o une page n'avait qu'une seule rgle de navigation et
une seule destination. Ce n'est pas un cas si frquent : les utilisateurs peuvent gnralement tre redirigs vers des pages
diffrents en fonction de certaines conditions.
Cette navigation, l encore, peut tre mise en place dans les beans grs. Le code suivant utilise une instruction switch pour
rediriger l'utilisateur vers trois pages possibles. Si nous renvoyons la valeur null, l'utilisateur reviendra sur la page sur
laquelle il se trouve dj.
public String uneMthode() {
switch (valeur) {
case 1 : return "page1.xhtml"; break;
case 2 : return "page2.xhtml"; break;
case 3 : return "page3.xhtml"; break;
default : return null; break;
}
}
Redirection et mthodes POST et GET du protocole HTTP
Vous pouvez solliciter l'implmentation JSF pour vous rediriger vers une autre vue. JSF envoie alors une redirection HTTP au client. La
redirection est envoye au navigateur client avec l'URL correspondant la nouvelle page. Le navigateur client soumet alors cette
nouvelle requte en utilisant la mthode GET du protocole HTTP.
La redirection est moins rapide que la navigation classique puisque vous proposer une requte supplmentaire au
navigateur. Cependant, la redirection assure au navigateur de mettre jour systmatiquement la page web visualiser.
La redirection est directive. Elle supplante les rgles de navigations classiques. Pour la mettre en oeuvre, il suffit de
rajouter la chane suivante :
?faces-redirect=true
1.
Voici ce que nous pouvons proposer sur un composant <h:commandButton> :
<h:commandButton value="Accueil" action="accueil?faces-redirect=true" />
2.
Par nature, les composants <h:commandButton> propose des requtes HTTP de type POST. Si vous dsirez plutt
proposer des requtes de type GET, prenez alors le composant <h:button> comme suit :
<h:button value="Accueil" outcome="accueil" />
Vous remarquez la prsence de l'attribut outcome de ce composant <h:button> en lieu et place de l'attibut action
du composant <h:commandButton>. Il existe une diffrence fondamentale de comportement. Avec outcome,
vous pouvez vous rattacher une proprit d'un bean gr, mais surtout pas l'appel d'une mthode. Pour
action, vu d'ailleurs son nom, c'est l'inverse, c'est--dire que normalement cet attribut est utilis pour faire appel
la mthode qui gre la navigation.
3.
Dans les requtes GET, nous avons quelquefois besoin de rajouter des paramtres qui vont servir exploiter correctement
la demande. Le plus facile, mon avis, est de rajouter une balise <f:param> pour chaque paramtre que vous souhaitez
prendre en compte dans votre soumissions :
<h:button value="Accueil" includeViewParams="true" outcome="accueil">
<f:param name="utilisateur" value="#{bean.personne}">
<f:param name="administrateur" value="non">
</h:button>
4.
Application .eb /ui propose un $eu de tirage alatoire d'un nombre
Pour terminer ce chapitre, je vous propose de prendre en compte ces notions de navigation avec pour modle un bean CDI au travers d'un
projet spcifique. Je vous propose de faire un petit jeu qui nous permet de retrouver un nombre dtermin alatoirement avec un nombre de
coup et une valeur maximale limites.
JavaServer Faces http://manu.kegtux.org/Java/Tutoriels/J2EE/JSF.html
26 sur 61 13/12/2012 11:40
Nous allons maintenant suivre toute la procdure pour raliser ce projet au travers de l'environnement Netbeans.
Mise en place du projet
Cration d'un projet de type application Web : 1.
JavaServer Faces http://manu.kegtux.org/Java/Tutoriels/J2EE/JSF.html
27 sur 61 13/12/2012 11:40
Nom du projet Alea : 2.
Choix du serveur d'applications et des rglages de base : 3.
Prise en compte de la technologie JSF pour cette application web : 4.
JavaServer Faces http://manu.kegtux.org/Java/Tutoriels/J2EE/JSF.html
28 sur 61 13/12/2012 11:40
Descripteur de dploiement web.xml
L'application web comporte cette fois-ci deux vues, la premire (configurer.xhtml) permet de configurer le jeu en spcifiant la valeur
limite du nombre rechercher avec galement un nombre de coup limite, la deuxime (alea.xhtml) concerne le jeu lui-mme. J'aimerai
que la premire page soit affiche ds que nous sollicitons cette application web. Voici ce que nous pouvons proposer au niveau du
descripteur de dploiement :
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>faces/configurer.xhtml</welcome-file>
</welcome-file-list>
</web-app>
Le bean gr Nombre
Une fois que le projet est en place, la premire dmarche avant de s'intresser aux vues, est de s'occuper du modle qui va raliser
tous les traitements ncessaires en coulisse. Pour changer, par rapport au premier projet de conversion, le modle sera mis en oeuvre
au travers d'un bean CDI.
bean.Nombre.java
package bean;
import javax.inject.*;
import javax.enterprise.context.*;
import java.io.Serializable;
@Named
@SessionScoped
public class Nombre implements Serializable {
private int valeurMax = 20;
private int tentativeMax = 4;
private int valeur;
private int alea;
private int tentative;
private boolean test;
public int getTentativeMax() { return tentativeMax; }
JavaServer Faces http://manu.kegtux.org/Java/Tutoriels/J2EE/JSF.html
29 sur 61 13/12/2012 11:40
public void setTentativeMax(int tentativeMax) { this.tentativeMax = tentativeMax; }
public int getValeurMax() { return valeurMax; }
public void setValeurMax(int valeurMax) { this.valeurMax = valeurMax; }
public int getValeur() { return valeur; }
public void setValeur(int valeur) { this.valeur = valeur; }
public int getTentative() { return tentative; }
public String recommencer() {
alea = (int)(Math.random()*valeurMax)+1;
tentative = 0;
valeur = 0;
test = false;
return "alea.xhtml";
}

public void calcul() {
if (tentative<tentativeMax) {
tentative++;
test = alea == valeur;
}
}
public String getRsultat() {
if (test) return "Bravo, vous avez trouv !";
if (tentative==tentativeMax) return "Dsol, vous avez perdu. La valeur rechercher est ";
if (tentative==0) return "Tentez votre chance";
else return "Non, ce n'est pas le bon chiffre, refaites un essai.";
}
public String getProgression() {
if (tentative==0 || test) return "";
return "Le nombre est plus "+(alea>valeur ? "grand" : "petit");
}
public int getAlea() { return alea; }
public boolean isFin() { return test || tentative == tentativeMax; }
}
Pour cette partie relative au modle, nous pouvons envisager plusieurs approches quant au nombre de beans grs
prendre en compte. La solution retenue ici est de n'utiliser qu'un seul bean. Du coup, le code est beaucoup plus
volumineux que lors du projet prcdent, puisque ce mme bean doit tre en relation avec deux vues diffrentes. Par
ailleurs, le traitement raliser est plus consquent.
1.
Il s'agit d'un bean CDI. Remarquez cette fois-ci la prsence de l'annotaion @Named. Pour sa mise en oeuvre avec
Netbeans, nous retrouvons les mmes botes de dialogue, si ce n'est la petite diffrence quant au choix de la porte de
l'objet.
2.
Lors de l'laboration d'un bean gr, nous devons retrouver, bien entendu, des attributs, pour sauvegarder des
informations qui vont tre utiles lors du passage d'une requte l'autre, des proprits (getters et setters) indispensables
pour la communication directe avec les vues, et des mthodes qui vont tre appeles pour raliser des traitements
spcifiques ou pour naviguer entre les vues lorsque l'utilisateur clique sur les boutons de soumissions.
3.
La porte choisie ici est une porte de type session. Ce choix est important puisque lorsque nous rglons les valeurs
limites dans la page de configuration, il est impratif de conserver ces valeurs lorsque nous basculons vers la page
correspondant au jeu. Pour les mmes raisons, par exemple, il faut bien garder en mmoire le nombre alatoire tir
pendant toute la phase du jeu.
4.
Les attributs prsents dans ce bean, sont les valeurs limites valeurMax et tentativeMax, ala le nombre alatoire
rechercher, la valeur propose par l'utilisateur en cours de jeu, le nombre de tentative qui s'incrmente automatiquement
en cours de jeu et enfin test qui dtermine si le nombre propos par l'utilisateur est le bon.
5.
Nous retrouvons la plupart des prorits en relation avec ces attributs. Toutefois, il n'existe pas de proprit relative
l'attribut test. Ainsi, des attributs peuvent exister sans qu'ils soient systmatiquement accessibles directement dans la
vue. Cet attribut test reste utile lors des traitements annexes.
6.
A l'inverse, et c'est flagrant ici, nous pouvons proposer des proprits qui ne sont associes aucun attribut particulier
parce que nous ne dsirons pas conserver d'informations particulires. Elles ne sont utiles que pour l'instant prsent.
C'est le cas des proprits en lecture seule, rsultat, progression et fin, accessibles donc au travers des mthodes
respectives getRsultat(), getProgression() et isFin(). Les deux premires proprits servent pour l'affichage
d'informations alors que la dernire permet de savoir si nous somme la fin du jeu.
7.
Pour terminer avec ce bean, la mthode intressante, comme nous l'avons dj voqu dans ce chapitre, est la mthode
recommencer() qui sera sollicite chaque fois que nous devons dbuter le jeu, soit aprs la configuration (appel depuis
configurer.xhtml), soit lorsque nous dsirons tout simplement recommencer une partie (appel depuis alea.xhtml).
8.
Cette mthode permet d'initialiser correctement tous les attributs afin que le jeu dbute dans de bonnes conditions, et
surtout, quand tout est prt, c'est la vue alea.xhtml qui est automatiquement appele au retour de la mthode. Cette
requte est prise en compte par le contrleur qui s'occupe effectivement de cette demande d'affichage. Il s'agit d'une
navigation dynamique.
9.
Feuille de style CSS
Pour ce projet galement, et pour tous les projets d'ailleurs, il est judicieux de proposer une feuille de style principale afin de bien
JavaServer Faces http://manu.kegtux.org/Java/Tutoriels/J2EE/JSF.html
30 sur 61 13/12/2012 11:40
sparer l'aspect visuel ainsi que la charte graphique avec les fonctionnalits propres des composants de la vue. Ainsi, il sera trs
facile par la suite de changer rapidement cet aspect pour en proposer un autre plus adapt.
Rappelez-vous que cette feuille de style ne doit pas tre place n'importe o. Vous devez imprativement prvoir au moins
un rpertoire bien spcifique pour toutes les ressources annexes votre projet qui se nomme trs justement resources :
resources/<identifiant_ressource>
ou
META-INF/resources/<identifiant_ressource>
<identifiant_ressource> est form de plusieurs sous-rpertoire indiqus sous la forme :
[locale/ ] [nomBibliothque/ ] nomRessource [ /versionRessource]
Je rappelle que tous les lments entre crochets sont facultatifs. La dernire fois, j'avais propos de prendre en
compte la bibliothque (css) que je ne renouvelle pas ici :
resources/principal.css
principal.css
root {
display: block;
}
body {
background-color: orange;
font-weight: bold;
color: maroon;
}
.saisie {
text-align:right;
background-color:yellow;
font-weight:bold;
color:green;
width: 30px;
display: block;
}
.normal {
font-weight:bold;
}
h2, h3 {
background-color: yellow;
padding: 5px;
border: groove;
}
.progression {
color: blue;
}
.resultat {
border: groove;
padding-right: 3px;
}
Les vues configurer.xhtml et alea.xhtml
Dans le projet, nous disposons de deux vues :
La premire configurer.xhtml qui permet, comme son nom l'indique, de faire les rglages ncessaires sur les valeurs
maximales savoir, la valeur maximale du nombre recherche et le nombre de tentative maximum.
1.
JavaServer Faces http://manu.kegtux.org/Java/Tutoriels/J2EE/JSF.html
31 sur 61 13/12/2012 11:40
La deuxime alea.xhtml qui s'occupe de jeu proprement dit : 2.
configurer.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Recherche d'un nombre alatoire</title>
</h:head>
<h:outputStylesheet name="principal.css" />

<h:body>
<h:form>
<h:panelGrid columns="2">
<h:outputText value="Recherche d'un nombre alatoire compris entre 1 et " styleClass="normal" />
<h:inputText value="#{nombre.valeurMax}" styleClass="saisie"/>
<h:outputText value="Nombre de tentative possibles " styleClass="normal"/>
<h:inputText value="#{nombre.tentativeMax}" styleClass="saisie"/>
</h:panelGrid>
<hr />
<h:commandButton value="Commencer le jeu" action="#{nombre.recommencer}" />
</h:form>
</h:body>
</html>
Cette page est relativement modeste. Nous retrouvons la mme ossature que lors du premier projet. Le fait d'avoir
construit une feuille de style spare permet d'allger considrablement la vue elle-mme.
1.
Dans ce projet, encore plus que pour le premier, une feuille de style est vraiment intressante, puisqu'elle est utilise pour
deux vues diffrentes. Cela permet de factoriser les rglages ncessaires dans un mme endroit et d'viter ainsi les
duplications de code.
2.
La prise en compte de la feuille de style se fait toujours au moyen de la balise <h:outputStylesheet name="principal.css"
/>. Cette fois-ci toutefois, l'attribut library n'est pas utilis puisque nous avons plac la feuille de style directement dans le
rpertoire resources sans proposer de libraire interne.
3.
La grande nouveaut concerne la balise <h:panelGrid columns="2">. Ce composant est l'quivalent d'un panneau
intermdiaire qui permet d'aligner tous les autres composants qui se trouve l'intrieur, et dans ce cas prcis suivant
deux colonnes.
4.
Avec le composant <h:commandButton value="Commencer le jeu" action="#{nombre.recommencer}" />, lorsque
l'utilisateur clique sur le bouton, c'est la mthode recommencer() du bean CDI nombre qui est appele, et cette dernire
comme nous l'avons vu, aprs avoir remis zro les attributs concernant le jeu, demande au contrleur d'afficher la page
alea.xhtml.
5.
JavaServer Faces http://manu.kegtux.org/Java/Tutoriels/J2EE/JSF.html
32 sur 61 13/12/2012 11:40
public String recommencer() {
alea = (int)(Math.random()*valeurMax)+1;
tentative = 0;
valeur = 0;
test = false;
return "alea.xhtml";
}
alea.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Recherche d'un nombre alatoire</title>
</h:head>

<h:outputStylesheet name="principal.css" />
<h:body>
<h:form>
<h:panelGrid columns="3">
<h:outputText value="Votre nombre : " />
<h:inputText value="#{nombre.valeur}" styleClass="saisie" />
<h:outputText value="#{nombre.progression}" styleClass="progression" />
<h:outputFormat value="Tentative{0, choice, 0#|2#s} : ">
<f:param value="#{nombre.tentative}" />
</h:outputFormat>
<h:inputText value="#{nombre.tentative}" styleClass="saisie" disabled="true" />
</h:panelGrid>
<hr />
<h:commandButton value="Valider votre nombre" action="#{nombre.calcul}" disabled="#{nombre.fin}" />
&nbsp;
<h:commandButton value="Recommencer" action="#{nombre.recommencer}" />
&nbsp;
<h:commandButton value="Changer les valeurs limites" action="configurer.xhtml" />
<hr />
<h2>
<h:outputText value="#{nombre.rsultat}" />
<h:outputText value="#{nombre.alea}" styleClass="saisie" rendered="#{nombre.fin}" />
</h2>
</h:form>
</h:body>
</html>
Ici aussi, je vous propose quelques remarques. Sur cette dernire version de JSF, il n'est pas oblig de prendre
systmatiquement une balise <h:outputText value="Votre nombre : " />. Nous aurions pu crire directement Votre nombre :
. Si vous avez prendre en compte des styles CSS, il est alors intressant de les utiliser, comme ici <h:outputText
value="#{nombre.progression}" styleClass="progression" />.
1.
Le composant <h:outputFormat value="Tentative{0, choice, 0#|2#s} : "> permet de proposer d'afficher des textes
paramtrs, comme ici de rajouter un s partir de la deuxime tentative. A l'intrieur de ce composant, vous devez
spcifier l'ensemble des paramtres qui sert de critre de calcul au travers du composant <f:param value="#
{nombre.tentative}" />.
2.
Le bouton <h:commandButton value="Valider votre nombre" action="#{nombre.calcul}" disabled="#{nombre.fin}" /> peut
tre gris, et donc non actif, au moyen de l'attribut disabled, ici par exemple lorsque nous somme la fin du jeu.
3.
Lorsque vous dsirez faire une navigation statique, c'est--dire lorsque vous dsirez atteindre une autre page sans faire de
traitement prliminaire ou sans condition particulire, il suffit simplement de prciser la page dans l'attribut action du
composants <h:commandButton value="Changer les valeurs limites" action="configurer.xhtml" />.
4.
Enfin, il est possible d'afficher un composant sous certaines conditions, ceci galement trs simplement, au moyen de
l'attribut rendered (prsent sur tous les composants visuels). Par exemple, lorsque nous sommes la fin du jeu, nous
pouvons montrer le nombre rechercher <h:outputText value="#{nombre.alea}" styleClass="saisie" rendered="#
{nombre.fin}" />.
5.
Conclusion
JavaServer Faces http://manu.kegtux.org/Java/Tutoriels/J2EE/JSF.html
33 sur 61 13/12/2012 11:40

Bibliothques de balises JSF
L'architecture JSF est conue pour tre indpendante de tout protocole ou langage marqueurs particulier et pour crire des applications
pour les clients HTML qui communiquent via HTTP. Une interface utilisateur pour une page web donne est cre en assemblant des
composants qui fournissent des fonctionnalits spcifiques afin d'interagir avec l'utilisateur (labels, cases cocher, etc.) - JSF met
disposition un certain nombre de classes composants couvrant la plupart des besoins classiques.
Une page est une arborescence de classes hritant de javax.faces.component.UIComponent ayant des proprits, des mthodes et des
vnements. La racine de l'arbre est une instance de UIViewRoot et tous les autres composants respectent une relation d'hritage.
Lors de la version prcdente, JSF proposait uniquement deux librairies de balises : core et HTML, la version JSF 2.0 couvre
maintenant six librairies diffrentes qui possdent plus d'une centaine de marqueurs spcifiques. Le tableau ci-dessous nous rappelle
ces diffrentes librairies. Dans ce chapitre toutefois, nous nous intresserons uniquement sur les bibliothques core et HTML.
01#
Pr*ixe
classi/ue
"escription
http://java.sun.com/jsf/html h Contient les composants et leurs rendus HTML (h:commandButton, h:inputText, etc.)
JavaServer Faces http://manu.kegtux.org/Java/Tutoriels/J2EE/JSF.html
34 sur 61 13/12/2012 11:40

Vous aimerez peut-être aussi