SlideShare una empresa de Scribd logo
1 de 59
Descargar para leer sin conexión
JSFJSF
JAVAJAVA SERVER FACESSERVER FACES
MohamedYoussfi
med@youssfi.net
MohamedYoussfi
med@youssfi.net
ENSET, Université Hassan II Mohammedia Casablanca
med@youssfi.net
JSFJSF
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 desSon 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
◦ et de différents frameworks (Struts, Spring MVC).
med@youssfi.net
JSFJSF
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 …)
Fournir des fonctionnalités récurrentes et
avancées (Validations, Conversion, Ajax …)
◦ Masquer la complexité
med@youssfi.net
HistoriqueHistorique
med@youssfi.net
ArchitectureArchitecture
Web Container EJB ou Spring Container
Couche Métier Couche DAO
Model
ManagedBean
Vue.jsf
web.xml
Faces-config.xml
SGBD :
MYSQL
Client HTTP
FacesSevlet
Controller
Vue.jsf
HTTP
HTML
Cycle de vieCycle de vie
Requête
Restore view
RenderRender
Response
Réponse
med@youssfi.net
Apply
RequestValue
Apply
RequestValue
Perform
validations
Perform
validations
Synchronize
Model
Synchronize
Model
Invoke
Application Logic
ResponseResponse
Cycle de vieCycle 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.
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.
med@youssfi.net
Cycle de vieCycle de vie
Apply RequestValue :
◦ 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.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.
med@youssfi.net
Cycle de vieCycle 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.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 et afficher les erreurs
med@youssfi.net
Cycle de vieCycle de vie
Synchronize Model ou update model values :
◦ Cette étape permet de stocker dans les
composants du FaceContext leur valeur locale
validée respective.
◦ Les éventuelles erreurs de conversions sont◦ 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 afficher
les erreurs
med@youssfi.net
Cycle de vieCycle 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 quelle
sera la page résultat qui sera renvoyée dans la
réponse en utilisant les règles de navigation définieréponse en utilisant les règles de navigation définie
dans l'application.
◦ L'arborescence des composants de cette page est
créée.
Render Response :
◦ Cette étape se charge de créer le rendue de la page
de la réponse.
med@youssfi.net
Web.xmlWeb.xml
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping><servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
med@youssfi.net
MavenMaven dependenciesdependencies : pom.xml: pom.xml
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-api</artifactId>
<version>2.2.1</version>
</dependency>
<dependency><dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-impl</artifactId>
<version>2.2.1</version>
</dependency>
med@youssfi.net
MavenMaven dependenciesdependencies : pom.xml: pom.xml
<dependency>
<groupId>org.richfaces.ui</groupId>
<artifactId>richfaces-components-api</artifactId>
<version>4.2.2.Final</version>
</dependency>
<dependency><dependency>
<groupId>org.richfaces.ui</groupId>
<artifactId>richfaces-components-ui</artifactId>
<version>4.2.2.Final</version>
</dependency>
med@youssfi.net
MavenMaven dependenciesdependencies : pom.xml: pom.xml
<dependency>
<groupId>org.richfaces.core</groupId>
<artifactId>richfaces-core-api</artifactId>
<version>4.2.2.Final</version>
</dependency>
<dependency><dependency>
<groupId>org.richfaces.core</groupId>
<artifactId>richfaces-core-impl</artifactId>
<version>4.2.2.Final</version>
</dependency>
med@youssfi.net
facesfaces--config.xmlconfig.xml
<?xml version="1.0" encoding="UTF-8"?>
<faces-config
xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaeexsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd"
version="2.2">
</faces-config>
med@youssfi.net
Exemple deExemple de ManagedManaged BeanBean
package org.miage.sid.jsfmb;
import java.util.Date; import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean(name="contactBean")
@RequestScoped
public class ContactBean {
private String nom;
private Date dateNaissance;
public String saveContact(){public String saveContact(){
// Traitement
System.out.println(nom);
System.out.println(dateNaissance);
return "success";
}
// Getters et Setters
}
med@youssfi.net
Exemple de vue JSF :Exemple de vue JSF : contact.xhtmlcontact.xhtml
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:r="http://richfaces.org/rich">
<h:head>
<meta charset="UTF-8"/>
<title>Contact</title>
</h:head>
<h:body>
<f:view><f:view>
med@youssfi.net
Exemple de vue JSF :Exemple de vue JSF : contact.xhtmlcontact.xhtml
<h:form>
<h:panelGrid columns="3">
<h:outputText value="Nom:"/>
<h:inputText id="nom" value="#{contactBean.nom}" 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="#{contactBean.dateNaissance}"<r:calendar id="dateNaissance" value="#{contactBean.dateNaissance}"
popup="true" cellWidth="24px" cellHeight="22px"
style="width:200px"/>
<h:message for="dateNaissance" errorStyle="color:red"/>
<h:commandButton action="#{contactBean.saveContact}" value="Save"/>
</h:panelGrid>
</h:form>
</f:view>
</h:body>
</html>
med@youssfi.net
Les Composants JSFLes Composants JSF
Coté Client Coté Serveur
View
Form
GridPanel
Panel
OutputText
InputText
Message
Panel
INTÉGRATION AVECINTÉGRATION AVEC
SPRINGSPRINGSPRINGSPRING
med@youssfi.net
Application 1Application 1
On souhaite créer une application qui permet de gérer des produits. Chaque produit est
défini par sa référence (de type String), sa désignation, 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.◦ 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 liste 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.
med@youssfi.net
Gestion des produitsGestion des produits
med@youssfi.net
Installation du plugin :Installation du plugin : springspring toolstools
pourpour eclipseeclipse
med@youssfi.net
Installation du plugin :Installation du plugin : springspring toolstools
pourpour eclipseeclipse
med@youssfi.net
Création d’un projetCréation d’un projet SpringSpring
med@youssfi.net
Création d’un projetCréation d’un projet SpringSpring
med@youssfi.net
Structure du projetStructure du projet
med@youssfi.net
DépendancesDépendances
med@youssfi.net
Architecture techniqueArchitecture technique
Web Container Spring IOC Container
ContextLoaderListner
Couche Métier
ICatMetier
Couche DAO
ICatDAO
dependencies
Spring
Hibernate-
validator
produits.whtml
Produit
aapplicationContext.xml
web.xml
Faces-config.xml
CatMetierImpl
ICatDAO
CatDAOImpl
Client HTTP
FacesSevlet
CatalManagedBean
HTTP
HTML
MavenMaven dependenciesdependencies :: SpringSpring
<properties>
<java-version>1.6</java-version>
<org.springframework-version>
pom.xml
3.2.3.RELEASE
</org.springframework-version>
<org.aspectj-version>1.6.10</org.aspectj-version>
<org.slf4j-version>1.6.6</org.slf4j-version>
</properties>
med@youssfi.net
MavenMaven DependenciesDependencies
<!-- Spring -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>${org.springframework-version}</version>
<exclusions>
<!-- Exclude Commons Logging in favor of SLF4j -->
<exclusion>
<groupId>commons-logging</groupId><groupId>commons-logging</groupId>
<artifactId>commons-logging</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${org.springframework-version}</version>
</dependency>
med@youssfi.net
MavenMaven DependenciesDependencies
<!-- AspectJ -->
<dependency>
<groupId>org.aspectj</groupId>
<artifactId>aspectjrt</artifactId>
<version>${org.aspectj-version}</version>
</dependency>
<!-- Logging -->
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-api</artifactId>
<version>${org.slf4j-version}</version><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>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-log4j12</artifactId>
<version>${org.slf4j-version}</version>
<scope>runtime</scope>
</dependency> med@youssfi.net
MavenMaven DependenciesDependencies
<dependency>
<groupId>log4j</groupId>
<artifactId>log4j</artifactId>
<version>1.2.15</version>
<exclusions>
<exclusion>
<groupId>javax.mail</groupId>
<artifactId>mail</artifactId>
</exclusion>
<exclusion>
<groupId>javax.jms</groupId><groupId>javax.jms</groupId>
<artifactId>jms</artifactId>
</exclusion>
<exclusion>
<groupId>com.sun.jdmk</groupId>
<artifactId>jmxtools</artifactId>
</exclusion>
<exclusion>
<groupId>com.sun.jmx</groupId>
<artifactId>jmxri</artifactId>
</exclusion>
</exclusions>
<scope>runtime</scope>
</dependency> med@youssfi.net
MavenMaven DependenciesDependencies
<!-- @Inject -->
<dependency>
<groupId>javax.inject</groupId>
<artifactId>javax.inject</artifactId>
<version>1</version>
</dependency>
<!-- Servlet -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version><version>2.5</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>jsp-api</artifactId>
<version>2.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
med@youssfi.net
MavenMaven DependenciesDependencies
<!-- Test -->
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.7</version>
<scope>test</scope>
</dependency>
<!-- Hibernate Validator -->
<dependency><dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-validator</artifactId>
<version>5.0.0.Final</version>
</dependency>
<dependency>
<groupId>javax.validation</groupId>
<artifactId>validation-api</artifactId>
<version>1.1.0.Final</version>
</dependency>
med@youssfi.net
MavenMaven DependenciesDependencies
<!-- JSF -->
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-api</artifactId>
<version>2.2.1</version>
</dependency></dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-impl</artifactId>
<version>2.2.1</version>
</dependency>
med@youssfi.net
COUCHE DAOCOUCHE DAO
med@youssfi.net
Entité ProduitEntité Produit
package org.miage.sid.dao;
import java.io.Serializable;
import javax.validation.constraints.DecimalMin;
import javax.validation.constraints.Size;
import org.hibernate.validator.constraints.NotEmpty;
public class Produit implements Serializable {
@NotEmpty
@Size(min=4,max=12)@Size(min=4,max=12)
private String reference;
@NotEmpty
private String designation;
@DecimalMin(value="100")
private double prix;
private int quantite;
// Constructeurs
// Getters et Setters
}
med@youssfi.net
InterfaceInterface ICatalogueDAOICatalogueDAO
package org.miage.sid.dao;
import java.util.List;
public interface ICatalogueDAO {
public void addProduit(Produit p);
public List<Produit> getAllProduits();
public List<Produit> getProduits(String mc);public List<Produit> getProduits(String mc);
public Produit getProduit(String reference);
public void deleteProduit(String refernce);
public void updateProduit(Produit p);
}
med@youssfi.net
ImplémentationImplémentation CatalogueDAOImplCatalogueDAOImpl
package org.miage.sid.dao;
import java.util.*;
import org.apache.log4j.Logger;
public class CatalogueDaoImpl implements ICatalogueDAO {
private Map<String, Produit> produits=new HashMap<String, Produit>();
Logger logger=Logger.getLogger(CatalogueDaoImpl.class);
@Override
public void addProduit(Produit p) {
produits.put(p.getReference(), p);produits.put(p.getReference(), p);
}
@Override
public List<Produit> getAllProduits() {
Collection<Produit> prods=produits.values();
return new ArrayList<Produit>(prods);
}
med@youssfi.net
ImplémentationImplémentation CatalogueDAOImplCatalogueDAOImpl
@Override
public List<Produit> getProduits(String mc) {
List<Produit> prods=new ArrayList<Produit>();
for(Produit p:produits.values())
if(p.getDesignation().indexOf(mc)>=0)
prods.add(p);
return prods;
}
@Override@Override
public Produit getProduit(String reference) {
return produits.get(reference);
}
@Override
public void deleteProduit(String refernce) {
produits.remove(refernce);
}
med@youssfi.net
ImplémentationImplémentation CatalogueDAOImplCatalogueDAOImpl
@Override
public void updateProduit(Produit p) {
produits.put(p.getReference(),p);
}
public void init(){
logger.info("Initialisation du catalogue");
this.addProduit(new Produit("HP675","Ordinateur HP", 8000, 5));
this.addProduit(new Produit("AEP65","Impriomante AE",760, 80));this.addProduit(new Produit("AEP65","Impriomante AE",760, 80));
this.addProduit(new Produit("AT980","Smart Phone GT", 4500, 8));
}
}
med@youssfi.net
COUCHE METIERCOUCHE METIER
med@youssfi.net
InterfaceInterface IcatalogueMetierIcatalogueMetier
package org.miage.sid.metier;
import java.util.List;
import org.miage.sid.dao.Produit;
public interface ICatalogueMetier {
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);
}
med@youssfi.net
ImplémentationImplémentation CatalogueMetierImplCatalogueMetierImpl
package org.miage.sid.metier;
import java.util.List; import org.miage.sid.dao.ICatalogueDAO;
import org.miage.sid.dao.Produit;
public class CatalogueMetierImpl implements ICatalogueMetier {
private ICatalogueDAO dao;
/*Setter setDao pour l'injection*/
public void setDao(ICatalogueDAO dao) {
this.dao = dao;this.dao = dao;
}
@Override
public void addProduit(Produit p) {
dao.addProduit(p);
}
@Override
public List<Produit> getAllProduits() {
return dao.getAllProduits();
}
ImplémentationImplémentation CatalogueMetierImplCatalogueMetierImpl
@Override
public List<Produit> getProduits(String mc) {
return dao.getProduits(mc);
}
@Override
public Produit getProduit(String reference) {
return dao.getProduit(reference);
}}
@Override
public void deleteProduit(String refernce) {
dao.deleteProduit(refernce);
}
@Override
public void updateProduit(Produit p) {
dao.updateProduit(p);
}
}
INJECTION DESINJECTION DES
DEPENDANCESDEPENDANCESDEPENDANCESDEPENDANCES
med@youssfi.net
applicationContext.xmlapplicationContext.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd">
<bean id="dao" class="org.miage.sid.dao.CatalogueDaoImpl" init-method="init"></bean>
<bean id="metier" class="org.miage.sid.metier.CatalogueMetierImpl">
<property name="dao" ref="dao"></property><property name="dao" ref="dao"></property>
</bean>
</beans>
med@youssfi.net
COUCHE WEBCOUCHE WEB
med@youssfi.net
web.xmlweb.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<!-- The definition of the Root Spring Container shared by all Servlets and Filters -->
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath*:applicationContext.xml</param-value>
</context-param>
<!-- Creates the Spring Container shared by all Servlets and Filters -->
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
med@youssfi.net
web.xmlweb.xml
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern><url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
</web-app>
med@youssfi.net
facesfaces--config.xmlconfig.xml
<?xml version="1.0" encoding="UTF-8"?>
<faces-config
xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd"
version="2.2">version="2.2">
<application>
<el-resolver>
org.springframework.web.jsf.el.SpringBeanFacesELResolver
</el-resolver>
</application>
</faces-config>
med@youssfi.net
JSFJSF ManagedBeanManagedBean
package org.miage.sid.jsfmb;
import java.util.List;import javax.faces.bean.*;import org.miage.sid.dao.Produit;
import org.miage.sid.metier.ICatalogueMetier;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
@Component
@ManagedBean
@RequestScoped
public class CatalogueMB {public class CatalogueMB {
private Produit produit=new Produit();
@Autowired
private ICatalogueMetier metier;
public List<Produit> getListProduits(){
return metier.getAllProduits();
}
public String saveProduit(){
metier.addproduit(produit);
return "sucess";
} med@youssfi.net
JSFJSF ManagedBeanManagedBean
public String deleteProduit(String ref){
metier.deleteProduit(ref);
return "sucess";
}
public String editProduit(String ref){
if(metier.getproduit(ref)!=null)
produit=metier.getproduit(ref);
return "sucess ";return "sucess ";
}
// Getters et Setters
public Produit getProduit() {
return produit;
}
public void setProduit(Produit produit) {
this.produit = produit;
}
}
Page JSF :Page JSF : index.xhtmlindex.xhtml
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="resources/css/style.css"></link>
</head>
<body><body>
med@youssfi.net
Page JSF :Page JSF : index.xhtmlindex.xhtml
<h:form>
<div>
<h:panelGrid columns="3">
<f:validateBean>
<h:outputText value="REF"></h:outputText>
<h:inputText id="reference" value="#{catalogueMB.produit.reference}">
</h:inputText>
<h:message for="reference" errorClass="errors"></h:message>
<h:outputText value="DESIGNATION"></h:outputText>
<h:inputText id="designation" value="#{catalogueMB.produit.designation}"/><h:inputText id="designation" value="#{catalogueMB.produit.designation}"/>
<h:message for="designation" errorClass="errors"></h:message>
<h:outputText value="PRIX"></h:outputText>
<h:inputText id="prix" value="#{catalogueMB.produit.prix}"/>
<h:message for="prix" errorClass="errors"></h:message>
<h:outputText value="QUANTITE"></h:outputText>
<h:inputText id="quantite" value="#{catalogueMB.produit.quantite}"/>
<h:message for="quantite" errorClass="errors"></h:message>
<h:commandButton value="Save" action="#{catalogueMB.saveProduit}"/>
</f:validateBean>
</h:panelGrid>
</div> med@youssfi.net
Page JSF :Page JSF : index.xhtmlindex.xhtml
<div>
<h:dataTable value="#{catalogueMB.listProduits}" var="p" class="table1">
<h:column>
<f:facet name="header">
<h:outputText value="REF"/>
</f:facet>
<h:outputText value="#{p.reference}"/>
</h:column>
<h:column>
<f:facet name="header"><f:facet name="header">
<h:outputText value="DESIGNATION"/>
</f:facet>
<h:outputText value="#{p.designation}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="PRIX"/>
</f:facet>
<h:outputText value="#{p.prix}"/>
</h:column>
med@youssfi.net
Page JSF :Page JSF : index.xhtmlindex.xhtml
<h:column>
<f:facet name="header">
<h:outputText value="QUANTITE"></h:outputText>
</f:facet>
<h:outputText value="#{p.quantite}"></h:outputText>
</h:column>
<h:column>
<h:commandLink action="#{catalogueMB.deleteProduit(p.reference)}" value="Supp"/>
</h:column>
<h:column><h:column>
<h:commandLink action="#{catalogueMB.editProduit(p.reference)}" value="Edit"/>
</h:column>
</h:dataTable>
</div>
</h:form>
</body>
</html>
med@youssfi.net

Más contenido relacionado

La actualidad más candente

Cours design pattern m youssfi partie 1 introduction et pattern strategy
Cours design pattern m youssfi partie 1 introduction et pattern strategyCours design pattern m youssfi partie 1 introduction et pattern strategy
Cours design pattern m youssfi partie 1 introduction et pattern strategyENSET, Université Hassan II Casablanca
 
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)ENSET, Université Hassan II Casablanca
 
Java entreprise edition et industrialisation du génie logiciel par m.youssfi
Java entreprise edition et industrialisation du génie logiciel par m.youssfiJava entreprise edition et industrialisation du génie logiciel par m.youssfi
Java entreprise edition et industrialisation du génie logiciel par m.youssfiENSET, Université Hassan II Casablanca
 
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...ENSET, Université Hassan II Casablanca
 
softCours design pattern m youssfi partie 9 creation des objets abstract fact...
softCours design pattern m youssfi partie 9 creation des objets abstract fact...softCours design pattern m youssfi partie 9 creation des objets abstract fact...
softCours design pattern m youssfi partie 9 creation des objets abstract fact...ENSET, Université Hassan II Casablanca
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring bootAntoine Rey
 
Formation JAVA/J2EE
Formation JAVA/J2EEFormation JAVA/J2EE
Formation JAVA/J2EEInes Ouaz
 

La actualidad más candente (20)

Cours design pattern m youssfi partie 1 introduction et pattern strategy
Cours design pattern m youssfi partie 1 introduction et pattern strategyCours design pattern m youssfi partie 1 introduction et pattern strategy
Cours design pattern m youssfi partie 1 introduction et pattern strategy
 
Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
 
Support POO Java Deuxième Partie
Support POO Java Deuxième PartieSupport POO Java Deuxième Partie
Support POO Java Deuxième Partie
 
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
 
Support de cours Spring M.youssfi
Support de cours Spring  M.youssfiSupport de cours Spring  M.youssfi
Support de cours Spring M.youssfi
 
Java entreprise edition et industrialisation du génie logiciel par m.youssfi
Java entreprise edition et industrialisation du génie logiciel par m.youssfiJava entreprise edition et industrialisation du génie logiciel par m.youssfi
Java entreprise edition et industrialisation du génie logiciel par m.youssfi
 
Support NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDBSupport NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDB
 
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
 
Site JEE de ECommerce Basé sur Spring IOC MVC Security JPA Hibernate
Site JEE de ECommerce  Basé sur Spring IOC MVC Security JPA HibernateSite JEE de ECommerce  Basé sur Spring IOC MVC Security JPA Hibernate
Site JEE de ECommerce Basé sur Spring IOC MVC Security JPA Hibernate
 
softCours design pattern m youssfi partie 9 creation des objets abstract fact...
softCours design pattern m youssfi partie 9 creation des objets abstract fact...softCours design pattern m youssfi partie 9 creation des objets abstract fact...
softCours design pattern m youssfi partie 9 creation des objets abstract fact...
 
Support Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFISupport Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFI
 
Struts
StrutsStruts
Struts
 
Cours design pattern m youssfi partie 4 composite
Cours design pattern m youssfi partie 4 compositeCours design pattern m youssfi partie 4 composite
Cours design pattern m youssfi partie 4 composite
 
Support programmation orientée aspect mohamed youssfi (aop)
Support programmation orientée aspect mohamed youssfi (aop)Support programmation orientée aspect mohamed youssfi (aop)
Support programmation orientée aspect mohamed youssfi (aop)
 
Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)
 
Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring boot
 
Cours design pattern m youssfi partie 6 proxy
Cours design pattern m youssfi partie 6 proxyCours design pattern m youssfi partie 6 proxy
Cours design pattern m youssfi partie 6 proxy
 
Formation JAVA/J2EE
Formation JAVA/J2EEFormation JAVA/J2EE
Formation JAVA/J2EE
 
Maven et industrialisation du logiciel
Maven et industrialisation du logicielMaven et industrialisation du logiciel
Maven et industrialisation du logiciel
 

Destacado

Systèmes multi agents concepts et mise en oeuvre avec le middleware jade
Systèmes multi agents concepts et mise en oeuvre avec le middleware jadeSystèmes multi agents concepts et mise en oeuvre avec le middleware jade
Systèmes multi agents concepts et mise en oeuvre avec le middleware jadeENSET, Université Hassan II Casablanca
 
Cours design pattern m youssfi partie 8 stat, template method, command , medi...
Cours design pattern m youssfi partie 8 stat, template method, command , medi...Cours design pattern m youssfi partie 8 stat, template method, command , medi...
Cours design pattern m youssfi partie 8 stat, template method, command , medi...ENSET, Université Hassan II Casablanca
 
Intelligence artificielle et système multi-agent
Intelligence artificielle et système multi-agentIntelligence artificielle et système multi-agent
Intelligence artificielle et système multi-agentNoureddine Djebbari
 
Architecture des Systèmes Multi-Agents
Architecture des Systèmes Multi-Agents Architecture des Systèmes Multi-Agents
Architecture des Systèmes Multi-Agents Rached Krim
 

Destacado (12)

Cours design pattern m youssfi partie 7 facade bridge flyweight
Cours design pattern m youssfi partie 7 facade bridge flyweightCours design pattern m youssfi partie 7 facade bridge flyweight
Cours design pattern m youssfi partie 7 facade bridge flyweight
 
Systèmes multi agents concepts et mise en oeuvre avec le middleware jade
Systèmes multi agents concepts et mise en oeuvre avec le middleware jadeSystèmes multi agents concepts et mise en oeuvre avec le middleware jade
Systèmes multi agents concepts et mise en oeuvre avec le middleware jade
 
Support programmation orientée objet c# .net version f8
Support programmation orientée objet c#  .net version f8Support programmation orientée objet c#  .net version f8
Support programmation orientée objet c# .net version f8
 
Cours design pattern m youssfi partie 8 stat, template method, command , medi...
Cours design pattern m youssfi partie 8 stat, template method, command , medi...Cours design pattern m youssfi partie 8 stat, template method, command , medi...
Cours design pattern m youssfi partie 8 stat, template method, command , medi...
 
Cours design pattern m youssfi partie 5 adapter
Cours design pattern m youssfi partie 5 adapterCours design pattern m youssfi partie 5 adapter
Cours design pattern m youssfi partie 5 adapter
 
Cours design pattern m youssfi partie 2 observer
Cours design pattern m youssfi partie 2 observerCours design pattern m youssfi partie 2 observer
Cours design pattern m youssfi partie 2 observer
 
Développement d'un site web de E-Commerce avec PHP (Première Partie)
Développement d'un site web de E-Commerce avec PHP (Première Partie)Développement d'un site web de E-Commerce avec PHP (Première Partie)
Développement d'un site web de E-Commerce avec PHP (Première Partie)
 
JBoss Seam vs JSF
JBoss Seam vs JSFJBoss Seam vs JSF
JBoss Seam vs JSF
 
Intelligence artificielle et système multi-agent
Intelligence artificielle et système multi-agentIntelligence artificielle et système multi-agent
Intelligence artificielle et système multi-agent
 
Resume
ResumeResume
Resume
 
Architecture des Systèmes Multi-Agents
Architecture des Systèmes Multi-Agents Architecture des Systèmes Multi-Agents
Architecture des Systèmes Multi-Agents
 
Cours design pattern m youssfi partie 3 decorateur
Cours design pattern m youssfi partie 3 decorateurCours design pattern m youssfi partie 3 decorateur
Cours design pattern m youssfi partie 3 decorateur
 

Similar a Support de Cours JSF2 Première partie Intégration avec Spring

JEE_Chapter4_JSF_VF (1).pdf
JEE_Chapter4_JSF_VF (1).pdfJEE_Chapter4_JSF_VF (1).pdf
JEE_Chapter4_JSF_VF (1).pdfMahmoudiOussama
 
Prsentation de-javaserver-faces4124
Prsentation de-javaserver-faces4124Prsentation de-javaserver-faces4124
Prsentation de-javaserver-faces4124Mejdeddine Bouzouita
 
Présentation de JavaServer Faces
Présentation de JavaServer FacesPrésentation de JavaServer Faces
Présentation de JavaServer FacesJS Bournival
 
Web dev open door
Web dev   open doorWeb dev   open door
Web dev open doorLeTesteur
 
Flex, une techno RIA incontournable pour les futures app web ?
Flex, une techno RIA incontournable pour les futures app web ?Flex, une techno RIA incontournable pour les futures app web ?
Flex, une techno RIA incontournable pour les futures app web ?GreenIvory
 
Introduction à Angularjs
Introduction à AngularjsIntroduction à Angularjs
Introduction à AngularjsRossi Oddet
 
Partie 2: Angular
Partie 2: AngularPartie 2: Angular
Partie 2: AngularHabib Ayad
 
Architecture java j2 ee a partager
Architecture java j2 ee a partagerArchitecture java j2 ee a partager
Architecture java j2 ee a partageraliagadir
 
Soutenance Zend Framework vs Symfony
Soutenance Zend Framework vs SymfonySoutenance Zend Framework vs Symfony
Soutenance Zend Framework vs SymfonyVincent Composieux
 
Octo RefCard test front-end
Octo RefCard test front-endOcto RefCard test front-end
Octo RefCard test front-endClément Dubois
 
Octo Technology - Refcard Tests Web front-end
Octo Technology - Refcard Tests Web front-endOcto Technology - Refcard Tests Web front-end
Octo Technology - Refcard Tests Web front-endFrançois Petitit
 
Asp Au Service Des Mv Ps
Asp Au Service Des Mv PsAsp Au Service Des Mv Ps
Asp Au Service Des Mv PsGregory Renard
 
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - CoursENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - CoursHoracio Gonzalez
 
Java Server Faces (JSF)
Java Server Faces (JSF)Java Server Faces (JSF)
Java Server Faces (JSF)Heithem Abbes
 

Similar a Support de Cours JSF2 Première partie Intégration avec Spring (20)

JEE_Chapter4_JSF_VF (1).pdf
JEE_Chapter4_JSF_VF (1).pdfJEE_Chapter4_JSF_VF (1).pdf
JEE_Chapter4_JSF_VF (1).pdf
 
Spring MVC
Spring MVCSpring MVC
Spring MVC
 
Prsentation de-javaserver-faces4124
Prsentation de-javaserver-faces4124Prsentation de-javaserver-faces4124
Prsentation de-javaserver-faces4124
 
Présentation de JavaServer Faces
Présentation de JavaServer FacesPrésentation de JavaServer Faces
Présentation de JavaServer Faces
 
Java Server Faces 2
Java Server Faces 2Java Server Faces 2
Java Server Faces 2
 
Web dev open door
Web dev   open doorWeb dev   open door
Web dev open door
 
Flex, une techno RIA incontournable pour les futures app web ?
Flex, une techno RIA incontournable pour les futures app web ?Flex, une techno RIA incontournable pour les futures app web ?
Flex, une techno RIA incontournable pour les futures app web ?
 
Jboss Seam
Jboss SeamJboss Seam
Jboss Seam
 
Introduction à Angularjs
Introduction à AngularjsIntroduction à Angularjs
Introduction à Angularjs
 
Partie 2: Angular
Partie 2: AngularPartie 2: Angular
Partie 2: Angular
 
Tutoriel ajax jquery
Tutoriel ajax jqueryTutoriel ajax jquery
Tutoriel ajax jquery
 
Architecture java j2 ee a partager
Architecture java j2 ee a partagerArchitecture java j2 ee a partager
Architecture java j2 ee a partager
 
Soutenance Zend Framework vs Symfony
Soutenance Zend Framework vs SymfonySoutenance Zend Framework vs Symfony
Soutenance Zend Framework vs Symfony
 
Octo RefCard test front-end
Octo RefCard test front-endOcto RefCard test front-end
Octo RefCard test front-end
 
Octo Technology - Refcard Tests Web front-end
Octo Technology - Refcard Tests Web front-endOcto Technology - Refcard Tests Web front-end
Octo Technology - Refcard Tests Web front-end
 
Asp Au Service Des Mv Ps
Asp Au Service Des Mv PsAsp Au Service Des Mv Ps
Asp Au Service Des Mv Ps
 
Marzouk jsp
Marzouk jspMarzouk jsp
Marzouk jsp
 
react-fr.pdf
react-fr.pdfreact-fr.pdf
react-fr.pdf
 
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - CoursENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
 
Java Server Faces (JSF)
Java Server Faces (JSF)Java Server Faces (JSF)
Java Server Faces (JSF)
 

Más de ENSET, Université Hassan II Casablanca

Más de ENSET, Université Hassan II Casablanca (6)

Theses Soutenues sous Direction et Co-Direction du Pr YOUSSFI
Theses Soutenues sous Direction et Co-Direction du Pr YOUSSFITheses Soutenues sous Direction et Co-Direction du Pr YOUSSFI
Theses Soutenues sous Direction et Co-Direction du Pr YOUSSFI
 
Traitement distribue en BIg Data - KAFKA Broker and Kafka Streams
Traitement distribue en BIg Data - KAFKA Broker and Kafka StreamsTraitement distribue en BIg Data - KAFKA Broker and Kafka Streams
Traitement distribue en BIg Data - KAFKA Broker and Kafka Streams
 
Mise en oeuvre des Frameworks de Machines et Deep Learning pour les Applicati...
Mise en oeuvre des Frameworks de Machines et Deep Learning pour les Applicati...Mise en oeuvre des Frameworks de Machines et Deep Learning pour les Applicati...
Mise en oeuvre des Frameworks de Machines et Deep Learning pour les Applicati...
 
Support distributed computing and caching avec hazelcast
Support distributed computing and caching avec hazelcastSupport distributed computing and caching avec hazelcast
Support distributed computing and caching avec hazelcast
 
Mise en oeuvre des framework de machines et deep learning v1
Mise en oeuvre des framework de machines et deep learning v1 Mise en oeuvre des framework de machines et deep learning v1
Mise en oeuvre des framework de machines et deep learning v1
 
Conférence: Catalyseurs de l'Intelligence Artificielle et Écosystème des Fram...
Conférence: Catalyseurs de l'Intelligence Artificielle et Écosystème des Fram...Conférence: Catalyseurs de l'Intelligence Artificielle et Écosystème des Fram...
Conférence: Catalyseurs de l'Intelligence Artificielle et Écosystème des Fram...
 

Support de Cours JSF2 Première partie Intégration avec Spring

  • 1. JSFJSF JAVAJAVA SERVER FACESSERVER FACES MohamedYoussfi med@youssfi.net MohamedYoussfi med@youssfi.net ENSET, Université Hassan II Mohammedia Casablanca med@youssfi.net
  • 2. JSFJSF 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 desSon 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 ◦ et de différents frameworks (Struts, Spring MVC). med@youssfi.net
  • 3. JSFJSF 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 …) Fournir des fonctionnalités récurrentes et avancées (Validations, Conversion, Ajax …) ◦ Masquer la complexité med@youssfi.net
  • 5. ArchitectureArchitecture Web Container EJB ou Spring Container Couche Métier Couche DAO Model ManagedBean Vue.jsf web.xml Faces-config.xml SGBD : MYSQL Client HTTP FacesSevlet Controller Vue.jsf HTTP HTML
  • 6. Cycle de vieCycle de vie Requête Restore view RenderRender Response Réponse med@youssfi.net Apply RequestValue Apply RequestValue Perform validations Perform validations Synchronize Model Synchronize Model Invoke Application Logic ResponseResponse
  • 7. Cycle de vieCycle 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. 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. med@youssfi.net
  • 8. Cycle de vieCycle de vie Apply RequestValue : ◦ 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.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. med@youssfi.net
  • 9. Cycle de vieCycle 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.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 et afficher les erreurs med@youssfi.net
  • 10. Cycle de vieCycle de vie Synchronize Model ou update model values : ◦ Cette étape permet de stocker dans les composants du FaceContext leur valeur locale validée respective. ◦ Les éventuelles erreurs de conversions sont◦ 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 afficher les erreurs med@youssfi.net
  • 11. Cycle de vieCycle 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 quelle sera la page résultat qui sera renvoyée dans la réponse en utilisant les règles de navigation définieréponse en utilisant les règles de navigation définie dans l'application. ◦ L'arborescence des composants de cette page est créée. Render Response : ◦ Cette étape se charge de créer le rendue de la page de la réponse. med@youssfi.net
  • 13. MavenMaven dependenciesdependencies : pom.xml: pom.xml <dependency> <groupId>com.sun.faces</groupId> <artifactId>jsf-api</artifactId> <version>2.2.1</version> </dependency> <dependency><dependency> <groupId>com.sun.faces</groupId> <artifactId>jsf-impl</artifactId> <version>2.2.1</version> </dependency> med@youssfi.net
  • 14. MavenMaven dependenciesdependencies : pom.xml: pom.xml <dependency> <groupId>org.richfaces.ui</groupId> <artifactId>richfaces-components-api</artifactId> <version>4.2.2.Final</version> </dependency> <dependency><dependency> <groupId>org.richfaces.ui</groupId> <artifactId>richfaces-components-ui</artifactId> <version>4.2.2.Final</version> </dependency> med@youssfi.net
  • 15. MavenMaven dependenciesdependencies : pom.xml: pom.xml <dependency> <groupId>org.richfaces.core</groupId> <artifactId>richfaces-core-api</artifactId> <version>4.2.2.Final</version> </dependency> <dependency><dependency> <groupId>org.richfaces.core</groupId> <artifactId>richfaces-core-impl</artifactId> <version>4.2.2.Final</version> </dependency> med@youssfi.net
  • 17. Exemple deExemple de ManagedManaged BeanBean package org.miage.sid.jsfmb; import java.util.Date; import javax.faces.bean.ManagedBean; import javax.faces.bean.RequestScoped; @ManagedBean(name="contactBean") @RequestScoped public class ContactBean { private String nom; private Date dateNaissance; public String saveContact(){public String saveContact(){ // Traitement System.out.println(nom); System.out.println(dateNaissance); return "success"; } // Getters et Setters } med@youssfi.net
  • 18. Exemple de vue JSF :Exemple de vue JSF : contact.xhtmlcontact.xhtml <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:r="http://richfaces.org/rich"> <h:head> <meta charset="UTF-8"/> <title>Contact</title> </h:head> <h:body> <f:view><f:view> med@youssfi.net
  • 19. Exemple de vue JSF :Exemple de vue JSF : contact.xhtmlcontact.xhtml <h:form> <h:panelGrid columns="3"> <h:outputText value="Nom:"/> <h:inputText id="nom" value="#{contactBean.nom}" 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="#{contactBean.dateNaissance}"<r:calendar id="dateNaissance" value="#{contactBean.dateNaissance}" popup="true" cellWidth="24px" cellHeight="22px" style="width:200px"/> <h:message for="dateNaissance" errorStyle="color:red"/> <h:commandButton action="#{contactBean.saveContact}" value="Save"/> </h:panelGrid> </h:form> </f:view> </h:body> </html> med@youssfi.net
  • 20. Les Composants JSFLes Composants JSF Coté Client Coté Serveur View Form GridPanel Panel OutputText InputText Message Panel
  • 22. Application 1Application 1 On souhaite créer une application qui permet de gérer des produits. Chaque produit est défini par sa référence (de type String), sa désignation, 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.◦ 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 liste 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. med@youssfi.net
  • 23. Gestion des produitsGestion des produits med@youssfi.net
  • 24. Installation du plugin :Installation du plugin : springspring toolstools pourpour eclipseeclipse med@youssfi.net
  • 25. Installation du plugin :Installation du plugin : springspring toolstools pourpour eclipseeclipse med@youssfi.net
  • 26. Création d’un projetCréation d’un projet SpringSpring med@youssfi.net
  • 27. Création d’un projetCréation d’un projet SpringSpring med@youssfi.net
  • 28. Structure du projetStructure du projet med@youssfi.net
  • 30. Architecture techniqueArchitecture technique Web Container Spring IOC Container ContextLoaderListner Couche Métier ICatMetier Couche DAO ICatDAO dependencies Spring Hibernate- validator produits.whtml Produit aapplicationContext.xml web.xml Faces-config.xml CatMetierImpl ICatDAO CatDAOImpl Client HTTP FacesSevlet CatalManagedBean HTTP HTML
  • 31. MavenMaven dependenciesdependencies :: SpringSpring <properties> <java-version>1.6</java-version> <org.springframework-version> pom.xml 3.2.3.RELEASE </org.springframework-version> <org.aspectj-version>1.6.10</org.aspectj-version> <org.slf4j-version>1.6.6</org.slf4j-version> </properties> med@youssfi.net
  • 32. MavenMaven DependenciesDependencies <!-- Spring --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context</artifactId> <version>${org.springframework-version}</version> <exclusions> <!-- Exclude Commons Logging in favor of SLF4j --> <exclusion> <groupId>commons-logging</groupId><groupId>commons-logging</groupId> <artifactId>commons-logging</artifactId> </exclusion> </exclusions> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>${org.springframework-version}</version> </dependency> med@youssfi.net
  • 33. MavenMaven DependenciesDependencies <!-- AspectJ --> <dependency> <groupId>org.aspectj</groupId> <artifactId>aspectjrt</artifactId> <version>${org.aspectj-version}</version> </dependency> <!-- Logging --> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-api</artifactId> <version>${org.slf4j-version}</version><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> <groupId>org.slf4j</groupId> <artifactId>slf4j-log4j12</artifactId> <version>${org.slf4j-version}</version> <scope>runtime</scope> </dependency> med@youssfi.net
  • 35. MavenMaven DependenciesDependencies <!-- @Inject --> <dependency> <groupId>javax.inject</groupId> <artifactId>javax.inject</artifactId> <version>1</version> </dependency> <!-- Servlet --> <dependency> <groupId>javax.servlet</groupId> <artifactId>servlet-api</artifactId> <version>2.5</version><version>2.5</version> <scope>provided</scope> </dependency> <dependency> <groupId>javax.servlet.jsp</groupId> <artifactId>jsp-api</artifactId> <version>2.1</version> <scope>provided</scope> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> med@youssfi.net
  • 36. MavenMaven DependenciesDependencies <!-- Test --> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.7</version> <scope>test</scope> </dependency> <!-- Hibernate Validator --> <dependency><dependency> <groupId>org.hibernate</groupId> <artifactId>hibernate-validator</artifactId> <version>5.0.0.Final</version> </dependency> <dependency> <groupId>javax.validation</groupId> <artifactId>validation-api</artifactId> <version>1.1.0.Final</version> </dependency> med@youssfi.net
  • 37. MavenMaven DependenciesDependencies <!-- JSF --> <dependency> <groupId>com.sun.faces</groupId> <artifactId>jsf-api</artifactId> <version>2.2.1</version> </dependency></dependency> <dependency> <groupId>com.sun.faces</groupId> <artifactId>jsf-impl</artifactId> <version>2.2.1</version> </dependency> med@youssfi.net
  • 39. Entité ProduitEntité Produit package org.miage.sid.dao; import java.io.Serializable; import javax.validation.constraints.DecimalMin; import javax.validation.constraints.Size; import org.hibernate.validator.constraints.NotEmpty; public class Produit implements Serializable { @NotEmpty @Size(min=4,max=12)@Size(min=4,max=12) private String reference; @NotEmpty private String designation; @DecimalMin(value="100") private double prix; private int quantite; // Constructeurs // Getters et Setters } med@youssfi.net
  • 40. InterfaceInterface ICatalogueDAOICatalogueDAO package org.miage.sid.dao; import java.util.List; public interface ICatalogueDAO { public void addProduit(Produit p); public List<Produit> getAllProduits(); public List<Produit> getProduits(String mc);public List<Produit> getProduits(String mc); public Produit getProduit(String reference); public void deleteProduit(String refernce); public void updateProduit(Produit p); } med@youssfi.net
  • 41. ImplémentationImplémentation CatalogueDAOImplCatalogueDAOImpl package org.miage.sid.dao; import java.util.*; import org.apache.log4j.Logger; public class CatalogueDaoImpl implements ICatalogueDAO { private Map<String, Produit> produits=new HashMap<String, Produit>(); Logger logger=Logger.getLogger(CatalogueDaoImpl.class); @Override public void addProduit(Produit p) { produits.put(p.getReference(), p);produits.put(p.getReference(), p); } @Override public List<Produit> getAllProduits() { Collection<Produit> prods=produits.values(); return new ArrayList<Produit>(prods); } med@youssfi.net
  • 42. ImplémentationImplémentation CatalogueDAOImplCatalogueDAOImpl @Override public List<Produit> getProduits(String mc) { List<Produit> prods=new ArrayList<Produit>(); for(Produit p:produits.values()) if(p.getDesignation().indexOf(mc)>=0) prods.add(p); return prods; } @Override@Override public Produit getProduit(String reference) { return produits.get(reference); } @Override public void deleteProduit(String refernce) { produits.remove(refernce); } med@youssfi.net
  • 43. ImplémentationImplémentation CatalogueDAOImplCatalogueDAOImpl @Override public void updateProduit(Produit p) { produits.put(p.getReference(),p); } public void init(){ logger.info("Initialisation du catalogue"); this.addProduit(new Produit("HP675","Ordinateur HP", 8000, 5)); this.addProduit(new Produit("AEP65","Impriomante AE",760, 80));this.addProduit(new Produit("AEP65","Impriomante AE",760, 80)); this.addProduit(new Produit("AT980","Smart Phone GT", 4500, 8)); } } med@youssfi.net
  • 45. InterfaceInterface IcatalogueMetierIcatalogueMetier package org.miage.sid.metier; import java.util.List; import org.miage.sid.dao.Produit; public interface ICatalogueMetier { 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); } med@youssfi.net
  • 46. ImplémentationImplémentation CatalogueMetierImplCatalogueMetierImpl package org.miage.sid.metier; import java.util.List; import org.miage.sid.dao.ICatalogueDAO; import org.miage.sid.dao.Produit; public class CatalogueMetierImpl implements ICatalogueMetier { private ICatalogueDAO dao; /*Setter setDao pour l'injection*/ public void setDao(ICatalogueDAO dao) { this.dao = dao;this.dao = dao; } @Override public void addProduit(Produit p) { dao.addProduit(p); } @Override public List<Produit> getAllProduits() { return dao.getAllProduits(); }
  • 47. ImplémentationImplémentation CatalogueMetierImplCatalogueMetierImpl @Override public List<Produit> getProduits(String mc) { return dao.getProduits(mc); } @Override public Produit getProduit(String reference) { return dao.getProduit(reference); }} @Override public void deleteProduit(String refernce) { dao.deleteProduit(refernce); } @Override public void updateProduit(Produit p) { dao.updateProduit(p); } }
  • 49. applicationContext.xmlapplicationContext.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd"> <bean id="dao" class="org.miage.sid.dao.CatalogueDaoImpl" init-method="init"></bean> <bean id="metier" class="org.miage.sid.metier.CatalogueMetierImpl"> <property name="dao" ref="dao"></property><property name="dao" ref="dao"></property> </bean> </beans> med@youssfi.net
  • 51. web.xmlweb.xml <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <!-- The definition of the Root Spring Container shared by all Servlets and Filters --> <context-param> <param-name>contextConfigLocation</param-name> <param-value>classpath*:applicationContext.xml</param-value> </context-param> <!-- Creates the Spring Container shared by all Servlets and Filters --> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> med@youssfi.net
  • 54. JSFJSF ManagedBeanManagedBean package org.miage.sid.jsfmb; import java.util.List;import javax.faces.bean.*;import org.miage.sid.dao.Produit; import org.miage.sid.metier.ICatalogueMetier; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Component; @Component @ManagedBean @RequestScoped public class CatalogueMB {public class CatalogueMB { private Produit produit=new Produit(); @Autowired private ICatalogueMetier metier; public List<Produit> getListProduits(){ return metier.getAllProduits(); } public String saveProduit(){ metier.addproduit(produit); return "sucess"; } med@youssfi.net
  • 55. JSFJSF ManagedBeanManagedBean public String deleteProduit(String ref){ metier.deleteProduit(ref); return "sucess"; } public String editProduit(String ref){ if(metier.getproduit(ref)!=null) produit=metier.getproduit(ref); return "sucess ";return "sucess "; } // Getters et Setters public Produit getProduit() { return produit; } public void setProduit(Produit produit) { this.produit = produit; } }
  • 56. Page JSF :Page JSF : index.xhtmlindex.xhtml <?xml version="1.0" encoding="ISO-8859-1" ?> <!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:f="http://xmlns.jcp.org/jsf/core" xmlns:h="http://xmlns.jcp.org/jsf/html"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="resources/css/style.css"></link> </head> <body><body> med@youssfi.net
  • 57. Page JSF :Page JSF : index.xhtmlindex.xhtml <h:form> <div> <h:panelGrid columns="3"> <f:validateBean> <h:outputText value="REF"></h:outputText> <h:inputText id="reference" value="#{catalogueMB.produit.reference}"> </h:inputText> <h:message for="reference" errorClass="errors"></h:message> <h:outputText value="DESIGNATION"></h:outputText> <h:inputText id="designation" value="#{catalogueMB.produit.designation}"/><h:inputText id="designation" value="#{catalogueMB.produit.designation}"/> <h:message for="designation" errorClass="errors"></h:message> <h:outputText value="PRIX"></h:outputText> <h:inputText id="prix" value="#{catalogueMB.produit.prix}"/> <h:message for="prix" errorClass="errors"></h:message> <h:outputText value="QUANTITE"></h:outputText> <h:inputText id="quantite" value="#{catalogueMB.produit.quantite}"/> <h:message for="quantite" errorClass="errors"></h:message> <h:commandButton value="Save" action="#{catalogueMB.saveProduit}"/> </f:validateBean> </h:panelGrid> </div> med@youssfi.net
  • 58. Page JSF :Page JSF : index.xhtmlindex.xhtml <div> <h:dataTable value="#{catalogueMB.listProduits}" var="p" class="table1"> <h:column> <f:facet name="header"> <h:outputText value="REF"/> </f:facet> <h:outputText value="#{p.reference}"/> </h:column> <h:column> <f:facet name="header"><f:facet name="header"> <h:outputText value="DESIGNATION"/> </f:facet> <h:outputText value="#{p.designation}"/> </h:column> <h:column> <f:facet name="header"> <h:outputText value="PRIX"/> </f:facet> <h:outputText value="#{p.prix}"/> </h:column> med@youssfi.net
  • 59. Page JSF :Page JSF : index.xhtmlindex.xhtml <h:column> <f:facet name="header"> <h:outputText value="QUANTITE"></h:outputText> </f:facet> <h:outputText value="#{p.quantite}"></h:outputText> </h:column> <h:column> <h:commandLink action="#{catalogueMB.deleteProduit(p.reference)}" value="Supp"/> </h:column> <h:column><h:column> <h:commandLink action="#{catalogueMB.editProduit(p.reference)}" value="Edit"/> </h:column> </h:dataTable> </div> </h:form> </body> </html> med@youssfi.net