JSF (JAVA SERVER
FACES)
Notion de framework
 Les frameworks sont des structures logicielles qui
définissent des cadres dans lesquels s’insèrent l...
Qu’est-ce que JSF ?
 JSF : Java Server Faces
 Framework de présentation pour les applications
Web en Java :
 librairie ...
Java Server Faces
 Concept novateur :
 Suit un modèle orienté évènement
 Suit une architecture orientée composant
 Mai...
Nouvelle vision
 Représentation de la page sous forme d’arbre des
composants, et accessible via le contexte de
l’applicat...
Composants de l’architecture JSF
 Contrôleur (Faces Servlet) :
 Servlet principale de l'application qui sert de contrô...
Composants de l’architecture
JSF
 Moteur de rendu (Renderrer): décode la requête de
l'utilisateur pour initialiser les va...
Interface Homme Machine (IHM)
 Plusieurs technologies possibles pour l’écriture des
pages :
 JSP
 XHTML (Facelets)
 En...
Modèle (template)
IHM : Template de page - Facelets
 Facelets est un framework de composition de pages ou
de composants.
...
IHM : Template de page (suite…)
Inclusion de page
Inclusion de page
Insertion de page
Composants JSF
IHM : Exemple de page
Déclaration des librairies
Template de page
(Facelets)
Ressources
Lien JavaBean
IHM : Composants graphiques
IHM : Composants additionnels
 Il existe des librairies supplémentaires proposant des
composants supplémentaires.
 Compl...
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.
 D...
ManagedBean : exemple
Annotations de
paramétrage
Attribut relatif
au champ
de saisie de l’IHM
Accesseur du
champ de saisie...
La configuration : faces-config.xml
Fichier de ressources
par défaut
Navigation
I18N
La configuration : web.xml
Nom de l’application
Mapping de la servlet
Page d’accueil
Servlet utilisée
Extension des pages
Respect du concept M.V.C.
Réponse retournée
au client
Requête issue
du client
Controler
FacesServlet
View
Model
faces-conf...
Convertisseurs
 Permet la conversion des données :
 IHM vers ManagedBean
 ManagedBean vers IHM.
 Exemples :
 Conversi...
PersonneBean
Les convertisseurs
MaPage
Prénom :
Nom :
Enregistrer
Date de naissance :
Les validateurs
 Vérifier la validité des données converties
 Applicable sur l’ensemble des composants de
saisies
 Exem...
Les validateurs
MaPage
Mot de passe :
Identifiant :
Soumettre
MaPage
Mot de passe :
Identifiant :
Soumettre
Erreur
Le rendu
 Les composants JSF peuvent être transcrits en
HTML, XML, WML… en fonction de la cible
 Ceci est possible par l...
Le rendu
HTMLInputTextRenderer.java
maPage.xhtml
maPage.html
Le cycle de vie
Apply
Requests
Restore
View
Process
Validations
Update
Model
Values
Invoke
Application
Render
Response
Rec...
Etapes de développement avec
JSF
1. Configurer le fichier web.xml afin de déclarer le Faces Servlet
2. Développer les obje...
web.xml
 Fichier de déploiement de l’application
 Déclare la servlet principale :
javax.faces.webapp.FacesServlet
 poin...
faces-config.xml
 Décrit essentiellement 6 éléments principaux
 Les beans mangés <managed-bean>
 Cette balise peut être...
Balises JSF personnalisées
 Les composants JSF sont utilisés
 dans les pages JSP au moyen de balises personnalisées
dédi...
Managed Bean
 Déclaré par les annotations ou dans le fichier faces-
config.xml
 Trois éléments sont à préciser
 <manage...
Managed Bean - Scope
 View : persiste durant l’interaction utilisateur avec une seule
page (view) d’une application web.
...
Accès aux Managed Bean
 Les Expressions Languages (EL) sont utilisées pour
accéder aux éléments du Bean dans les vues
 U...
Accès aux Managed Bean
 Déclaration d’un ManagedBean
@ManagedBean(name = "NumberBean")
@SessionScoped
public class Numbe...
Navigation
 faces-config.xml indique au contrôleur le schéma de navigation
 <navigation-rule> pour paramétrer les règle...
Navigation - outcome
 Clé outcome définie dans la page JSF :
 En cliquant sur le bouton, on serait redirigé vers la page...
Navigation - outcome
 Clé outcome définie dans ManagedBean
PageController.java
page1.xhtml
Events & Listeners
 JSF utilise le modèle évènement/écouteur (event/listner) du
JavaBeans (utilisé by Swing).
 Les compo...
Value-Change Events
 Les évènements value-change sont générés lorsque
l’utilisateur saisie une nouvelle donnée dans un
c...
Action events
 Générés lorsque l’utilisateur activent des
composants commandes, appelés aussi sources
d’actions, intégran...
Action methods
 <h:commandButton type="submit"
value="Login“ action="#{loginForm.login}"/>
 Lorsque on clique sur le bou...
Action Listener Methods
 Pour exécuter un code métier qui n’est pas associé à la
navigation.
 On associe une méthode act...
JSF Et AJAX ?
 Les implémentations JSF2 supportent nativement
AJAX.
 <f:ajax>
 Les librairies supplémentaires proposent...
Java Server Faces (JSF)
Java Server Faces (JSF)
Prochain SlideShare
Chargement dans…5
×

Java Server Faces (JSF)

517 vues

Publié le

Le framework MVC JSF.

Publié dans : Formation
1 commentaire
2 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
517
Sur SlideShare
0
Issues des intégrations
0
Intégrations
12
Actions
Partages
0
Téléchargements
0
Commentaires
1
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Java Server Faces (JSF)

  1. 1. JSF (JAVA SERVER FACES)
  2. 2. 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)  Struts  Spring MVC  Tapestry  JSF (standard JEE)
  3. 3. Qu’est-ce que JSF ?  JSF : Java Server Faces  Framework de présentation pour les applications Web en Java :  librairie de composants graphiques  fonctionnalités se basant sur ces composants  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
  4. 4. Java Server Faces  Concept novateur :  Suit un modèle orienté évènement  Suit une architecture orientée composant  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
  5. 5. Nouvelle vision  Représentation de la page sous forme d’arbre des composants, et accessible via le contexte de l’application MaPage Mot de passe : Identifiant : Soumettre ViewRoot Form InputText InputText CommandButton OutputText OutputText
  6. 6. Composants de l’architecture JSF  Contrôleur (Faces Servlet) :  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  Vue: pages web (JSP, XHTML) :  JSF utilise les Facelets, dans sa version la plus récente (JSF 2.0)  Facelets est formée d'une arborescence de composants UI  Modèle Managed Bean/Backing Bean  Classes Java spécialisées qui synchronisent les valeurs avec les composants UI,  Accèdent à la logique métier et gèrent la navigation entre les pages.  Faces-config.xml  Fichier de configuration de l’application définissant les règles de navigation et les différents managed beans utilisés
  7. 7. Composants de l’architecture JSF  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
  8. 8. Interface Homme Machine (IHM)  Plusieurs technologies possibles pour l’écriture des pages :  JSP  XHTML (Facelets)  Ensemble de balises JSF constituant la page :  Composants graphiques  Composants de conversion  Composants de validation  Création de pages avec Facelets  Inclus dans JSF  Modélisation avec des templates
  9. 9. Modèle (template) IHM : Template de page - Facelets  Facelets est un framework de composition de pages ou de composants. En-tête Corps Pied de page En-tête Pied de page Corps
  10. 10. IHM : Template de page (suite…) Inclusion de page Inclusion de page Insertion de page
  11. 11. Composants JSF IHM : Exemple de page Déclaration des librairies Template de page (Facelets) Ressources Lien JavaBean
  12. 12. IHM : Composants graphiques
  13. 13. IHM : Composants additionnels  Il existe des librairies supplémentaires proposant des composants supplémentaires.  Compléments des composants de base,  Menu  Onglet  Treeview  Calendrier  …
  14. 14. 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.
  15. 15. ManagedBean : exemple Annotations de paramétrage Attribut relatif au champ de saisie de l’IHM Accesseur du champ de saisie Mutateur du champ de saisie
  16. 16. La configuration : faces-config.xml Fichier de ressources par défaut Navigation I18N
  17. 17. La configuration : web.xml Nom de l’application Mapping de la servlet Page d’accueil Servlet utilisée Extension des pages
  18. 18. Respect du concept M.V.C. Réponse retournée au client Requête issue du client Controler FacesServlet View Model faces-config.xml
  19. 19. Convertisseurs  Permet la conversion des données :  IHM vers ManagedBean  ManagedBean vers IHM.  Exemples :  Conversion de date  Conversion de nombre  Il est facile de créer son propre convertisseur.
  20. 20. PersonneBean Les convertisseurs MaPage Prénom : Nom : Enregistrer Date de naissance :
  21. 21. 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,  …
  22. 22. Les validateurs MaPage Mot de passe : Identifiant : Soumettre MaPage Mot de passe : Identifiant : Soumettre Erreur
  23. 23. 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 :  récupérant les attributs des composants,  transcrivant le composant en fonction du format souhaité.
  24. 24. Le rendu HTMLInputTextRenderer.java maPage.xhtml maPage.html
  25. 25. Le cycle de vie Apply Requests Restore View Process Validations Update Model Values Invoke Application Render Response Reconstruction de l’arborescence des composants Génération de la réponse Validation et conversion des données Extraction des valeurs de la requête Appel des méthodes pour le traitement de la page Mise à jour du modèle après validation et/ou conversion Erreur de conversion Erreur de conversion et/ou de validation Réponse retournée au client Requête issue du client  Décrit les différentes étapes entre la requête du client et la réponse retournée
  26. 26. Etapes de développement avec JSF 1. Configurer le fichier web.xml afin de déclarer le Faces Servlet 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
  27. 27. web.xml  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
  28. 28. 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 <message-bundle>  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>
  29. 29. 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
  30. 30. Managed Bean  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) @ManagedBean (name= "MyBean") @SessionScoped public calss MyFirstBean { } @ Annotationsfaces-config.xml
  31. 31. Managed Bean - Scope  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.
  32. 32. Accès aux Managed Bean  Les Expressions Languages (EL) sont utilisées pour accéder aux éléments du Bean dans les vues  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}  #{MyBean.attribut} indique à JSF  de déterminer le nom du ManagedBean dans le fichier faces-config.xml ou dans les annotations  de chercher un objet qui porte le nom de MyBean dans son contexte puis invoque  la méthode getValue() (pour récupérer la valeur de l’attribut)  ou setValue() pour mettre à jour la valeur de l’attribut
  33. 33. Accès aux Managed Bean  Déclaration d’un ManagedBean @ManagedBean(name = "NumberBean") @SessionScoped public class NumberBean {…}  <h:inputText id="in" value="#{NumberBean.number}"/>  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())
  34. 34. Navigation  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  Pas besoin du fichier de configuration « faces-config » pour déclarer la navigation !  Navigation dynamique: La valeur de la clé outcome est inconnue au moment de l’écriture des vues.  Utiliser « faces-config » pour la navigation  Les valeurs outcomes peuvent être calculées par des ManagedBeans
  35. 35. Navigation - outcome  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
  36. 36. Navigation - outcome  Clé outcome définie dans ManagedBean PageController.java page1.xhtml
  37. 37. Events & Listeners  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  déclenchés lorsque un composant data traite une ligne (dataTable).
  38. 38. Value-Change 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}"/>  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); }
  39. 39. Action events  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
  40. 40. Action methods  <h:commandButton type="submit" value="Login“ action="#{loginForm.login}"/>  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"; } } ... }
  41. 41. 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 <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!"); }
  42. 42. 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

×