Tutoriel JSF2 N°5 : Composants JSF 2

Avec Objis, spécialiste formation JSF, analysez la bibliothèque des composants Mojarra, implémentation de référence de JSF. mettez en œuvre quelques composants de cette bibliothèque pour construire des interfaces riches.

Objectifs

- Parcourir l’ensemble des tags ou composants fournis par Mojarra, implémentation de référence de JSF.
- Mettre en œuvre de quelques composants fournit par Mojarra.

Programme

- Contexte et objectifs
- Partie 1 :Parcourir et analyser l’ensemble des composants offert par Mojarra
- Partie 2 : mettre en oeuvre quelques composants

Durée

30 min.

Contexte

- La technologie JSF, a pour ambition de faciliter l’écriture d’applications WEB en offrant d’une part, une architecture MVC et d’autre part, une approche composant qui rappelle les interfaces graphiques natives. L’objectif est de remplacer l’approche je traite la requête HTTP et je renvoie une page HTML par j’envoie des composants (boutons, champs de texte, etc..) et je réagis aux actions de l’utilisateur .

Partie 1 : parcourir et analyser l’ensemble des composants offert par Mojarra

- Installez Tomcat 6
- Intégrez tomcat à votre Eclipse (Ganymède ou Galileo entreprise)

- Analyser la bibliothèque des tags

PNG - 49.3 ko
bibliothèque des composants Mojarra

- Explorez l’ensemble des composants de la balise h

PNG - 21.4 ko
balises du tag h

Partie 2:Mise en œuvre de quelques composants fournit par Mojarra)

- Pour mettre en œuvre cette partie nous allons télécharger le prjet ci-dessous

Zip - 2.3 Mo
Zip projet Tutoriel 6

- Cliquez sur Finish puis OK, on obtient la structure du projet suivant sans erreur ci-dessous :

PNG - 54.1 ko
structure_projet6

- Ajouter au projet la configuration du projet JSF 2.1 pour faciliter l’auto-complétion avec les composants JSF
- Clic droit sur le projet/Properties/Project Facets/

- Cocher la case JSF 2.1

PNG - 23.6 ko
tutoriel-jsf-composant-2

- Cliquez sur OK/OK

Mise en œuvre des composants :
- Téléchargez les fichiers User.java et UserBean.java :

Zip - 1.4 ko
User & UserBean

- 1- copiez le fichier user.java
- 2- remplacez le contenu de UserBean par celui téléchargé.

- Ajouter dans le dossier resources/css le fichier table-style.css

Zip - 346 octets
table-style

- Obtenez une structure suivante

PNG - 3.5 ko
Ajout du fichier CSS

- Téléchargez le fichier register.xhtml et copiez son contenu dans celui existant dans votre projet Eclipse.

Zip - 1.1 ko
register.xhtml

- A ce stade le déploiement du projet sur le serveur cible Tomcat donne le rendu ci-dessous.

PNG - 23 ko
main.xhtml

- Cliquez sur : Cliquez ici pour vous enregistrez......

PNG - 29 ko
rendu de la vue

- Identifiez les composants mis en place pour ce rendu et expliquez l’utilité des tags ci-desous :

- h:inputText
- h:selectOneRadio
- f:selectItem
- h:selectOneMenu
- h:commandButton
- h:dataTable
- h:column
- f:facet
- h:form

Expliquez la différence faite vous entre les balise avec h et f ?

- Pour faire communiquer le formulaire d’inscription et le tableau des participants, modifiez register.xhtml

PNG - 17 ko
ajout d’un User

- L’action consiste à ajouter une méthode qui permet d’ajouter l’utilisateur au tableau des participants.

- Modification de UserBean.java par l’ajout de la méthode

PNG - 17.8 ko
ajout de la méthode

- Le déploiement sur le serveur cible donne le rendu suivant avec l’ajout d’un nouvel utilisateur.

PNG - 29.4 ko
AddUsers

- Nous allons ajouter une autre fonctionnalité au tableau, supprimer un participant.

- Ajouter la colonne suppression

PNG - 27.4 ko
ajout collonne suppression dans le tableau

- Ajouter la méthode deleteAction

PNG - 15.6 ko
supprUser

- Le déploiement de l’application sur le serveir cible donne le rendu suivant :

PNG - 25.8 ko
suppression d’un utilisateur

- Téléchargez le zip du projet.

Zip - 2.3 Mo
Zip

Conclusion

Dans ce tutoriel, vous avez explorer la bibliothèque de composants fournit par Mojarra, mis en œuvre un certain nombre d’entre eux comme h:dataTable pour construire une IHM, vous avez compris la différence entre les composants visuels et non visuels de tag h et f.

Formation JSF

Le chemin le plus court pour avoir les réflexes et la méthodologie du bon développeur JSF : Formation JSF

PNG - 82.7 ko
programme détaillé JSF 2