JSF Java Server Faces INTIFormation Sommaire 1 Contexte

JSF: Java Server Faces INTI-Formation

Sommaire 1. Contexte 2. Introduction 3. Structure de JSF 4. Configuration de JSF 5. Le cycle de vie de JSF 6. Les composants de JSF 7. Les points fort de JSF Nader BEN ABDELKRIM Octobre 2016 2

1. Contexte • Le Modèle MVC version Web. MVC: AVANTAGES Plusieurs vues peuvent utiliser le même modèle: • Gain en coût de développement important. • Deux équipes peuvent travailler en parallèle. • Une équipe d’infographistes peut travailler sur les vues. • Une équipe de développeurs peut travailler sur le modèle et le contrôleur. Les trois couches doivent être réellement indépendantes et ne doivent communiquer que par des interfaces. INTI-Formation 3

1. Contexte MVC 1 INTI-Formation 4

1. Contexte Présentation de MVC 2. Limitations du couple Servlet/JSP Le couple Servlet/JSP possède plusieurs limitations : • La création de balises personnalisées est assez lourde, • Il n’existe pas de balises de haut niveau en JSP, • Il n’est pas possible de récupérer facilement les entrées utilisateurs, • Il n’existe pas de guide qui indique comment développer en Servlet/JSP. Ainsi chaque développeur peut organiser son site comme il veut. Ceci rend la maintenance difficile. INTI-Formation 5

1. Introduction de JSF • JSF est un Framework JAVA, destiné pour le développement d’application web. • IL se base sur le modèle d’architecture MVC. • Le modèle est représenté par des entités ou des Java. Beans. • La vue est représentée par des pages JSP ou des page XHTML (Facelets). • Le contrôleur est représenté par des Faces servlet (servlet mère). • La configuration de ces différents éléments est assurée par les deux fichiers. xml : web. xml et faces-config. xml. • Framework de référence puisqu’il respecte/suit une JSR Le but principal de JSF est de faciliter le développement de l'interface utilisateur en séparant clairement la partie « interface » de la partie « métier » . INTI-Formation 6

1. Introduction • JSF est apparu pour la première fois le 11 Mars 2004. • Plusieurs versions de JSF ont apparu, pour atteindre aujourd’hui la dernière version JSF 2. 2 sorti en Avril 2013. INTI-Formation 7

2 - Structure de JSF • Un ensemble d’API pour la représentation et la gestion des composants. • Deux jeux de composants standards (affichage de texte, saisie de texte, tables, zone à cocher, etc. ) : html et core. • Deux bibliothèques de balises JSP (une pour chaque jeu de composants) pour permettre l'utilisation des JSPs pour la construction de vues JSF. • Un modèle évènementiel côté serveur. • Les Managed-Beans qui forment la couche modèle de JSF. • Unified Expression Language (abrégé en EL) ou langage d'expressions unifié pour JSF et JSP 2. 0. Il permet de lier les composants graphiques aux managed-beans. INTI-Formation 8

2 - Structure de JSF : une api orienté ’composant’ Interaction avec des Java. Beans. Les Java. Beans représentent l’état des éléments à afficher et permettent d’interagir avec les couches plus basses de l’application, • Un système de rendu (Renderer) qui permet de redéfinir comment sera affichée (traduit en code HTML) une balise JSF, • Un système d’événements et d’écouteurs pour effectuer des traitements en fonction des actions des utilisateurs, • Un modèle de conversion qui permet de convertir des types de données, • Un système de validation qui permet de vérifier les entrées utilisateurs. INTI-Formation 9

Intégration de JSF au sein d'une application Web INTI-Formation 10

Intégration de JSF au sein d'une application Web INTI-Formation 11

TP-Lab 1 TP : Lab_1 INTI-Formation 12

3 - Configuration de JSF • Configuration JSF 2 Fichiers clés : web. xml et faces-config. xml WEB-INF/web. xml fichier global de configuration d’une application Web Java. • WEB-INF/faces-config. xml : configuration de la partie JSF de l’application, par exemple pour indiquer la navigation entre les pages ou pour déclarer les beans utilisés par les pages ; plus indispensable avec JSF 2. x grâce aux annotations Java. • Toutes les requêtes vers des pages « JSF » sont interceptées par une servlet défini dans le fichier web. xml de l’application Web. INTI-Formation 13

3 - Configuration de JSF Faces-config. xml Web. xml Managed. Bean • 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. • La balise de départ est <faces-config>. • Il décrit essentiellement six principaux éléments : <managed-bean> : Définit les managed Bean. <navigation-rule> : Définit les règles de navigation. <message-bundle> : Définit les ressources éventuelles. <resource-bundle> : Définit la configuration de la localisation. <validator> : Définit la configuration des validateurs. <converter> : Définit la configuration des convertisseurs. • Le fichier de configuration est un fichier XML décrit par une DTD. INTI-Formation 14

Faces-config. xml 3 - Configuration de JSF Web. xml Managed. Bean • web. xml • Le premier fichier descripteur de toute application web J 2 EE. • Le fichier web. xml contenu dans le répertoire WEB-INF. • Décrit les 3 principaux éléments : • La page d’accueil de l’application : welcome-file • La servlet mère du JSF : servlet-class • Associer les vues portant l’extension. xhtml à la Faces. Servlet : url-pattern. INTI-Formation 15

3 - La configuration de JSF Faces-config. xml Web. xml Managed. Bean INTI-Formation 16

3 - La configuration de JSF Faces-config. xml Web. xml Managed. Bean • Managed Bean : • C’est une classe java. Bean gérée par JSF. • Rappelons qu’un Bean est une classe Java respectant un ensemble de directives Ø Un constructeur public sans argument Ø Les propriétés d’un Bean sont accessibles au travers de méthodes get. XXX et set. XXX portant le nom de la propriété • Elle peut être définit à partir du fichier faces-config. xml ou par le biais d’annotations @managed. Bean. Permet de faire le lien entre les interfaces utilisateurs et le code métier de l’application. INTI-Formation 17

3 - La configuration de JSF Faces-config. xml Web. xml Managed. Bean • Créer un Bean managé, deux possibilités : Ø Déclarer le bean dans le fichier de config de JSF(faces-config. xml) Ø Utiliser des annotations Déclarer dans faces-config. xml • Trois éléments essentiels sont à préciser Ø <managed-bean-name> définit un nom qui servira d’étiquette quand le Bean sera exploité dans les pages JSP Ø <managed-bean-class> déclare le nom de la classe de type package. class Ø <managed-bean-scope> précise le type de scope utilisé pour le Bean (none, application, session, request) INTI-Formation 18

3 - La configuration de JSF Faces-config. xml Web. xml Managed. Bean Les composantes des beans gérés INTI-Formation 19

3 - La configuration de JSF Faces-config. xml Web. xml Managed. Bean Des méthodes « action » Une par bouton de soumission dans le formulaire (un formulaire peut avoir plusieurs boutons de soumission), La méthode sera appelée lors du clic sur le bouton par JSF Des propriétés pour les données résultat Seront initialisées par les méthodes « action » après un traitement métier, Il faut au moins une méthode get sur la propriété afin que les données puissent être affichées dans une page de résultat INTI-Formation 20

Navigation JSF La navigation entre les pages indique quelle page est affichée quand l’utilisateur clique sur: • un bouton pour soumettre un formulaire • ou sur un lien La navigation peut être définie par des règles : • dans le fichier de configuration faces-config. xml • par des valeurs écrites dans le code Java(implicite/explicite) • dans la page JSF Navigation statique (1/3) Définie « en dur » dans la page JSF. Lorsque l'utilisateur clique sur le lien HTML correspondant alors l'outcome page. Suivante est renvoyé au gestionnaire de navigation de JSF. Le gestionnaire cherche une règle de navigation applicable au contexte courant : • Par défaut si page. Suivante. xhtml existe alors cette page est renvoyée • si une correspondance est trouvée alors la page suivante est affichée • sinon la page courante est rechargée INTI-Formation 21

Navigation JSF Navigation statique (2/3) Avec le fichier de configuration faces-config. xml INTI-Formation 22

Navigation JSF Navigation statique (3/3) INTI-Formation 23

Navigation JSF Navigation dynamique C’est une méthode qui retourne un nom de page: INTI-Formation 24

Navigation JSF Règles de navigation INTI-Formation 25

TP-Lab 2 TP : Lab_3 INTI-Formation 26

3 - Configuration de JSF Managed. Bean Facelets Unified Expression Language • Facelets (depuis version JSF 1. 2) • C’est une technologie de présentation pour le développement d'applications web en Java. • Facelets est spécifiquement développé pour JSF, se sont des pages. XHTML et contenant des balises propres à JSF, chargées respectivement d'afficher des données, formulaire de saisie… • Dans une Facelet, une bibliothèque de balises est incluse via l'ajout d'un attribut xmlns à la balise <html> qui ouvre le corps de la page. Il s'agit là d'un namespace XML. INTI-Formation 27

3 - La configuration de JSF Managed. Bean Facelets Injection des dépendances • Injection des dépendance dans JSF • Deux méthodes : Ø par xml(faces-config. xml) Ø par annotation Par xml(faces-config. xml) JSF réalise l'injection de dépendances via l'utilisation de l'EL dans facesconfig. xml. • Exemple : INTI-Formation 28

3 - La configuration de JSF Managed. Bean Facelets Injection des dépendances • Par annotations Puis INTI-Formation 29

3 - La configuration de JSF Managed. Bean Facelets Injection des dépendances • Par annotations Puis INTI-Formation 30

TP-Lab 4 TP : Lab_4 INTI-Formation 31

3 - La configuration de JSF Managed. Bean Facelets Injection des dépendances • Annotation Par les scopes Les « scopes » Ils indiquent la durée de vie des managed beans. Valeurs possibles : request, session, application, view, conversation, aucun ou custom Request. Scope = valeur par défaut. On les spécifie dans : faces-config. xml ou sous forme d’annotations de code INTI-Formation 32

3 - La configuration de JSF Managed. Bean Facelets Injection des dépendances • Annotation Par les scopes Annotations pour les Scopes @Request. Scoped On crée une nouvelle instance du bean pour chaque requête. @Session. Scoped On crée une instance du bean et elle durera le temps de la session. Le bean doit être Sérialisable. @Application. Scoped et le bean dans « l’application » , l’instance sera partagée par tous les utilisateurs de toutes les sessions. @View. Scoped La même instance est utilisée aussi souvent que le même utilisateur reste sur la même page, même s’il fait un refresh (reload) de la page ! A été conçu spécialement pour les pages JSF faisant des appels Ajax. @None. Scoped Le bean est instancié mais pas placé dans un Scope. Utile pour des beans qui sont utilisés par d’autres beans qui sont eux dans un autre Scope. @Custom. Scoped(value= « #{une. Map} » ) Le bean est placé dans la Hash. Map et le développeur gére son cycle de vie. INTI-Formation 33

TP-Lab 5 TP : Lab_5 INTI-Formation 34

Managed. Bean Facelets 3 - La configuration de JSF Unified Expression Language • Unified Expression Language • JSF propose une syntaxe basée sur des expressions qui facilitent l'utilisation des valeurs d'un bean. • Ces expressions doivent être délimitées par #{ et }. • Une expression est composée du nom du bean suivi du nom de la propriété désirée séparés par un point. • NB, la syntaxe utilisée par JSF est proche mais différente de celle proposée par JSTL : JSF utilise le délimiteur #{. . . } et JSTL utilise le délimiteur ${. . . }. • INTI-Formation 35

4 - Le cycle de vie Cycle de vie Les 6 phases du cycle sont ordonnées de manière logique: Restore View: rétablit ou crée la vue demandée par le client Apply Request Value: met à jour les objets Java des composants (UIComponent) avec les données envoyées par le client Process Validations: effectue les validations/conversions des nouvelles données Update Model Values: met à jour les propriétés des beans associées aux composants Invoke Application: exécute l’action Render Response: sauvegarde l’état de la vue puis renvoie la réponse INTI-Formation 36

4 - Le cycle de vie 1. Restauration de la vue INTI-Formation 37

4 - Le cycle de vie • Restore View : JSF reconstruit l’arborescence des composants qui forme la page. • Apply Requests : les valeurs des données sont extraites de la requête. • Process Validations : procède à la validation des données. • Update model values : mise à jour du modèle selon les valeurs reçues si validation ou conversion réussie. • Invoke Application : les événements émis de la page sont traités. Elle permet de déterminer la prochaine page. • Render Response : création du rendue de la page. INTI-Formation 38

- Validation • Principe de la validation JSF offre de nombreuses facilités pour valider les données utilisateur. • JSF propose en standard un mécanisme de validation des données : contrôle de présence, de type de données, de plage de valeurs, de format, . . . • Les différents types de validations : Méthode de validation dans un backing-bean Les validators standards de l’API JSF o Validation automatique implicite o Validation automatique explicite Modèle de programmation pour écrire un validator personnalisé Validation avec implémentation JSR 303 : Hibernate validator INTI-Formation 39

5 - Les composants graphique CORE HTML • Les balises personnalisées décrites dans CORE s’occupent d’ajouter des fonctionnalités aux composants JSF. Tag Description f: action. Listener Ajout un listener pour une action sur un composant. f: ajax Ajouter à un composant pour fournir des capacités Ajax de manière standard. f: attribute Ajouter un attribut à un composant Version JSF 2. 0 f: convert. Date. Time Ajouter un convertisseur de type Date. Time à un composant f: convert. Number Ajouter un convertisseur de type Number à un composant f: param Ajouter un paramètre à un composant f: facet Permet de définir un élément particulier d’un composant f: select. Item Permet de sélectionné un élément dans un composant à choix. INTI-Formation 40

CORE 5 - Les composants graphique HTML • Les balises personnalisées décrites dans HTML s’occupent de la description de l’interface graphique d’une JSF. • La bibliothèque HTML propose 25 composants qui sont classifiables en quatre catégories Composants de saisies notés I (pour input) Composants de sorties notés O (pour output) Composants de commandes notés C (pour commandes) Composants de regroupement notés R (pour regrouper) INTI-Formation 41

CORE 5 - Les composants graphique • Composants de saisies HTML • Composants de sorties q input. Hidden q Column q input. Secret q q input. Text. Area q q select. Boolean. Checkbox q q select. Many. Checkbox q messages data. Table output. Text output. Format output. Link graphic. Image q select. Many. Listbox q select. Many. Menu q q select. One. Listbox select. One. Menu select. One. Radio q q q • • Composants de commandes command. Button command. Link Composants de regroupements q form q panel. Grid, panel. Group INTI-Formation 42

5 - Les composants graphique CORE HTML INTI-Formation 43

Configuration Maven pour JSF Pom. xml Ceci est utile pour Tomcat 6 ou 7. Jboss 7 comporte déjà une implémentation de JSF 2 et n'a donc pas besoin de My. Faces 2 INTI-Formation 44