JSF
JAVA SERVER FACES
JS
F
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.
JSF est un Framework orienté
composants
Son développement a tenu en
compte des différentes expériences
acquises lors de l’utilisation des
technologies standards pour le
développement d’applications web
◦ Servlet, JSP, JSTL
JS
F
L’objectif de JSF est de :
◦ fournir un standard JEE spécifié
dans une JSR pour le développement
des IHM web riches
◦Maximiser la productivité des
applications web
◦ Fournir des fonctionnalités
récurrentes et avancées
(Validations, Conversion, Ajax …)
◦ Masquer la complexité
Historiqu
e
Architectur
e
Web Container EJB ou Spring SGBD :
Container MYSQL
[Link]
Faces-
Couche Couche DAO
[Link] Métier
Model
ManagedBea
n
[Link]
f
FacesSevle
t
Controller
HTTP
HTML
Client
HTTP
Cycle de vie
Requêt Répons
e e
Render
Restore
Respons
view
e
Apply Invoke
Request Application
Value Logic
Perform Synchroniz
validation e Model
s
Cycle de vie
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.
Cycle de vie
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 leur composant
respectif dans le FaceContext.
◦ Durant cette phase des opérations de
conversions sont réalisées pour
permettre de transformer les valeurs
stockées sous forme de chaîne de
caractères dans la requête http en un
type utilisé pour le stockage des
données.
Cycle de vie
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 FaceContext.
◦ Dans ce cas, l'étape suivante est
directement
« Render Response » pour permettre de
réafficher la page avec les valeurs saisies
Cycle de vie
Synchronize Model ou update
model values :
◦ Cette étape permet de stocker dans
les composants du FaceContext leur
valeur olca
el validée respective.
◦ Les éventuelles erreurs de
conversions sont stockées dans le
FaceContext.
◦ Dans ce cas, l'étape suivante est
directement
« Render Response » pour permettre de
réafficher la page avec les valeurs saisies
et ca
hffi
erles erreurs
Cycle de vie
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 qu
e
e
ll sera la page résultat
qui sera renvoyée dans la réponse en
utilisant les règles de navigation définie
dans l'application.
◦ L'arborescence des composants de
cette pa
g
e est créée.
Render Response :
◦ Cette étape se charge de créer le rendue
de a
l page de la réponse.
[Link]
<servlet> l
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>[Link]</servlet-
class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
Maven dependencies :
[Link]
<dependency>
<groupId>[Link]</groupId>
<artifactId>jsf-api</artifactId>
<version>2.2.1</version>
</dependency>
<dependency>
<groupId>[Link]</groupId>
<artifactId>jsf-impl</artifactId>
<version>2.2.1</version>
</dependency>
Maven dependencies :
[Link]
<dependency>
<groupId>[Link]</groupId>
<artifactId>richfaces-components-api</
artifactId>
<version>[Link]</version>
</dependency>
<dependency>
<groupId>[Link]</groupId>
<artifactId>richfaces-components-ui</
artifactId>
<version>[Link]</version>
</dependency>
Maven dependencies :
[Link]
<dependency>
<groupId>[Link]</groupId>
<artifactId>richfaces-core-api</artifactId>
<version>[Link]</version>
</dependency>
<dependency>
<groupId>[Link]</groupId>
<artifactId>richfaces-core-impl</artifactId>
<version>[Link]</version>
</dependency>
faces-
[Link]
<?xml version="1.0" encoding="UTF-8"?>
<faces-config
xmlns="[Link]
xmlns:xsi="
[Link]
xsi:schemaLocation="
[Link]
[Link]
2_2.xsd
"
version="2.2">
</faces-config>
Exemple de Managed
Bean
package [Link];
import [Link]; import
[Link]; import
[Link];
@ManagedBean(name="contactBean")
@RequestScoped
public class ContactBean
{ private String nom;
private Date
dateNaissance;
public String
saveContact(){
// Traitement
[Link](nom);
[Link](dateNaissanc
e); return "success";
}
// Getters et Setters
}
Exemple de vue JSF :
[Link]
<!DOCTYPE html>
<html xmlns="[Link] xmlns:f="
[Link] xmlns:h="[Link]
xmlns:r="[Link]
<h:head>
<meta charset="UTF-8"/>
<title>Contact</title>
</h:head>
<h:body>
<f:view>
Exemple de vue JSF :
<h:form>
[Link]
<h:panelGrid columns="3">
<h:outputText value="Nom:"/>
<h:inputText id="nom" value="#{[Link]}"
label="Nom:">
<f:validateLength minimum="4" maximum="12"/>
</h:inputText>
<h:message for="nom" errorStyle="color:red"/>
<h:outputText value="Date Inscription:"/>
<r:calendar id="dateNaissance"
value="#{[Link]}"
popup="true" cellWidth="24px" cellHeight="22px"
style="width:200px"/>
<h:message for="dateNaissance" errorStyle="color:red"/>
<h:commandButton action="#{[Link]}"
value="Save"/>
</h:panelGrid>
</h:form>
</f:view>
</h:body>
</html>
Les Composants
S
JCoté
F Coté
Client Serveur
View
Form
GridPanel
Panel
OutputText
InputText
Message
Panel
INTÉGRATION AVEC
SPRING
Applicatio
n 1porduti est défini par sa référence (de type String), sa désignation,
On souhaite créer une application qui permet de gérer des produits.
Chaque
son prix et sa quantité. L’application doit permettre les opérations
suivantes :
◦ Ajouter un nouveau produit
◦ Consulter tous les produits
◦ Consulter les produits dont le nom contient un mot clé.
◦ Consulter un produit
◦ Supprimer un produit
◦ Mettre à jour un produit.
Cette application se compose de trois couches DAO, Métier et
Présentation.
Elle doit être fermée à la modification et ouverte à l’extension.
L’injection des dépendances sera effectuée en utilisant Spring IOC.
Nous allons définir deux implémentations de la couche DAO.
◦ Une implémentation qui gère les produits qui sont stockés dans
une silte de type HashMap.
◦ Dans la deuxième implémentation, nous allons supposer que les
produits sont stockés dans une base de données de type MySQL.
Gestion des produits
Installation du plugin :
spring ots
ol pour eclipse
Installation du plugin :
spring ots
ol pour eclipse
Création d’un projet
Sp
n
rig
Création d’un projet
Sp
n
rig
Structure du projet
Dépendances
Architecture
technique
Web Container Spring IOC
Container ContextLoaderListner dependencie
[Link] s
Sprin
l g
aapplicationContext.x Couche Métier Couche DAO Hibernate
ml -
Faces- validator
Produit
[Link]
[Link]
l ICatMetier
ICatDAO
CatalManagedBea
n
CatMetierImpl CatDAOImpl
FacesSevle
t
HTTP
HTML
Client
HTTP
Maven dependencies :
Sprn
ig
[Link]
<properties>
<java-version>1.6</java-version>
<[Link]-
version> [Link]
</[Link]-
version>
<[Link]-
version>1.6.10</
[Link]-version>
<org.slf4j-version>1.6.6</
org.slf4j-version>
</properties>
Maven
Dependencies
<!-- Spring -->
<dependency>
<groupId>[Link]</groupId>
<artifactId>spring-context</artifactId>
<version>${[Link]-version}</version>
<exclusions>
<!-- Exclude Commons Logging in favor of
SLF4j -->
<exclusion>
<groupId>commons-logging</groupId>
<artifactId>commons-logging</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>[Link]</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${[Link]-version}</version>
</dependency>
Maven
Dependencies
<!-- AspectJ -->
<dependency>
<groupId>[Link]</groupId>
<artifactId>aspectjrt</artifactId>
<version>${[Link]-version}</
version>
</dependency>
<!-- Logging -->
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-api</artifactId>
<version>${org.slf4j-version}</
version>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>jcl-over-slf4j</
artifactId>
<version>${org.slf4j-version}</
version>
<scope>runtime</scope>
</dependency>
<dependency>
<scope>runtime</
<groupId>org.slf4j</groupId>
scope>
<artifactId>slf4j-log4j12</artifactId>
</dependency>
<version>${org.slf4j-version}</
version>
Maven
Dependencies
<dependency>
<groupId>log4j</groupId>
<artifactId>log4j</artifactId>
<version>1.2.15</version>
<exclusions>
<exclusion>
<groupId>[Link]</groupId>
<artifactId>mail</artifactId>
</exclusion>
<exclusion>
<groupId>[Link]</groupId>
<artifactId>jms</artifactId>
</exclusion>
<exclusion>
<groupId>[Link]</
groupId>
<artifactId>jmxtools</
artifactId>
</exclusion>
<exclusion>
<groupId>[Link]</groupId>
<artifactId>jmxri</artifactId>
</exclusion>
<scope>runtime</
scope></exclusions>
</dependency>
Maven
Dependencies
<!-- @Inject -->
<dependency>
<groupId>[Link]</groupId>
<artifactId>[Link]</
artifactId>
<version>1</version>
</dependency>
<!-- Servlet -->
<dependency>
<groupId>[Link]</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>[Link]</
groupId>
<artifactId>jsp-api</artifactId>
<version>2.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>[Link]</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
Maven
Dependencies
<!-- Test -->
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.7</version>
<scope>test</scope>
</dependency>
<!-- Hibernate Validator -->
<dependency>
<groupId>[Link]</groupId>
<artifactId>hibernate-validator</
artifactId>
<version>[Link]</version>
</dependency>
<dependency>
<groupId>[Link]</groupId>
<artifactId>validation-api</artifactId>
<version>[Link]</version>
</dependency>
Maven
Dependencies
<!-- JSF -->
<dependency>
<groupId>[Link]</
groupId>
<artifactId>jsf-api</
artifactId>
<version>2.2.1</version>
</dependency>
<dependency>
<groupId>[Link]</
groupId>
<artifactId>jsf-impl</
artifactId>
<version>2.2.1</version>
</dependency>
COUCHE DAO
Entité
Produit
package
[Link]; import
[Link];
import
[Link];
import [Link];
import
[Link];
public class Produit implementsSerializable
{ @NotEmpty
@Size(min=4,max=12)
private String
reference;
@NotEmpty
private String
designation;
@DecimalMin(value="100")
private double
Interface
ICatalogueDAO
package
[Link];
import [Link];
public interface ICatalogueDAO {
public void
addProduit(Produit p);
public List<Produit>
getAllProduits(); public
List<Produit>getProduits(String mc);
public Produit getProduit(String
reference); public void
deleteProduit(String refernce); public
void updateProduit(Produit p);
}
Implémentation
CatalogueDAOImpl
package
[Link];
import [Link].*;
import
[Link];
public class
CatalogueDaoImpl
implements
ICatalogueDAO {
private Map<String, Produit> produits=new HashMap<String,
Produit>(); Logger
logger=[Link]([Link]);
@Override
public void addProduit(Produit p)
{ [Link]([Link]()
, p);
}
@Override
public List<Produit> getAllProduits()
{ Collection<Produit>
prods=[Link](); return new
Implémentation
CatalogueDAOImpl
@Override
public List<Produit> getProduits(String mc)
{ List<Produit> prods=new
ArrayList<Produit>(); for(Produit
p:[Link]())
if([Link]().indexOf(mc)>
=0) [Link](p);
return prods;
}
@Override
public Produit getProduit(String
reference) { return
[Link](reference);
}
@Override
public void deleteProduit(String
refernce) { [Link](refernce);
}
Implémentation
CatalogueDAOImpl
@Override
public void updateProduit(Produit
p)
{ [Link]([Link](),p
);
}
public void init()
{ [Link]("Initialisation du
catalogue");
[Link](new Produit("HP675","Ordinateur HP", 8000,
5)); [Link](new Produit("AEP65","Impriomante
AE",760, 80)); [Link](new Produit("AT980","Smart
Phone GT", 4500, 8));
}
}
COUCHE METIER
Interface
IcatalogueMetier
package
[Link];
import [Link];
import
[Link];
public interfaceICatalogueMetier
{
public void addProduit(Produit
p); public List<Produit>
getAllProduits();
public List<Produit>
getProduits(String mc); public Produit
getProduit(String
reference); public void
deleteProduit(String refernce); public
void updateProduit(Produit p);
}
Implémentation
packageCatalogueMetierImpl
[Link];
import [Link]; import
[Link]; import
[Link];
public class CatalogueMetierImpl implements
ICatalogueMetier { private ICatalogueDAO dao;
/*Setter setDao pour l'injection*/
public void setDao(ICatalogueDAO
dao) { [Link] =
dao;
}
@Override
public void addProduit(Produit p) {
[Link](p);
}
@Override
public List<Produit>
getAllProduits() { return
Implémentation
CatalogueMetierImpl
@Override
public List<Produit> getProduits(String
mc) { return [Link](mc);
}
@Override
public Produit getProduit(String
reference) { return
[Link](reference);
}
@Override
public void deleteProduit(String
refernce) {
[Link](refernce);
}
@Override
public void updateProduit(Produit p) {
[Link](p);
}
INJECTION DES
DEPENDANCES
[Link]
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="[Link]
xmlns:xsi="[Link]
xsi:schemaLocation="
[Link]
[Link]
.xsd
">
<bean id="dao"
class="[Link]" init-
method="init"></bean>
<bean id="metier"
class="[Link]">
<property name="dao" ref="dao"></property>
</bean>
</beans>
COUCHE WEB
web.x
ml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="
[Link] xmlns:xsi="
[Link]
xsi:schemaLocation="[Link]
[Link] and Filters --
<!-- The definition of the Root Spring Container shared by >
all Servlets
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath*:[Link]</
param-value>
</context-param>
<listener-class>[Link]</listener-
<!-- Creates the Spring Container shared by all Servlets and
class>
Filters -->
</listener>
<listener>
web.x
ml
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>[Link]</servlet-
class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
</web-
app>
faces-
[Link]
<?xml version="1.0" encoding="UTF-8"?>
<faces-config
xmlns="[Link]
xmlns:xsi="
[Link]
xsi:schemaLocation="
[Link]
[Link]
2_2.xsd
"
version="2.2">
<application>
<el-resolver>
[Link]
ELResolver
</el-resolver>
</application>
</faces-config>
JSF
package
ManagedBean
[Link];
impor [Link];import [Link].*;import
t [Link]; [Link];
impor [Link];
t [Link];
impor
@Component
t
@ManagedBean
impor
@RequestScope
t
d
public class
CatalogueMB
{
private Produit produit=new
Produit(); @Autowired
private ICatalogueMetier metier;
public List<Produit>
getListProduits(){
return [Link]();
}
}
public String saveProduit()
{ [Link](produ
JSF
{
ManagedBean
public StringdeleteProduit(String ref)
[Link](ref);
return "sucess";
}
public String editProduit(String
ref)
{ if([Link](ref)!
=null)
produit=[Link](ref);
return "sucess ";
}
// Getters et Setters
public Produit
getProduit() { return
produit;
}
public void setProduit(Produit
Page JSF :
[Link]
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
[Link]
">
<html xmlns="[Link] xmlns:f="
[Link] xmlns:h="[Link]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link type="text/css"
<title>Insert title
rel="stylesheet" here</title>
href="resources/css/[Link]"></link>
</head>
<body>
Page JSF :
<h:form>
<div> [Link]
<h:panelGrid columns="3">
<f:validateBean>
<h:outputText value="REF"></h:outputText>
<h:inputText id="reference" value="#{[Link]}">
</h:inputText>
<h:message for="reference" errorClass="errors"></h:message>
<h:outputText value="DESIGNATION"></h:outputText>
<h:inputText id="designation"
value="#{[Link]}"/>
<h:message for="designation" errorClass="errors"></h:message>
<h:outputText value="PRIX"></h:outputText>
<h:inputText id="prix" value="#{[Link]}"/>
<h:message for="prix" errorClass="errors"></h:message>
<h:outputText value="QUANTITE"></h:outputText>
<h:inputText id="quantite" value="#{[Link]}"/>
<h:message for="quantite" errorClass="errors"></h:message>
<h:commandButton value="Save" action="#{[Link]}"/>
</f:validateBean>
</</h:panelGrid>
div>
Page JSF :
<div>
<h:dataTable [Link] var="p class="table1"
value="#{[Link]}" " >
<h:column>
<f:facet name="header">
<h:outputText value="REF"/>
</f:facet>
<h:outputText value="#{[Link]}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="DESIGNATION"/>
</f:facet>
<h:outputText value="#{[Link]}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="PRIX"/>
</f:facet>
<h:outputText value="#{[Link]}"/>
</h:column>
Page JSF :
<h:column>
[Link]
<f:facet name="header">
<h:outputText
value="QUANTITE"></h:outputText>
</f:facet>
<h:outputTex value="#{[Link]}"></
t h:outputText>
</h:column>
<h:column> action="#{[Link]([Link] value="Supp"/
<h:commandLin e)}" >
k
</h:column>
action="#{[Link]([Link])}"
<h:column> value="Edit"/>
<h:commandLin
k
</h:column>
</h:dataTable>
</div>
</h:form>
</body>
</html>
