plan cest quoi jsf ? cest quoi jsf ? comment ça marche ? comment ça marche ? détail de...
TRANSCRIPT
JAVA SERVER FACES (JSF)
Mariam HAMADNajwa HAMDANE
Abbas ABBAS
Valeur C2: Analyse
Plan
C’est quoi JSF ?
Comment ça marche ?
Détail de fonctionnement - configuration
Le développement
Demo
Bref Historique
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
Sun Open-source Microsoft
19961997
Servlet PHP,PERL,etc… ASP
1998 JSP
MVC
ASP.NET, WebForms
2000 Struts
2004 JSF
C’est quoi 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
Qu’est ce que 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.
But de JSF?
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 ?
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.
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:
Les Avantages
Exemple d’événements
AccepterXEVENEMENT
value_changed
Gérer
événement
Changement état
action
Enregistrement 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 formulaire1.Construire le formulaire dans une page JSP en
utilisant les balises JSF2. Développer un Bean qui effectue un « Mapping »
avec les valeurs du formulaire3. Modifier le formulaire pour spécifier l’action et
l’associer au Bean4. Fournir des Converters et des Validators pour
traiter les données du formulaire5. Paramétrer le fichier faces-config.xml pour
déclarer le Bean et les règles de navigation6. Créer les pages JSP correspondant à chaque
condition de retour7. 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
Mot de passe:
Identifiant:
Soumettre
ViewRoot
Form
InputText
InputText
CommandButton
OutputText
OutputText
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
composantsTemplating (modélisation) de pages avec
Facelets◦ Inclus dans JSF
IHM : Template de page - Facelets
Modèle (template)
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
IHM : Template de page (suite…)
Inclusion de page
Inclusion de page
Insertion de page
fait partie du jeu de composants core, utilisé comme conteneur de tous les composants JSF dans le page
Composants JSF
IHM : Exemple de page
Déclaration des librairies
Template de page(Facelets)
Ressources
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 ICEfacesJBoss 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 ManagedBeanAnnotations 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 «faces-config.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
Navigation
I18N
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
Mapping de la servlet
Page d’accueil
Servlet utilisée qui gère les entréesau contexte JSF
Extension des pages
JSF et MVCModèle :
◦Couplé à JSF par un Bean géré.Vue :
◦JSP + balises JSFContrô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.
PersonneBean
Les convertisseursMaPage
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. 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-zA-Z]+\\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:
Et enfin, pour utiliser le validator dans les pages JSF, on procède comme suit:
<validator><validator-id>personValidator</validator-id><validator-class>validators.PersonValidator</validator-class></validator>
<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
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 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
HTMLInputTextRenderer.java
maPage.xhtml
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
ApplyRequests
ApplyRequests
RestoreView
RestoreView
Process Validations
Process Validations
UpdateModelValues
UpdateModelValues
InvokeApplication
InvokeApplication
RenderResponse
RenderResponse
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
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 demoinstalling Java EE 6 SDK From
OracleNetBeans IDE 7.0Glassfish 3JSF 2.0
Demo
Arbre de file dans notre demo
Les étapes d’ éxecution
index.jsp
login.jsp
welcome.jsp create.jsp
Java Server Faces Welcome Page
Create New Accountlogi
n logout Create