introduction a jsf

Transcription

introduction a jsf

INTRODUCTION A JSF
Michael Fortier
Master Informatique 2ème année
[email protected]
A308, Université de Paris 13
http ://lipn.univ-paris13.fr/∼fortier/Enseignement/Jsf/
JSF
1ère application
Validation
Converter
Internationalisation
Layout
Primefaces
TP
Sommaire
1
Jsf
2
1ère application
3
Validation
4
Converter
5
6
Layout
7
Primefaces
8
TP
Michael Fortier (Université Paris 13)
INTRODUCTION A JSF
M2I,LEE,2016-2017
2 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Présentation Composants Bean Evénements Facelet Fonctionnalités Configuration
Sommaire
1
Jsf
2
1ère application
3
Validation
4
Converter
5
6
Layout
7
Primefaces
8
TP
INTRODUCTION A JSF
M2I,LEE,2016-2017
3 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Evolution des technologies
Servlets
JSP
MVC Model 1 : servlets + JSP
MVC Model 2 : un seule servlet + JSP
Java Server Faces
INTRODUCTION A JSF
M2I,LEE,2016-2017
5 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Java Server Faces
Framework qui facilite et standardise le développement
d’applications web
S’appuie sur les technologies qui l’ont précédé (Struts)
Peut être codé à la main, l’utilisation d’un outil est fortement
recommandée
Technologie côté serveur orientée interface utilisateur
Sépare clairement la partie « interface » de la partie « métier »
Version 1.0 : JSR-127 mars 2004
Version 2.0 : JSR-3144 juin 2009
Version 2.2 : JSR-344 avril 2013
http://www.oracle.com/technetwork/topics/jsf-092015.html
http://jcp.org/aboutJava/communityprocess/final/jsr245/index.html
INTRODUCTION A JSF
M2I,LEE,2016-2017
6 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Atouts de JSF
Assemblage de composants serveur qui génèrent le code de leur
rendu
Possibilité d’associer certains composants à une source de
données encapsulée dans un bean
Utilisation d’événements et de listener
Conversion et validation des données avant leur utilisation dans
les traitements
Possibilité d’étendre les différents modèles et de créer ses
propres composants
Configuration de la navigation entre les pages
Support de l’internationalisation
INTRODUCTION A JSF
M2I,LEE,2016-2017
7 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Composition du framework
Une spécification qui définit le mode de fonctionnement du
framework
Une API : l’ensemble des classes de l’API est contenu dans les
packages javax.faces
Une implémentation de référence
Des bibliothèques de tags personnalisés fournies par
l’implémentation pour
utiliser les composants dans les JSP
gérer les événements
valider les données saisies
INTRODUCTION A JSF
M2I,LEE,2016-2017
8 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
JSF et MVC
INTRODUCTION A JSF
M2I,LEE,2016-2017
9 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Cycle de vie d’une requête
1
2
3
4
5
6
Création de l’arbre de composants
Extraction des données des différents composants de la page
Conversion et validation des données
Extraction des données validées et mise à jour du modèle de
données (javabean)
Traitements des événements liés à la page
Génération du rendu de la réponse
INTRODUCTION A JSF
M2I,LEE,2016-2017
10 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Cycle de vie d’une requête
INTRODUCTION A JSF
M2I,LEE,2016-2017
11 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Composants graphiques
Fonctionnalité du composant définie dans la classe du composant
Plusieurs rendus pour un même composant
Possibilité de définir des rendus
Simplifie accès et gestion données métiers
Mise en oeuvre de patterns connus
Masque bas niveau (HttpServletRequest/Response)
Meilleure maintenance
INTRODUCTION A JSF
M2I,LEE,2016-2017
13 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Exemple
INTRODUCTION A JSF
M2I,LEE,2016-2017
14 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Composants de bases - taglib core
<f:actionListener>
<f:convertDateTime>
<f:loadBundle>
<f:validateLength>
<f:validateRequired>
<f:view>
...
<f:ajax>
<f:convertNumber>
<f:param>
<f:validateRegex>
<f:validateLongRange>
<f:valueChangeListener>
http://www.jsftoolbox.com/documentation/help/
12-TagReference/core/index.jsf
INTRODUCTION A JSF
M2I,LEE,2016-2017
15 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Composants de bases - taglib html
<h:inputText>
<h:inputTextarea>
<h:inputHidden>
<h:selectOneRadio>
<h:selectOneMenu>
<h:graphicImage>
<h:commandButton>
<h:outputLink>
<h:panelGrid>
<h:selectBooleanCheckbox>
<h:outputText>
<h:selectOneListbox>
<h:outputScript>
<h:message>
<h:commandLink>
...
http://www.jsftoolbox.com/documentation/help/
12-TagReference/html/index.jsf
INTRODUCTION A JSF
M2I,LEE,2016-2017
16 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Utilisation dans une "JSP"
<?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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>JSF 2.0 Hello World</title>
</h:head>
<h:body>
<h2>JSF 2.0 Hello World Example - hello.xhtml</h2>
<h:form>
<h:inputText value="#{helloBean.name}"></h:inputText>
<h:commandButton value="Welcome Me" action="welcome"></h:
</h:form>
</h:body>
</html>
INTRODUCTION A JSF
M2I,LEE,2016-2017
17 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Rappels
Les beans sont des classes qui respectent une spécification
particulière notamment la présence :
de getters et de setters qui respectent une convention de
nommage particulière pour les attributs
un constructeur par défaut sans arguments
−→ Largement utilisés dans JSF pou l’échange de données entre les
différentes entités et le traitement des événements.
INTRODUCTION A JSF
M2I,LEE,2016-2017
19 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Beans et JSF
L’utilisation des Beans dans JSF permettent :
l’affichage des données provenant de la couche métier
le stockage des valeurs d’un formulaire
la validation des valeurs
INTRODUCTION A JSF
M2I,LEE,2016-2017
20 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Beans managés
Javabeans dont le cycle de vie va être contrôlé par le framework JSF
en fonction des besoins.
Portée principales d’un bean :
request : portée limitée entre l’émission de la requête et l’envoi de
la réponse.
Les données stockées sont utilisables lors d’un transfert vers une
autre page (forward).
Elles sont perdues lors d’une redirection (redirect).
session : permet la circulation de données entre plusieurs
échanges avec un même client
application : permet l’accès à des données pour toutes les pages
d’une même application quelque soit l’utilisateur
INTRODUCTION A JSF
M2I,LEE,2016-2017
21 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Gérer des événements
Chaque composant génère des événements (Events)
Evènements liés aux ‘actions’ utilisateurs
Appui boutton, clic sur lien hypertexte...
Tout composant implémentant une action (ActionSource)
Evènements liés à MAJ interface par l’utilisateur
Modification données champ texte, combo
Tout composant implémentant une édition (EditableValueHolder)
Evènements liés aux données du modèle métier
Le serveur possède des écouteurs (Listeners) qui traitent les
événements
INTRODUCTION A JSF
M2I,LEE,2016-2017
23 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Gestion de l’état des composants
L’état peut changer chez le client entre 2 requêtes
JSF prend en charge la gestion de cet état
INTRODUCTION A JSF
M2I,LEE,2016-2017
24 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Exemple d’événements
INTRODUCTION A JSF
M2I,LEE,2016-2017
25 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Technologie Facelet
INTRODUCTION A JSF
M2I,LEE,2016-2017
27 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Technologie Facelet
Une Facelet est un fichier XML pur (6= JSP)
Langage XHTML en général, mais markup-agnostique
3 extensions en général : .jsf, .xhtml ou .faces
Constituée de balises
Structure à vide d’une Facelet
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
...
</html>
INTRODUCTION A JSF
M2I,LEE,2016-2017
28 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Balises JSF
Rappels JSP
Page html qui peut contenir du code Java
A l’exécution cette page est convertie en servlet
Contient des balises JSP
−→ JSTL ( bibliothèque de balises standard pour java)
−→ JSF propose 3 bibliothèques standard : HTML, Core et UI
<!DOCTYPE html>
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>
INTRODUCTION A JSF
M2I,LEE,2016-2017
29 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Exemple de balise JSF
<h:outputLabel for="confirmation">
Confirmation du mot de passe
<span class="requis">*</span>
</h:outputLabel>
−→ Provenant de la bibliothèque HTML
http://docs.oracle.com/javaee/6/javaserverfaces/2.1/docs/vdldocs/
facelets/
http:
//www.jsftoolbox.com/documentation/help/12-TagReference/index.jsf
INTRODUCTION A JSF
M2I,LEE,2016-2017
30 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
EL : le langage d’expression
La liaison des données entre le backing bean et la page s’effectue au
moyen d’expressions :
<h:inputText value="#{login.nom}"/>
<h:inputText value="#{login.[’nom’]}"/>
<h:outputText value="#{messages.salutation}, #{utilisateur.nom}!"/>
INTRODUCTION A JSF
M2I,LEE,2016-2017
31 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Expressions EL
#{inscrireBean.utilisateur.motDePasse}
#{inscrireBean.inscrire}
Appeler les attributs d’un bean (à partir de ses accesseurs)
Appeler n’importe quelle méthode d’un bean
INTRODUCTION A JSF
M2I,LEE,2016-2017
32 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Validation et conversion
Validation :
Agit sur les composants graphiques (textfield)
Personnalisation des validateurs (bornes, types, etc.)
Lève des erreurs
Conversion :
Formatage des données
Ex : 15000 −→ 15,000
Personnalisation possible
INTRODUCTION A JSF
M2I,LEE,2016-2017
34 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Navigation entre les pages
JSF h 2.0) −→ faces-config.xml
JSF 2.0 −→ mécanisme "auto view page resolver"
−→ navigation implicite
Auto navigation dans la page JSF
Auto navigation dans le Managed Bean
INTRODUCTION A JSF
M2I,LEE,2016-2017
35 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Possibilité de définir des locales
Fichiers de correspondance :
clé −→ valeur internationalisée
INTRODUCTION A JSF
M2I,LEE,2016-2017
36 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Configuration de l’application web
La structure est celle d’une
application j2ee :
/
/WEB-INF
/WEB-INF/web.xml
/WEB-INF/lib
/WEB-INF/classes
Librairies à ajouter :
jsf-api.jar
jsf-ri.jar
jstl.jar
standard.jar
common-beanutils.jar
commons-digester.jar
commons-collections.jar
commons-logging.jar
INTRODUCTION A JSF
M2I,LEE,2016-2017
38 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Configuration de la servlet
web.xml
<web-app version="3.1" 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-app_3_1.xsd">

<welcome-file-list>
<welcome-file>index.xhtml</welcome-file>
</welcome-file-list>

<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<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>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
</web-app>
INTRODUCTION A JSF
M2I,LEE,2016-2017
39 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Sommaire
1
Jsf
2
1ère application
3
Validation
4
Converter
5
6
Layout
7
Primefaces
8
TP
INTRODUCTION A JSF
M2I,LEE,2016-2017
40 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
1ère application
1
Formulaire de saisi du nom de l’utilisateur : bonjour.xhtml
2
Affichage du résultat dans une deuxième page : bienvenue.xhtml
INTRODUCTION A JSF
M2I,LEE,2016-2017
41 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
backing-bean pour stocker le nom saisi par l’utilisateur
TP/HELLO/src/java/BonjourBean.java
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class BonjourBean implements Serializable {
private static final long serialVersionUID = 1L;
private String nom;
public String getNom() {
return nom;
}
public void setNom( String nom ) {
this.nom = nom;
}
}
INTRODUCTION A JSF
M2I,LEE,2016-2017
42 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Facelet initiale
TP/HELLO/web/bonjour.xhtml
<!DOCTYPE html>
<h:head>
<title>HELLO</title>
</h:head>
<h:body>
<h1>HELLO - bonjour.xhtml</h1>
<h:form>
<h:inputText value="#{bonjourBean.nom}" />
<h:commandButton value="Souhaiter la bienvenue"
action="bienvenue" />
</h:form>
</h:body>
</html>
INTRODUCTION A JSF
M2I,LEE,2016-2017
43 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Facelet résultat
TP/HELLO/web/bienvenue.xhtml
<!DOCTYPE html>
<h:head>
</h:head>
<h:body>
<h1>HELLO - bienvenue.xhtml</h1>
<p>Bienvenue #{bonjourBean.nom} !</p>
</h:body>
</html>
INTRODUCTION A JSF
M2I,LEE,2016-2017
44 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Configuration de l’application
TP/HELLO/web/WEB-INF/web.xml
<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">

<welcome-file-list>
<welcome-file>bonjour.xhtml</welcome-file>
</welcome-file-list>

<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<servlet>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
</web-app>
INTRODUCTION A JSF
M2I,LEE,2016-2017
45 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Exécution de l’application
INTRODUCTION A JSF
M2I,LEE,2016-2017
46 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Standard Validator Validator et Bean Custom Validator
Sommaire
1
Jsf
2
1ère application
3
Validation
4
Converter
5
6
Layout
7
Primefaces
8
TP
INTRODUCTION A JSF
M2I,LEE,2016-2017
47 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
JSF standard validators
required
f :validateLength : longeur d’un chaine
f :validateLongRange : range d’valeur numérique
f :validateDoubleRange : range d’valeur double
f :validateRegex : expression régulière
INTRODUCTION A JSF
M2I,LEE,2016-2017
49 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Validation requise
TP/VALIDATION/web/bonjour.xhtml
...
<h:inputText id="name"
value="#{bonjourBean.nom}"
requiredMessage="Vous devez renseigner une valeur"
required="true" >
...
INTRODUCTION A JSF
M2I,LEE,2016-2017
50 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Validation sur la taille de chaine
...
value="#{bonjourBean.nom}" >
<f:validateLength minimum="5" maximum="12" />
</h:inputText>
...
INTRODUCTION A JSF
M2I,LEE,2016-2017
51 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Validation via une méthode dans le Backing Bean
TP/VALIDATION/src/java/BonjourBean.java
public void validateIndividu(FacesContext context, UIComponent component, Object value)
throws ValidatorException {
String entree = (String) value;
if (!(entree == null || "".equalsIgnoreCase(entree)) && !"michael".equalsIgnoreCase(entree)){
FacesMessage msg = new FacesMessage("Probleme", "Individu inconnu");
throw new ValidatorException(msg);
}
}
INTRODUCTION A JSF
M2I,LEE,2016-2017
53 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Validation via une méthode dans le Backing Bean
<!DOCTYPE html>
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>VALIDATION</title>
</h:head>
<h:body>
<h1>VALIDATION - bonjour.xhtml</h1>
<h:form>
required="true" validator="#{bonjourBean.validateIndividu}" >
</h:inputText>
<h:message for="name" style="color:red" />
</h:form>
</h:body>
</html>
INTRODUCTION A JSF
M2I,LEE,2016-2017
54 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Classe Validator
TP/VALIDATION/src/java/NameValidator.java
import
import
import
import
import
import
javax.faces.application.FacesMessage;
javax.faces.component.UIComponent;
javax.faces.context.FacesContext;
javax.faces.validator.FacesValidator;
javax.faces.validator.Validator;
javax.faces.validator.ValidatorException;
@FacesValidator("NameValidator")
public class NameValidator implements Validator {
@Override
public void validate(FacesContext facesContext,
UIComponent component, Object value)
throws ValidatorException {
StringBuilder url = new StringBuilder();
String nameValue = value.toString();
if (!nameValue.equalsIgnoreCase("michael")) {
FacesMessage msg = new FacesMessage("Probleme", "Individu inconnu");
msg.setSeverity(FacesMessage.SEVERITY_ERROR);
throw new ValidatorException(msg);
}
}
}
INTRODUCTION A JSF
M2I,LEE,2016-2017
56 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Facelet associée
<!DOCTYPE html>
<h:head>
<title>VALIDATION</title>
</h:head>
<h:body>
<h1>VALIDATION - bonjour.xhtml</h1>
<h:form>
required="true" >
<f:validateLength minimum="5" maximum="12" />
<f:validator validatorId="NameValidator" />
</h:inputText>
</h:form>
</h:body>
</html>
INTRODUCTION A JSF
M2I,LEE,2016-2017
57 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Résultat du custom validator
INTRODUCTION A JSF
M2I,LEE,2016-2017
58 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Standard Converter Custom Converter
Sommaire
1
Jsf
2
1ère application
3
Validation
4
Converter
5
6
Layout
7
Primefaces
8
TP
INTRODUCTION A JSF
M2I,LEE,2016-2017
59 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
JSF standard Converter
BigDecimalConverter
BigIntegerConverter
BooleanConverter
ByteConverter
CharacterConverter
DateTimeConverter
DoubleConverter
EnumConverter
FloatConverter
IntegerConverter
LongConverter
NumberConverter
ShortConverter
INTRODUCTION A JSF
M2I,LEE,2016-2017
61 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Exemples - bouts de Code
<h:inputText id="salaire" value="#{testBean.salaire}" required="true">
<f:convertNumber type="currency"/>
</h:inputText>
<h:inputText id="date" value="#{testBean.date}" required="true">
<f:convertDateTime type="date" dateStyle="long"/>
</h:inputText>
<h:inputText id="population" value="#{testBean.population}"
required="true">
<f:convertNumber type="#,###.00"/>
</h:inputText>
<h:outputText value="1234567890">
<f:convertNumber pattern="(##) ####-####"/>
</h:outputText>
INTRODUCTION A JSF
M2I,LEE,2016-2017
62 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Classe converter
TP/CONVERTER/src/java/PhoneConverter.java
@FacesConverter("PhoneConverter")
public class PhoneConverter implements Converter {
@Override
public Object getAsObject(FacesContext context, UIComponent component,
String value) {
if (value==null||"".equalsIgnoreCase(value)) {
FacesMessage msg = new FacesMessage("erreur de conversion",
"Valeur invalide");
msg.setSeverity(FacesMessage.SEVERITY_ERROR);
throw new ConverterException(msg);
}
StringBuilder phone = new StringBuilder();
int index = 0;
while (index < value.length()) {
phone.append(" "+value.substring(index, Math.min(index + 2, value.length())));
index = index + 2;
}
return phone;
}
@Override
public String getAsString(FacesContext context, UIComponent component,
Object value) {
return value.toString();
}
}
INTRODUCTION A JSF
M2I,LEE,2016-2017
64 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Backing Bean
TP/CONVERTER/src/java/BonjourBean.java
import java.io.Serializable;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class BonjourBean implements Serializable {
private String nom;
private String phone;
public String getNom() {
return nom;
}
public void setNom(String nom) {
this.nom = nom;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
}
INTRODUCTION A JSF
M2I,LEE,2016-2017
65 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Facelet initiale
TP/CONVERTER/web/bonjour.xhtml
<!DOCTYPE html>
<h:head>
<title>CONVERTER</title>
</h:head>
<h:body>
<h1>CONVERTER - bonjour.xhtml</h1>
<h:form>
<h:outputText value="Votre nom : " />
required="true" >
</h:inputText> <br/>
<h:outputText value="Votre telephone :" />
<h:inputText id="phone"
value="#{bonjourBean.phone}"
required="true"
converter="PhoneConverter" >
</h:inputText> <br/>
</h:form>
</h:body>
</html>
INTRODUCTION A JSF
M2I,LEE,2016-2017
66 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Facelet résultat
TP/CONVERTER/web/bienvenue.xhtml
<!DOCTYPE html>
<h:head>
<title>CONVERTER</title>
</h:head>
<h:body>
<h1>CONVERTER - bienvenue.xhtml</h1>
<p><h:outputText value="Bienvenue #{bonjourBean.nom} !" /></p>
<p><h:outputText value="Votre telephone : #{bonjourBean.phone}"/></p>
</h:body>
</html>
INTRODUCTION A JSF
M2I,LEE,2016-2017
67 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Résultat du custom converter
INTRODUCTION A JSF
M2I,LEE,2016-2017
68 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Fichiers de langues Configuration JSF Utilisation
Sommaire
1
Jsf
2
1ère application
3
Validation
4
Converter
5
6
Layout
7
Primefaces
8
TP
INTRODUCTION A JSF
M2I,LEE,2016-2017
69 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
JSF et langues
Il faut définir un fichier au format properties qui va contenir la définition
des chaînes de caractères :
le fichier doit avoir l’extension .properties
il doit être dans le classpath de l’application
il est composé d’une paire clé=valeur par ligne. La clé permet
d’identifier de façon unique la chaîne de caractères
INTRODUCTION A JSF
M2I,LEE,2016-2017
71 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Création des fichiers
Fichier par défaut
msg.properties
titre=HELLO
bienvenue=Bienvenue
Fichier français
msg_fr.properties
titre=HELLO
bienvenue=Bienvenue
Fichier anglais
msg_en.properties
titre=HELLO
bienvenue=Welcome
INTRODUCTION A JSF
M2I,LEE,2016-2017
72 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Configuration JSF
TP/INTERNATIONALISATION/web/WEB-INF/faces-config.xml
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
version="2.0">
<application>
<locale-config>
<default-locale>fr</default-locale>
<supported-locale>en</supported-locale>
<supported-locale>fr</supported-locale>
</locale-config>
</application>
</faces-config>
INTRODUCTION A JSF
M2I,LEE,2016-2017
74 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Bean de changement de langue
TP/INTERNATIONALISATION/src/java/LangueBean.java
import
import
import
import
import
java.io.Serializable;
java.util.Locale;
javax.faces.bean.ManagedBean;
javax.faces.bean.SessionScoped;
javax.faces.context.FacesContext;
@ManagedBean
@SessionScoped
public class LangueBean implements Serializable {
public String activerFR() {
FacesContext context = FacesContext.getCurrentInstance();
context.getViewRoot().setLocale(Locale.FRENCH);
return null;
}
public String activerEN() {
FacesContext context = FacesContext.getCurrentInstance();
context.getViewRoot().setLocale(Locale.ENGLISH);
return null;
}
}
INTRODUCTION A JSF
M2I,LEE,2016-2017
76 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Facelet
TP/INTERNATIONALISATION/web/bonjour.xml
<!DOCTYPE html>
<f:loadBundle basename="msg" var="msg"/>
<h:head>
<title><h:outputText value="#{msg.titre}"/></title>
</h:head>
<h:body>
<h1><h:outputText value="#{msg.titre}"/> - bonjour.xhtml</h1>
<h:form>
<h:commandLink action="#{langueBean.activerFR}" immediate="true">
FR
</h:commandLink>
<h:commandLink action="#{langueBean.activerEN}" immediate="true">
EN
</h:commandLink>
<br/>
<h:commandButton value="#{msg.valider}" action="bienvenue" />
</h:form>
</h:body>
</html>
INTRODUCTION A JSF
M2I,LEE,2016-2017
77 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Résultat
INTRODUCTION A JSF
M2I,LEE,2016-2017
78 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Intérêts Construction Utilisation
Sommaire
1
Jsf
2
1ère application
3
Validation
4
Converter
5
6
Layout
7
Primefaces
8
TP
INTRODUCTION A JSF
M2I,LEE,2016-2017
79 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Intérêts des templates d’affichage
Offrir une vue homogène sur l’ensemble de l’application
Découper les pages en zones
Eclater le code des vues −→ Simplifier le développement
INTRODUCTION A JSF
M2I,LEE,2016-2017
81 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Arborescence de fichiers
INTRODUCTION A JSF
M2I,LEE,2016-2017
83 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
layout.xhtml
TP/LAYOUT/web/template/layout.xhtml
<h:head>
<h:outputStylesheet name="style.css" library="css" />
</h:head>
<h:body>
<div id="page">
<div id="header">
<ui:insert name="header" >
<ui:include src="/template/header.xhtml" />
</ui:insert>
</div>
<div id="content">
<ui:insert name="content" >
<ui:include src="/template/content.xhtml" />
</ui:insert>
</div>
<div id="footer">
<ui:insert name="footer" >
<ui:include src="/template/footer.xhtml" />
</ui:insert>
</div>
</div>
</h:body>
</html>
INTRODUCTION A JSF
M2I,LEE,2016-2017
84 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Facelets
TP/LAYOUT/web/template/header.xhtml
<body>
<ui:composition>
<h1>Header par defaut</h1>
</ui:composition>
</body>
</html>
TP/LAYOUT/web/template/content.xhtml
<body>
<ui:composition>
<h1>Contenu par defaut</h1>
</ui:composition>
</body>
</html>
INTRODUCTION A JSF
M2I,LEE,2016-2017
85 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
CSS
TP/LAYOUT/web/resources/css/style.css
#page{
width: 800px;
margin: 0 auto;
}
#header{
width: 100%;
height:100px;
border: 1px solid #000;
margin-bottom:16px;
}
#content{
width: 100%;
height:200px;
margin-right:16px;
margin-bottom:16px;
}
#footer{
width: 100%;
height:100px;
}
INTRODUCTION A JSF
M2I,LEE,2016-2017
86 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Exemple : page Hello
TP/LAYOUT/web/bonjour.xhtml
<!DOCTYPE html>
<h:head>
</h:head>
<h:body>
<ui:composition template="/template/layout.xhtml">
<ui:define name="header">
<h1>HELLO - bonjour.xhtml</h1>
</ui:define>
<ui:define name="content">
<h:form>
</h:form>
</ui:define>
<ui:define name="footer">
<h2>Footer de la page Bonjour</h2>
</ui:define>
</ui:composition>
</h:body>
</html>
INTRODUCTION A JSF
M2I,LEE,2016-2017
88 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Résultat
INTRODUCTION A JSF
M2I,LEE,2016-2017
89 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Bibliothèque Utilisation Apprentissage
Sommaire
1
Jsf
2
1ère application
3
Validation
4
Converter
5
6
Layout
7
Primefaces
8
TP
INTRODUCTION A JSF
M2I,LEE,2016-2017
90 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Intérêts de Primefaces
Créer :
des interfaces web plus conviviales grâce au nombreux
composants
des interfaces plus fluides grâce à la technologie AJAX
−→ interfaces riches ou RIA (Rich Internet Application).
INTRODUCTION A JSF
M2I,LEE,2016-2017
92 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Primefaces % JSF
Les pages JSF sont construites avec 3 bibliothèques de balises :
les balises <h :x> −→ balises HTML
les balises <f :y> −→ balises JSF
les balises <ui :z> −→ balises des facelets
On ajoute les balises "Primefaces" <p :z> de l’espace de noms
[http ://primefaces.org/ui]
−→ Seule modification à apporter
INTRODUCTION A JSF
M2I,LEE,2016-2017
93 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Javascript
JQuery
JQuery UI (User Interface)
INTRODUCTION A JSF
M2I,LEE,2016-2017
94 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Comportement AJAX
1
Un événement (géré par du Javascript) se produit dans la page
2
Le Javascript fait un POST asynchrone à l’application web.
Ce POST met à jour le modèle de la page à partir des valeurs postées
3
L’application web renvoie au Javascript, une réponse XML (le X de AJAX) ou JSON
(JavaScript Object Notation),
4
Le Javascript utilise cette réponse pour mettre à jour une zone précise du DOM
INTRODUCTION A JSF
M2I,LEE,2016-2017
95 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Bean Editor
TP/PRIMEFACES/src/java/EditorBean.java
import javax.faces.bean.SessionScoped;
@ManagedBean(name = "editorBean")
@SessionScoped
public class EditorBean {
private String text;
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
}
INTRODUCTION A JSF
M2I,LEE,2016-2017
97 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Composant Editor
TP/PRIMEFACES/web/index.xhtml
<h:form>
<p:editor id="editor" widgetVar="editorWidget" value="#{editorBean.text}" width="600" />
<h:panelGrid columns="2" style="margin-top: 10px">
<p:commandButton value="Submit" update="display"
oncomplete="PF(’dlg’).show()" icon="ui-icon-disk" />
<p:commandButton value="Clear" type="button"
onclick="PF(’editorWidget’).clear();" icon="ui-icon-close" />
</h:panelGrid>
<p:dialog header="Content" widgetVar="dlg" showEffect="fade" hideEffect="fade">
<h:outputText id="display" value="#{editorBean.text}" escape="false" />
</p:dialog>
</h:form>
INTRODUCTION A JSF
M2I,LEE,2016-2017
98 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Résultat
INTRODUCTION A JSF
M2I,LEE,2016-2017
99 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Apprentissage
http://www.primefaces.org/showcase/
Méthode :
1
repérer le composant Primefaces qu’on veut utiliser
2
étudier son exemple
INTRODUCTION A JSF
M2I,LEE,2016-2017
101 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Sommaire
1
Jsf
2
1ère application
3
Validation
4
Converter
5
6
Layout
7
Primefaces
8
TP
INTRODUCTION A JSF
M2I,LEE,2016-2017
102 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Buts du TP
Prendre en main JSF
Intégration dans un IDE (Netbeans)
Manipuler la bibliothèque de composants Primefaces
=⇒ http ://lipn.univ-paris13.fr/∼fortier/Enseignement/Jsf/TP
INTRODUCTION A JSF
M2I,LEE,2016-2017
103 / 104
JSF
1ère application
Validation
Converter
Layout
Primefaces
TP
Organisation
Utiliser Netbeans
Type "tutoriel réfléchi"
Ne pas utiliser la librairie Jsf intégrée à Netbeans
→ Partir des librairies fournies
→ Possibilité d’utiliser maven
Tests unitaires avec JUNITS
INTRODUCTION A JSF
M2I,LEE,2016-2017
104 / 104

introduction a jsf

Transcription

Documents pareils

Formation Iheb JEBALIA Stages et projets Compétences

JSF 2 : Le framework Java Standard

L`univers rétro-pop

Mail :

Ingénieur en Informatique UTC – Jeune diplômé

Adultes Liste des nouveautés Policiers SF

premieres pages

Le framework JSF - Java Server Faces