TP3 – JSF (Java Server Faces)
– DSI 2.1
Introduction
Ce TP a pour objectif d’apprendre le développement d’applications web avec le framework Jakarta
Faces (JSF).
JSF est un framework Java utilisé pour créer des applications web dynamiques basées sur le modèle
MVC (Model View Controller).
Dans ce TP, nous allons :
• créer un projet JSF
• utiliser les CDI Beans
• manipuler les pages XHTML
• gérer la navigation entre pages
• créer une application calculatrice
• utiliser un EJB avec injection de dépendance
Partie 1 : Structure d’un projet Java EE
Définition
Une application Java EE est une application web basée sur Java qui s’exécute sur un serveur comme
WildFly.
Elle contient :
• Pages web (XHTML)
• Classes Java (Beans, EJB)
• Fichier de configuration ([Link])
• Librairies (JAR)
• )
Partie 2 : Framework JSF
Définition JSF
JSF (Jakarta Server Faces) est un framework Java qui permet de créer des interfaces web côté
serveur.
Il suit le modèle MVC :
• Model → Beans Java
• View → pages XHTML
• Controller → FacesServlet
FacesServlet
Définition
C’est le contrôleur principal de JSF.
Il reçoit toutes les requêtes et les envoie vers les bonnes pages.
Code [Link]
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>[Link]</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
Explication
Ce code signifie :
• toutes les pages .xhtml passent par JSF
• FacesServlet gère le traitement
• il applique MVC automatiquement
Partie 3 : Facelets (XHTML)
Définition
Facelets est la technologie utilisée pour créer les pages JSF avec XHTML.
Exemple page simple
<html xmlns="[Link]
xmlns:h="[Link]
<h:head>
<title>Exemple JSF</title>
</h:head>
<h:body>
Bienvenue JSF
</h:body>
</html>
Explication
On utilise :
• h: → composants JSF
• XHTML → structure HTML améliorée
• EL → expression Java #{}
Partie 4 : CDI Bean (Model)
Définition
Un Bean CDI est une classe Java qui contient :
• données
• logique métier
• communication avec la vue
Conditions :
• classe publique
• constructeur vide
• annotation @Named
• scope (SessionScoped...)
Exemple BonjourBean
package [Link];
import [Link];
import [Link];
import [Link];
@Named("bonjourBean")
@SessionScoped
public class BonjourBean implements Serializable {
/**
*/
private static final long serialVersionUID = 1L;
private String nom;
private String prenom;
public BonjourBean() {}
public String sayHello() {
if(nom == null || [Link]().isEmpty()) {
return null;
return "[Link]?faces-redirect=true";
// getters setters
public String getNom() {
return nom;
public void setNom(String nom) {
[Link] = nom;
public String getPrenom() {
return prenom;
public void setPrenom(String prenom) {
[Link] = prenom;
Explication détaillée
Ce Bean fait :
1. stocke nom + prénom
2. vérifie si nom vide
3. redirige vers page Hello
4. sinon reste sur index
Partie 5 : [Link]
<!DOCTYPE html>
<html xmlns="[Link]
xmlns:h="[Link]
<h:head>
<title>Index</title>
</h:head>
<h:body>
<h:form>
Nom :
<h:inputText value="#{[Link]}" />
<br/>
Prénom :
<h:inputText value="#{[Link]}" />
<br/>
<h:commandButton value="Dire Bonjour"
action="#{[Link]()}" />
</h:form>
</h:body>
</html>
Explication
• inputText → saisie utilisateur
• value="#{...}" → liaison avec Bean
• commandButton → action JSF
• sayHello() → méthode exécutée
Partie 6 : [Link]
<h:form>
Bonjour #{[Link]} #{[Link]}
</h:form>
Explication
JSF affiche les données stockées dans le Bean :
• nom
• prénom
Travail demandé
1. Vérification champ nom
Code :
if(nom == null || [Link]()) {
return null;
}
Explication :
• si champ vide → on reste sur index
• sinon → navigation vers Hello
2. faces-redirect=true
Définition
Permet une vraie redirection HTTP.
Explication
• avec → nouvelle URL affichée
• sans → même URL reste
3. Scopes CDI
Scope Explication
Request perdu après requête
Session reste utilisateur
Application partagé global
Scope Explication
View reste même page
4. Ajout prénom
Ajout :
• variable prénom
• inputText
• affichage Hello
5. méthode void
code :
public void sayHello() {}
résultat :
• pas de navigation
• reste dans même page
• affichage manuel
Partie 7 : Calculatrice JSF
Bean CalculBean
@Named
@SessionScoped
public class CalculBean implements Serializable {
private double a;
private double b;
private double result;
public void add() { result = a + b; }
public void sub() { result = a - b; }
public void mul() { result = a * b; }
public void div() { result = (b != 0) ? a / b : 0; }
}
[Link]
<h:form>
<h:inputText value="#{calculBean.a}" />
<h:inputText value="#{calculBean.b}" />
<h:commandButton value="+" action="#{[Link]}" />
<h:commandButton value="-" action="#{[Link]}" />
<h:commandButton value="*" action="#{[Link]}" />
<h:commandButton value="/" action="#{[Link]}" />
Résultat : #{[Link]}
</h:form>
Explication
• user entre 2 nombres
• clique opération
• JSF appelle Bean
• résultat affiché
Partie 8 : Intégration EJB
Définition
EJB = composant Java pour logique métier côté serveur.
Injection
@EJB
private CalculBeanRemote calculBean;
Explication
• injection automatique
• pas besoin JNDI
• serveur gère instance
Utilisation
public void addition() {
result = [Link](a, b);
}
Ce TP nous a permis de comprendre :
• architecture JSF (MVC)
• CDI Beans
• Facelets (XHTML)
• navigation entre pages
• scopes JSF
• création d’application web
• intégration d’EJB
JSF simplifie le développement web Java en séparant clairement les responsabilité