Introduction à JSF 2.0 - MIAGE Nice Sophia Antipolis

Introduction à JSF 2.0(Java Server Faces)Université de Nice - Sophia AntipolisRichard GrinVersion 0.3.2 – 10/7/11Adaptation / tri sélectif : Michel Buffa

Plan (1) Présentation Cycle de vie Java EE 6 Une application Web Rappels sur HTTP Page JSF Fichiers de configuration Implémentations de JSF (librairies JSF) Code d’une page JSF21/10/99 Richard Grin JSF - page 2

Plan (2) Langage EL Composants standards Navigation Portées (requête, session,…) Beans Utilisation des EJB Ajax21/10/99 Richard Grin JSF - page 3

Remarque Ce support est une introduction à JSF 2.0 utilisédans un cadre Java EE 6, avec un serveurd’applications du type de Glassfish, et CDI(Contexts and Dependency Injection)21/10/99 Richard Grin JSF - page 4

Présentation21/10/99 Richard Grin JSF - page 5

Utilité de JSF Créer des pages Web dynamiques Par exemple, une page Web qui est construite àpartir de données enregistrées dans une base dedonnées Une grande partie de la programmation liée à lavalidation des données saisies par l’utilisateur et deleur passage au code de l’application estautomatisée ou grandement facilitée Ajax sans programmation21/10/99 Richard Grin JSF - page 6

JSF Framework MVC qui reprend le modèle desinterfaces utilisateurs locales (comme Swing) Le modèle est représenté par des classes Java,les Java beans, sur le serveur Les vues sont représentées par des composantsJava sur le serveur, transformées en pagesHTML sur le client Le contrôleur est un servlet qui intercepte lesrequêtes HTTP liées aux applications JSF et quiorganise les traitements JSF (implicite)21/10/99 Richard Grin JSF - page 7

Autres possibilités Java D’autres solutions que JSF peuvent être utiliséespour créer des pages Web dynamiques : JSPs (aujourd’hui officiellement plus conseillées) Utilisation de bibliothèques javascript / HTML5 /Servlets ou Web Services REST GWT (Google Web Tollkit) JRuby on rail Etc21/10/99 Richard Grin JSF - page 8

How you can applyThis support guide, the application form and all related materials areavailable to download from our website at www.theskillsshow.comAll organisations must submit an applicationform and supporting material. The applicationprocess opens from 6 February and closes on27 April 2012 at 4pm. All application forms andsupporting material must be received by thisdate and time.■■You can apply for multiple Showcase opportunities. Ifyou wish to enter for more than one category pleasesubmit separate application forms for each category.■■Organisations can apply individually or in partnershipwith others. The size of the organisation does notmatter and applications will be judged on creativity,innovation, demonstration of clear educationalbenefit and ability to deliver.■■Showcase organisations selected and taking partwill be published from the week commencing21 May 2012.Who can apply?Showcase applications are open across the UK(this includes, England, Northern Ireland, Scotlandand Wales).Showcase applications are encouraged from:■■School sixth forms■■Sixth form colleges■■Further Education colleges, specialist andtertiary colleges■■Private training providers■■Adult and community learning centres■■Community and youth groups■■Special needs schools and colleges■■UniversitiesWho can take part in the Showcase?We aim to make Showcases as inclusive as possible. Youcan bring a range of students to take part. This shouldinclude learners who are still in learning or who haverecently left.Everyone taking part in the Showcasing must be aged16 or over on the day of your Showcase.We encourage students who are in community-based orpart/full time adult learning. You could also draw fromprevious award winners (UK competitions or broader).We positively encourage diversity and encouragelearners from all backgrounds and of all ability levelsto participate.How to complete your Showcasingapplication formItem Additional Information DeadlineCompleteShowcaseApplicationFormSupportingvisualinformationPlease use the supportguide and criteria tocomplete and build yourapplication form.Please ensure you haveread, understood andagreed to the terms andconditions.Please include supportingvisual information ashyperlinks to an externalwebsite where they arehosted. This might includea selection of relevantimages e.g. photographs,case studies, video footageto support your applicationand help the selectionpanel understand yourShowcase application.Showcase timetableSchedule of activities and timescalesActivityApplication deadlineApplications sifted and sent to NationalSelection PanelNational Selection Panel DayYour completedapplication formshould be submittedby 4pm on 27 April2012 to showcase@theskillsshow.comAs above.DateClosing date; 27 April2012 at 4pm.30 April – 4 May 2012Mid MayShowcase list announced by The Skills Show w/c 21 May 2012The Skills Show confirm technical andoperational requirements for your ShowcaseShowcase registration (of studentstaking part)Showcase deliveredDuring June 2012During June,July, August,September 201215–17 November2012To download an application form please visitwww.theskillsshow.comOnce complete, return your application form toshowcase@theskillsshow.com by 4pm on 27 April 2012.09

Services rendus par JSF (1/2) Architecture MVC pour séparer l’interfaceutilisateur, la couche de persistance et lesprocessus métier, utilisant la notion d’événement Conversion des données (tout est texte dansl’interface utilisateur) Validation des données (par exemple, deschamps de formulaires requis) Automatisation de l’affichage des messagesd’erreur en cas de problèmes de conversion oude validation21/10/99 Richard Grin JSF - page 10

Services rendus par JSF (2/2) Internationalisation Support d’Ajax sans programmation(communication en arrière-plan et mise à jourpartielle de l’interface utilisateur) Fournit des composants standards simples pourl’interface utilisateur Possible d’ajouter ses propres composants Adaptable à d’autres langages de balise queHTML (WML par exemple pour les téléphonesportables)21/10/99 Richard Grin JSF - page 11

Standards JSF 2.0 est intégré dans Java EE 6 JSF 2.0 s’appuie sur les standards suivants :n Servlet 2.5 -> JSF et les Servlets ça marche bien !n Java SE 5.0n Java EE 5.0n JSTL 1.1 -> ATTENTION PAS CONSEILLE !!! JSF 2.0 peut (c’est conseillé) utiliser CDI(Contexts and Dependency Injection)n Annotations @EJB, @Inject etc.21/10/99 Richard Grin JSF - page 12

Le cycle de vie21/10/99 Richard Grin JSF - page 13

Pour bien comprendre JSF il est indispensable debien comprendre tout le processus qui se dérouleentre le remplissage d’un formulaire parl’utilisateur et la réponse du serveur sous la formede l’affichage d’une nouvelle page21/10/99 Richard Grin JSF - page 14

21/10/99 Richard Grin JSF - page 15

21/10/99 Richard Grin JSF - page 16

Le servlet « Faces » Toutes les requêtes vers des pages « JSF » sontinterceptées par un servlet défini dans le fichierweb.xml de l’application WebFaces Servletjavax.faces.webapp.FacesServlet121/10/99 Richard Grin JSF - page 17

URL des pages JSF Les pages JSF sont traitées par le servlet parceque le fichier web.xml contient une configurationtelle que celle-ci : Faces Servlet/faces/*Le pattern est souvent aussi de la forme*.faces (les pages dont l’URL se termine par .facessont considérées comme des pages JSF)21/10/99 Richard Grin JSF - page 18

Codage - décodage Les pages HTML renvoyées par une applicationJSF sont représentées par un arbre decomposants Java L’encodage est la génération d’une page HTML àpartir de l’arbre des composants Le décodage est l’utilisation des valeursrenvoyées par un POST HTML pour donner desvaleurs aux variables d’instance des composantsJava, et le lancement des actions associées aux« UICommand » JSF (boutons ou liens)21/10/99 Richard Grin JSF - page 19

Cycle de vie Le codage/décodage fait partie du cycle de viedes pages JSF Le cycle de vie est composé de 6 phases Ces phases sont gérées par le servlet « Faces »qui est activé lorsque qu’une requête demandeune page JSF (correspond au pattern indiquédans le fichier web.xml ; le plus souvent /faces/*ou *.faces)21/10/99 Richard Grin JSF - page 20

21/10/99 Richard Grin JSF - page 21

Demande page HTML Etudions tout d’abord le cas simple d’une requêted’un client qui demande l’affichage d’une page JSF21/10/99 Richard Grin JSF - page 22

La vue Cette requête HTTP correspond à une page JSF(par exemple *.faces) et est donc interceptée parle servlet Faces La page HTML correspondant à la page JSF doitêtre affichée à la suite de cette requête HTTP La page HTML qui sera affichée est représentéesur le serveur par une « vue » Cette vue va être construite sur le serveur ettransformée sur le serveur en une page HTML quisera envoyée au client21/10/99 Richard Grin JSF - page 23

Contenu de la vue Cette vue est un arbre dont les éléments sont descomposants JSF (composants Java) qui sont surle serveur (des instances de classes qui héritentde UIComponent) Sa racine est de la classe UIViewRoot21/10/99 Richard Grin JSF - page 24

Construction vue et page HTML Une vue formée des composants JSF est doncconstruite sur le serveur (ou restaurée si elle avaitdéjà été affichée) : phase « Restore View » Puisqu’il n’y a pas de données ou d’événements àtraiter, la vue est immédiatement rendue : le codeHTML est construit à partir des composants de lavue et envoyé au client : phase « RenderResponse »21/10/99 Richard Grin JSF - page 25

Traitement d’un formulaire Nous allons cette fois-ci partir d’une requête HTTPgénérée à partir d’une page HTML qui contient unformulaire (page construite à partir d’une pageJSF) L’utilisateur a saisi des valeurs dans ce formulaire Ces valeurs sont passées comme des paramètresde la requête HTTP ; par exemple,http://machine/page.xhtml?nom=bibi&prenom=bobsi la requête est une requête GET, ou dans l’entitéd’un POST21/10/99 Richard Grin JSF - page 26

21/10/99 Richard Grin JSF - page 27

Phase de restauration de la vue La vue qui correspond à la page qui contient leformulaire est restaurée (phase « Restore View ») Tous les composants reçoivent la valeur qu’ilsavaient avant les nouvelles saisies de l’utilisateur21/10/99 Richard Grin JSF - page 28

21/10/99 Richard Grin JSF - page 29

Phase d’application des paramètres Tous les composants Java de l’arbre descomposants reçoivent les valeurs qui lesconcernent dans les paramètres de la requêteHTTP : phase « Apply Request Values » Par exemple, si le composant texte d’unformulaire contient un nom, le composant Javaassocié conserve ce nom dans une variable En fait, chaque composant de la vue récupèreses propres paramètres dans la requête HTTP21/10/99 Richard Grin JSF - page 30

21/10/99 Richard Grin JSF - page 31

Phase de validation Toutes les validations des données traitées àl’étape précédentes sont exécutées Les données sont converties dans le bon typeJava Si une validation échoue, la main est donnée à laphase de rendu de la réponse21/10/99 Richard Grin JSF - page 32

Phase de validation Comment c’est fait : chaque composant valide etconvertit les données qu’il contient Si un composant détecte une valeur non valable,il met sa propriété « valid » à false et il met unmessage d’erreur dans la file d’attente desmessages (ils seront affichés lors de la phase derendu « render response ») et les phasessuivantes sont sautées21/10/99 Richard Grin JSF - page 33

21/10/99 Richard Grin JSF - page 34

Phase de mise à jour du modèle Si les données ont été validées, elles sont misesdans les variables d’instance des Java beansassociés aux composants de l’arbre descomposants21/10/99 Richard Grin JSF - page 35

21/10/99 Richard Grin JSF - page 36

Phase d’invocation de l’application Les actions associées aux boutons ou aux lienssont exécutées Le plus souvent le lancement des processusmétier se fait par ces actions La valeur de retour de ces actions va déterminerla prochaine page à afficher (navigation)21/10/99 Richard Grin JSF - page 37

21/10/99 Richard Grin JSF - page 38

Phase de rendu de la réponse La page déterminée par la navigation estencodée en HTML et envoyée vers le client HTTP21/10/99 Richard Grin JSF - page 39

Sauter des phases Il est quelquefois indispensable de sauter desphases du cycle de vie Par exemple, si l’utilisateur clique sur un boutond’annulation, on ne veut pas que la validation deschamps de saisie soit effectuée, ni que lesvaleurs actuelles soient mises dans le modèle Autre exemple : si on génère un fichier PDF àrenvoyer à l’utilisateur et qu’on l’envoie àl’utilisateur directement sur le flot de sortie de laréponse HTTP, on ne veut pas que la phase derendu habituelle soit exécutée21/10/99 Richard Grin JSF - page 40

immediate=true sur un UICommand Cet attribut peut être ajouté à un bouton ou à unlien (, , et ) pour faire passerdirectement (immédiatement) de la phase « Applyrequest values » à la phase « InvokeApplication » (en sautant donc les phases devalidation et de mise à jour du modèle) Exemple : un bouton d’annulation d’un formulaire21/10/99 Richard Grin JSF - page 41

immediate=true sur unEditableValueHolder Cet attribut peut être ajouté à un champ de saisie,une liste déroulante ou des boîte à cocher pourdéclencher immédiatement la validation et laconversion de la valeur qu’il contient, avant lavalidation et la conversion des autres composantsde la page Utile pour effectuer des modifications surl’interface utilisateur sans valider toutes lesvaleurs du formulaire21/10/99 Richard Grin JSF - page 42

Exemple Formulaire qui contient champ de saisie du codepostal et un champ de saisie de la ville Lorsque le code postal est saisi, unValueChangeListener met automatiquement àjour la ville : La soumission du formulaire déclenchée par lamodification du code postal ne doit pas lancer lavalidation de tous les composants du formulairequi ne sont peut-être pas encore saisis21/10/99 Richard Grin JSF - page 43

Une application Web21/10/99 Richard Grin JSF - page 44

21/10/99 Richard Grin JSF - page 45

Etapes du développement Ecrire le code des pages JSF et des backingbeans (Tester en local en déployant sur un containerWeb) Déployer sur le container Web final Taper l’adresse de l’application pour tester21/10/99 Richard Grin JSF - page 46

Structures des fichiers21/10/99 Richard Grin JSF - page 47

Fichier de distribution L’application doit être distribuée sous la formed’un fichier war (fichier de format jar) Elle peut être une partie d’un projet de typeentreprise, dans ce cas l’application est encoreun .war mais contenu dans le .ear du projet global(le .ear contient la partie web dans le .war, lapartie EJB dans un ou plusieurs .jar)21/10/99 Richard Grin JSF - page 48

Rappels sur HTTP21/10/99 Richard Grin JSF - page 49

Requête HTTP Le protocole HTTP permet à un client HTTPd’envoyer plusieurs types de requêtes à unserveur Les 2 types de base principaux sont les typesGET et POST GET permet au client de demander une pageHTML POST permet au client de passer des donnéesau serveur21/10/99 Richard Grin JSF - page 50

Réponse du serveur HTTP En réponse à une requête d’un client HTTP, unserveur HTTP renvoie au client une réponse21/10/99 Richard Grin JSF - page 51

Format d’une requête La première ligne contient le type de la requête(GET par exemple), suivi de l’URI qui désigne ledestinataire de la requête, suivi du numéro de laversion HTTP utilisée Ensuite peuvent venir des lignes facultatives (entêtes)pour indiquer la configuration du client oudes formats de documents acceptés en réponse En dernier la requête peut contenir une « entité »composée de données qui pourront être utiliséespar le serveur (essentiellement réservé à larequête POST) ; ligne vide avant l’entité21/10/99 Richard Grin JSF - page 52

Format d’une réponse Une première ligne d’état qui contient la versionHTTP utilisée, le code d’état (nombre ; parexemple, 200 indique que tout s’est bien passé)et la description du code (« OK » pour 200) Viennent ensuite des lignes d’en-têtes (commepour la requête du client) Finalement, le corps de la réponse est envoyé ; ilpeut s’agir du contenu d’un fichier HTML ou d’uncontenu généré par un programme du serveur21/10/99 Richard Grin JSF - page 53

GET La fonctionnalité de base de HTTP est depermettre à un navigateur (client HTTP) derécupérer et d’afficher une page Web Pour cela le client envoie une requête GET auserveur Cette requête contient l’URL de la page Webavec, éventuellement, des paramètres (couplesclé-valeur) La réponse contient le plus souvent un corps quiest le code d’une page HTML21/10/99 Richard Grin JSF - page 54

Exemple de requête GETGET page.html?nom=Toto&Prenom=Pierre HTTP/1.1Accept: */*Host: www.unice.frUser-Agent: Generic21/10/99 Richard Grin JSF - page 55

POST Certaines pages Web contiennent desquestionnaires remplis par l’utilisateur dunavigateur Lorsque l’utilisateur clique sur le bouton« Submit », les données qu’il a tapées sontenvoyées au serveur par une requête POST Cette requête contient l’URI du code qui va traiterles données, ainsi que les données La réponse du serveur contient le code de laprochaine page à afficher par le navigateur21/10/99 Richard Grin JSF - page 56

Exemple de POSTPOST /appl/client.xhtml HTTP/1.1Accept: */*Host: www.unice.frnom=TotoPrenom=Pierre21/10/99 Richard Grin JSF - page 57

Formulaires HTML Une page HTML peut contenir un formulaire() Lorsque ce formulaire est soumis au serveur(bouton de type « submit »), les données entréesdans le formulaire sont transmises au serveur parune requête POST ou une requête GET Avec GET, les valeurs saisies sont intégrées àl’URI ; avec POST elles sont mises dans l’entité C’est l’attribut name des balises qui donne le nomdes paramètres de la requête21/10/99 Richard Grin JSF - page 58

Page JSF21/10/99 Richard Grin JSF - page 59

Les pages JSF contiennent des balises quidécrivent les composants qui représenteront lapage sur le serveur21/10/99 Richard Grin JSF - page 60

Code XHTMLUne page JSF Contient des parties en EL : #{…} Utilise souvent une (ou plusieurs) bibliothèque decomposants JSF Sera traduite en XHTML « pur » pour être envoyée auclient Web21/10/99 Richard Grin JSF - page 61

Architecture des applications JSF21/10/99 Richard Grin JSF - page 62

JSF, servlets et beans Dans l’architecture des applications qui utilisentJSF, on trouve aussi des servlets et des beans Les servlets et les beans s’occupentprincipalement des traitements métier et desaccès aux données Les pages JSF sont utilisées pour l’interface avecl’utilisateur21/10/99 Richard Grin JSF - page 63

Répartition des tâches Les pages JSF ne contiennent pas de traitements (pas decode Java ou autre code comme dans les pages JSP,« ancien langage » de JSF pour créer les pages affichéesà l’utilisateur) Les traitements liés directement à l’interface utilisateursont écrits dans les backing beans Ces backing beans font appels à des EJB ou des classesJava ordinaire pour effectuer les traitements qui ne sontpas liés directement à l’interface utilisateur Note : on peut très bien faire des pages JSF, du EL et desServlets… mais c’est considéré « bas nioveau » Attention : pas de JSTL !!!21/10/99 Richard Grin JSF - page 64

Répartition des tâches (2) Les EJB sont chargés de traitements métier etdes accès aux bases de données Les accès aux bases de données utilisent JPA etdes classes entités21/10/99 Richard Grin JSF - page 65

Beans 2 types principaux de beans :n EJB (essentiellement des beans sessions) liésaux processus métiern « Backing beans » associés aux pages JSF etdonc à l’interface utilisateur qui font la liaisonentre les composants JSF de l’interface, lesvaleurs affichées ou saisies dans les pagesJSF et le code Java qui effectue les traitementsmétier21/10/99 Richard Grin JSF - page 66

Backing bean Souvent, mais pas obligatoirement, un backingbean par page JSF Voir support de cours sur les Backing Beansn Variables pour les propriétés,n Variable pour stocker des résultats de traitement,n Des méthodes get/set pour les propriétés,n Des méthodes de traitement (qu’on appelle« command handlers »,n Des écouteurs d’évènements…21/10/99 Richard Grin JSF - page 67

EJB Un backing bean fournit du code Java pourl’interface graphique Lorsqu’un processus métier doit être déclenché,le backing bean cède la main à un EJB Un EJB est totalement indépendant de l’interfacegraphique ; il exécute les processus métier ous’occupe de la persistance des données Les entités JPA 2 sont utilisées par les EJB pourla persistance des données21/10/99 Richard Grin JSF - page 68

Container pour les JSF Pour qu’il sache traiter les pages JSF, le serveur Web doitdisposer d’un container pour ces pages On peut utiliser pour cela un serveur d’applications dutype de Glassfish, JBoss, WebSphere, WebLogic, OAS.. Tomcat (projet Apache) est une solution plus légère pourtraiter les pages JSFnnnMais attention, Tomcat n’est PAS un serveur d’applications,Pas d’applications distribuées, pas de transactions distribuées, etcNe contient pas toutes les bibliothèques J2EE par défaut21/10/99 Richard Grin JSF - page 69

Paquetage et classes principales Les paquetages javax.servlet, javax.serlet.http,javax.servlet.jsp etc. ne sont pas fournis avec ladistribution standard de Java (SDK) Ils sont dans la distribution « entreprise » (qui estinstallée avec la version de netbeans qu’onutilise. On peut aussi les récupérer à part pour les utiliseravec la distribution standard ; c'est le cas si ondécide d’utiliser Tomcat.21/10/99 Richard Grin JSF - page 70

Fichiers de configuration21/10/99 Richard Grin JSF - page 71

Les différents fichiers WEB-INF/web.xml fichier global de configurationd’une application Web Java WEB-INF/faces-config.xml : configuration de lapartie JSF de l’application, par exemple pourindiquer la navigation entre les pages ou pourdéclarer les beans utilisés par les pages ; plusindispensable avec JSF 2.0 grâce auxannotations Java21/10/99 Richard Grin JSF - page 72

Annotations et fichier faces-config.xml JSF 2.0 a développé l’emploi des annotations desclasses pour configurer son fonctionnement Le fichier XML l’emporte sur les annotations, cequi permet de changer la configuration même sion n’a pas le code source (ou d’éviter derecompiler si on a le code source)21/10/99 Richard Grin JSF - page 73

Les différents fichiers (2) Fichier WEB-INF/beans.xml, indispensable si CDI estutilisé ; il semble qu’un fichier beans.xml vide suffise àdéclencher l’utilisation de CDI (attention, si ce fichiern’existe pas, CDI n’est pas utilisé, sans aucun messaged’avertissement, et donc les @Inject ne fonctionnent pas) Fichiers de description des balises (tags) personnaliséesdans le cas où des balises personnalisée sont utilisées(voir la section sur les composants personnalisés)nEx : vous faites vos composants, un lecteur vidéo par exemple.21/10/99 Richard Grin JSF - page 74

Implémentations de JSF –librairies JSF21/10/99 Richard Grin JSF - page 75

Implémentations Implémentation de référence de JSF Librairies de composants21/10/99 Richard Grin JSF - page 76

Implémentation de référence Projet Mojarra Fournit les composants de base et avec desfonctionnalités minimales De nombreuses librairies fournissent d’autrescomposants ou enrichissent les fonctionnalitésdes composants de l’implémentation de référence21/10/99 Richard Grin JSF - page 77

Librairies de composants L’idéal serait que toutes les librairies decomposants soient compatibles entre elles, ce quipermettrait de choisir ses composants dansplusieurs librairies Dans la réalité ça n’est pas toujours le cas et ilvaut mieux bien choisir la librairie et s’y tenir Principales librairies : PrimeFaces, RichFaces,OpenFaces, Icefaces, ADF Faces21/10/99 Richard Grin JSF - page 78

Code d’une page JSF21/10/99 Richard Grin JSF - page 79

Structure globale d’une page Fichier xhtml tag html qui précise les namespaces utilisés En-tête de la page (h:header) qui permetd’indiquer les css, les include javascript, etc Le corps de la page (du XHTML et des tags JSF) Voir aussi les templates dans la une autre partiede ce cours.21/10/99 Richard Grin JSF - page 80

Commentaires (1/2) Par défaut les commentaires HTML ()ne fonctionnent pas pour JSF Une solution est de configurer l’application pourque ces commentaires soient pris en compte parFacelets en ajoutant ceci dans web.xml :facelets.SKIP_COMMENTStrue21/10/99 Richard Grin JSF - page 81

Commentaires (2/2) Cependant, dans certains cas, des informationmises dans des commentaires HTML peuventêtre utilisés par l’application Le plus sûr est donc d’entourer ce que l’on veutcommenter par le tag On peut mettre ce tag dans tous lesemplacements où on pourrait mettre uncomposant JSF21/10/99 Richard Grin JSF - page 82

Langage EL(Expression Language)21/10/99 Richard Grin JSF - page 83

Utilité Sert à relier des propriétés ou des méthodes debeans avec des valeurs de pages JSF Une expression EL est entourée par #{…} Exemple :lie la valeur du champ de saisie de texte avec lapropriété « nom » du bean « utilisateur »21/10/99 Richard Grin JSF - page 84

Composants standards21/10/99 Richard Grin JSF - page 85

Librairies de balises Plusieurs librairies de balises peuvent êtreutilisées dans une page JSF (avec Facelets) :n JSF Facelets, de préfixe uin JSF HTML, de préfixe hn JSF core tag, de préfixe fn JSTL core tag (version 1.1), de préfixe cn JSTL functions tag (version 1.1), de préfixe fnn Eviter JSTL ! Ces préfixes correspondent à des espaces denoms XML (URL à voir dans la documentation)21/10/99 Richard Grin JSF - page 86

Il est impossible dans cette introduction de passeren revue toutes les balises standards offertes parFacelets De nombreux sites Web en donnent desexemples Documentation pour ces balises :http://download.oracle.com/javaee/6/javaserverfaces/2.0/docs/pdldocs/facelets/ Dans cette section nous donnerons quelquesconseils pour débuter21/10/99 Richard Grin JSF - page 87

Quelques références Le tutoriel Java EE 6 d’Oracle est un bon sitepour débuter :http://download.oracle.com/javaee/6/tutorial/doc/bnarf.html21/10/99 Richard Grin JSF - page 88

Types de composants 4 grands types :n Ceux qui contiennent une valeur (ValueHolderou EditableValueHolder) ; un label ou unchamp de saisie par exemplen Ceux qui proposent un choix à l’utilisateur (listedéroulante, boîtes à cocher, boutons radio,…)n Ceux qui lancent une action (ActionSource2) ;un bouton par exemplen Ceux qui correspondent à une structureitérative ; une datatable par exemple21/10/99 Richard Grin JSF - page 89

Nous allons étudier un exemple de chaque typepour en illustrer les particularités Reportez-vous à la documentation de JSF ou dela librairie de composants que vous utilisez pouren savoir plus21/10/99 Richard Grin JSF - page 90

Composants pour du texte Champ texte avec (1 ligne) Saisie des mots de passe avec Zone de texte de plusieurs lignes avecImage tutoriel Java EE 6 d’Oracle21/10/99 Richard Grin JSF - page 91

Les listes Il y a plusieurs composants JSF standards quipermettent de proposer un choix (ou plusieurs)parmi une liste de valeurs Tous les composants sont bâtis sur des classesJava communes mais se présentent différemmentà l’utilisateur21/10/99 Richard Grin JSF - page 92

Listes à choix unique Boutons radios avec Liste déroulante avec Liste non déroulante avec Image tutoriel Java EE 6 d’Oracle21/10/99 Richard Grin JSF - page 93

Listes à choix multiple Boîtes à cocher avec Liste déroulante avec Liste non déroulante avec Image tutoriel Java EE 6 d’Oracle21/10/99 Richard Grin JSF - page 94

Les listes - ExempleCe qui est désigné par f:selectItem et f:selectItems sera affichédans la liste. Le choix fait par l’utilisateur parmi toutes ces valeurs, estrangé dans bean.choix (attribut value de selectOneListBox)Les entrées de la liste qui correspondent à l’attribut value sontprésélectionnées dans la liste21/10/99 Richard Grin JSF - page 95

Classe SelecItem Paquetage javax.faces.model Donne un label, une valeur et d’autres propriétésd’une liste de GUI Utilisée pour la valeur (attribut value) des tags et 21/10/99 Richard Grin JSF - page 96

Son attribut value peut désigner un tableau, unecollection ou une map Le plus souvent, on part d’une liste d’éléments eton la transforme en tableau ou collection deSelectItem Le transparent suivant donne un schéma de codepour une telle transformation (souvent fourni sousla forme d’une méthode static utilitaire)21/10/99 Richard Grin JSF - page 97

Schéma de code pour public static SelectItem[]getSelectItems(List entities) {SelectItem[] items = new SelectItem[size];for (Object x : entities) {items[i++] =new SelectItem(x, x.toString());}return items;}21/10/99 Richard Grin JSF - page 98

Autre façon de faire Pour éviter la complication de la transformationen SelectItem, on peut utiliser les attributs var,itemValue et itemLabel Exemple :La variable « personne » contient unélément de la liste désignée par value21/10/99 Richard Grin JSF - page 99

Chausse-trappes avec les listes Quelques chausse-trappes que l’on peutrencontrer avec les listes déroulantes sontexposées dans les transparents suivants En particulier avec les convertisseurs et lesvalidateurs qui seront étudiés en détails dans la2 ème partie de ce cours sur JSF21/10/99 Richard Grin JSF - page 100

Conversion pour les listes déroulantes Comment se fait la conversion entre les élémentsd’une liste et ce qui est affiché ? Par exemple, une liste d’écoles et ce qui estaffiché ? Il faut bien comprendre que le composant JSF vaêtre transformé en élément(s) HTML et quetoutes les valeurs vont être transformées enString ; en retour, une valeur choisie parl’utilisateur sera une String qu’il faudraéventuellement convertir en un autre type21/10/99 Richard Grin JSF - page 101

Convertisseur Si le type T des éléments à choisir n’est pasString (ça peut, par exemple, être des pays de laclasse Pays), il faut un convertisseur pour passerdu type T à String (pour le passage en HTML) etvis-versa (pour le rangement du choix sous laforme d’une instance du type T) On aura un message d’erreur si on veut mettreune 1 ère entrée du type « Choisissez un pays »car cette première entrée n’est pas du type Tn Solution : ne pas mettre cette première ligne !21/10/99 Richard Grin JSF - page 102

Validation d’un choix dans une liste JSF vérifie que le choix qui est envoyé au serveurest bien un des choix proposés à l’utilisateur Ça implique que les choix proposés soientconnus par JSF au moment de la validation Si les choix dépendent d’une propriété d’unbacking bean (par exemple, un pays pour uneliste de villes d’un certain pays), il faut donner labonne portée au bean pour que les choixpuissent être calculés correctement au momentde la validation (View ou Session par exemple)21/10/99 Richard Grin JSF - page 103

Très utilisé pour représenter les données d’unebase de données : chaque ligne de la tablecorrespond à une ligne d’une table Sera affiché comme une table HTML21/10/99 Richard Grin JSF - page 104

Modèle de données Les données affichées sont représentées par unmodel : javax.faces.model.DataModel Souvent on n’utilise pas directement le modèle ; onfournit un tableau, une liste ou un ResultSet àl’attribut value de ; en interne uneclasse fille de DataModel enveloppera les donnéesfournies Quelquefois il faut expliciter l’utilisation deDataModel dans le backing bean de la page pouravoir plus de facilités de manipulation des données21/10/99 Richard Grin JSF - page 105

DataModel Contient des méthodes pour récupérer lesnuméros des lignes, la valeur de la ligne « encours » (un Object), gérer les écouteurs de latable21/10/99 Richard Grin JSF - page 106

ExempleNom#{client.nom}...21/10/99 Richard Grin JSF - page 107

Permet de répéter un affichage sur une listed’objets Exemple :#{item.nom}21/10/99 Richard Grin JSF - page 108

Navigation21/10/99 Richard Grin JSF - page 109

Handler de navigation La navigation entre les pages indique quelle page estaffichée quand l’utilisateur clique sur un bouton poursoumettre un formulaire ou quand il clique sur un lien Cette navigation est déléguée au « handler de navigation » La navigation peut être définie par des règles dans le fichierde configuration faces-config.xml ou par des valeurs écritesdans le code JavanEn général on s’en passe mais si on veut faire une navigation«logique » on peut utiliser les wizards de netbeans21/10/99 Richard Grin JSF - page 110

Navigation statique et dynamique La navigation peut être statique : définie « endur » au moment de l’écriture de l’application La navigation peut aussi être dynamique : définieau moment de l’exécution par l’état del’application (en fait par la valeur retournée parune méthode)21/10/99 Richard Grin JSF - page 111

Dans les pages JSF Dans les pages JSF on indique la valeur ou laméthode associée à un bouton qui déterminera lanavigation Avec une valeur : Ou avec une méthode (qui retourne une valeur) :21/10/99 Richard Grin JSF - page 112

Modèle de navigation JSF,Le modèle GET - PRG21/10/99 Richard Grin JSF - page 113

Par défaut, JSF travaille avec des requêtes POST Depuis JSF 2.0 il est plus simple de travailleravec des requêtes GET, ce qui facilite l’utilisationde l’historique et marque-pages (bookmarks) desnavigateurs et évite des doubles validations deformulaire non voulues par l’utilisateur21/10/99 Richard Grin JSF - page 114

Utiliser GET 2 composants de JSF 2.0 permettent de générerdes requêtes GET : et 21/10/99 Richard Grin JSF - page 115

Le problème avec POST Avec une requête POST envoyée pour soumettreun formulairen le refresh de la page affichée (ou un retour enarrière) après un POST soumet à nouveau leformulaire ; le navigateur prévient l’utilisateuren affichant une fenêtre popup inquiétante etdifficile à comprendre pour l’utilisateurn l’adresse de la page affichée après le POSTest la même que celle du formulaire (donc paspossible de faire réafficher cette page enutilisant l’historique du navigateur)21/10/99 Richard Grin JSF - page 116

La raison du problème C’est le servlet qui intercepte les requêtesattachées aux pages JSF qui redirige vers lapage désignée par le modèle de navigation JSF Le navigateur n’a pas connaissance de cettedirection et pense être toujours dans la page quicontient le formulaire qui a été soumis On avait déjà le problème l’année dernière avecles HTTP forwarder dans les Servlets, mais celane vous a pas troublé outre mesure ;-)21/10/99 Richard Grin JSF - page 117

Les conséquences du problème Le navigateur est en retard d’une page pourafficher l’URL de la page en cours Il ne garde donc pas la bonne adresse URL sil’utilisateur veut garder un marque-page Le navigateur pense être toujours dans la pagequi contient le formulaire après un retour enarrière ou un refresh et il essaie de le soumettre ànouveau (il demande malgré tout uneconfirmation lors de la soumission multiple d’unformulaire)21/10/99 Richard Grin JSF - page 118

La solution :POST, REDIRECT, GET (PRG) Le modèle POST– REDIRECT– GET préconise den Ne jamais montrer une page en réponse à unPOSTn Charger les pages uniquement avec des GETn Utiliser la redirection pour passer de POST àGET21/10/99 Richard Grin JSF - page 119

Sans PRGCette image et la suivante viennent de Wikipedia21/10/99 Richard Grin JSF - page 120

Avec PRG21/10/99 Richard Grin JSF - page 121

Problème de PRG PRG peut poser un problème lorsque la page verslaquelle l’utilisateur est redirigée (le GET), doitafficher des données manipulées par le formulaire C’est le cas, par exemple, lorsque cette page estune page qui confirme l’enregistrement dans unebase de données des informations saisies parl’utilisateur dans le formulaire En effet, les informations conservées dans laportée de la requête du POST ne sont plusdisponibles21/10/99 Richard Grin JSF - page 122

Solutions Une des solutions est de ranger les informationsdans la session plutôt que dans la requête Cependant cette solution peut conduire à unesession trop encombrée Une autre solution est de passer les informationsd’une requête à l’autre JSF 2.0 offre 2 nouvelles possibilités qui facilitentla tâche du développeur :n la mémoire flashn les paramètres de vue21/10/99 Richard Grin JSF - page 123

Paramètres de vue Les paramètres d’une vue sont définis par desbalises incluses dans une balise (à placer au début, avant les et ) :21/10/99 Richard Grin JSF - page 124

L’attribut name désigne le nom d’un paramètre derequête GET L’attribut value désigne (par une expression dulangage EL) le nom d’une propriété d’un beandans laquelle la valeur du paramètre est rangée Important : il est possible d’indiquer uneconversion ou une validation à faire sur lesparamètres, comme sur les valeurs descomposants saisis par l’utilisateur21/10/99 Richard Grin JSF - page 125

Un lien vers une page qui contient des balises contiendra tous les paramètresindiqués par les s’il contient« includeViewParams=true » Exemple :

Fonctionnement deincludeViewParams1. La page de départ a un URL qui a le paramètreincludeViewParams2. Elle va chercher les de lapage de destination. Pour chacun, elle ajoute unparamètre à la requête GET en allant chercherla valeur qui est indiquée par l’attribut value du3. A l’arrivée dans la page cible, la valeur duparamètre est mise dans la propriété du beanindiquée par l’attribut value21/10/99 Richard Grin JSF - page 127

Fonctionnement deincludeViewParams Ca revient à faire passer une valeur d’une page àl’autre Si la portée du bean est la requête et qu’il y a euredirection, ça revient plus précisément à fairepasser la valeur d’une propriété d’un bean dansun autre bean (de la même classe)21/10/99 Richard Grin JSF - page 128

Donner une valeur à un paramètre Il y a plusieurs façons de donner une valeur à unparamètre de requête GET ; les voici dans l’ordrede priorité inverse (la dernière façon l’emporte)n Dans la valeur du outcomen Avec les paramètres de vuen Avec un 21/10/99 Richard Grin JSF - page 129

Exemple ; page2.xhtml…Valeur : #{bean.prop1}21/10/99 Richard Grin JSF - page 130

Fonctionnement Si page2 est appelé par la requête GET suivantepage2.xhtml?param1=v1&param2=v2la méthode setProp1 du bean est appelée avecl’argument v1 (idem pour param2 et v2) Si un paramètre n’apparait pas dans le GET, lavaleur du paramètre de requête est null et lesetter n’est pas appelé (la propriété du bean n’estdonc pas mise à null)21/10/99 Richard Grin JSF - page 131

Conserver des adresses utiles Outre le fait qu’un refresh ne provoque plus desoumission du formulaire, le modèle PRG permetaussi de permettre de conserver un URL utiledans un marque-page ou dans l’historique En effet, l’URL contient les paramètres quipermettront de réafficher les mêmes données àun autre moment Sans PRG, les données utiles sont conservéesdans l’entité de la requête et pas dans l’URL21/10/99 Richard Grin JSF - page 132

preRenderView Listener (1) Une situation courante : il est possible de nemettre en paramètre qu’un identificateur desdonnées qui ont été traitées Par exemple, que la clé primaire des donnéesenregistrées dans la base de données Avec les procédés précédents on peut fairepasser cet identificateur dans la page qui vaafficher les données21/10/99 Richard Grin JSF - page 133

preRenderView Listener (2) Mais ça ne suffit pas ; il faut utiliser une autrenouveauté de JSF 2.0, les listeners« preRenderView » qui permet d’exécuter uneaction avant l’affichage de la vue On peut ainsi aller rechercher (par exemple dansune base de données) les informations identifiéespar l’identificateur21/10/99 Richard Grin JSF - page 134

Exemple de preRenderView...Nom : #{bean.client.nom}...21/10/99 Richard Grin JSF - page 135

Portées21/10/99 Richard Grin JSF - page 136

Les différentes portées (scope) Application Session Requête Conversation Vue Personnalisée (custom)21/10/99 Richard Grin JSF - page 137

Les différentes portée peuvent conserver desobjets dans des maps21/10/99 Richard Grin JSF - page 138

Lorsqu’une valeur est référencée dans une pageWeb, la valeur est d’abord recherchée dans lescope le plus « proche » : requête, vue, session,application, etc21/10/99 Richard Grin JSF - page 139

Mettre une valeur dans une portée Cours à venir… voir support de cours sur lesbacking beans (à venir lui aussi)21/10/99 Richard Grin JSF - page 140

Mémoire flash Il est bon de limiter la taille des informationsentreposées dans la session Cependant la portée « request » peut ne pasconvenir, en particulier s’il y a redirection de larequête (par exemple pour appliquer le modèlePOST – REDIRECT – GET) La mémoire « flash » peut alors convenir : unobjet mis dans la mémoire flash est encoredisponible dans la prochaine requête issue de lamême session ; il est ensuite effacéautomatiquement de la mémoire flash21/10/99 Richard Grin JSF - page 141

Utiliser la mémoire flash (page Web) Dans une page Web, avec le langage EL (flashest un objet implicite du langage) :#{flash.objet}21/10/99 Richard Grin JSF - page 142

Utiliser la mémoire flash (en Java) Dans le backing bean par ex : il faut récupérer lecontexte externe :ExternalContext ec =FacesContext.getCurrentInstance().getExternalContext().getFlash();qui renvoie un objet de la classe Flash (dejavax.faces.context) qui se manipule commeune session (comme une map) dont la clé est uneString et la valeur est un Object Par exemple,ec.getFlash().put("nom", nom);21/10/99 Richard Grin JSF - page 143

Exemple...Page confirm.xhtml :...21/10/99 Richard Grin JSF - page 144

keep Il est possible de garder l’objet pour une requête deplus grâce à la méthode keep de la classe Flash #{flash.keep.objet} renvoie l’objet qui a la clé« objet » et garde l’objet pour encore une requêtede plus Dans le code Java, il faut le faire en 2 étapes :récupérer la valeur et remettre dans le flash pour laprochaine requête en appelant la méthode keepqui ne renvoie rien (void comme type retour).21/10/99 Richard Grin JSF - page 145

Backing beans21/10/99 Richard Grin JSF - page 146

Dans la section « Architecture des applicationsJSF » on a vu que les pages JSF sont épauléespar des backing beans qui apportent la puissancedu langage Java pour coder des interactionssophistiquées avec l’utilisateur Les possibilités sont infinies Dans cette section nous allons voir quelquesexemples caractéristiques de l’utilisation desbacking beans21/10/99 Richard Grin JSF - page 147

Plus de code dans les pages JSF Pour ceux qui ont travaillé avec JSP, il fautoublier la mauvaise habitude d’inclure de laprogrammation dans les pages JSF Tout le code (non « métier ») doit maintenant setrouver dans les backing beans (le code métierdoit se trouver dans les EJB ou classes Javaliées)21/10/99 Richard Grin JSF - page 148

EJB21/10/99 Richard Grin JSF - page 149

Pour plus de détails, se référer au cours sur lesEJB Nous allons voir ici quelques utilisationscaractéristiques des EJB par le code des backingbeans21/10/99 Richard Grin JSF - page 150

Ajax21/10/99 Richard Grin JSF - page 151

Ajax Asynchronous Javascript and XML Permet des échanges entre le client et le serveurWeb sans affichage d’une page entière Les requêtes envoyées par le client sont lancées« en arrière-plan » ; l’utilisateur peut continuer àtravailler avec la page en cours La réponse du serveur à la requête peut nemodifier qu’une partie de la page en cours21/10/99 Richard Grin JSF - page 152

Pemet d’ajouter des fonctionnalités « Ajax » aucomposant JSF dans lequel il est inclus Par exemple, un bouton de soumission deformulaire peut envoyer une requête et laréponse du serveur mettra à jour une partie de lapage sur laquelle l’utilisateur a continué àtravailler21/10/99 Richard Grin JSF - page 153

- les attributs event : événement déclencheur de la requête execute : composants pris en compte pour l’envoide la requête (espace séparateur) render : composants mis à jour au moment de laréponse du serveur (espace séparateur)21/10/99 Richard Grin JSF - page 154

Exemple 121/10/99 Richard Grin JSF - page 155

Exemple 2...21/10/99 Richard Grin JSF - page 156

Compléments sur les attributs Chaque type de composant a un typed’événement par défaut Par exemple, valueChange pour les ou action pour les21/10/99 Richard Grin JSF - page 157

Compléments sur les attributs execute et render doivent indiquer un ouplusieurs identificateurs de composants Quelques valeurs particulières : @all, @this (lecomposant qui englobe ; défaut pourexecute), @form (tous les composants duformulaire), @none (défaut pour render) ; on peutaussi donner une expression EL qui fournit unecollection de String (qui désignent desidentificateurs) ; expression évaluée durant lerendu de la page21/10/99 Richard Grin JSF - page 158

Composants inclus dans peut aussi encadrer plusieurscomposants JSF qui lanceront alors des appelsAjax sur les événements indiqués :21/10/99 Richard Grin JSF - page 159

Conversion21/10/99 Richard Grin JSF - page 160

Utilité des converters Quand le serveur reçoit une requête POST, lesvaleurs saisies par l’utilisateur arrivent sous laforme de chaînes de caractères Ces chaînes doivent souvent être traduites enobjets Java Par exemple, si un candidat à une formation aindiqué sa nationalité par une liste déroulante, cechoix doit être traduit en un objet Pays qui seraassocié à l’objet Candidat qui représentel’utilisateur21/10/99 Richard Grin JSF - page 161

Désigner un convertisseur Lorsqu’un composant a besoin d’unconvertisseur, on peut le désignern par une sous-balise en donnantl’identificateur du convertisseur :n par l’attribut converter du composantn Par une sous-balise spéciale pour lesconvertisseurs standards21/10/99 Richard Grin JSF - page 162

Convertisseur par défaut On verra qu’il est aussi possible d’associer unconvertisseur par défaut pour un type Ce convertisseur par défaut sera utilisé si aucunconvertisseur n’est explicitement désigné Une erreur est lancée si aucun convertisseurn’est donnée par son identificateur et qu’aucunconvertisseur par défaut n’existe pour le type21/10/99 Richard Grin JSF - page 163

Convertisseurs standards JSF fournit des convertisseurs pour les typesprimitifs, pour les dates et pour les classesBigInteger et BigDecimal Des balises spéciales sont fournies par JSF pourles convertisseurs standards mais on peut aussiutiliser la balise en donnantl’identificateur du convertisseur standard Par exemple, est équivalent à21/10/99 Richard Grin JSF - page 164

Exemples 21/10/99 Richard Grin JSF - page 165

Convertisseur personnalisé Le développeur doit écrire les convertisseursassociés aux types qui ne sont pas pris en chargepar les convertisseurs standards de JSF (customconverter) Il fautn écrire la classe Java du convertisseurn indiquer quand utiliser le convertisseur21/10/99 Richard Grin JSF - page 166

Écrire un convertisseur Classe Java qui implémente l’interface Converter(paquetage javax.faces.convert) Cette interface contient les 2 méthodesn Object getAsObject(FacesContext,UIComponent, String) qui transforme unechaîne de caractères en objetn String getAsString(FacesContext,UIComponent, Object) qui transforme un objeten chaîne de caractères21/10/99 Richard Grin JSF - page 167

Comme pour un validateur, il n’est pas possibled’utiliser @Inject dans un convertisseur Mais on peut écrire ce type de code pour utiliserun EJB ou une ressource :try {ic = new InitialContext();myejb= (MyEJB) ic.lookup("java:global/xxxx/MyEJB");} catch (NamingException e) {…}21/10/99 Richard Grin JSF - page 168

Désigner un convertisseur Lorsqu’un composant doit utiliser unconvertisseur, si aucun convertisseur particuliern’est désigné par son identificateur c’est leconvertisseur par défaut du type qui est utilisé Pour désigner un convertisseur particulier ou unconvertisseur par défaut d’un type, ledéveloppeur peut utiliser une annotation ou écrireune configuration dans le fichier faces-config.xml21/10/99 Richard Grin JSF - page 169

Annotation @FacesConverter L’attribut par défaut donne un identificateur :@FacesConverter("fr.unice.Pays") L’attribut forClass indique que le convertisseur estle convertisseur par défaut d’une classe :@FacesConverter(forClass=fr.unice.Pays.class)21/10/99 Richard Grin JSF - page 170

Fichier faces-config.xml Donne un identificateur à la classe du convertisseur :fr.unice.Paysfr.unice.PaysConverter Indique la classe du convertisseur par défaut d’untype :fr.unice.Paysfr.unice.Pays21/10/99 Richard Grin JSF - page 171

Balise personnalisée pour convertisseur Il est possible de créer de nouvelles balises pouravoir des convertisseurs qui ont des attributscomme, par exemple, l’attribut pattern de la balise Pour cela, comme pour toutes les balisespersonnalisées, il faut écrire un fichier dedescription de balises (voir section sur les baliseset composants personnalisés) ou créer un fichierjar à part21/10/99 Richard Grin JSF - page 172

Bibliographie Core JSF, 3 ème édition mise à jour pour JSF 2.0.David Geary et Cay Horstmann. Prentice Hall.Le meilleur livre pour débuter. The Complete Reference JSF 2.0. Ed Burns etChris Schalk. Quelques complémentsintéressants par rapport au livre Core JSF. JSF 2.0 Cookbook. Anghel Leonard. PacktPublishing. Descriptions détaillées de quelquesrecettes pour résoudre des points précis.21/10/99 Richard Grin JSF - page 173