Tutoriel JSF2 N°8 : Navigation avec JSF 2

Avec Objis, spécialiste formation JSF , découvrez le modèle de navigation introduit avec la version 2 de JSF sur un exemple simple et fonctionnel de trois écrans

Objectifs

- Comprendre la navigation avec JSF 2, type et règle de navigation
- Mise en œuvre de la navigation avec JSF 2 type et règles
- Comprendre la technique View Parameters
- Comprendre les techniques de passage de paramètres
- Déployer votre application

Programme

- Contexte et objectifs
- Partie 1 : Comprendre la navigation avec JSF 2, type et règle de navigation
- Partie 2 : Mise en œuvre de la navigation avec JSF 2 type et règles
- Partie 3 : Comprendre la technique View Parameters
- Partie 4 : Comprendre les techniques de passage de paramètres

Durée

30 min.

Contexte

 : Construire des vues JSF 2 et comprendre le modèle de navigation entre les vues, comprendre le mécanisme de passage de paramètres entre ces vues.

Partie 1 : Comprendre la navigation avec JSF 2, type et règle de navigation

- Depuis JSF 2, la navigation de l’application peut être gérée sans fichier faces-context.xml.

- En JSF 2.X.X la navigation est réalisée par les composants JSF suivants :
— > h:commandButton
— > h:commandLink
— > h:button
— > h:link

- Type de navigation :

- La navigation peut être directe (appel à la page XHTML sans passer par le Managed Bean) ou indirecte en passant par le Managed bean.

Attributs ’action’ et ’outcome’

- Les composants h:commandButton et h:commandLink doivent utiliser l’attribut ’action’ ;
- Les composants h:button et h:link utilise l’attribut ’outcome’ pour la navigation.

Partie 2 : Mise en œuvre de la navigation avec JSF 2 type et règles

- Téléchargez le Zip du projet et mettez-le dans un répertoire de travail de votre choix.

Zip - 5.7 Mo
JSF2_Training_Objis-INITIAL

Remarques : Afin de mettre en évidence la navigation implicite et le type de navigation directe nous ouvrons dans IDE Eclipse le fichier main.xhtml et voir son contenu comme suit :

PNG - 112.4 ko
main.xhtml

QUESTIONS :

- Que représente la valeur register de l’attribut action du composant h:commandLink dans main.xhtml ?

- Comment appelle t-on ce type de navigation ?

PNG - 88.3 ko
register.xhtml

QUESTIONS :

- Que représente la valeur confirm de l’attribut action du composant h:commandButton dans register.xhtml ?

- Comment appelle t-on ce type de navigation ?

- Ajouter dans le répertoire WebContent le fichier confirm.xhtml

Zip - 752 octets
confirm.xhtml

QUESTIONS :

- Que se passerait si l’on clique sur les boutons dont les attributs action portent les valeurs ci-dessous ?

- h:commandButton value="Editer" action="register" ?
- h:commandButton value="Confirm" action="successAddUser" ?

- Dans la suite, Nous allons ajouter la vue successAddUser.xhtml

Partie 3 :Comprendre la technique View Parameters

RAPPEL :
- JSF 2.0 a introduit un nouveau concept : View Parameters. Cette technique permet de passer des paramètres dans des liens ou boutons simples.

- Pour cela, nous devons ajouter le paramètre includeViewParams=true dans les composants concernés de la vue appelante.

- La vue appelée déclare la présence du paramètre à utiliser avec le tag f:viewParam,

MISE EN SITUATION PRATIQUE

- dans la vue register.xhtml, modifier le bouton qui permet de confirmer la validation du saisie de formulaire comme ci-dessous :

PNG - 82.8 ko
register.xmhtml

Dans la vue appelée, déclarer le paramètre de vue pour récupérer la valeur saisie dans la vue précédente et passée en paramètre.

PNG - 68.1 ko
déclaration du parametre de vue dans la page appellée

- L’exécution de l’application sur le serveur tomcat donne le résultat suivant sur les vues suivantes :

PNG - 43.3 ko
passage de paramètre avec View parammeters

- Le passage de valeur quelconque au paramètre userId dans l’URL met automatiquement à jour la valeur de la propriété du Bean et met à jour la page comme sur la figure ci-dessous :

PNG - 44.8 ko
mis à jour du parametre par passage de valeur dans l’url

INFO :
- La technique View Parameters permet le support du bookmark. Ce mécanisme est utilisé par les moteurs de recherche ou les favoris des navigateurs (affichage direct de la page associée).

- Lorsqu’un utilisateur clique sur le lien référencé, le navigateur réalise une requête avec les paramètres sauvegardés.

- Ajouter ensuite dans le dossier WebContent la vue successAddUser.xhtml

Zip - 744 octets
successAddUser.xhtml

- Exécution du projet sur tomcat permet observer le bon fonctionnement du mécanisme de navigation mis en place.

PNG - 44.1 ko
enregistrement d’un user

- Confirmation d’enregistrement d’un User

PNG - 34 ko
confirmation enregistrement User

Partie 4 : Comprendre les techniques de passage de paramètres

RAPPEL :
- Le passage de paramètres depuis les vues vers les Managed Beans peut être réalisé de plusieurs façons avec les balises
-  f:setPropertyActionListener
- f:attribute
- f:param

- La balise f:setPropertyActionListener est utilisée avec les tags h:commandLink et h:commandButton qui utilisent obligatoirement des formulaires h:form et qui passent les informations en POST, soit en validant le formulaire par bouton h:commandButton soit par code JavaScript h:commandLink.

- La balise f:param permet également de passer des paramètres au Managed Bean. Ces paramètres sont utilisés avec les composants h:commandLink, h:outpoutLink et h:link.

- La balise f:attribute peut être utiliser avec les composants h:commandLink et h:commandButton. Point de vue du Managed Bean, nous pouvons utiliserons la méthode getAttributes() reçue par ActionEvent et déclenchée par l’actionListener.

PRATIQUE :
- Modifiez la vue confirm.xhtml et ajoutez le code comme sur la figure ci-dessous.

PNG - 72.3 ko
passage d eparametre avec f:param

- Modifiez la vue successAddUser.xhtml et ajoutez le code comme sur la figure ci-dessous.

PNG - 98.2 ko
affichage du paramètre reçu

Exécution du projet nous donne le rendu suivant sur la vue successAddUser.xhtml

PNG - 40.5 ko
affichage du paramètre reçu

PROJET FINAL

Zip - 2.3 Mo
JSF2_Training_Objis-TP10

Conclusion

- Dans ce tutoriel vous avez appris à mettre en œuvre le modèle de navigation implicite introduit avec JSF2.

- Vous avez pris connaissance des quatre composants qui assurent la navigation entre les différentes vues d’une application.

- Vous avez mis en œuvre les types de navigation introduit avec JSF , les règles de navigation, ainsi que les mécanisme de passage de paramètres