JEE_Chapter4_JSF_VF (1).pdf

Développement Java EE
2021-2022

Chapitre 4
JSF : JavaServer Faces
 Introduction à JSF
 Le cycle de vie d’une requête JSF
 La configuration d’une application JSF
 Les Managed Beans
 Les Expressions de liaison des données
d’un Bean (EL)
 Les règles de navigation
 Les tags :
 Les tags de base
 Les tags Facelet
 Les tags de conversion
 Les tags de validation
 Le tag datatable

Introduction à JSF
Définition
4
 Java Server Faces (JSF) est une technologie dont le but est de proposer un framework qui
facilite et standardise le développement d'applications web avec Java.
 Le développement JSF a pris en compte les expériences des différentes technologies
utilisées dans le développement des applications web (Servlet, JSP, JSTL, Struts,…).
 JSF permet de séparer clairement la partie «interface» de la partie «métier» d'autant que la
partie interface n'est souvent pas la plus compliquée mais la plus fastidieuse à réaliser!

Introduction à JSF
Historique
5
2004 2006 2009 2013 2017
- Première version.
- Sortie le 11 mars
2004.
- Développée sous
la JSR-127.
JSF 1.0
- Définie dans la JSR-252.
- Sortie le 11 mai 2006.
- Bibliothèques requises :
 Servlets version 2.5
 JSP version 2.1
 Java version 1.5
JSF 1.2
- Sortie en Avril 2013.
- Modifications majeures.
- Java EE 7.
JSF 2.2
- La norme désignée
pour Java EE 8.
- Devenue définitive
le 17 avril 2017.
JSF 2.3
- Sortie le 28 Juin 2009.
- Modifications majeures.
- Java EE 6.
JSF 2.0

Introduction à JSF
Historique – JSF 2.0
6
 Utilisation d'annotations telles que @ManagedBean, @ManagedProperty,
@ApplicationScoped, @SessionScoped, @FacesValidator, @FacesConverter...
 Fichier faces−config.xml beaucoup plus petit.
 Utilisation du projet open source Facelets comme technologie pour la partie vue :
 l'organisation du contenu des pages et des composants
 Simplification du développement en utilisant la notion de composition qui met en
œuvre XHTML et un tag JSF.
 Proposition d’un support de fonctionnalités mettant en œuvre Ajax sur des fonctions
JavaScript standardisées contenues dans le fichier jsf.js que chaque implémentation doit
fournir.
 L’adaptation du cycle de vie d'une requête JSF pour les traitements Ajax en incorporant
la notion de page partielle (partial page).

Introduction à JSF
Objectifs
7
JSF propose de mettre en œuvre :
 L'assemblage de composants serveurs qui génèrent le code de leur rendu avec la possibilité
d'associer certains composants à une source de données encapsulée dans un bean.
 L'utilisation d'un modèle de développement standardisé reposant sur l'utilisation
d'événements et de listeners.
 La conversion et la validation des données avant leur utilisation dans les traitements.
 La gestion de l'état des composants de l'interface graphique.
 La possibilité d'étendre les différents modèles et de créer ses propres composants.
 La configuration de la navigation entre les pages.
 Le support de l'internationalisation.
 Le support pour l'utilisation par des outils graphiques du framework afin de faciliter sa mise
en œuvre.

Introduction à JSF
Implémentation
8
Spécifications
&
API
Implémentations
Bibliothèques
JSF permet la gestion des composants de l'interface
utilisateur; la gestion des événements, la validation côté
serveur et la conversion des données; la navigation des
pages; l'internationalisation et l'accessibilité…
Mojarra (Oracle/Eclipse) Apache MyFaces
1 2
Les librairies de tags personnalisés fournies par l'implémentation pour utiliser
les composants dans les JSP, gérer les événements, valider les données
saisies, ...
Exemples : PrimeFaces, AdminFaces, RichFaces, IceFaces, ADF faces,
MyFaces Core, Tobago.

Introduction à JSF
Implémentation
9
 Il existe deux implémentations de la spécification JSF, toutes développées avec des licences
Open Source approuvées par OSI :
1) Eclipse (ex. Oracle) Mojarra
2) Apache MyFaces
 Mojarra est l’implémentation de référence de JSF. La version de Mojarra 2.2.8 a été diffusée le
04/08/2016.
 MyFaces est une implémentation libre de JSF qui est devenue un projet du groupe Apache. Elle
propose plusieurs composants spécifiques en plus de ceux imposés par les spécifications JSF.
Le site de MyFaces est à l'URL : http://myfaces.apache.org/

Introduction à JSF
Architecture
10
Application Server
JEE EAR
JSF Web Application
Controller
View Model
Faces Servlet
JSP Pages /
JSF Components
Faces-config.xml
Managed Beans
JSF
Library
and
Tags
Client
Data

Cycle de vie d’une requête JSF

Vue d’ensemble – Etape 1
12
Restore View Apply Requests
Process
Validations
Render
Response
Invoke
Application
Update Model
Values
Process Events Process Events
Response Complete
Faces Request
Faces Response
Conversion Errors/
Render Response
Validation / Conversion Errors/
Render Response
1 2 3
4
5
6
Process Events
Process Events
Restore view ou Reconstruct Component Tree : Cette première phase permet au serveur de recréer
l'arborescence des composants qui composent la page. Cette arborescence est stockée dans un objet de
type FacesContext et sera utilisée tout au long du traitement de la requête.
Response Complete
Response Complete
Response Complete
1

Vue d’ensemble – FacesContext
13
 JSF définit le javax.faces.context.FacesContext comme classe
de base abstraite qui représente toutes les informations
contextuelles associées au traitement d'une demande entrante
et à la création de la réponse correspondante.
 Une instance FacesContext est créée par l'implémentation JSF
(FacesServlet), avant de commencer le cycle de vie du
traitement des demandes, par un appel à la méthode
getFacesContext de FacesContextFactory.
 Une fois le cycle de vie du traitement des demandes terminé,
l'implémentation JSF appellera la méthode release(), qui donne
aux implémentations JSF la possibilité de libérer toutes les
ressources acquises, ainsi que de recycler les instances de
FacesContext plutôt que d'en créer de nouvelles pour chaque
demande (notion de Pool de FacesContext à l’instar des
Pool de connexions)

14
Process
Validations
Render
Response
Invoke
Application
Update Model
Values
Response Complete
Faces Request
Faces Response
Conversion Errors/
Render Response
Render Response
1 2 3
4
5
6
Process Events
Process Events
Apply Request Value : Dans cette étape, les valeurs des données sont extraites de la requête HTTP pour
chaque composant et sont stockées dans leurs composants respectifs dans le FacesContext. Durant cette
phase des opérations de conversions sont réalisées pour permettre de transformer les valeurs stockées sous
forme de chaînes de caractères dans la requête http en un type utilisé pour le stockage des données.
Response Complete
Response Complete
Response Complete
2

15
Process
Validations
Render
Response
Invoke
Application
Update Model
Values
Response Complete
Faces Request
Faces Response
Conversion Errors/
Render Response
Render Response
1 2 3
4
5
6
Process Events
Process Events
Perform validations : Une fois les données extraites et converties, il est possible de procéder à leur validation
en appliquant les validators enregistrés auprès de chaque composant. Les éventuelles erreurs de conversions
sont stockées dans le FacesContext. Dans ce cas d’erreur, l'étape suivante est directement « Render
Response » pour permettre de réafficher la page avec les valeurs saisies et afficher les erreurs.
Response Complete
Response Complete
Response Complete
3

16
Process
Validations
Render
Response
Invoke
Application
Update Model
Values
Response Complete
Faces Request
Faces Response
Conversion Errors/
Render Response
Render Response
1 2 3
4
5
6
Process Events
Process Events
Synchronize Model ou update model values: Cette étape permet de stocker dans les composants du Face
Context leurs valeurs locales validées respectives. Les éventuelles erreurs de conversions sont stockées dans
le Face Context. Dans ce cas, l'étape suivante est directement «Render Response» pour permettre de
réafficher la page avec les valeurs saisies et d’afficher les erreurs.
Response Complete
Response Complete
Response Complete
4

17
Process
Validations
Render
Response
Invoke
Application
Update Model
Values
Response Complete
Faces Request
Faces Response
Conversion Errors/
Render Response
Render Response
1 2 3
4
5
6
Process Events
Process Events
Invoke Application Logic : Dans cette étape, le ou les événements émis dans la page sont traités. Cette
phase doit permettre de déterminer la page résultat qui sera renvoyée dans la réponse en utilisant les règles de
navigation définies dans l'application. L'arborescence des composants de cette page est créée.
Response Complete
Response Complete
Response Complete
5

18
Process
Validations
Render
Response
Invoke
Application
Update Model
Values
Response Complete
Faces Request
Faces Response
Conversion Errors/
Render Response
Render Response
1 2 3
4
5
6
Process Events
Process Events
Render Response : Cette étape se charge de créer le rendu de la page de la réponse.
Response Complete
Response Complete
Response Complete
6

Vue d’ensemble – Response Complete
19
Process
Validations
Render
Response
Invoke
Application
Update Model
Values
Response Complete
Faces Request
Faces Response
Conversion Errors/
Render Response
Render Response
Process Events
Process Events
L’événement FacesContext#responseComplete() est utilisé pour signaler à JSF que vous avez déjà traité la réponse
vous-même et que JSF n'a donc pas besoin de rendre la réponse. Par exemple :
 Des méthodes d'action de ManagedBean qui écrivent un téléchargement de fichier dans la réponse. Cela
garantira que JSF n'ajoute pas le téléchargement de fichier avec le contenu du HTML rendu.
 Si l’application JSF est amenée à engager une navigation vers une ressource externe (autre site web ou Web
Service…)
Response Complete
Response Complete
Response Complete

Vue d’ensemble – Response Complete
20
Exemple : Comment envoyer un tableau byte[] au format pdf au navigateur dans l'application JSF, puis court-circuiter le
workflow JSF pour ne pas afficher la réponse :
Important ! Sinon JSF tentera de rendre la réponse qui
échouera évidemment car elle est déjà écrite dans un
fichier et fermée.

La configuration de l’application

Deux fichiers
22
Toute application utilisant JSF doit posséder au moins deux fichiers de configuration qui vont
contenir les informations nécessaires à sa bonne exécution.
1) Le premier fichier est le descripteur de toute application web J2EE : le fichier web.xml
contenu dans le répertoire WEB-INF.
2) Le second fichier est un fichier de configuration au format XML, particulier au
paramétrage de JSF et nommé faces-config.xml.

Le fichier web.xml
23
La version de la servlet utilisée est 3.0
La page d’accueil (optionnel)
Le contrôleur de l’application (Le C du MVC)
Définition des mappings
Les liens :
http://localhost:8080/JSF_Project/toto.xhtml
http://localhost:8080/JSF_Project/toto.faces
http://localhost:8080/JSF_Project/faces/toto.xhtml
Seront traitées par la servlet “Faces Servlet”
définie ci-dessus

Le fichier faces-config.xml
24
Tag Rôle
application permet de préciser ou de remplacer des éléments de l'application
factory
permet de remplacer des fabriques par des fabriques personnalisées de certaines ressources
(FacesContextFactory, LifeCycleFactory, RenderKitFactory, ...)
component définit un composant graphique personnalisé
converter
définit un convertisseur pour encoder/décoder les valeurs des composants graphiques
(conversion de String en Object et vice versa)
managed-bean
définit un objet utilisé par un composant qui est automatiquement créé, initialisé et stocké
dans une portée précisée
navigation-rule définit les règles qui permettent de déterminer l'enchaînement des traitements de l'application
referenced-bean
render-kit définit un kit pour le rendu des composants graphiques
lifecycle
validator définit un validateur personnalisé de données saisies dans un composant graphique

Le fichier faces-config.xml
25

@ManagedBean
Définition
27
 Dans une application JSF typique, chaque page de l'application se connecte à un Bean géré qui sert de Bean de
support. Le Bean définit les méthodes et les propriétés associées aux composants.
 Le cycle de vie des MB est contrôlé par le framework JSF en fonction des besoins et du paramétrage fourni
dans le fichier de configuration ou les annotations.
 Les beans gérés JSF (soit spécifiés dans le fichier faces-config.xml, soit annotés avec @ManagedBean) sont
instanciés de manière lazy. C'est-à-dire qu'ils sont instanciés lorsqu'une requête est faite à partir de
l'application.
 Pour forcer un bean de portée application (ApplicationScoped) à être instancié et placé dans la portée de
l'application dès que l'application est démarrée et avant qu'une requête ne soit faite, l'attribut eager du bean
géré doit être défini.
 Les beans sont des classes qui respectent une spécification particulière notamment la présence :
 De getters et de setters qui respectent une convention de nommage particulière pour les attributs
 Un constructeur par défaut sans arguments

@ManagedBean
Exemple d’Utilisation
28

@ManagedBean
Configuration xml vs Annotations
29
Utilisation de la configuration XML :
Le grand intérêt de ce mécanisme
est de ne pas avoir à se soucier de
l'instanciation du MB ou de sa
recherche dans la portée puisque
c'est le framework qui va s'en
occuper de façon transparente.
Utilisation des annotations :
L'annotation @ManagedProperty
permet d'injecter un bean géré dans
un autre bean géré.

@ManagedBean
Annotations Scope
30
Annotation Scope Description
@RequestScoped Le MB vit aussi longtemps que HTTP request-response vit. Il est créé sur une requête
HTTP et est détruit lorsque la réponse HTTP associée à la requête HTTP est
terminée.
@NoneScoped Le MB vit aussi longtemps qu'une seule évaluation EL. Il est créé lors d'une
évaluation EL et est détruit immédiatement après l'évaluation EL.
@ViewScoped Le MB vit tant que l'utilisateur interagit avec la même vue JSF dans la fenêtre / onglet
du navigateur. Il est créé sur une requête HTTP et est détruit une fois que l'utilisateur
affiche une autre vue.
@SessionScoped Le MB vit aussi longtemps que la session HTTP vit. Il est créé à la première requête
HTTP impliquant ce bean dans la session et est détruit lorsque la session HTTP
devient invalide.
@ApplicationScoped Le MB vit aussi longtemps que l'application Web vit. Il est créé à la première requête
HTTP impliquant ce bean dans l'application (ou lorsque l'application Web démarre et
que l'attribut eager= true est défini dans @ManagedBean) et est détruit lorsque
l'application Web s'arrête.
@CustomScoped Le MB vit aussi longtemps que l'entrée du bean dans une Map personnalisée vit.

Les expressions de liaison des
données d’un Bean (EL)

Les expressions de liaison des données d'un Bean
Définition
32
 Il est toujours nécessaire dans la partie présentation d'obtenir la valeur d'une donnée d'un MB
pour par exemple l'afficher.
 JSF propose une syntaxe basée sur des expressions qui facilitent l'utilisation des valeurs d'un
MB. Ces expressions doivent être délimitées par #{ et }.
 Exemple :
<h:inputTextvalue="#{login.nom}"/> <h:inputText value='#{login["nom"]}'/>
Attention! La syntaxe utilisée par JSF est proche mais différente de celle proposée
par JSTL : JSF utilise le délimiteur #{ ... } et JSTL utilise le délimiteur ${ ... } .

Variables
33
Variable Rôle
header
une collection de type Map encapsulant les éléments définis dans les paramètres de l'en-tête de la requête http
(seule la première valeur est renvoyée)
header-values
une collection de type Map encapsulant les éléments définis dans les paramètres de l'en-tête de la requête http
(toutes les valeurs sont renvoyées sous la forme d'un tableau)
param
une collection de type Map encapsulant les éléments définis dans les paramètres de la requête http (seule la
première valeur est renvoyée)
param-values
une collection de type Map encapsulant les éléments définis dans les paramètres de la requête http (toutes les
valeurs sont renvoyées sous la forme d'un tableau)
cookies une collection de type Map encapsulant les éléments définis dans les cookies
initParam une collection de type Map encapsulant les éléments définis dans les paramètres d'initialisation de l'application
requestScope une collection de type Map encapsulant les éléments définis dans la portée request
sessionScope une collection de type Map encapsulant les éléments définis dans la portée session
applicationScope une collection de type Map encapsulant les éléments définis dans la portée application
facesContext une instance de la classe FacesContext
View une instance de la classe UIViewRoot qui encapsule la vue
 JSF définit un ensemble de variables prédéfinies et utilisables dans les expressions de liaison de données

Variables - Exemple
34
 Exemple avec la variable initParam
(1) web.xml
(2) Contrôlleur
(3) JSF

Variables – Etapes de traitement
35
 Lorsqu'une variable est utilisée dans une expression :
1) JSF recherche dans la liste des variables prédéfinies
2) puis recherche une instance dans la portée request
3) puis dans la portée session
4) enfin dans la portée application
 Si aucune instance n'est trouvée, alors JSF crée une nouvelle instance en tenant compte des
informations du fichier de configuration.
 Cette instanciation est réalisée par un objet de type Variable Resolver de l'application.

Opérateurs
36
Opérateur Rôle
+ - * / % div mod Opérateurs arithmétiques
< (lt)
<= (le)
> (gt)
>= (ge)
== eq
!= (ne)
Opérateurs de comparaisons
&& (and)
|| (or)
! (not)
Opérateurs logiques
Empty
Opérateur vide : un objet null, une chaîne vide, un tableau ou une
collection sans élément
? : Opérateur ternaire de test
 La syntaxe des expressions possède aussi quelques opérateurs :

Evaluation d’une expression
37
 Il est parfois nécessaire d'évaluer une expression dans le code des objets métiers pour obtenir
sa valeur.
 Comme tous les composants sont stockés dans le FaceContext, il est possible d'accéder à cet
objet pour obtenir les informations demandées.
 Il est d'abord nécessaire d'obtenir l'instance courante de l'objet FaceContext en utilisant la
méthode statique getCurrentInstance().

Les règles de navigation
La navigation implicite
39
Il suffit de mettre le nom de la vue dans l'attribut d'action et JSF recherche automatiquement la page de vue
correcte dans l'application déployée.
Ici, lorsque le bouton Page2 est cliqué, JSF résoudra
le nom de la vue page2 en tant que page2.xhtml, et
trouvera le fichier de vue correspondant page2.xhtml
dans le répertoire courant.

Auto Navigation dans ManagedBean
40
Définir une méthode dans le ManagedBean pour renvoyer un nom de vue

La navigation conditionnelle
41
En utilisant le ManagedBean, nous pouvons très facilement contrôler la navigation :

Forward vs Redirect
42
JSF effectue par défaut « a server page forward » tout en naviguant vers une autre page et l'URL de
l'application ne change pas. Pour activer la redirection de page, ajoutez faces-redirect=true à la fin du nom
de la vue.
URL se termine par home.jsf
URL se termine par page1.jsf

Les tags
Les différents types
44
Les types de tags Espace de nom
De base <html xmlns= "http://www.w3.org/1999/xhtml"
xmlns:h= "http://java.sun.com/jsf/html" >
DataTable <html xmlns= "http://www.w3.org/1999/xhtml"
xmlns:f= "http://java.sun.com/jsf/core" >
Facelet <html xmlns= "http://www.w3.org/1999/xhtml"
xmlns:ui= "http://java.sun.com/jsf/facelets" >
Conversion et validation <html xmlns= "http://www.w3.org/1999/xhtml"
xmlns:f= "http://java.sun.com/jsf/core" >
Composite <html xmlns= "http://www.w3.org/1999/xhtml”
xmlns:composite= "http://java.sun.com/jsf/composite">

Les tags
Utilisation de JSF dans une JSP
45
 Pour une utilisation dans une JSP, l'implémentation de référence propose deux bibliothèques de
tags personnalisés :
 core : cette bibliothèque contient des fonctionnalités de bases ne générant aucun rendu.
L'utilisation de cette bibliothèque est obligatoire car elle contient notamment l'élément view
 html : cette bibliothèque se charge des composants avec un rendu en HTML
 Pour utiliser ces deux bibliothèques, il est nécessaire d'utiliser une directive taglib pour chacune
d'elles au début de la page JSP.

Les tags
Utilisation de JSF dans une JSP
46
 Le tag <f:view> est obligatoire dans toutes pages utilisant JSF. Cet élément va contenir l'état de
l'arborescence des composants de la page si l'application est configurée pour stocker l'état sur le
client.
 Le tag <h:form> génère un tag HTML form qui définit un formulaire.

Les tags de base
h:inputText
48

Les tags de base
h:inputSecret
49

Les tags de base
h:inputTextarea
50

Les tags de base
h:selectBooleanCheckbox
51

Les tags de base
h:selectManyCheckbox
52

Les tags de base
h:selectOneRadio
53

Les tags de base
h:selectOneListbox
54

Les tags de base
h:selectOneMenu
55

Les tags de base
h:outputText
56

Les tags de base
h:outputFormat
57

Les tags de base
h:graphicImage
58

Les tags de base
h:outputStylesheet
59

Les tags de base
h:outputScript
60

Les tags de base
h:commandButton
61

Les tags de base
h:commandLink
63

Les tags de base
h:outputLink
64

Les tags de base
h:panelGrid
65

Les tags de base
f:attribute
68

Les tags de base
f:setPropertyActionListener
69

Les tags Facelets
Définition
71
 JSF fournit des balises spéciales pour créer une mise en page (layout) commune pour une
application Web appelée « facelets ».
 Ces balises offrent la souplesse nécessaire pour gérer des parties communes de plusieurs
pages à un seul endroit. Pour ces balises, vous devez utiliser les espaces de noms suivants de
l'URI dans le noeud html :
<html xmlns= "http://www.w3.org/1999/xhtml”
xmlns:ui= " http://java.sun.com/jsf/facelets" >

Les tags Facelets
Création des templates
72

Les tags Facelets
ui:parameters
73
Permet de passer les paramètres à un template.

Les tags de conversion
f:convertNumber
75

f:convertDateTime
76

Les tags de conversion personnalisés
77
JSF permet au développeur de créer son propre
tag de conversion personnalisé. Exemple :

78

79

Les tags de validation
f:validateLength
81

f:validateLongRange
82

Les tags de validation personnalisés
83

Les tags de validation personnalisés
84

Le tags datatable
Fonctions
86
JSF fournit un contrôle riche nommé DataTable pour rendre et formater des tables html.
 DataTable peut itérer sur une collection ou tableau de valeurs pour afficher des données.
 DataTable fournit des attributs pour modifier ses données de manière simple.

JEE_Chapter4_JSF_VF (1).pdf

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à JEE_Chapter4_JSF_VF (1).pdf

Similaire à JEE_Chapter4_JSF_VF (1).pdf (20)

JEE_Chapter4_JSF_VF (1).pdf