Chapitre 4

Java Server Faces

(JSF)
Introduction

JSF (Java Server Faces) est un framework de développement d'application Web intégré à
la plate-forme Java EE qui respecte le modèle MVC. En quelque sorte, c'est une couche
d'abstraction par-dessus l'API des servlets et des JSP (bien que l'utilisation des JSP ne soit
pas obligatoire).

03.06.2021
Introduction

• JSF (JavaServer Faces) est un framework MVC basé sur les composants.

• Il est construit sur l'API Servlet et fournit des composants sous forme de bibliothèques
de balises ressemblant très fortement à la JSTL.

• Ces balises peuvent être utilisées dans des pages JSP comme dans toute autre technologie
de vue basée sur le Java, car le framework JSF ne limite pas le développeur à une
technologie particulière pour la vue. Cependant, il existe une technologie relativement
récente baptisée la Facelet, qui fait partie du standard et qu'il est recommandé d'utiliser
dès lors que l'on travaille avec JSF, celle-ci étant bien plus adaptée que les pages JSP.

03.06.2021
Introduction

JSF réduit l'effort de création et de maintenance des applications, qui s'exécuteront sur
un serveur d'applications Java et rendront l'interface utilisateur de l'application sur un client
cible. JSF facilite le développement d'applications Web en :

• Fournissant des composants d'interface utilisateur réutilisables (découper une page

en plusieurs composants indépendants, assemblés ensuite pour former une page
finale. )
• Facilitant le transfert de données entre les composants de l'interface utilisateur
• Gérant l'état de l'interface utilisateur sur plusieurs demandes de serveur
• Activant la mise en œuvre de composants personnalisés
• Câblant l'événement côté client au code d'application côté serveur

03.06.2021
 Historique des versions

Versions Date de sortie Description

Expressions de recherche, URL sans extension, validation de bean pour
Jsf 2.3 28-03-2017
des classes complètes, communication push à l'aide de WebSocket …
Jsf 2.2 Intégration de nouveaux concepts tels que les vues sans état, le flux de
21-05-2013
pages et la possibilité de créer des contrats de ressources portables.
Jsf 2.1 22-11-2010 C'était une version de maintenance de jsf 2.0.
01-07-2009 Sa facilité d'utilisation, ses fonctionnalités et performances améliorées,
Jsf 2.0
coïncide avec javaEE 6.
De nombreuses améliorations: L'utilisation d'un schéma pour le fichier
Jsf 1.2 11-05-2006 de configuration, à la place d'une DTD, gérer plusieurs frames ou
fenêtres d'une même application…
Jsf 1.1 27-05-2004 C'était une version de correction des bugs.

Jsf 1.0 11-03-2004 La version initiale

03.06.2021
 Structure d’une application JSF

La structure globale est très similaire à celle d'une application web Java EE MVC traditionnelle :
• la vue est généralement assurée par des pages JSP ou par des pages XHTML (on parle alors
de Facelets) ;
• le modèle est assuré par des entités ou des JavaBeans ;
• le contrôleur, auparavant incarné par nos servlets, est dorénavant décomposé en deux
éléments :
- une unique servlet mère servant de point d'entrée à toute requête, la FacesServlet ;
- un JavaBean particulier, déclaré via une annotation et désigné par le terme managed-bean.

Le tout est mis en musique par des fichiers de configuration : le classique web.xml, mais également
un nouveau fichier nommé faces-config.xml.

03.06.2021
 Facelets VS JSP

• Avec JSF, ce sont maintenant de simples pages XHTML qui sont utilisées, pages que l'on nomme
des Facelets.

• Une page JSP est un objet complexe, pouvant contenir à la fois des balises JSP ou JSTL et du
code Java par l'intermédiaire de scriptlets, une Facelet est un fichier XML pur (le code Java ne
peut être inséré).

• une Facelet porte en général une de ces trois extensions : .jsf, .xhtml ou .faces.

• le framework JSF est markup-agnostique : cela signifie qu'il peut s'adapter à n'importe quel
langage, à partir du moment où ce langage respecte la structure décrite par le standard XML.

• Comme il existe des directives permettant d'importer des bibliothèques de balises JSTL dans une
page JSP, il existe un moyen pour inclure les bibliothèques de balises JSF dans une Facelet.

• Dans une Facelet, une bibliothèque de balises est incluse via l'ajout d'un attribut « xmlns » à la
balise <html> qui ouvre le corps de la page.

03.06.2021
Créer une application JSF + Maven

03.06.2021
Créer une application JSF + Maven

03.06.2021
Créer une application JSF + Maven

03.06.2021
Créer une application JSF + Maven

• Modifier le fichier pom.xml

Remove

03.06.2021
Créer une application JSF + Maven

• Déplacer le contenu du « WebContent » à

« webapp »

• Supprimer le dossier « WebContent » et

Recliquer sur « Update Project »

03.06.2021
Créer une application JSF + Maven

• Ajouter les dépendances au fichier pom.xml

03.06.2021
Créer une application JSF + Maven

• Run project

Tout les jar dont on a besoin pour créer une

application JSF on été ajouté à la librairie sans
avoir à chercher et les ajouter manuellement.

03.06.2021
Créer une application JSF + Maven

• Ajouter une page « xhtml » et lancer la page

03.06.2021
Bibliothèques et balises

• Une Facelet est donc constituée de balises, dont la syntaxe est très similaire à celles
des balises JSTL utilisées dans une page JSP.

• Pour pouvoir utiliser ces balises, il faut importer certaines bibliothèques en utilisant
l’attribut « xlmns » de la balise <html>.

• Il s'agit là d'un namespace XML.

• Le framework JSF intègre nativement trois bibliothèques standard : HTML, Core et

UI.
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
...
</html>
03.06.2021
Bibliothèques et balises

• L’insertion des bibliothèques désigne que :

 h: désigne la bibliothèque HTML

 ui: la bibliothèque de templating et de composition

 f: la bibliothèque Core.

• Par exemple, voici une balise issue de la bibliothèque HTML :

<h:outputLabel for="confirmation">
Confirmation du mot de passe <span class="requis">*</span>
</h:outputLabel>

03.06.2021
JSF UI Page structure and Components
Il faut ajouter la ligne suivante comme un attribut de la balise html:
xmlns:h="http://xmlns.jcp.org/jsf/html"

<html>

<!--balises HTML -->

<!– tags JSF -->

<!--balises HTML -->

</html>

03.06.2021
JSF UI Page structure and Components - Exemple

FirstPage.xhtml

mareponse.xhtml

03.06.2021
Les expressions EL

• Une Facelet peut, tout comme une page JSP, contenir des expressions EL.

• L’exemple suivant présente la forme d'une expression EL avec JSF:

• La syntaxe #{ } permet d’appeler n'importe quelle méthode d'un bean, et non plus seulement
ses getters/setters.

03.06.2021
JSF – derrière les coulisses

JSP:

• La technologie JSP fournit un langage de templating, permettant de créer des pages qui sont -
par un procédé que vous connaissez - traduites en servlets Java, puis compilées.

• le corps d'une page JSP devient l'équivalent de la méthode service(), la méthode mère des
méthodes doGet() et doPost().

• Les balises JSP et JSTL qui y sont utilisées sont directement transformées en code Java et
intégrées dans la servlet générée.

03.06.2021
JSF – derrière les coulisses

JSF :

• une Facelet n'est qu'un fichier XML, ainsi les balises JSF ne sont que des appels à des
composants JSF qui sont entièrement autonomes.

• Lorsqu'un composant JSF est appelé, il génère son propre rendu dans son état courant.

• Le cycle de vie des composants JSF n‘ont aucune relation avec le cycle de vie d'une page
JSP.

• Contrairement aux JSP, les Facelets JSF conservent un état (la vue est stateful) : ce sont les
composants autonomes appelés par l'intermédiaire des balises contenues dans les Facelets qui
permettent de maintenir cet état.

03.06.2021
JSF – derrière les coulisses

Traitement de la requête avec JSF:

• La requête entrante est redirigée vers l'unique servlet jouant le rôle de super-contrôleur, la
FacesServlet qui extrait le nom de la page ciblée et détermine s'il existe déjà une vue associée
à cette page.

• La FacesServlet va chercher les composants utilisés par la vue courante. Si la vue n'existe pas
déjà, elle va la créer. Si elle existe déjà, elle la réutilise.

• La vue (c'est-à-dire l'ensemble des composants qui y interviennent, et donc son état) est
sauvegardée dans l'objet FacesContext.

03.06.2021
JSF Managed Bean

C’est une classe Java (Java Bean) qui contient des attributs, getters et setters.

Les Managed Beans permet de :

• Valider les données d’un composant.
• Gérer un événement lancé par un composant.
• Exécuter le traitement pour déterminer la page suivante vers laquelle l'application
doit naviguer.
• Jouer également le rôle du Model pour le framework JSF

03.06.2021
JSF Managed Bean - Annotation

• Configuration des Managed Beans en se basant sur les annotations

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
• L'annotation @ManagedBean dans une
@ManagedBean // Using ManagedBean annotation classe enregistre automatiquement cette
@RequestScoped // Using Scope annotation classe en tant que ressource.
public class User {
private String name;
public String getName() { • L'annotation @RequestScoped est utilisée
return name; pour fournir la portée du ManagedBean.
}
public void setName(String name) {
this.name = name;
}
}

03.06.2021
JSF Managed Bean - Annotation

Vous pouvez utiliser des annotations pour définir la portée dans laquelle le bean sera stocké:
o Application (@ApplicationScoped): Bean vit aussi longtemps que l'application Web vit. Il est créé lors de
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.
o Session (@SessionScoped): Bean 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 est invalidée..
o View (@ViewScoped): L'étendue de la vue persiste pendant l'interaction d'un utilisateur avec une seule
page (vue) d'une application Web.
o Request (@RequestScoped): L'étendue de la requête persiste lors d'une seule requête HTTP dans une
application Web.
o None (@NoneScoped): Indique qu‘aucune étendue n'est pas définie pour l'application.
o Custom (@CustomScoped): Une portée non standard définie par l'utilisateur. Sa valeur doit être
configurée en tant que java.util.Map. Les étendues personnalisées sont rarement utilisées.

03.06.2021
 JSF Managed Bean - Exemple

On reprend le même exemple mais cette fois en utilisant les Managed Beans:

<?xml version='1.0' encoding='UTF-8' ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>User Form</title>
</h:head>
<h:body>
<h:form>
<h:outputLabel for="username">User Name</h:outputLabel>
<h:inputText id="username" value="#{user.name}" required="true" requiredMessage="User Name is required" />
<br/>
<h:commandButton id="submit-button" value="Submit" action="page2.xhtml"/>
</h:form>
</h:body>
</html>

index.xhtml

03.06.2021
 JSF Managed Bean - Exemple
@ManagedBean
@RequestScoped
public class User {
String name;

public String getName() { Managed Bean (User)

return name;
}
public void setName(String name) {
this.name = name;
}
page2.xhtml }

<?xml version='1.0' encoding='UTF-8' ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">

<h:head>
<title>Welcome Page</title>
</h:head>
<h:body>
<h2>Hello, <h:outputText value="#{user.name}"></h:outputText></h2>
</h:body>
</html>
03.06.2021
 Navigation entre les pages

• Navigation Implicite
Depuis sa version 2.0, JSF fournit un mécanisme de résolution de page de vue automatique nommé navigation
implicite. Dans ce cas, il vous suffit de mettre le nom de la vue dans l'attribut d'action et JSF recherchera
automatiquement la page de vue correcte dans l'application déployée.

 Dans les pages JSF

<h:form>
<h3>Using JSF outcome</h3> JSF cherchera la vue page2.xhtml dans le dossier
<h:commandButton action = "page2" value = "Page2" />
</h:form>
courant.

 En utilisant les Managed beans

@ManagedBean(name = "navigationController", eager = true) <h:form>
@RequestScoped <h3>Using JSF outcome</h3>
public class NavigationController implements Serializable { <h:commandButton action =
public String moveToPage1() { return "page1"; } "#{navigationController.moveToPage1}" value = "Page2" />
} </h:form>

03.06.2021
Navigation entre les pages

• Navigation Conditionnelle
@ManagedBean(name = "navigationController", eager = true)
@RequestScoped
Quand on clique sur le premier bouton (Page1),
public class NavigationController implements Serializable { JSF va créer une requête avec le paramètre
@ManagedProperty(value = "#{param.pageId}")
private String pageId; « pageId=1 ». La valeur de ce paramètre va être
public String showPage() { affectée à l’attribut « pageId » du Managed Bean
if(pageId == null) { return "home"; }
if(pageId.equals("1")) { return "page1"; } « Navigation Controller ». Ainsi la méthode
else if(pageId.equals("2")) { return "page2"; }
else { return "home"; }
« showPage » va être exécutée et va retourner la
} vue « Page1.xhtml »
}

<h:form>
<h:commandLink action = "#{navigationController.showPage}" value = "Page1">
<f:param name = "pageId" value = "1" />
</h:commandLink>
<h:commandLink action = "#{navigationController.showPage}" value = "Page2">
<f:param name = "pageId" value = "2" />
</h:commandLink>
<h:commandLink action = "#{navigationController.showPage}" value = "Home">
<f:param name = "pageId" value = "3" />
</h:commandLink>
</h:form>

03.06.2021
 Navigation entre les pages

• Navigation basée sur le « form-action »

<navigation-rule>
<from-view-id>home.xhtml</from-view-id> faces-config.xml
Managed Bean
<navigation-case> « NavigationController »
<from-action>#{navigationController.processPage1}</from-action>
<from-outcome>page</from-outcome> public String processPage1()
<to-view-id>page1.jsf</to-view-id> { return "page"; }
</navigation-case>
public String processPage2()
{ return "page"; }
<navigation-case>
<from-action>#{navigationController.processPage2}</from-action>
<from-outcome>page</from-outcome>
<to-view-id>page2.jsf</to-view-id>
</navigation-case>

</navigation-rule>

Quand on clique sur le premier bouton (Page1), JSF va appeler la méthode « processPage1 » qui va retourner la
vue page. JSF résoudra le nom de la vue en « page1 » suivant le fichier « faces-config.xml ». Et pour terminer il
va essayer de trouver le fichier « page1.xhtml » dans le répertoire actuel.
03.06.2021
Navigation entre les pages

• Navigation basée sur le « form-action »

pom.xml
<dependency>
Notez bien qu’il faut ajouter la dépendance suivante pour que
<groupId>javax.enterprise</groupId>
la navigation puisse être réalisé sans erreur.
<artifactId>cdi-api</artifactId>
Il ne faut pas oublier de mettre à jour le projet après chaque
<version>1.2</version>
ajout d’une dépendance.
</dependency>

03.06.2021
Navigation entre les pages

• Forward vs Redirect

JSF par défaut effectue un transfert de page de serveur (forward) lors de la navigation vers
une autre page et l'URL de l'application ne change pas.

Pour activer la redirection de page (Redirect), ajoutez « faces-redirect = true » à la fin du nom
de la vue.
<h:form>
<h3>Forward</h3>
<h:commandButton action = "page1" value = "Page1" />
<h3>Redirect</h3>
<h:commandButton action = "page1?faces-redirect = true" value = "Page1" />
</h:form>

03.06.2021
 Tags JSF
• Basic Tags (h:…)
JSF fournit une bibliothèque de balises HTML standard. Ces balises sont transformées aux balises
HTML correspondantes. Pour ces balises, vous devez utiliser les espaces de noms suivants de l'URI
dans le nœud html. <html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:h = "http://java.sun.com/jsf/html">

Tag Résultat Tag Résultat

h:inputText Input de type « text » h:outputText Un text simple
h:inputSecret Input de type « password » h:graphicImage image
h:inputTextarea textarea h:Link <a href=«page» …
h:inputHidden Input de type « hidden » h:selectOneRadio Un bouton radio
h:selectBooleanCheckbox Un checkbox h:selectOneListbox Une liste de boutons radio
h:selectManyCheckbox Un groupe de Checkbox h:selectManyListbox Plusieurs listes de boutons radio
h:commandButton Input de type « submit » … …
Tags JSF
• Facelets Tags (ui:…)
JSF fournit des balises spéciales pour créer une mise en page commune pour une application Web
appelée balises facelets. Ces balises offrent la flexibilité de gérer les parties communes de
plusieurs pages en un seul endroit.
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:ui = "http://java.sun.com/jsf/facelets">

Tag Résultat
Templates:
• <ui:insert
Permet de créer une template pour
• <ui:define
l’application Web
• <ui:include
• <ui:composition
Paramètres: Sert à passer en paramètre à une page de
• <ui:param template
Personalisé On peut créer des tags personalisés
Tags JSF
• Validator Tags
JSF fournit des validateurs intégrés pour valider ses composants d'interface utilisateur. Ces
balises permettent de valider la longueur du champ, le type d'entrée qui peut être un objet
personnalisé.
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:f = "http://java.sun.com/jsf/core">

Tag
f:validateRegex
f:validateDoubleRange
f:validateLongRange
f:validateLength
Validateur Personnalisé
Résultat
Valide un champ JSF avec une expression
régulière
Valide l’intervalle d’une valeur réel
Valide l’intervalle d’une valeur numérique
Valide la taille d’une chaine de caractère
Créer son propre validateur personnalisé
Tags JSF
• Datatable

JSF fournit un contrôle riche nommé DataTable pour rendre et mettre en forme des tables html.

 DataTable peut parcourir une collection ou un tableau de valeurs pour afficher des données.

 DataTable fournit des attributs pour modifier ses données de manière simple.

Tag Résultat
h:dataTable Insérer une table HTML
h:column Ajouter une colonne au tableau
Définir l’entête (header) et le pied
f:facet
(footer) du tableau
f:validateLength Valide la taille d’une chaine de caractère
Validateur Personnalisé Créer son propre validateur personnalisé
Tags JSF
• Datatable - Exemple
Index.xhtml
<h:body>
<h2><h:outputText value="Product List"></h:outputText></h2>
<h:dataTable value="#{produit.productList}" var="p">
<h:column>
<f:facet name="header">ID</f:facet>
<h:outputText value="#{p.id}"/>
</h:column>
<h:column>
<f:facet name="header">Name</f:facet>
<h:outputText value="#{p.name}"/>
</h:column>
<h:column>
<f:facet name="header">Price</f:facet>
<h:outputText value="#{p.price}"/>
</h:column>
</h:dataTable>
</h:body>
 Tags JSF
• Datatable - Exemple

ProduitDataTable.java

@ManagedBean(name = "produit")
@RequestScoped
public class ProduitDataTable {
Produit.java
public List<Produit> productsList;
public class Produit {
public List<Produit> getProduitList() {
private final int id;
productsList = new ArrayList<>();
private final String name;
productsList.add(new Produit(1,"HP Laptop",25000f));
private final float price;
productsList.add(new Produit(2,"Dell Laptop",30000f));
// Constructeur avec argument
productsList.add(new Produit(3,"Lenevo Laptop",28000f));
// Getters & Setters
productsList.add(new Produit(4,"Sony Laptop",28000f));
}
productsList.add(new Produit(5,"Apple Laptop",90000f));
return productsList;
}
}
 Tags JSF
• Message <h:form id="form">
<h:outputLabel for="username">User Name</h:outputLabel>
<h:inputText id="name-id" value="#{user.name}"/>
Il est utilisé pour afficher un seul <h:message for="name-id" style="color: red"/>
message pour un composant <br/>
<h:outputLabel for="mobile">Mobile No.</h:outputLabel>
particulier. Vous pouvez afficher <h:inputText id="mobile-id" value="#{user.mobile}"/>
votre message personnalisé en <h:message for="mobile-id" style="color: red"/>
passant l'ID de ce composant dans <br/>
l'attribut for. <h:commandButton value="OK" action="response.xhtml"></h:commandButton>
</h:form>

@ManagedBean
@RequestScoped
public class User{
@NotNull(message = "Name can't be empty")
<dependency>
String name;
<groupId>javax.validation</groupId>
<artifactId>validation-api</artifactId> @NotNull(message = "Mobile can't be empty")
<version>1.0.0.GA</version> @Size(min = 10, max = 10, message = "Mobile must have 10 digits")
</dependency> String mobile;
public String getName() { return name; }
public void setName(String name) { this.name = name; }
public String getMobile() { return mobile; }
public void setMobile(String mob) { this.mobile = mob; }
}
 Tags JSF
• Validation

La technologie JavaServer Faces fournit un ensemble de classes standard et de balises associées que
vous pouvez utiliser pour valider les données des éléments.

 <f:validateBean>

Il est utilisé pour enregistrer un validateur de bean dans le composant. Pour valider le modèle de bean,
vous devez définir le paramètre de contexte dans le fichier descripteur de déploiement Web web.xml.
Exemple :
<context-param>
<param-name>
javax.faces.INTERPRET_EMPTY_STRING_SUBMITTED_VALUES_AS_NULL
</param-name>
<param-value>true</param-value>
</context-param>

Cette valeur de paramètre permet à l'implémentation JavaServer Faces de traiter les chaînes vides
comme nulles.
 Tags JSF
• Validation

La technologie JavaServer Faces fournit un ensemble de classes standard et de balises associées que
vous pouvez utiliser pour valider les données des éléments.

 <f:validateBean>

@Null
@NotNull
@Size
@Digits
@DecimalMin
@DecimalMax
@Pattern
…
 Tags JSF
• Validation

La technologie JavaServer Faces fournit un ensemble de classes standard et de balises associées que
vous pouvez utiliser pour valider les données des éléments.

 <f:validateDoubleRange>

Il est utilisé pour tester si une valeur donnée en input est entre l’interval « minimum » et « maximum ».
Exemple :

<f:validateDoubleRange minimum="1000.50" maximum="5000.99"/>

 <f:validateLength>

Il est utilisé pour tester si la taille d’une valeur donnée en input est entre l’interval « minimum » et
« maximum ». Exemple :

<f:validateLength minimum="1" maximum="5"/>

 Tags JSF
• Validation

La technologie JavaServer Faces fournit un ensemble de classes standard et de balises associées que
vous pouvez utiliser pour valider les données des éléments.

 <f:validateLongRange>

Il est utilisé pour vérifier si la valeur d'un composant est dans une certaine plage ou non. La valeur doit
être n'importe quel type numérique ou chaîne qui peut être converti en long.. Exemple :

<f:validateLongRange minimum="1000" maximum="5000"/>

 <f:validateRegex>

Il est utilisé pour tester si la valeur d'un composant est vérifie une expression régulière.
Exemple :

<f:validateLength pattern="1" maximum="^([a-zA-Z]+(.)?[\s]*)$"/>

 Tags JSF
• Validation

La technologie JavaServer Faces fournit un ensemble de classes standard et de balises associées que
vous pouvez utiliser pour valider les données des éléments.

 <f:validateRequired>

Il est utilisé pour vérifier si la valeur d'un composant est dans une certaine plage ou non. La valeur doit
être n'importe quel type numérique ou chaîne qui peut être converti en long.. Exemple :

<f:validateRequired />
 JSF et l’utilisation de Template

Les templates dans une application Web définissent une mise en page et un style d'interface communs.
Par exemple, une même bannière, un logo dans un en-tête commun et des informations de copyright dans
le pied de page. JSF fournit les balises facelet suivantes pour fournir une mise en page d'interface Web
standard

 <ui:insert> : Utilisée dans le fichier template. Il définit le contenu à placer dans une template.
la balise <ui:define> peut remplacer son contenu.

 <ui:define> : Définit le contenu à inserer dans la template.

 <ui:include> : insert le contenu d’un fichier xhtml dans un autre.

 <ui:composition> : Charge la template en utilisant l’attribut template.

 JSF et l’utilisation de Template
Exemple :
template.xhtml

<div id="header">
<ui:insert name="header"> Header area. </ui:insert>
</div>
<div id="content">
<ui:insert name="content"> Content area. </ui:insert>
</div>
<div id="footer">
<ui:insert name="footer"> Footer area. </ui:insert>
</div>

file.xhtml

<ui:composition template="template.xhtml">
<ui:define name="header"> header in File </ui:define>
<ui:define name="content"> content in File </ui:define>
</ui:composition>
 JSF Converters

• Le JavaServer Faces fournit un ensemble de convertisseurs. Vous pouvez l'utiliser pour convertir les
données des composants.

• Le but de la conversion est de prendre les données basées sur des chaînes de l'API Servlet et de les
convertir en objets Java.

• Le package javax.faces.convert contient tous les convertisseurs standard. Les convertisseurs sont
attribués implicitement en fonction du type de l'expression EL pointée par la valeur du composant.

• Vous pouvez également accéder à ces convertisseurs en utilisant l’ID du convertisseur.

• Exemple :

o BigDecimalConverter (ID = javax.faces.BigDecimal)

o DateTimeConverter (ID = javax.faces.Datetime)

o NumberConverter (ID = javax.faces.Number)

o IntegerConverter (ID = javax.faces.Integer)

 JSF Converters

• Exemple d’application du convertisseur : DateTimeConverter

index.xhtml

<h:form>
<h:inputText value="#{user.date}" converterMessage="Le format de la date n’est pas valide">
<f:convertDateTime pattern="dd/mm/yyyy" />
</h:inputText>
<h:commandButton action=“page2" value="Submit"/>
</h:form>

page2.xhtml
<h:outputText value="#{user.date}">
<f:convertDateTime pattern="dd/mm/yyyy"/>
</h:outputText>
 Chapitre Suivant

Le framework Spring

03.06.2021