Alphorm.com Formation Java Server Faces

Formation Java Server Faces alphorm.com™©

Site : http://www.alphorm.comBlog : http://blog.alphorm.com

Formation

JSF (Java Server Faces)

Fabien BrissonneauConsultant, concepteur et formateurObjets Logiciels


Plan• Présentation du formateur

• Qu’est-ce que JSF?

• Le plan de la formation

• Les références bibliographiques

• Autres liens utiles


Présentation du formateur• Fabien Brissonneau

• Email : [email protected]

• 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/


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



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


Un servlet• Une classe héritant de HttpServlet

• Traite les réponses HTTP

• Contient des références aux EJB


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



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


Ce qu’on a couvert• Fichiers war

• Fichiers jar

• Fichiers ear



L’API Servlet

L’application Web



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 HttpSession• Dans le package javax.servlet.http

• Représente une interaction avec un client dans une application

• Une instance unique par client, donc une « map » par client

• Les sessions sont maintenues par le conteneur, par cookie ou en ré-écrivant chaque lien avec un id de session


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 qu’on a couvert• 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




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)


Ordre des recherches• Si une correspondance exacte existe, elle est prise

• S’il y a une correspondance relative avec caractère générique

� Si plusieurs, priorité au plus long motif

• Enfin recherche des extensions de fichiers


Ce qu’on a couvert• Le déploiement des informations

• Les chemins d’accès

• L’annotation @WebServlet

• Ordre des recherches


Les pages JSP

L’application Web




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 sorties JSP• contentType (text/html): déclaration du type MIME que la page produit

• pageEncoding : déclaration de l’encodage des caractères

• Peuvent être déclarés en une seule directive


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


Ce qu’on a couvert• L’architecture JSP

• Exemple de JSP

• La syntaxe des JSP

• Les directives JSP


JSP et Javabeans

L’application Web




Plan• Définition des JavaBeans

• Usage des JavaBeans

• Les actions JSP


Définition de JavaBeans• Un JavaBean est une classe Java qui respecte quelques conventions

� Avoir un constructeur sans argument

� Utiliser le motif « JavaBean property » pour exposer les valeurs au client


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


Ce qu’on a couvert• Définition de JavaBeans

• Usage des JavaBeans

• Les actions JSP



Les balises JSP

L’application Web



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


Ce qu’on a couvert• Les balises JSP standard

• La balise forEach

• La balise if



Les balises personnalisées

L’application Web



Plan• Création d’une balise personnalisée

• Déclaration de la balise

• Utilisation de la balise

• Balise vs JavaBean


Création d’une balise personnalisée• Implémenter javax.servlet.jsp.tagext.JspTag

• Ou bien hériter de javax.servlet.jsp.tagext.SimpleTagSupport

• Redéfinir doTag()

• Ecrire le HTML correspondant

� Utiliser super.getJspContext().getOut().print(…)


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


Ce qu’on a couvert• 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



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• Les composants sont dérivés de javax.faces.component.UIComponent

• La classe UIComponentBase fournit un comportement par défaut

• UIColumn : une colonne dans un UIData

• UICommand : un contrôle qui déclenche des actions

• UIData : un lien vers les données (un javax.faces.model.DataModel)

• UIForm : un formulaire

• UIGraphic : pour afficher une image


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


Le modèle de navigation• La navigation est implicite ou définie par l’utilisateur

• Navigation implicite par l’attribut action

• Navigation définie par l’utilisateur dans faces-config.xml

• Déclenchement d’une méthode


Ce qu’on a couvert• 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



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


Ce qu’on a couvert• 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



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


Ce qu’on a couvert• Requête initiale ou postback

• La classe FacesContext

• L’attribut immediate



Une application Facelets

Les facelets



Plan• Les facelets

• Le cycle de vie de l’application

• Exemple


Les facelets• Langage déclaratif pour construire des vues JSF

� Utilisation de xhtml

� Support de bibliothèques de balises (facelets, jsf, jstl)

� Support de Expression Language (EL)

� Modèles pour les composants et les pages

• Conformité au xhtml, extension de fichier en xhtml

• Les bibliothèques sont supportées via les espaces de nommage xml


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…


Les pages de composants• Ajouter des composants sur la page

• Les connecter aux valeurs de bean et enregistrer convertisseurs, etc


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


Ce qu’on a couvert• Les facelets

• Le cycle de vie de l’application

• Exemple



Construire une application Facelets

Les facelets



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


Ce qu’on a couvert• Préparer un template

• Créer les parties

• Créer des composites



Les balises HTML5

Les facelets



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


Ce qu’on a couvert• Les éléments pass-through

• Les attributs pass-through

• Exemples



La syntaxe de EL

Expression Language



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


Ce que permet EL• Expressions simples pour accéder aux données des beans

• Lire des données contenues dans des beans

• Ecrire des données dans des beans

• Invoquer des méthodes Java

• Réaliser des opérations arithmétiques, logiques, etc

• Construire des collections d’objets et y invoquer des méthodes


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


Ce qu’on a couvert• Vue générale

• Evaluation immédiate

• Evaluation différée



Les expressions de valeurs

Expression Language



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


Ce qu’on a couvert• 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



Les expressions de méthodes

Expression Language



Plan• Syntaxe générale

• Lambda expressions

• Opérations sur des collections

• Exemples d’opérateurs

• Mots réservés


Syntaxe générale• Les expressions de méthodes sont différées

• Accède à des méthodes publiques d’un bean

• Utilise la syntaxe « . » ou bien « [ ] »

• Les expressions de méthodes ne sont utilisables que pour les attributs

• Une seule expression de méthode possible

� Pas de concaténation

• Ou sous la forme d’un simple texte


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 …


Ce qu’on a couvert• 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



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


Les composants de la bibliothèque HTML

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


Les composants de la bibliothèque HTML

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 attributs habituels

Attribut

binding Crée un lien vers une propriété de bean

id Identifie le composant

immediate Applique les événements dès la requête

rendered Spécifie une condition pour rendre le composant

style Spécifie une CSS

styleClass Spécifie une classe de style

value Spécifie une valeur (EL)


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


Ce qu’on a couvert• Vue générale

• Les composants de la bibliothèque HTML

• Les attributs habituels

• Les formulaires



Ajouter un composant texte

JSF dans les pages



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


Les composants outputLabel et outputLink• Pour créer un label qui illustre et focus sur un input

• Pour faire un lien


Utiliser outputFormat• Formater un texte

• Utilise le format de java.text.MessageFormat


Ce qu’on a couvert• 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



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


Ce qu’on a couvert• Rôles des composants de commande

• Rendre un bouton

• Rendre un lien



Ajouter un composant de sélection

JSF dans les pages



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


Les composants à sélection multiple• h:selectManyCheckbox donne un ensemble de checkbox

• h:selectManyMenu donne un menu

• h:selectManyListbox donne une liste

• Les sélections multiples sont possibles

• Les items sont placés avec f:selectItem ou f:selectItems, comme précédemment


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


Ce qu’on a couvert• 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



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


Ce qu’on a couvert• Objectifs de ces composants

• Sources de données

• Attributs optionnels



Ajouter des composants divers

JSF dans les pages



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


Afficher un message• Utilisés lors des échecs de validation ou formatage

• Composant h:message pour un composant spécifique

• Composant h:messages pour la page entière

• Permet de placer les messages d’erreur


Mettre en place un marque-page• Les composants h:link ou h:button

• Permettent un lien vers une page

• Utilisent le mapping faces-config


Ce qu’on a couvert• Afficher une image

• Afficher un message

• Mettre en place un marque-page



Grouper les composants

JSF dans les pages



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


Ce qu’on a couvert• Grouper en table




Les convertisseurs standards

Converters etc



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


Ce qu’on a couvert• Rôles et usage des convertisseurs

• DateTimeConverter

• NumberConverter



Les listeners

Converters etc



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


Gérer les actions• Utiliser f:actionListener , avec les attributs type et binding

• Cas particulier de f:setPropertyActionListener pour garder une référence

� Attributs value et target


Ce qu’on a couvert• Rôle et intérêt des listeners

• Gérer les changements de valeurs

• Gérer les actions



Les validateurs

Converters etc



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, …


Ce qu’on a couvert• Rôle et objectifs des validateurs

• Valider une valeur

• Utiliser les balises de validation



Généralités

Les beans managés



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 « value »• La valeur est portée par le composant

� La page a tout contrôle sur le composant

� Il n’y a pas de dépendance de la page vers Java

� Les conversions interviennent de manière transparentes


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


Ce qu’on a couvert• Les liaisons entre composant et bean

• Exemple de liaisons



Lier les valeurs

Les beans managés



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…


Ce qu’on a couvert• Mise en œuvre

• Liaison vers les objets implicites



Lier les instances

Les beans managés



Plan• Intérêt

• La laison des convertisseurs, listeners et validateurs


Intérêt• Lier les instances supposent que le bean crée le composant

• Le bean accède aux attributs du composant


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


Ce qu’on a couvert• Intérêt

• La laison des convertisseurs, listeners et validateurs



Généralités

Ajax et JSF



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()


Ce qu’on a couvert• Vue d’ensemble

• Ajax dans JSF

• Ajax dans les facelets



Envoyer une requête Ajax

Ajax et JSF



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 execute• Définit le composant à exécuter par le serveur

• Plusieurs composants peuvent être listés

• La valeur de cet attribut est

� Le nom (id) d’un composant

� Les valeurs @this, @all, @none, @form


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


Ce qu’on a couvert• Utiliser l’attribut event

• Utiliser l’attribut execute

• Utiliser l’attribut immediate

• Utiliser l’attribut listener



Gérer les erreurs

Ajax et JSF



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


Ce qu’on a couvert• Suivre les événements

• Gérer les erreurs



Recevoir une réponse

Ajax et JSF



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


Grouper les composants• La balise f:ajax peut encadrer plusieurs composants

• Tout le bloc est traité en ajax


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(…)


Ce qu’on a couvert• Recevoir la réponse


• Javascript dans Jsf



Annotations sur les beans managés

Configurer l’application



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


Ce qu’on a couvert• Les annotations de portée

• La création en avance



Configurer les beansavec XML




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


Ce qu’on a couvert• Le fichier de configuration

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



Prise en compte de la langue




Plan• Construction des ressources langage

• Configuration des langues

• Accès aux textes traduits


Construction des ressources langage• Créer des fichiers de propriétés

• Nommage des fichiers <nom-du-bundle>_<codelang>.properties

• Placés dans un package


Configuration des langues• Dans le fichier faces-config.xml

• Donner l’emplacement du bundle

• Spécifier les langues utilisables


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


Ce qu’on a couvert• Construction des ressources langage

• Configuration des langues

• Accès aux textes traduits



Faces flows




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


Ce qu’on a couvert• Définition

• Mise en œuvre

• Configuration



La sécurité




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 rôles• Définir les rôles dans web.xml

• Définir le rapport entre le principal et le rôle, avec les mots de passe correspondant

� Selon le serveur

� Avec Glassfish

• Dans glassfish.xml


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


Ce qu’on a couvert• Les méthodes d’authentification

• La définition des rôles de sécurité

• La définition des contraintes de sécurité



Conclusion



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 !

Technology

Alphorm.com Formation Java Server Faces