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.
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:
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 ?
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
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:
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.
L’exécution de l’application sur le serveur tomcat donne le résultat suivant sur les vues suivantes:
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:
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
successAddUser.xhtml
Exécution du projet sur tomcat permet observer le bon fonctionnement du mécanisme de navigation mis en place.
Confirmation d’enregistrement d’un 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.
Modifiez la vue successAddUser.xhtml et ajoutez le code comme sur la figure ci-dessous.
Exécution du projet nous donne le rendu suivant sur la vue successAddUser.xhtml
PROJET FINAL
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
