JSF (JAVA SERVER FACES) Notion de framework

Notion de framework
! 
! 
! 
Les frameworks sont des structures logicielles qui définissent des
cadres dans lesquels s’insèrent les objets et concepts spécifiques à
une application.
En pratique, un framework est un ensemble de classes et de
mécanismes associés à une architecture logicielle qui fournissent un
ou plusieurs services techniques ou métiers aux applications qui
s’appuient dessus
Exemple : Framework MVC (Java)
! 
! 
JSF (JAVA SERVER FACES)
Qu est-ce que JSF ?
! 
JSF : Java Server Faces
!  Framework
Java :
"  librairie
de présentation pour les applications Web en
! 
! 
Struts
Spring MVC
Tapestry
JSF (standard JEE)
Java Server Faces
! 
Concept novateur :
!  Suit
un modèle orienté évènement
!  Suit une architecture orientée composant de composants graphiques
se basant sur ces composants
"  fonctionnalités
! 
Implémentations
!  Sun
" 
– Mojarra
https://javaserverfaces.java.net/
!  Apache
" 
! 
– MyFaces
http://myfaces.apache.org/
Oracle – ADF Faces
" 
http://www.oracle.com/technology/products/adf/adffaces/index.html
! 
Mais aussi :
!  respecte
le concept MVC
!  permet de générer un format autre que du HTML (XML, WML,
….),
!  propose des librairies de composants graphiques,
!  permet de créer ses propres composants,
!  Ajax ready
Nouvelle vision
Composants de l’architecture JSF
!  Représentation
de la page sous forme d’arbre des
composants, et accessible via le contexte de l application
! 
Contrôleur (Faces Servlet) :
! 
! 
! 
ViewRoot
! 
MaPage
Vue: pages web (JSP, XHTML) :
! 
Form
Servlet principale de l'application qui sert de contrôleur.
Toutes les requêtes de l'utilisateur passent systématiquement par elle, qui les
examine et appelle les différentes actions correspondantes.
Fait partie du framework
! 
JSF peut générer plusieurs formats de réponse (comme WML pour les dispositifs
mobiles
JSF utilise les Facelets, dans sa version la plus récente (JSF 2.0)
" 
Identifiant :
OutputText
! 
InputText
Mot de passe :
! 
Soumettre
OutputText
InputText
! 
! 
! 
! 
! 
Moteur de rendu (Renderrer): décode la requête de l'utilisateur
pour initialiser les valeurs du composant et encode la réponse pour
créer une représentation du composant pour le client
Convertisseurs et validateurs: permettent de valider les champs
de saisie textuelle et de les convertir vers d’autres types d’objets
Classes Java spécialisées qui synchronise les valeurs avec les composants UI,
Accèdent à la logique métier et gèrent la navigation entre les pages.
Faces-config.xml
CommandButton
Composants de l’architecture JSF
Facelets est formée d'une arborescence de composants UI
Modèle Managed Bean/Backing Bean
Fichier de configuration de l’application définissant les règles de navigation et
les différents managed beans utilisés
Interface Homme Machine (IHM)
! 
Plusieurs technologies possibles pour l’écriture des pages :
! 
! 
! 
Ensemble de balises JSF constituant la page :
! 
! 
! 
! 
JSP
XHTML (Facelets)
Composants graphiques
Composants de conversion
Composants de validation
Création des de pages avec Facelets
! 
! 
Inclus dans JSF
Modélisation avec des templates
IHM : Template de page - Facelets
! 
IHM : Template de page (suite…)
Facelets est un framework de composition de pages ou de
composants.
Inclusion de page
Modèle (template)
En-tête
En-tête
Corps
Pied de page
Insertion de page
Corps
Inclusion de page
Pied de page
IHM : Exemple de page
IHM : Composants graphiques
Déclaration des librairies
Template de page
(Facelets)
Ressources
Composants JSF
Lien JavaBean
IHM : Composants additionnels
! 
Il existe des librairies supplémentaires proposant des
composants supplémentaires.
! 
! 
! 
! 
! 
! 
Compléments des composants de base,
Menu
Onglet
Treeview
Calendrier
…
ManagedBean : exemple
ManagedBean
C’est un JavaBean géré par JSF
!  Permet de faire le lien entre l’IHM et le code métier
de l’application.
! 
!  Doit
contenir des accesseurs (getters) et des mutateurs
(setters) pour champs de l’IHM.
! 
Définition au sein du fichier faces-config.xml ou par
les annotations.
La configuration : faces-config.xml
Annotations de
paramétrage
Attribut relatif
au champ
de saisie de l IHM
Fichier de ressources
par défaut
I18N
Accesseur du
champ de saisie
Mutateur du
champ de saisie
Navigation
La configuration : web.xml
Respect du concept M.V.C.
Controler
FacesServlet
Nom de l application
Requête issue
faces-config.xml
du client
Extension des pages
Servlet utilisée
Réponse retournée
au client
Mapping de la servlet
Model
View
Page d accueil
Convertisseurs
! 
Permet la conversion des données :
!  IHM
vers ManagedBean
!  ManagedBean vers IHM.
Les convertisseurs
MaPage
Nom :
Prénom :
! 
Exemples :
!  Conversion
de date
!  Conversion de nombre
! 
Il est facile de créer son propre convertisseur.
Date de naissance :
Enregistrer
PersonneBean
Les validateurs
Vérifier la validité des données converties
!  Applicable sur l’ensemble des composants de saisies
!  Exemples de validateurs :
! 
!  valider
la présence de saisie,
!  valider que la saisie est conforme à une plage de
valeurs,
!  valider le format de saisie (Expression Régulière)
!  valider la longueur de la saisie,
!  …
Le rendu
Les composants JSF peuvent être transcrits en HTML,
XML, WML… en fonction de la cible
!  Ceci est possible par le biais de Renderer
!  Les Renderers sont des classes Java :
! 
les attributs des composants,
!  transcrivant le composant en fonction du format
souhaité.
Les validateurs
MaPage
MaPage
Identifiant :
Identifiant :
Erreur
Mot de passe :
Mot de passe :
Soumettre
Soumettre
Le rendu
maPage.xhtml
!  récupérant
HTMLInputTextRenderer.java
maPage.html
Etapes de développement avec JSF
Le cycle de vie
! 
Décrit les différentes étapes entre la requête du client et la réponse
retournée
Reconstruction
de l arborescence
des composants
Extraction
des valeurs
de la requête
Restore
View
Apply
Requests
Validation
et conversion
des données
Requête issue
du client
Réponse retournée
Process
Validations
Render
Response
Invoke
Application
Update
Model
Values
Génération
de la réponse
Appel des méthodes
pour le traitement
de la page
Mise à jour du modèle
après validation
et/ou conversion
au client
Erreur de
conversion
! 
Fichier de déploiement de l’application
Déclare la servlet principale : javax.faces.webapp.FacesServlet
!  point d’entrée d’une application JSF
" 
" 
! 
! 
Préfixe /faces/ (http://localhost/myAppli/faces/index.jsp)
Suffixes *.jsf ou *.faces (http://localhost/myAppl/index.jsf)
Spécifier le nom et le chemin du fichier de configuration
!  Nom du paramètre : javax.faces.application.CONFIG_FILES
!  Exemple : /WEB-INF/faces-config.xml
Spécifie où l’état de l’application doit être sauvegardé
Nom du paramètre : javax.faces.STATE_SAVING_METHOD
!  Valeurs possibles : client ou server
! 
2.  Développer les objets du modèle (Managed Bean ou les Backing Bean)
3.  Déclarer les Managed Bean dans le fichier de configuration de
l'application faces-config.xml
4.  Créer des pages en utilisant les composants UI d'interface utilisateur et
les tagLib de JSF
5.  Définir les règles de navigation entre les pages dans faces-config.xml
Erreur de
conversion et/ou
de validation
web.xml
! 
1.  Configurer le fichier web.xml afin de déclarer le Faces Servlet
faces-config.xml
! 
Décrit essentiellement 6 éléments principaux
! 
Les beans mangés <managed-bean>
! 
Cette balise peut être remplacée par les annotations
les règles de navigation <navigation-rule>
!  les ressources éventuelles suite à des messages <messagebundle>
!  la configuration de la localisation <resource-bundle>
!  la configuration des validateurs et des convertisseurs
<validator> et <converter>
!  d’autres éléments liés à des nouveaux composants JSF
<render-kit>
! 
Balises JSF personnalisées
! 
Les composants JSF sont utilisés
! 
dans les pages JSP au moyen de balises personnalisées dédiées aux
JSF
! 
! 
CORE <%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
HTML <%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
!  dans
! 
! 
! 
les facelets au moyen xmlns :
CORE <xmlns:f="http://java.sun.com/jsf/core">
HTML <xmlns:h="http://java.sun.com/jsf/html">
Penser à utiliser les bibliothèques offrant des composants
graphiques évolués
! 
! 
! 
Primefaces
RichFaces
Icefaces
Managed Bean
! 
! 
Managed Bean - Scope
Déclaré par les annotations ou dans le fichier faces-config.xml
Trois éléments sont à préciser
<managed-bean-name> définit un nom qui servira d’étiquette
quand le Bean sera exploité dans les pages JSP
!  <managed-bean-class> déclare le nom de la classe de type
package.class
!  <managed-bean-scope> précise le type de scope utilisé pour
le Bean (none, application, session, request, view)
! 
faces-config.xml
@ Annotations
@ManagedBean (name= "MyBean")
@SessionScoped
public calss MyFirstBean
{
}
! 
! 
! 
! 
! 
View : persiste durant l’interaction utilisateur avec une seule page
(view) d’une application web.
Request : persiste durant une seule requête HTTP dans une
application web.
Session : persiste pour plusieurs requêtes HTTP d’une même session
dans une application web .
Application : persiste via toutes les interactions utilisateurs avec
l’application web.
None : indique qu’il n y a pas de scope défini
! 
Utilisé lorsque un managed bean référence un autre managed bean. Le
deuxième ne doit pas avoir un scope, s’il doit être créé uniquement au
moment de l’appel.
Accès aux Managed Bean
! 
Les Expressions Languages (EL) sont utilisées pour accéder aux
éléments du Bean dans les vues
! 
! 
! 
#{MyBean.attribut} indique à JSF
!  de déterminer le nom du ManagedBean dans le fichier facesconfig.xml ou dans les annotations
!  de chercher un objet qui porte le nom de MyBean dans son
contexte puis invoque
! 
faces-config.xml indique au contrôleur le schéma de navigation
!  <navigation-rule> pour paramétrer les règles de navigation
!  <from-view-id> indique la vue source où est effectuée la demande de
redirection.
!  <navigation-case> précise une page vue destination pour chaque
valeur de clé
!  <from-outcome> : la valeur de la clé de navigation
!  <to-view-id> : la vue demandée
Deux types de navigation
! 
Navigation statique: La valeur de la clé outcome est connue au moment de l’écriture
de la vue
! 
Navigation dynamique: La valeur de la clé outcome est inconnue au moment de
l’écriture des vues.
" 
" 
" 
Pas besoin du fichier de configuration « faces-config » pour déclarer la navigation !
Utiliser « faces-config » pour la navigation
Les valeurs outcomes peuvent être calculées par des ManagedBeans
Déclaration d’un ManagedBean
@ManagedBean(name = "NumberBean")
@SessionScoped
public class NumberBean {…}
! 
<h:inputText id="in" value="#{NumberBean.number}"/>
! 
! 
la méthode getValue() (pour récupérer la valeur de l’attribut)
ou setValue() pour mettre à jour la valeur de l’attribut
Navigation
! 
! 
Une EL permet d’accéder simplement aux Beans des différents scopes de
l’application (page, request, session et application)
Forme d’une EL dans JSF #{expression}
! 
! 
Accès aux Managed Bean
La valeur saisie dans la vue est stockée dans l’attribut number du managed bean
UserBean. (NumberBean.setNumber())
<h:outputText id="out" value="#{NumberBean.response}"/>
! 
affiche dans la vue la valeur de l’attribut response de NumberBean
(MyBean.getName())
Navigation - outcume
! 
Clé outcome définie dans la page JSF :
! 
En cliquant sur le bouton, on serait redirigé vers la page avec la
clé outcome (valeur de action dans la balise h:commandButton)
! 
Remarque : à Partir de JSF 2.0, on cherche s’il y a une vue avec le
nom « page2 » sans avoir recours au fichier de navigation
Navigation - outcume
! 
Clé outcome définie dans ManagedBean
Events & Listeners
" 
PageController.java
" 
" 
" 
JSF utilise le modèle évènement/écouteur (event/listner) du
JavaBeans (utilisé by Swing).
Les composants UI génèrent des évènements et les écouteurs sont
enregistrés pour ces évènements.
Dans une application JSF, l’intégration de la logique applicative
consiste à assigner l’écouteur approprié au composant qui génère
des évènements
Il y a 3 évènements standards
" 
Value-change events
Action events
" 
Data model events
" 
page1.xhtml
" 
! 
Value-Change Events
Action events
Les évènements value-change sont générés lorsque l’utilisateur
saisie une nouvelle donnée dans un composant inputText
! 
<h:inputText valueChangeListener="#{myForm.processValueChanged}"/>
! 
déclenchés lorsque un composant data traite une ligne (dataTable).
Lorsque l’utilisateur modifie le contenu du champs de saisie et
soumet le formulaire, JSF génère un évènement value-change
public void processValueChanged(ValueChangeEvent event){
HtmlInputText sender = (HtmlInputText)event.getComponent();
sender.setReadonly(true);
}
Générés lorsque l’utilisateur activent des composants
commandes, appelés aussi sources d’actions, intégrant
des contrôles de boutons ou hyperlinks
! 
Action events sont traités par les action listeners
! 
Action Listeners
!  affectent
" 
! 
la navigation
Typiquement, ils réalisent des traitements et retourne une clé outcome, utilisée
par le système de navigation de JSF pour sélectionner la page suivante
N’affecte pas la navigation
" 
Manipulent des composants dans la même vue, sans modifier la vue courante.
Action methods
! 
! 
<h:commandButton type="submit" value="Login“ action="#{loginForm.login}"/>
Action Listener Methods
! 
Pour exécuter un code métier qui n’est pas associé à la navigation.
! 
On associe une méthode actionListener avec le composant
Lorsque on clique sur le bouton, l’evenement action est déclenché et la
méthode login du ManagedBean loginForm est exécutée.
public class LoginForm {
...
public String login(){
if (...) {// login is successful
return "success";
}
else{ return "failure"; }
}
...
}
JSF Et AJAX ?
! 
Les implémentations JSF2 supportent nativement AJAX.
!  <f:ajax>
! 
Les librairies supplémentaires proposent des
compléments :
!  Primefaces
!  MyFaces
!  ICEfaces
!  JBoss
Richfaces
<h:commandButton id="redisplayCommand" type="submit" value="Redisplay“
actionListener="#{myForm.doIt}"/>
! 
Contrairement aux méthodes d’action, les action listeners ont accès
au composant qui a déclenché l’évènement.
public void doIt(ActionEvent event){
HtmlCommandButton button = (HtmlCommandButton)event.getComponent();
button.setValue("It's done!");
}