Alphorm.com Formation Java Server Faces

Formation Java Server Faces alphorm.com™©
Site : http://www.alphorm.com
Blog : http://blog.alphorm.com
Formation
JSF (Java Server Faces)
Fabien Brissonneau
Consultant, concepteur et formateur
Objets Logiciels

Plan
• Présentation du formateur
• Qu’est-ce que JSF?
• Le plan de la formation
• Les références bibliographiques
• Autres liens utiles

Qu’est-ce que JSF
• Un ensemble de bibliothèques Java
• Utilisées dans une application JEE
• Pour la couche de présentation
• Permet de faire le lien entre HTML et la logique

Le plan de la formation
• Chapitre 1 : L’application Web
• Chapitre 2 : La technologie JSF
• Chapitre 3 : Les facelets
• Chapitre 4 : Expression Language
• Chapitre 5 : JSF dans les pages Web
• Chapitre 6 : Converters, Listeners et Validators
• Chapitre 7 : Les beans managés
• Chapitre 8 : Ajax et JSF
• Chapitre 9 : Configurer l’application JSF

Les références bibliographiques
• Java EE 7 The Big Picture, Oracle
• Java EE Guide de développement Web en Java

Il n’y a plus qu’à…

Architecture
L’application Web
Fabien Brissonneau
Objets Logiciels

Plan
• Les parties de l’application
• Les outils de développement
• Un servlet
• Un EJB
• Une entité

Les parties de l’application
• Une application complète JEE possède les parties suivantes

Les outils de développement
• Netbeans 8.1 JEE
• Le téléchargement est lié à
Glassfish, implémentation de référence pour les serveurs JEE
Tomcat, implémentation de référence pour la partie Web
• Maven comme environnement de construction en lot
Résoud les dépendances et télécharge les bibliothèques nécessaires

Présentation du formateur
• Fabien Brissonneau
• Email : fabien.brissonneau@gmail.com
• Consultant Concepteur et Formateur
• Missions d’architecture, de conception , de réalisation logicielles
• Fondateur de eiXa6
• Actuellement en mission sur un projet de gestion
• Mes références :
Mon profil LinkedIn : http://fr.linkedin.com/pub/fabien-brissonneau/65/902/92a/

Un EJB
• Tout simplement un POJO, qui s’occupe de traitement logiciel
• Référence la partie base de données
• Implémente la logique applicative

Une entité
• Une classe annotée
• Déclare une clé
• Peut être accompagnée des instructions de base de donnée

Ce qu’on a couvert
• Les parties de l’application
• Les outils de développement
• Un servlet
• Un EJB
• Une entité

Packaging et
déploiement
L’application Web
Fabien Brissonneau
Objets Logiciels

Plan
• Fichiers war
• Fichiers jar
• Fichiers ear

Fichiers war
• Le déploiement d’une application Web est décrit par un fichier
• Sorte de fichier ZIP
• Structure prédéfinie
La racine contient les fichiers textes, HTML, JSP, JSF
Un répertoire WEB-INF qui contient les servlets et les classes Java

Fichiers JAR
• La partie modèle est stockée dans un fichier d’extension .jar
• Structure prédéfinie similaire
• Le répertoire META-INF contient des infos sur la persistence
Le fichier persistence.xml

Fichiers EAR
• Le fichier en extension ear regroupe les deux précédents
• Structure :
/META-INF
• /MANIFEST.MF
/<fichier web>.war
/<fichier ejb>.jar
• Ce fichier décrit donc le déploiement sur un serveur JEE

• Fichiers war
• Fichiers jar
• Fichiers ear

L’API Servlet
L’application Web
Fabien Brissonneau
Objets Logiciels

Plan
• Ce que fait un Servlet
• Comment créer un Servlet
• Exemple d’application
• La classe HttpServlet
• La classe ServletContext
• La classe HttpSession
• La classe RequestDispatcher

Ce que fait un Servlet
• Un servlet est exécuté dans le conteneur Web
• Doit examiner l’entête de requête pour déterminer le type de contenu
attendu par le client
• Récupérer les informations à retourner
• Positionner les informations d’entête de retour
• Ecrire en retour les données attendues

Comment créer un Servlet
• Dériver la classe javax.servlet.http.HttpServlet
• Implémenter les méthodes correspondant au protocole HTTP
GET,POST,HEAD,PUT,TRACE,OPTIONS, et la méthode service
• Utiliser les classes de requête et de réponse
La classe javax.servlet.http.HttpServletRequest
La classe javax.servlet.http.HttpServletResponse

Exemple d’application
• Une méthode doGet d’un Servlet pour récupérer des photos

La classe HttpServlet
• Dans le package javax.servlet.http
• Classe mère des servlets, multiples instances, thread-safe
• Suit un cycle de vie spécifique :
Instanciée avant toute requête HTTP
Méthode init(ServletConfig ) appelée : pour placer toute activité longue et
nécessaire aux traitements des requêtes (ouverture de connexion…)
Méthode doXXX, en fonction de la méthode HTTP
Méthode destroy() appelée : nettoyage des ressources couteuses (fermeture
de connexion…)
La même instance ne sera plus réutilisée

La classe ServletContext
• Dans le package javax.servlet
• Chaque application Web a une unique instance de cette classe
• Permet à un servlet d’obtenir de l’information sur l’environnement
Version de l’API Servlet supportée, chemin d’accès à l’application, …
Propose une « map » d’attributs liés à l’application

La classe RequestDispatcher
• Dans le package javax.servlet
• Permet de gérer les « forward » et les « include »
• Le « forward » permet de demander à la ressource d’écrire la réponse à
la place du servlet courant
• Le « include » permet de demander à la ressource de compléter la
réponse que le servlet courant à commencer à écrire
• Obtenu à partir du contexte

• Ce que fait un Servlet
• Comment créer un Servlet
• Exemple d’application
• La classe HttpServlet
• La classe ServletContext
• La classe HttpSession
• La classe RequestDispatcher

Le mapping des
Servlets
L’application Web
Fabien Brissonneau
Objets Logiciels

Plan
• Le déploiement des informations
• Les chemins d’accès
• L’annotation @WebServlet
• Ordre des recherches

Le déploiement des informations
• A partir de l’application Web (ou du fichier .war)
• Les ressources Web : à la racine /
Fichiers index.html, login.jsp,…
• Les classes Java dans /WEB-INF/classes
Fichiers Voiture.class, …
• Les bibliothèques dans /WEB-INF/lib
Fichiers utilitaires.jar, …
• Informations de déploiement /WEB-INF/Web.xml

Les chemins d’accès
• Une technique simple est d’affecter une URI à chaque Servlet,
relativement à la racine de l’application
• Une URL peut être
Relative : /catalogue/album
Relative avec caractère générique : <uri>/*
Une extension de fichier : *.jsp
• Les réglages peuvent se faire avec @WebServlet
Package javax.servlet.annotation

L’annotation @WebServlet
• Paramètre asyncSupported (boolean)
• Paramètre description (String)
• Paramètre displayName (String)
• Paramètres initParam (WebInitParam[])
• Paramètres largeIcon et smallIcon (String : nom de l’image)
• Paramètre loadOnStartup (int : numéro d’ordre dans l’instanciation)
• Paramètre name (String : nom logique, à utiliser dans RequestDispatcher)
• Paramètre urlPatterns et value (String[] : mapping du servlet)

• Le déploiement des informations
• Les chemins d’accès
• L’annotation @WebServlet
• Ordre des recherches

Les pages JSP
L’application Web
Fabien Brissonneau
Objets Logiciels

Plan
• L’architecture JSP
• Exemple de JSP
• La syntaxe des JSP
• Les directives JSP

L’architecture JSP
• Une page JSP est une page HTML dans laquelle apparaissent des balises
introduisant du Java
• Là où le Servlet était du Java retournant du HTML
• La page JSP est traduite runtime en un Servlet par le conteneur
• Le Servlet est ensuite compilé runtime
• La pages JSP accède donc au même environnement que le Servlet

Exemple de JSP
• Une page d’extension .jsp par défaut, à la racine de l’application

La syntaxe des JSP
• Les scriplets sont les zones encadrées par <% et %>
• Il y a deux types de scriplets
<%= expression java %> : l’expression est évaluée, intégrée à la sortie
<% expression java %> : une collection d’expressions, pas de sortie explicite
• La sortie préconfigurée, référence de type javax.servlet.jdp.JspWriter
Sous type de java.io.Writer
• Le fichier horloge.jsp correspond à l’URL
http://<serveur:port>/<application>/horloge.jsp
• La correspondance peut être modifiée

Les directives JSP
• Les directives JSP paramètrent globalement la page
• Forme : <%@ nomdedirective att1=valeur att2=valeur %>
• Directive page : les propriétés générales de la page
• Directive include : permet d’inclure le contenu d’un autre fichier,
comme un entête
• Directive taglib : déclarer une bibliothèque de balises
• Les directives peuvent apparaître n’importe où dans la page
• Une directive peut apparaître plusieurs fois

Directive page pour les langages utilisés
• language (java): Spécifier le langage utilisé (vraiment utile ?)
• isELIgnored (false): Ne pas utiliser Expression Language
• import : Importer des classes Java

Directive page pour le runtime
• autoFlush (true): vidage du buffer automatique ou non
• buffer (dép. impl.): spécifie la taille minimum du tampon
• isThreadSafe (true): spécifie si la page JSP peut gérer plusieurs threads
en même temps

Directive page pour les erreurs
• isErrorPage (false) : déclare la page courante comme page d’erreur
• errorPage : déclare la page d’erreur à utiliser

Directives include et taglib
• Include
Avec file pour spécifier le fichier à inclure
• Taglib
Avec uri pour spécifier le nom du fichier
Avec prefix pour spécifier le préfixe xml

Usage des JavaBeans
• Utiliser une action jsp:useBean
Avec id : référence vers le bean
Avec class : nom de la classe du bean
Avec scope : portée du bean (page, request, session, application)
• Puis récupérer une propriété avec jsp:getProperty (attributs name, property)
• Positionner une propiété avec jsp:setProperty ( attributs name, property, value)

Les actions JSP
• Action jsp:forward, page=…. Réalise un forward vers une autre page
• Action jsp:include page= Réalise un include, éventuellement paramétré
avec jsp:param
• Action jsp:plugin permet de solliciter une applet
• Action jsp:text permet de générer du texte (pour EL)
• Actions jsp:element, jsp:attribute et jsp:body permettent de générer du
XML

• Définition de JavaBeans
• Usage des JavaBeans
• Les actions JSP

Les balises JSP
L’application Web
Fabien Brissonneau
Objets Logiciels

Plan
• Les balises JSP standards
• La balise forEach
• La balise if

Les balises standards
• JSP définit des balises
• Standard : pour toute page JSP
• Pour les données SQL
• Pour le XML et la manipulation de texte
• Des manipulations de chaînes de caractères
• Nécessite la déclaration de la bibliothèque utilisée

La balise forEach
• Permet l’itération
Sur une séquence de nombres, avec un incrément
Sur un conteneur

La balise if
• Le corps de la balise que si l’attribut test est évalué à vrai

Déclaration de la balise
• Dans un fichier .tld
• Fait le lien entre le nom de la balise et la classe Java
• Peut déclarer des attributs (de balise)

Utilisation de la balise
• Déclarer l’usage de la bibliothèque de balise
• Utiliser a balise personnalisée

Balise vs JavaBean
• Les deux cherchent à séparer le code Java de la présentation
• La mise en œuvre des JavaBean semble plus simple
• Les balises personnalisées permettent une syntaxe plus riche
• Les balises personnalisées n’ont que la portée de page

• Création d’une balise personnalisée
• Déclaration de la balise
• Utilisation de la balise
• Balise vs JavaBean

Une application JSF
La technologie JSF
Fabien Brissonneau
Objets Logiciels

Plan
• Qu’est-ce qu’une application JSF ?
• Une application JSF simple
• Le modèle de l’interface utilisateur
• Le modèle de rendu
• Le modèle de conversion
• Le modèle d’événement
• Le modèle de validation
• Le modèle de navigation

Qu’est-ce qu’une application JSF ?
• JSF est un framework de composants côté serveur pour construire des
applications Web Java
• JSF contient : une API pour gérer les événements, la validation, et la
conversion des données, définir la navigation, supporter
l’internationalisation ET des balises pour intégrer ces composants dans
les pages Web et les connecter à des objets côté serveur
• JSF permet d’alléger les tâches de construction de l’application : créer
les pages web, placer les composants dans la page, lier les composants
aux données, gérer les événements, sauver et restaurer les états de
l’application, réutiliser les composants

Une application JSF simple
• Exemple avec 2 pages web avec Facelets et 1 bean managé
• Application compilée lors du premier accès à index.xhtml
• Un arbre de composants est placé dans FacesContext, puis rempli et lié à l’objet
de type Hello
• La vue est rendue au client
• L’arbre est détruit

Le modèle de l’interface utilisateur
• Un composant est graphique ou non
• Un composant graphique peut être simple ou composé
• L’architecture JSF fournit :
des javax.faces.component.UIComponent spécifiant l’état et le comportement
graphique
un modèle de rendu
un modèle de conversion qui définit comment enregistrer les convertisseurs
sur les composants
un modèle d’événements pour gérer les événements sur les composants
un modèle de validation pour enregistrer les validateurs sur les composants

Les composants graphiques
• UIInput : une entrée, sous classe de UIOutput
• UIMessage : un message d’erreur localisé (et UIMessages)
• UIOutcomeTarget : un lien, ou bouton
• UIPanel : gestion des composants
• UISelect * : gestion de sélections
• UIViewRoot : racine des composants dans la vue
• Les composants implémentent des interfaces de comportement :
ActionSource, EditableValueHolder, StateHolder, NamingContainers, …

Le modèle de rendu
• Une classe de rendu séparée des classes de composants :
Adapter le rendu à un client ou un type de client
Changer l’apparence des composants sur une page
• Un « render kit » correspond à un type de client
Un ensemble de classes Renderer pour chaque composant
Le rendu est choisi avec la balise : commandButton vs commandLink

Le modèle de conversion
• Un composant peut être associé à un objet côté serveur
• L’application voit les données de deux façons
La vue modèle : les types de données
La vue présentation : une façon de lire ou modifier les données
• Les conversions sont automatiques
• Pour changer les conversions standards, enregistrer une sous-classe de
javax.faces.convert.Converter sur un UIOutput

Le modèle d’événements
• Conforme au modèle classique des JavaBeans
• Les événements sont :
Les événements applicatifs
• Liés aux actions : émis par les boutons et les liens
• Liés aux changements de valeur : émis par UIInput
Les événements systèmes
• Correspondent au cycle de vie de l’application
Les événements de données
• Une ligne de UIData qui change

Le modèle de validation
• La validation est exécutée avant la mise à jour des données
• Des classes standards, dérivant de javax.faces.validator.Validator
• Des balises pour la mise en place dans le html
• Possibilité de déclarer un validateur qui s’applique pour tous les input
• Possibilité de créer son propre validateur

• Qu’est-ce qu’une application JSF ?
• Une application JSF simple
• Le modèle de l’interface utilisateur
• Le modèle de rendu
• Le modèle de conversion
• Le modèle d’événement
• Le modèle de validation
• Le modèle de navigation

La navigation
La technologie JSF
Fabien Brissonneau
Objets Logiciels

Plan
• La navigation implicite
• La navigation définie dans le xml
• La navigation contrôlée par les beans

La navigation implicite
• La page xhtml contient le nom de la page cible
• L’attribut action référence par défaut un nom
• Le serveur ajoute « xhtml » comme extension pour trouver la page
• Dans cet exemple, reponse.xhtml est une page accessible

La navigation dans un fichier xml
• La configuration de la navigation hors des pages xhtml
• Un nom « logique » est utilisé dans la page xhtml
• Ce nom logique associé à l’id de la vue
Correspond à une règle

La navigation contrôlée par les beans
• La commande est envoyée à un bean
• Appel d’une méthode du bean
• Le retour du bean correspond au nom logique utilisé ensuite

• La navigation implicite
• La navigation définie dans le xml
• La navigation contrôlée par les beans

Le cycle de vie
La technologie JSF
Fabien Brissonneau
Objets Logiciels

Plan
• Requête initiale ou postback
• La classe FacesContext
• L’attribut immediate

Requête initiale et postback
• Les deux étapes essentielles sont
Execute
• Subdivisée en plusieurs étapes : Restore View, Apply Request,…
Render
• Rendu de la réponse vers le client

La classe FacesContext
• Nom complet javax.faces.context.FacesContext
• Contient la vue à rendre au client
• FacesContext.renderResponse passe directement à l’étape de rendue
Cas de la requête initiale
• FacesContext.responseComplete évite l’étape de rendu
Cas d’un passage à une application sans composant

L’attribut immediate
• Cet attribut va forcer la validation, les événements et les conversions à
être évalués dans la phase Apply Request
• Il faut la cohérence entre la valeur de cet attribut sur un champ d’entrée
et sur les actions correspondantes
• Par exemple, si un bouton a cet attribut à vrai, il est traité avant que les
données des champs ne soient mises à jour

Les bibliothèques supportées
• Balises JSF Facelets, préfixe ui:, exemple ui:insert
• Balises JSF HTML, préfixe h:, exemple h:head
• Balises JSF Core, préfixe f:, exemple f:actionListener
• Balises elements, préfixe jsf:, exemple jsf:id
• Balises attributs, préfixe p:, exemple p:type
• Balises composite, préfixe cc:, exemple cc:interface
• Balises JSTL Core, préfixe c:, exemple c:forEach
• Balises fonctions, préfixe fn:, exemple fn:toUpperCase

Le cycle de vie de l’application
• première requête, un UIViewRoot est créé et placé dans le FacesContext
• UIViewRoot est remplie avec les composants
• La vue est rendue au client
• L’état est conservé
• Le client interagit avec la vue, conduisant à la création d’une nouvelle
ou la restauration de l’ancienne

Exemple d’application
• Créer les beans managés
• Créer les pages avec les balises de composants
• Définir la navigation
• Configurer l’application
• Déclarer les beans managés

Les beans managés
• Chaque page est connectée à un bean
• Plusieurs pages peuvent se connecter sur le même bean
• Annoté @Named, pour être utilisé via EL
• Annoté d’une portée particulière, pour être utilisable dans la requête, la
session, l’application…

Un servlet
• Une classe héritant de HttpServlet
• Traite les réponses HTTP
• Contient des références aux EJB

Configurer l’application
• Configurer le servlet dans web.xml
• Page de démarrage de l’application
• Configuration de faces-config.xml

Divers
• Une page template est un modèle récurrent dans l’application
Défini avec ui:insert et utilisé avec ui:define
• Il est possible de définir des composants réutilisables
Défini avec composite:interface, composite:implementation,…
• Les contrats sont des paramétrages de l’application
Plusieurs parties de l’application ont des contrats différents
• Les éléments et attributs « pass-through »
Envoyés directement au client en tant que HTML5

• Les facelets
• Le cycle de vie de l’application
• Exemple

Construire une
application Facelets
Les facelets
Fabien Brissonneau
Objets Logiciels

Plan
• Préparer un template
• Créer les parties
• Créer des composites

Préparer un template
• Grâce à la balise ui:insert
• Directement avec NetBeans

Créer les parties
• Les clients du template redéfinissent les zones
• Grâce aux balises
ui:composition pour introduire le template utilisé
ui:define pour placer du contenu

Créer des composites
• Définir les attributs du composant
• Puis composer le contenu

Utiliser ce composite
• Référencer le fichier sauver dans un répertoire
• Puis utiliser ce composant comme les autres

• Préparer un template
• Créer les parties
• Créer des composites

Les balises HTML5
Les facelets
Fabien Brissonneau
Objets Logiciels

Plan
• Les éléments pass-through
• Les attributs pass-through
• Exemples

Les éléments pass-through
• Utiliser les balises HTML5
• Les gérer comme des éléments UIComponent
• Mettre un attribut spécifique permettant le traitement

Les attributs pass-through
• Les attributs pass-through sont envoyés directement au navigateur
• N’existent pas sur les éléments JSF

Exemples
Balise Identifiant Facelets
a jsf:action h:commandlink
body h:body
input type=button h:commandButton
input type=checkbox h:selectBooleanCheckBox
input type=date h:inputText
input type=password h:inputSecret
link h:outputStyleSheet

• Les éléments pass-through
• Les attributs pass-through
• Exemples

La syntaxe de EL
Expression Language
Fabien Brissonneau
Objets Logiciels

Plan
• Vue générale
• Evaluation immédiate
• Evaluation différée

Vue générale
• Permet la communication entre la couche Web et les beans managés
• La couche Web = la couche de présentation
• Les beans managés = la couche de logique de l’application
• EL est utilisé par :
JSP
JSF
CDI

Evaluation immédiate
• L’expression est évaluée dès que la page est rendue
• Utilise la syntaxe ${…}
• Pas forcément très pratique, étant donné le cycle de vie des pages
• Utilisé pour des données statiques ou fixes durant l’application

Evaluation différée
• L’expression utilise la syntaxe #{…}
• Le moment de l’évaluation va dépendre de l’endroit
• Requête initiale : lecture des nom et mot de passe
• Postback : positionnement des valeurs

• Vue générale
• Evaluation immédiate
• Evaluation différée

Les expressions de
valeurs
Expression Language
Fabien Brissonneau
Objets Logiciels

Plan
• Expression générale
• Référencement d’objets
• Référencement de propriétés
• Les littéraux
• Les paramètres de méthodes
• Utilisation des expressions de valeurs

Expression générale
• Les expressions de valeurs peuvent être r-value ou l-value
Utilisées en lecture ou en écriture
• Les expressions immédiates ne sont que r-value
• Avec JSF :
Requête initiale : lit l’expression
Postback : éventuellement positionnement de la valeur

Référencement d’objets
• L’expression démarre sur un objet de haut-niveau :
Des paramètres, variables EL, beans managés, objets implicites, classes
• Expression à base de ${objet}
• Il est possible de changer la façon dont le serveur retrouve l’objet
• Dans les cas des constantes d’énuméré
Utiliser directement le nom de la constante, préfixé du nom de l’enum

Référencement de propriétés
• Utiliser la notation de sélection « . » ou « [ ] »
• Par exemple :
• Il est possible d’accéder aux static sur des classes : Boolean.FALSE
• La syntaxe « [ ] » permet d’accéder au ième élément d’une collection
• Pour les maps, les deux syntaxes sont possibles

Les littéraux
• Quelques littéraux sont prédéfinis
Booléens : true, false,
Entiers : comme Java
Flottants : comme Java
Texte : entre double ou simple quotes
Null : null

Les paramètres de méthodes
• Les syntaxes « . » ou « [ ] » peuvent être utilisées
• Ajouter des parenthèses

Utilisation des expressions de valeurs
• Avec le $, dans les textes statiques et tous les attributs qui l’acceptent
• L’évaluation se fera au rendu de la page
• Si plusieurs expressions se suivent, elles sont évaluées de gauche à
droite
• Une expression peut contenir l’opérateur de concaténation

Les expressions lambda
• Equivalent à une expression de valeur avec paramètres
• Syntaxe identique à Java 8
• Peut être utilisée en paramètre de méthode

Opérations sur les collections
• Création de set avec { }, de liste avec [ ], de map avec {a:b}
• Les stream java et certaines de leurs opérations sont applicables en EL
filter, map, min, reduce, …

Exemples d’opérateurs
• Il est possible d’appliquer des opérateurs
Arithmétiques
Logiques
Relationels
Conditionel
…

Mots réservés
• Certains mots réservés ne peuvent pas être utilisés en EL :
And, or, not, eq, ne …

• Syntaxe générale
• Lambda expressions
• Opérations sur des collections
• Exemples d’opérateurs
• Mots réservés

Ajouter des
composants
JSF dans les pages
Fabien Brissonneau
Objets Logiciels

Plan
• Vue générale
• Les composants de la bibliothèque HTML
• Les attributs habituels
• Les formulaires

Vue générale
• Une page JSF typique contient
Les espaces de nommage déclarant les bibliothèques utilisées
Les définitions de entête et corps de page
Un formulaire
• Pour construire la page JSF, il faut au moins la bibliothèque HTML et la
bibliothèque core.
• Un préfixe sera attribué à chacune de ces bibliothèques, en général
« h: » et « f: »

Les composants de la bibliothèque HTML
• Représentation des éléments HTML
• A l’intérieur d’un formulaire
• Gère les entrées utilisateur, pour la saisie ou la restitution

Balise
h:commandButton Soumettre un formulaire
h:commandLink Lien
h:form Définir un formulaire
h:graphicImage Afficher une image
h:inputFile Pour charger un fichier
h:inputText Entrer un texte
h:inputSecret Entrer un mot de passe
h:inputHidden Cacher une variable dans la page
h:inputTextArea Entrer un texte multiligne

Balise
h:outputLabel Afficher un texte
h:outputText Afficher un texte
h:message Afficher un message
h:panelGrid Afficher une table
h:panelGroup Grouper des composants
h:selectOneMenu Permettre la sélection d’un élément
h:selectBooleanCheckbox Changer la valeur d’une checkbox
h:dataTable Afficher une table de données
h:column Une colonne dans la table

Les formulaires
• Le formulaire contient les composants qui présentent les données ou
qui servent à entrer les données
• Utiliser la balise <h:form>
• Plusieurs formulaires sont possibles dans une page, mais seules les
données liées à ce formulaire seront envoyées lors du postback de
soumission
• Le formulaire ne propose aucune disposition des éléments dans la page

• Vue générale
• Les composants de la bibliothèque HTML
• Les attributs habituels
• Les formulaires

Ajouter un
composant texte
JSF dans les pages
Fabien Brissonneau
Objets Logiciels

Plan
• Les différents types de textes
• Les textes en entrée
• Les textes en sortie
• Les composants inputText et inputSecret
• Les composants outputLabel et outputLink
• Utiliser outputFormat

Les différents types de textes
• Par composants textes non entendons des composants qui permettent
de voir ou d’éditer du texte
• Les labels permettent juste d’afficher du texte
• Les champs permettent d’éditer du texte
Uni ou multilignes
• Les champs de mots de passe

Les textes en entrée
• Différentes balises sont possibles :
h:inputHidden cache une variable dans la page
h:inputSecret édite une ligne de texte, remplacé par des astérisques
h:inputText édite une ligne de texte
h:inputTextArea édite plusieurs lignes de texte
•

Les attributs des champs en entrée
converter identifie un convertisseur
converterMessage spécifie un message d’erreur lié au convertisseur
dir indique la direction d’écriture ltr ou rtl
label identifie le composant dans les messages d’erreur
lang spécifie le code langage
required remplissage obligatoire ou non
requiredMessage message lié à l’erreur de ne pas avoir rempli le champ
validator spécifie le bean valideur de ce champ texte (EL)
validatorMessage spécifie le message lié
valueChangeListener spécifie un bean traitant le contenu du champ

Les textes en sortie
• Différentes balises sont possibles :
h:outputFormat affiche un message formaté
h:outputLabel affiche un label lecture seule
h:outputLink affiche un lien vers une autre page, sans action
h:outputText affiche un texte d’une ligne

Les composants inputText et inputSecret
• Pour saisir un texte
• Pour saisir un mot de passe

Utiliser outputFormat
• Formater un texte
• Utilise le format de java.text.MessageFormat

• Les différents types de textes
• Les textes en entrée
• Les textes en sortie
• Les composants inputText et inputSecret
• Les composants outputLabel et outputLink
• Utiliser outputFormat

Ajouter un composant
commande
JSF dans les pages
Fabien Brissonneau
Objets Logiciels

Plan
• Rôles des composants de commande
• Rendre un bouton
• Rendre un lien

Rôles des composants de commande
• Réaliser des actions, soumettre un formulaire ou naviguer
• h:commandButton est rendu comme un bouton
• h:commandLink est rendu comme un lien
• Ces composants possèdent 2 attributs remarquables :
action chaîne de caractère ou expression EL pour déterminer la destination
actionListener pointe sur une méthode déclenchée lors de l’action

Rendre un bouton
• Utiliser h:commandButton
• Rendu sous la forme de <input type= submit
• Pour soumettre un formulaire
• Déclenche une action, plusieurs façons de réaliser la navigation

Rendre un lien
• Utiliser h:commandLink
• Rendu sous la forme d’un <a>
• Il est possible de contenir un <h:outputText>
• Le rendu de ce composant génère du javascript

• Rôles des composants de commande
• Rendre un bouton
• Rendre un lien

Ajouter un composant
de sélection
JSF dans les pages
Fabien Brissonneau
Objets Logiciels

Plan
• Les composants de sélection
• Les composants à sélection unique
• Les composants à sélection multiple
• Afficher le résultat de la sélection

Les composants de sélection
• Pour sélectionner dans une liste, dans un ensemble de choix
• Sélection unique ou multiple
• La liste peut être statique ou dynamique
• Rendu par checkbox, radiobutton, drop-down menu ou listbox

Les composants à sélection unique
• h:selectBooleanCheckbox rend une checkbox, correspond à un booléen
• h:selectOneRadio rend un ensemble de radiobutton
• h:selectOneMenu rend une liste scrollable
• h:selectOneListBox rend une liste non scrollable

Afficher le résultat de la sélection
• Passer par le binding pour lier les composants aux beans et inversement
• Récupérer la valeur sélectionnée par l’attribut value

• Les composants de sélection
• Les composants à sélection unique
• Les composants à sélection multiple
• Afficher le résultat de la sélection

Ajouter des
composants liés aux
données
JSF dans les pages
Fabien Brissonneau
Objets Logiciels

Plan
• Objectifs de ces composants
• Sources de données
• Attributs optionnels

Objectifs de ces composants
• Représenter une collection d’objets
• Sous la forme d’une table HTML
• Utiliser le composant h:dataTable
• Doit être utilisé avec h:column, pour spécifier les caractéristiques de
chaque colonne affichée

Sources de données
• La source de données peut être
Une collection de beans
Un bean simplement
Un objet javax.faces.model.DataModel
Un objet java.sql.ResultSet
Un objet javax.servlet…. Sql.Result
Un objet javax.sql.RowSet

Attributs optionnels
• Dans h:dataTable , rows et first spécifient le nombre et la première ligne
• Les styles CSS :
captionClass titre de la table
columnClasses les colonnes
footerClass le bas de page
headerClass le haut de page
rowClasses les lignes
styleClass le style de la table

• Objectifs de ces composants
• Sources de données
• Attributs optionnels

Ajouter des
composants divers
JSF dans les pages
Fabien Brissonneau
Objets Logiciels

Plan
• Afficher une image
• Afficher un message
• Mettre en place un marque-page

Afficher une image
• Le composant est h:graphicImage
• Référence directe vers une image
• Ou bien utiliser les ressources web

Mettre en place un marque-page
• Les composants h:link ou h:button
• Permettent un lien vers une page
• Utilisent le mapping faces-config

• Afficher une image
• Afficher un message
• Mettre en place un marque-page

Grouper les
composants
JSF dans les pages
Fabien Brissonneau
Objets Logiciels

Plan
• Grouper en table
• Grouper des composants

Grouper en table
• Utiliser h:panelGrid, rendu comme un TABLE
• Spécifier
le nombre de colonnes, titre, etc
Des styles css pour les différentes parties de la table
Peut contenir entête et bas de page

Grouper des composants
• Utiliser h:panelGroup pour grouper des composants
• Ils apparaissent comme un seul composant
• Rendu sous la forme de div ou de span

• Grouper en table

Les convertisseurs
standards
Converters etc
Fabien Brissonneau
Objets Logiciels

Plan
• Rôles et usage des convertisseurs
• DateTimeConverter
• NumberConverter

Rôles et usages des convertisseurs
• Transformer une chaîne de caractères en un objet
• Et vis versa
• Standards : BigDecimal, BigInteger, Boolean, Byte, DateTime, Double …

DateTimeConverter
• Cible le type java.util.Date
• Nécessite la définition d’un style (format)
• Propose les attributs
binding, dateStyle, for, locale, pattern, timeStyle, timeZone, type

NumberConverter
• Utiliser le composant
h:convertNumber
• Avec les attributs
binding
currencyCode
for
groupingUsed
integerOnly
locale
maxFractionDigits,
maxIntegerDigits, min-
pattern
type

• Rôles et usage des convertisseurs
• DateTimeConverter
• NumberConverter

Les listeners
Converters etc
Fabien Brissonneau
Objets Logiciels

Plan
• Rôle et intérêt des listeners
• Gérer les changements de valeurs
• Gérer les actions

Rôle et intérêt des listeners
• Peut être une classe ou une méthode
• Utiliser les attributs valueChangeListener ou actionListener pour une
méthode
• Utiliser les balises f: correspondantes

Gérer les changements de valeurs
• Utilisé avec les attributs :
type pour donne le nom de la classe du listener ValueChangeListener
binding pour référencer un objet qui implémente

• Rôle et intérêt des listeners
• Gérer les changements de valeurs
• Gérer les actions

Les validateurs
Converters etc
Fabien Brissonneau
Objets Logiciels

Plan
• Rôle et objectifs des validateurs
• Valider une valeur
• Utiliser les balises de validation

Rôle et objectifs des validateurs
• Pour valider les saisies utilisateur
• BeanValidator bean validateur pour le composant
• DoubleRangeValidator limites de valeurs pour les flottants
• LengthValidator limites de valeurs pour les chaînes
• LongRangeValidator limites de valeurs pour les entiers
• RegexValidator correspondance sur une expression régulière
• RequiredValidator vérifie la présence d’une valeur

Valider une valeur
• Plusieurs possibilités
Utiliser les attributs dans le tag
Utiliser l’attribut validator pour cibler une méthode de validation
Encapsuler une balise de validation et positionner validatorId
• Ne peut être utiliser que sur les composants qui permettent l’édition de
valeurs

Utiliser les balises de validation
• Avec des attributs
• Avec des balises imbriquées

Expression régulière
• Une expression régulière peut permettre de vérifier
Mots de passe, email, téléphones, …

• Rôle et objectifs des validateurs
• Valider une valeur
• Utiliser les balises de validation

Généralités
Les beans managés
Fabien Brissonneau
Objets Logiciels

Plan
• Les liaisons entre composant et bean
• Exemple de liaisons

Les liaisons entre composant et bean
• Un composant peut être lié par sa valeur ou par son instance
• Par la valeur suppose d’affecter l’attribut value
La valeur est dans le composant
• Par l’instance, il faut utiliser binding
La valeur est dans le bean

La liaison de « binding »
• Les attributs du composant peuvent être modifiés par le bean
Accès via la programmation applicative
Le bean instancie le composant
• Utilisée lorsque Java a besoin de modifier les attributs qui commandent
le rendu des composants

Exemples de laisons
• Les liaisons par valeur peuvent être plus complexes qu’un accès à une
propriété de bean
Expression booléenne
Une propriété venant d’un paramètre
Une propriété de bean
Une valeur dans un tableau
Une valeur dans une collection
Une propriété d’un objet dans une collection

• Les liaisons entre composant et bean
• Exemple de liaisons

Lier les valeurs
Les beans managés
Fabien Brissonneau
Objets Logiciels

Plan
• Mise en œuvre
• Liaison vers les objets implicites

Mise en oeuvre
• Postionner l’attribut value
• Le bean managé peut être paramétré aussi dans un fichier xml

Liaison vers un objet implicite
• La valeur peut pointer vers des objets implicites
• Les objets implicites sont :
facesContext, application, initParam, session, view, component, cc, request,
applicationScope, sessionScope, viewScope, requestScope, paramValues,
headerValues, cookie, resource…

La liaison des convertisseurs
• Avec l’attribut binding, lier la propriété du bean au convertisseur etc
• Le bean possède alors l’accès au convertisseur etc
Les attributs peuvent être modifiés
• Il faut que le convertisseur soit imbriqué
Avec l’attribut binding

• Intérêt
• La laison des convertisseurs, listeners et validateurs

Généralités
Ajax et JSF
Fabien Brissonneau
Objets Logiciels

Plan
• Vue d’ensemble
• Ajax dans JSF
• Ajax dans les facelets

Vue d’ensemble
• Les interactions peuvent être asynchrones
• Le client peut récupérer des informations sans interférer avec le reste de
la page
• La réponse du serveur est fournie sous la forme de XML
Autre possibilité en JSON
• Avantages attendus
Validation des formulaires en temps réel
Fonctionnalités nouvelles
Mise à jour partielle

Ajax dans JSF
• Pour utiliser Ajax dans JSF
Ajouter le javascript dans l’application
Utiliser la bibliothèque built-in
• La bibliothèque built-in peut être utilisée dans le code des beans
• Les fonctionnalités peuvent être étendues
• La balise est f:ajax

Ajax dans les facelets
• Utiliser f:ajax dans un composant standard
• Avec des attributs
render indique les composants à rendre
execute indique les composants à exécuter
onerror, onevent donnent les noms des fonctions js qui gèrent ces cas
…
• Utiliser le javascript jsf.ajax.request()

• Vue d’ensemble
• Ajax dans JSF
• Ajax dans les facelets

Envoyer une requête
Ajax
Ajax et JSF
Fabien Brissonneau
Objets Logiciels

Plan
• Utiliser l’attribut event
• Utiliser l’attribut execute
• Utiliser l’attribut immediate
• Utiliser l’attribut listener

Utiliser l’attribut event
• Les valeurs possibles sont click, keyup, mouseover, focus, blur
• Par défaut, correspondance avec l’événement associé au composant

Utiliser l’attribut immediate
• Par défaut, vaut false
• Permet d’anticiper le traitement sur ce composant

Utiliser l’attribut listener
• Décrit une méthode à déclencher
• Correspond à l’événement prévu par event
• Peut être accompagné de render pour spécifier le composant à
remettre à jour

• Utiliser l’attribut event
• Utiliser l’attribut execute
• Utiliser l’attribut immediate
• Utiliser l’attribut listener

Gérer les erreurs
Ajax et JSF
Fabien Brissonneau
Objets Logiciels

Plan
• Suivre les événements
• Gérer les erreurs

Suivre les événements
• L’attribut à utiliser est onevent
• La valeur est le nom d’une méthode javascript
• La méthode sera appelée à chaque étape ajax
À savoir begin, complete, success
• La fonction javascript sera appelée avec une donnée
Propriétés responseXML-Text-Code, source, status, type

Gérer les erreurs
• Utilise l’attribut onerror
• La valeur est une fonction javascript
• Cette fonction reçoit en paramètre une donnée
Propriétés description, errorName, errorMessage
Type=error, Status=emptyResponse, httpError, malformedXML, serverError

• Suivre les événements
• Gérer les erreurs

Recevoir une réponse
Ajax et JSF
Fabien Brissonneau
Objets Logiciels

Plan
• Recevoir la réponse
• Javascript dans Jsf

Recevoir la réponse
• Utiliser l’attribut render
• Les valeurs peuvent être @this, @all, @none, @form
• En ciblant le composant, celui-ci fait apparaître la réponse

Javascript dans Jsf
• Le fichier jsf.js est automatiquement fournit au client
• Utiliser h:outputScript pour envoyer un autre fichier .js
• On peut utiliser le contenu de jsf.js explicitement
Mettre en œuvre la fonction request(…)

• Recevoir la réponse
• Javascript dans Jsf

Annotations sur les
beans managés
Fabien Brissonneau
Objets Logiciels

Plan
• Les annotations de portée
• La création en avance

Les annotations de portée
• Application
Accessible à travers toutes les sessions
• Session
Accessible à travers toutes les requêtes HTTP (une « connexion »)
• Flow
Accessible à travers un flux donné
• Request
Accessible pour une requête
• Dependent
Indique que le bean dépend de la visibilité d’un autre bean

La création en avance
• Les beans sont normalement créés à la demande
• Provoquer la création en avance d’un bean va faire que le bean existe
avant même d’en avoir besoin
• Utiliser @ManagedBean(eager=true)
accompagnant @ApplicationScope

• Les annotations de portée
• La création en avance

Configurer les beans
avec XML
Fabien Brissonneau
Objets Logiciels

Plan
• Le fichier de configuration
• Intérêt de paramétrer par le fichier xml

Le fichier de configuration
• Dans faces-config.xml
• La balise <managed-bean>
• Décrire
La classe
Le nom
La portée
Des valeurs initiales pour les propriétés

Intérêts
• Paramétrage indépendant du code
• Peut être modifié après déploiement
• Ne nécessite pas de recompilation

Accès aux textes traduits
• Spécifier le nom du bundle et la clé
• La langue utilisée est la langue du navigateur ou langue par défaut

• Construction des ressources langage
• Configuration des langues
• Accès aux textes traduits

Faces flows
Fabien Brissonneau
Objets Logiciels

Plan
• Définition
• Mise en œuvre
• Configuration

Définition
• Une portée spécifique des variables : flowScope
• Permet de limiter la validité de certaines données à un enchaînement
• Possède un point d’entrée et un point de retour
• Ressemble à des appels de processus

Mise en œuvre implicite
• Donner un nom à ce « flow », utiliser ce nom comme action
• Créer un répertoire de ce nom au même niveau que WEB-INF
• Y placer
Un fichier de config <nom_du_flux>.xml (vide)
Un fichier d’entrée <nom_du_flux>.xhtml
Autant de fichiers xhtml que nécessaires
• Un retour
<nom_du_flux>-return.xml

Configuration
• Le flux peut être configuré
Par fichier
• Dans le répertoire du flux
- Nom du flux, son point de retour
- Les paramètres en entrée
- Les appels à d’autres flux
Par annotations

• Définition
• Mise en œuvre
• Configuration

La sécurité
Fabien Brissonneau
Objets Logiciels

Plan
• Les méthodes d’authentification
• La définition des rôles de sécurité
• La définition des contraintes de sécurité

Les méthodes d’authentification
• Authentification de base
BASIC utilise une boîte de dialogue standard pour identifier l’utilisateur
• Authentification avec formulaire
FORM utilise une boîte de dialogue spécifique
• Authentification par certificat

Définition des contraintes de sécurité
• L’accès à des ressources va être limité à certains rôles
Définir les ressources protégées
Définir les rôles autorisés
• Dans web.xml

• Les méthodes d’authentification
• La définition des rôles de sécurité
• La définition des contraintes de sécurité

Conclusion
Fabien Brissonneau
Objets Logiciels

Nous avons vu …
• Chapitre 1 : L’application Web
• Chapitre 2 : La technologie JSF
• Chapitre 3 : Les facelets
• Chapitre 4 : Expression Language
• Chapitre 5 : JSF dans les pages Web
• Chapitre 6 : Converters, Listeners et Validators
• Chapitre 7 : Les beans managés
• Chapitre 8 : Ajax et JSF
• Chapitre 9 : Configurer l’application JSF

Et la suite ?
• La formation JEE persistence
• Liaison aux données par Hibernate

Conclusion
Merci et à bientôt !

Alphorm.com Formation Java Server Faces

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Alphorm.com Formation Java Server Faces

Similar a Alphorm.com Formation Java Server Faces (20)

Más de Alphorm

Más de Alphorm (20)

Alphorm.com Formation Java Server Faces