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 (JAVA SERVER FACES)
! 
!  JSF (standard JEE)

Qu est-ce que JSF ? Java Server Faces

!  JSF : Java Server Faces !  Concept novateur :

!  Framework de présentation pour les applications Web en !  Suit un modèle orienté évènement
Java :
!  Suit une architecture orientée composant 
"  librairie de composants graphiques
"  fonctionnalités se basant sur ces composants
!  Implémentations !  Mais aussi :
!  Sun – Mojarra !  respectele concept MVC
"  https://javaserverfaces.java.net/ !  permet de générer un format autre que du HTML (XML, WML,
!  Apache – MyFaces ….),
"  http://myfaces.apache.org/ !  propose des librairies de composants graphiques,
!  Oracle – ADF Faces !  permet de créer ses propres composants,
"  http://www.oracle.com/technology/products/adf/adffaces/index.html
!  Ajax ready
Nouvelle vision Composants de l’architecture JSF

!  Représentationde la page sous forme d’arbre des !  Contrôleur (Faces Servlet) :

!  Servlet principale de l'application qui sert de contrôleur.
composants, et accessible via le contexte de l application !  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
ViewRoot !  Vue: pages web (JSP, XHTML) :
MaPage !  JSF peut générer plusieurs formats de réponse (comme WML pour les dispositifs
mobiles
Form
!  JSF utilise les Facelets, dans sa version la plus récente (JSF 2.0)
"  Facelets est formée d'une arborescence de composants UI
Identifiant :
OutputText InputText !  Modèle Managed Bean/Backing Bean
Mot de passe : !  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.
Soumettre OutputText InputText
!  Faces-config.xml
!  Fichier de configuration de l’application définissant les règles de navigation et
CommandButton les différents managed beans utilisés

Composants de l’architecture JSF Interface Homme Machine (IHM)

!  Moteur de rendu (Renderrer): décode la requête de l'utilisateur !  Plusieurs technologies possibles pour l’écriture des pages :
pour initialiser les valeurs du composant et encode la réponse pour
créer une représentation du composant pour le client !  JSP
!  Convertisseurs et validateurs: permettent de valider les champs !  XHTML (Facelets)
de saisie textuelle et de les convertir vers d’autres types d’objets
!  Ensemble de balises JSF constituant la page :
!  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 Insertion de page
Corps
Pied de page

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 ManagedBean

!  Il existe des librairies supplémentaires proposant des !  C’est un JavaBean géré par JSF
composants supplémentaires.
!  Permet de faire le lien entre l’IHM et le code métier
!  Compléments des composants de base,
!  Menu de l’application.
!  Onglet !  Doit contenir des accesseurs (getters) et des mutateurs
!  Treeview (setters) pour champs de l’IHM.
!  Calendrier
!  …
!  Définition au sein du fichier faces-config.xml ou par
les annotations.

ManagedBean : exemple La configuration : faces-config.xml

Annotations de
paramétrage

Attribut relatif
au champ Fichier de ressources
de saisie de l IHM par défaut

I18N

Accesseur du Navigation
champ de saisie

Mutateur du
champ de saisie
La configuration : web.xml Respect du concept M.V.C.

Controler

FacesServlet

Nom de l application
Requête issue
du client faces-config.xml
Extension des pages

Servlet utilisée
Réponse retournée
au client

Mapping de la servlet Model

Page d accueil View

Convertisseurs Les convertisseurs

!  Permet la conversion des données : PersonneBean

MaPage
!  IHMvers ManagedBean
!  ManagedBean vers IHM.
Nom :
Prénom :

!  Exemples : Date de naissance :

!  Conversion de date Enregistrer

!  Conversion de nombre

!  Il est facile de créer son propre convertisseur.

Les validateurs Les validateurs

MaPage MaPage
!  Vérifier la validité des données converties
!  Applicable sur l’ensemble des composants de saisies

!  Exemples de validateurs :
Identifiant : Identifiant :
Mot de passe : Erreur

!  valider la présence de saisie, Mot de passe :

Soumettre
!  valider que la saisie est conforme à une plage de Soumettre

valeurs,
!  valider le format de saisie (Expression Régulière)

!  valider la longueur de la saisie,

!  …

Le rendu Le rendu

!  Les composants JSF peuvent être transcrits en HTML, maPage.xhtml

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
HTMLInputTextRenderer.java
souhaité.

maPage.html
 Le cycle de vie Etapes de développement avec JSF
!  Décrit les différentes étapes entre la requête du client et la réponse
retournée 1.  Configurer le fichier web.xml afin de déclarer le Faces Servlet
Reconstruction Extraction Validation
de l arborescence
des composants
des valeurs
de la requête
et conversion
des données
2.  Développer les objets du modèle (Managed Bean ou les Backing Bean)
Requête issue
du client Restore Apply Process 3.  Déclarer les Managed Bean dans le fichier de configuration de
View Requests Validations
l'application faces-config.xml

4.  Créer des pages en utilisant les composants UI d'interface utilisateur et

Render Invoke
Update
Model
les tagLib de JSF
Réponse retournée Response Application
Values
au client
5.  Définir les règles de navigation entre les pages dans faces-config.xml
Génération Appel des méthodes Mise à jour du modèle
de la réponse pour le traitement après validation
de la page et/ou conversion

Erreur de
conversion Erreur de
conversion et/ou
de validation

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
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>
!  Spécifie où l’état de l’application doit être sauvegardé !  d’autres éléments liés à des nouveaux composants JSF
!  Nom du paramètre : javax.faces.STATE_SAVING_METHOD <render-kit>
!  Valeurs possibles : client ou server
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 !  View : persiste durant l’interaction utilisateur avec une seule page
!  Trois éléments sont à préciser (view) d’une application web.
!  <managed-bean-name> définit un nom qui servira d’étiquette !  Request : persiste durant une seule requête HTTP dans une
quand le Bean sera exploité dans les pages JSP
application web.
!  <managed-bean-class> déclare le nom de la classe de type
package.class !  Session : persiste pour plusieurs requêtes HTTP d’une même session
!  <managed-bean-scope> précise le type de scope utilisé pour dans une application web .
le Bean (none, application, session, request, view) !  Application : persiste via toutes les interactions utilisateurs avec
l’application web.
faces-config.xml @ Annotations
!  None : indique qu’il n y a pas de scope défini
@ManagedBean (name= "MyBean")
@SessionScoped !  Utilisé lorsque un managed bean référence un autre managed bean. Le
public calss MyFirstBean
{
deuxième ne doit pas avoir un scope, s’il doit être créé uniquement au
moment de l’appel.
}
Accès aux Managed Bean Accès aux Managed Bean
!  Les Expressions Languages (EL) sont utilisées pour accéder aux !  Déclaration d’un ManagedBean
éléments du Bean dans les vues @ManagedBean(name =  "NumberBean")
!  Une EL permet d’accéder simplement aux Beans des différents scopes de @SessionScoped
l’application (page, request, session et application) public class NumberBean {…}
!  Forme d’une EL dans JSF #{expression}
!  #{MyBean.attribut} indique à JSF !  <h:inputText id="in" value="#{NumberBean.number}"/>
!  de déterminer le nom du ManagedBean dans le fichier faces- !  La valeur saisie dans la vue est stockée dans l’attribut number du managed bean
UserBean. (NumberBean.setNumber())
config.xml ou dans les annotations
!  de chercher un objet qui porte le nom de MyBean dans son
contexte puis invoque !  <h:outputText id="out" value="#{NumberBean.response}"/>
!  la méthode getValue() (pour récupérer la valeur de l’attribut) !  affiche dans la vue la valeur de l’attribut response de NumberBean
!  ou setValue() pour mettre à jour la valeur de l’attribut (MyBean.getName())

Navigation Navigation - outcume

!  faces-config.xml indique au contrôleur le schéma de navigation !  Clé outcome définie dans la page JSF :
!  <navigation-rule> pour paramétrer les règles de navigation
!  <from-view-id> indique la vue source où est effectuée la demande de
!  En cliquant sur le bouton, on serait redirigé vers la page avec la
redirection. clé outcome (valeur de action dans la balise h:commandButton)
!  <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 ! !  Remarque : à Partir de JSF 2.0, on cherche s’il y a une vue avec le
!  Navigation dynamique: La valeur de la clé outcome est inconnue au moment de nom « page2 » sans avoir recours au fichier de navigation
l’écriture des vues.
"  Utiliser « faces-config » pour la navigation
"  Les valeurs outcomes peuvent être calculées par des ManagedBeans
 Navigation - outcume
!  Clé outcome définie dans ManagedBean
PageController.java
page1.xhtml
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);
} !  N’affecte pas la navigation
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).
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
"  Manipulent des composants dans la même vue, sans modifier la vue courante.
 Action methods Action Listener Methods
!  <h:commandButton type="submit" value="Login“ action="#{loginForm.login}"/> !  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. <h:commandButton id="redisplayCommand" type="submit" value="Redisplay“
actionListener="#{myForm.doIt}"/>
public class LoginForm {
...
!  Contrairement aux méthodes d’action, les action listeners ont accès
public String login(){
if (...) {// login is successful au composant qui a déclenché l’évènement.
return "success";
} public void doIt(ActionEvent event){
else{ return "failure"; } HtmlCommandButton button = (HtmlCommandButton)event.getComponent();
} button.setValue("It's done!");
... }
}

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