JAVA SERVER FACES (JSF)

1. JAVA SERVER FACES (JSF) Valeur C2: Analyse Mariam HAMAD Najwa HAMDANE AbbasABBAS

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

3. 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

4. C’est quoi JSF?

5. Qu’estceque 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 SpecificationRequest (JSR) émise par la Java CommunityProcess (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 estintegreedansNetBeans 6.8

6. 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.

7. 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.

8. 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

9. 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 frameworkswebs 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.

10. 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 Voyonsl’exemple de gestion d’état:

11. Gérer événement EVENEMENT Exemple d’événements X Accepter value_changed action Changement état Enregistrement formulaire

12. Les Avantages…(Suite) • une liaison simple entre les actions côté client de l'utilisateur (eventlistener)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

13. comment ça marche …

14. 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:

15. 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

16. MaPage Identifiant: Mot de passe: Soumettre Représentation de la page sous forme d’arbre • accessible via le contexte de l’application. ViewRoot Form OutputText InputText InputText OutputText CommandButton

17. 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

18. Modèle (template) En-tête Corps Pied de page IHM : Template de page - Facelets • Facelets est un framework de composition de pages ou de composants. En-tête Corps Pied de page

19. 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

20. IHM : Exemple de page Déclaration des librairies Template de page (Facelets) Ressources Composants JSF Lien JavaBean

21. IHM : Les composants graphiques

22. 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 • JBossRichFaces

23. 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.

24. 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

25. Détail de fonctionnement - configuration

26. 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)

27. La configuration : faces-config.xml Fichier de ressources par défaut I18N Navigation

28. 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)

29. La configuration : web.xml Nom de l’application Extension des pages Servletutilisée qui gère les entrées au contexte JSF Mapping de la servlet Page d’accueil

30. 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

31. Convertisseur – Validateur - Renderer

32. 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.

33. PersonneBean MaPage Nom : Prénom : Date de naissance : Enregistrer Les convertisseurs

34. 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, • …

35. 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 PersonValidatorimplementsValidator { private Pattern p = Pattern.compile("[a-zA-Z]+\\s+[a-zA-Z]+\\s+[0-9]+"); public voidvalidate(FacesContextcontext, UIComponent component, Object value) throwsValidatorException { 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")); } }

36. 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:validatorvalidatorId="personValidator" /> </h:inputText>

37. à 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 valeurssuivantes: SEVERITY_FATAL, SEVERITY_ERROR, SEVERITY_WARN et SEVERITY_INFO. • sommaire: version courte du message d'erreur.

38. Identifiant : MaPage MaPage Erreur Mot de passe : Soumettre Identifiant : Mot de passe : Soumettre Les validateurs

39. 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é.

40. Le rendu maPage.xhtml HTMLInputTextRenderer.java maPage.html

41. Le cycle de vie

42. 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.

43. Le cycle de vie 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

44. Et AJAX ? • Les implémentations JSF2 supportent nativement AJAX. • Les librairies supplémentaires proposent des compléments : • MyFaces • ICEfaces • JBossRichfaces

45. Le developpement

46. 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.

47. Technologies Utiliseesdans le demo • installingJava EE 6 SDKFrom Oracle • NetBeans IDE 7.0 • Glassfish 3 • JSF 2.0

48. Demo

49. Arbre de file dansnotre demo

50. Les étapesd’éxecution index.jsp Java Server Faces Welcome Page login.jsp Create New Account login logout Create welcome.jsp create.jsp