JAVA SERVER FACES (JSF) Valeur C2: Analyse Mariam HAMAD Najwa HAMDANE Abbas ABBAS

Plan C’est quoi JSF ? Comment ça marche ? Détail de fonctionnement - configuration Le développement Demo

Bref Historique Sun Open-source Microsoft 19961997 Servlet PHP,PERL,etc… ASP 1998 JSP MVC ASP.NET, WebForms 2000 Struts 2004 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 événement EVENEMENT X Accepter value_changed action Changement état 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 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 Mot de passe: Identifiant: Soumettre ViewRoot Form 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 Corps Pied de page 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

Déclaration des librairies 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 «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 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 : Vue : Contrôleur : Couplé à JSF par un Bean géré. 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 PersonneBean Enregistrer Nom : Prénom : Date de naissance : 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-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 MaPage Erreur Soumettre Soumettre 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 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 Reconstruction de l’arborescence des composants Extraction des valeurs de la requête Validation et conversion des données Requête issue du client Restore View Apply Requests Process Validations Render Response Invoke Application Update Model Values Réponse retournée au client 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 Erreur de 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 Create New Account login logout Create welcome.jsp create.jsp