Transcript JSF

Plan

C’est quoi JSF ?

Comment ça marche ?

Détail de fonctionnement - configuration

Le développement

Demo
Bref Historique
Sun
Open-source
Microsoft
1996
1997
Servlet PHP,PERL,etc… ASP
1998
JSP
MVC
ASP.NET, WebForms
2000
2004
Struts
JSF
Divergences d'approche selon les éditeurs.
 Plus grande séparation des concepts.

d’où vient l’idée de JSF?
-Problème : Comment concevoir une application Web de la même
façon qu'une application traditionnelle
-Plusieurs solutions existent :
WebForms : Microsoft
Struts : Apache
JSF : Sun
C’est quoi JSF?
Qu’est ce que JSF?

Java Server Faces est un Framework d'interface
utilisateur coté serveur pour les applications
webs permettant de respecter le modèle
d’architecture MVC, basé sur les technologies JSP,
Servlets, Xhtml....

Définie au sein d’une Java Specification Request (JSR)
émise par la Java Community Process (JCP).
-
-
JSF est actuellement en version 1.2 ( JSR 252).
Les spécifications de la version 1.0 et 1.1 étaient définies
dans la JSR 127.
La version 2.0 est en cours d’utilisation via la JSR 314.
-
Jsf 2.0 est integree dans NetBeans 6.8
-
But de JSF?

Le but de JSF est d'accroître la
productivité des développeurs dans le
développement des interfaces utilisateur
tout en facilitant leur maintenance.
Quelle place dans Java/J2EE ?
JSF est le fruit de la communauté Java via
le JCP. Le développement de JSF suit donc
la même procédure que les autres
technologies Java comme JSP, Servlets, EJB,
....
 Cette procédure consiste pour une
version donnée de la technologie, en une
phase de spécification puis une phase
d'implémentation quasiment parallèle. JSF
fait partie de J2EE 1.4.

Quelle place dans Java/J2EE ?
JSF s’appuie sur les technologies précédentes:
 Génération en Servlet
 Utilisation des composants JSF dans les pages JSP
 Les composants JSF sont exposés aux JSPs grâce
aux balises personnalisés
Pourquoi utiliser JSF ?




JSF est un standard J2EE.
Le support de JSF par les éditeurs J2EE est
obligatoire. Actuellement, les plus grands éditeurs
Java annoncent ou proposent une intégration de JSF
dans leurs IDEs: ( Environnement de
développement intégré) comme NetBeans,
Eclipse,…
Il existe plusieurs frameworks webs Java dédiés au
développement d'interfaces utilisateur mais aucun
n'est un standard et va aussi loin que JSF.
Il bénéficie de concepts déjà éprouvés par Java 2 et
J2EE (composants graphiques Swing, modèle
événementiel, JSP, Servlets) et des apports de Struts
dont le concepteur, Craig Mac Clanahan, est aussi le
co leader et principal développeur de JSF.
Les Avantages
JSF permet :
 une séparation nette entre la couche de présentation et les autres
couches
 un mapping entre l’HTML et l’Objet
 un modèle riche de composants graphiques réutilisables
 une gestion de l'état de l'interface entre les différentes requêtes:
- L’état peut changer chez le client entre 2 requêtes
- JSF prend en charge la gestion de cet état
Voyons l’exemple de gestion d’état:
Exemple d’événements
Gérer
X Accepter
EVENEMENT
événement
value_changed
action
Changement
Enregistrement
état
formulaire
Les Avantages…(Suite)



une liaison simple entre les actions côté
client de l'utilisateur (event listener)et le
code Java côté serveur
JSF peut être utilisé pour générer autre
chose que du HTML (XUL,XML, WML, …)
Possibilité de créer de nouveaux
composants
- JSF permet de combiner plusieurs
composants pour aboutir à un composant
plus complexe
comment ça marche …
L’interface utilisateur construite dans la
page JSP est générée à l’aide de la
technologie JSF(résultat myUI)
 Elle fonctionne sur le serveur et le rendu
est retourné au client:

Etapes pour traiter un
formulaire
1.Construire le formulaire dans une page JSP en utilisant
les balises JSF
2. Développer un Bean qui effectue un « Mapping » avec
les valeurs du formulaire
3. Modifier le formulaire pour spécifier l’action et
l’associer au Bean
4. Fournir des Converters et des Validators pour traiter
les données du formulaire
5. Paramétrer le fichier faces-config.xml pour déclarer le
Bean et les règles de navigation
6. Créer les pages JSP correspondant à chaque condition
de retour
7. Protéger les pages JSP utilisées par le contexte JSF de
façon à éviter d’y accéder directement
Représentation de la page sous forme d’arbre
◦ accessible via le contexte de l’application.
MaPage
ViewRoot
Identifiant:
Form
Mot de passe:
Soumettre
OutputText
InputText
OutputText
InputText
CommandButton
Détail de fonctionnement-IHM

Plusieurs technologies possibles pour l’écriture des
pages :
◦ JSP
◦ XHTML

Ensemble de balises JSF constituant la page :
◦ Composants graphiques: éléments de formulaires,
tableaux…
◦ Composants de conversion et de validation : pour gérer
très simplement les entrées
◦ Les « renderers » : pour l’affichage des composants

Templating (modélisation) de pages avec Facelets
◦ Inclus dans JSF
IHM : Template de page - Facelets

Facelets est un framework de composition de
pages ou de composants.
Modèle (template)
En-tête
En-tête
Corps
Pied de page
Corps
Pied de page
IHM : Template de page (suite…)
fait partie du jeu de composants core, utilisé comme
conteneur de tous les composants JSF dans le page
Inclusion de page
Insertion de page
Inclusion de page
IHM : Exemple de page
Déclaration des librairies
Template de page
(Facelets)
Ressources
Composants JSF
Lien JavaBean
IHM : Les composants graphiques
IHM : Composants additionnels

Il existe des librairies supplémentaires proposant des
composants supplémentaires.
◦
◦
◦
◦
◦
◦



Compléments des composants de base,
Menu
Onglet
Treeview
Calendrier
…
MyFaces Tomahawk
ICEfaces
JBoss RichFaces
C’est quoi 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 et des mutateurs
pour champs de l’IHM: get() et set()

Définition au sein du fichier faces-config.xml
ou par le biais d’annotations.
Dessine moi un ManagedBean
Annotations de
paramétrage
Attribut relatif
au champ
de saisie de l’IHM
Accesseur du
champ de saisie
Mutateur du
champ de saisie
Détail de fonctionnement - configuration
Configuration :le fichier contrôleur «facesconfig.xml »



-
-

Le fichier gérant la logique de l’application web s’appelle par défaut
faces-config.xml
Il est placé dans le répertoire WEB-INF au même niveau que
web.xml
Il décrit essentiellement six principaux éléments :
les Beans managés <managed-bean>
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 Validators et des Converters <validator>
<converter>
d’autres éléments liés à des nouveaux composants JSF <render-kit>
Le fichier de configuration est un fichier XML décrit par une DTD.
La balise de départ est <faces-config> (version 1.1)
La configuration : faces-config.xml
Fichier de ressources
par défaut
I18N
Navigation
Configuration :JSF dans le
web.xml



-

-
Nécessite la configuration du fichier web.xml de façon à ce
que JSF soit pris en compte
Paramétrer le fonctionnement général de l’application : le
contrôleur
Identifier la servlet principale : javax.faces.webapp.FacesServlet
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 sauvé
Nom du paramètre : javax.faces.STATE_SAVING_METHOD
Valeurs possibles : client ou server
Valider ou pas les fichiers XML
Nom du paramètre : com.sun.faces.validateXml
Valeurs possibles : true ou false (défaut : false)
La configuration : web.xml
Nom de l’application
Extension des pages
Servlet utilisée
qui gère les entrées
au contexte JSF
Mapping de la servlet
Page d’accueil
JSF et MVC

Modèle :
◦ Couplé à JSF par un Bean géré.

Vue :
◦ JSP + balises JSF

Contrôleur :
◦ Servlet (FaceServlet)
◦ Règles définies dans un fichier xml
Convertisseur – Validateur - Renderer
Les convertisseurs

Permet la conversion des données :
◦ IHM (un composant)vers ManagedBean,
◦ ManagedBean vers IHM(un composant).

JSF offre deux converters standards qui sont
convertDateTime et convertNumber.

On peut créer mon propre convertisseur.
Les convertisseurs
MaPage
Nom :
Prénom :
Date de naissance :
Enregistrer
PersonneBean
Les validateurs
Vérifier la validité des données converties.
 Applicable sur l’ensemble des composants de saisies.
 On peut créer mon propre validateur.

La création d'un validator personnalisé passe par les étapes suivantes:
-Créer une classe qui implémente l'interface
javax.faces.validator.Validator .
-Déclarer cette classe dans faces-config.xml en lui associant un
identifiant.

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,
…
Validator personnalisé

Par exemple, on souhaite saisir le nom, le prénom et l'age d'une
personne dans un seul champ texte avec le format

"prénom nom age", et on va créer un validator qui valide une
saisie:
public class PersonValidator implements Validator {
private Pattern p = Pattern.compile("[a-zA-Z]+\\s+[a-zAZ]+\\s+[0-9]+");
public void validate(FacesContext context, UIComponent
component, Object value) throws ValidatorException {
Matcher m = p.matcher((String) value);
if (!m.matches()) throw new ValidatorException(new
FacesMessage( FacesMessage.SEVERITY_ERROR, "Entrée
non valide", "Entrée non valide"));
}
}

Il faut ensuite déclarer ce validator dans faces-config.xml:
<validator>
<validator-id>personValidator</validator-id>
<validatorclass>validators.PersonValidator</validatorclass>
</validator>

Et enfin, pour utiliser le validator dans les pages JSF, on
procède comme suit:
<h:inputText value="#{control.name}"
id="name">
<f:validator validatorId="personValidator" />
</h:inputText>
à chaque fois qu'on remplit un champ texte et qu'on
valide, JSF va invoquer la méthode validate de notre
Validator en lui passant les paramètres suivants:
• context: permet d'accéder à l'environnement JSF.
• component: le composant parent de notre validator.
• value: la valeur saisie par l'utilisateur.
 Si l'entrée n'est pas valide, il faut lancer une
exception du type ValidatorException qui prend un
message comme paramètre.
 Un message est composé de:
• gravité: l'une des valeurs suivantes:
SEVERITY_FATAL, SEVERITY_ERROR,
SEVERITY_WARN et
SEVERITY_INFO.
• sommaire: version courte du message d'erreur.

Les validateurs
MaPage
Identifiant
:
MaPage
Identifiant
:
Erreur
Mot de passe :
Mot de passe :
Soumettre
Soumettre
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é.
Le rendu
maPage.xhtml
HTMLInputTextRenderer.java
maPage.html
Le cycle de vie
Le cycle de vie

Le cycle de vie correspond aux
différentes étapes entre la requête du
client et la réponse retournée.
Le cycle de vie
Requête issue
du client
Réponse retournée
au client
Reconstruction
de l’arborescence
des composants
Extraction
des valeurs
de la requête
Validation
et conversion
des données
Restore
View
Apply
Requests
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
Erreur de
conversion
Mise à jour du modèle
après validation
et/ou conversion
Erreur de
conversion et/ou
de validation
Et AJAX ?
Les implémentations JSF2 supportent
nativement AJAX.
 Les librairies supplémentaires proposent des
compléments :

◦ MyFaces
◦ ICEfaces
◦ JBoss Richfaces
Le developpement
Et je développe avec quoi ?

Avec les IDE bien connus et quelques
plugins :
◦ Eclipse
◦ NetBeans
◦ Oracle Jdeveloper

Le problème :
◦ Les plugins sont prévus pour fonctionner avec
une version bien précise de JSF.
 Le paramétrage est un peu fastidieux.
Technologies Utilisees dans le demo
installing Java EE 6 SDK From Oracle
 NetBeans IDE 7.0
 Glassfish 3
 JSF 2.0

Demo
Arbre de file dans notre demo
Les étapes d’ éxecution
index.jsp
Java Server Faces
Welcome Page
login.jsp
login
welcome.jsp
logout
Create
Create New
Account
create.jsp