Navigation avec JSF 2.2

Partie1 :  Navigation Statique

Avant de commencer essayer de lire Création d’un Projet JSF 2.2 dans eclipse

exemple Navigation JSF : Dans la navigation statique, un click sur un bouton d’une page initiale fournit toujours la même réponse.

exemple Navigation JSF  : Nous allons mettre en place un exemple simple – deux boutons qui nous ramènes vers deux pages distinctes -.

Création du projet et configuration

Arrêter Tomcat.

Click-droit sur BaseJSF puis Copy.

Click-droit sur « Navigator » puis Paste

Dans project name : Lab2

Dans Eclipse « Navigator » !!! Attention pas Project Explorer

Lab2 => .settings => (ouvrir) org.eclipse.wst.common.component

Changer les références en rouge par Lab2

<?xml version="1.0" encoding="UTF-8"?>

<project-modules id="moduleCoreId" project-version="1.5.0">

 <wb-module deploy-name="BaseJSF">

 <wb-resource deploy-path="/" source-path="/WebContent" tag="defaultRootSource"/>

 <wb-resource deploy-path="/WEB-INF/classes" source-path="/src"/>

 <property name="context-root" value="BaseJSF"/>

 <property name="java-output-path" value="/BaseJSF/build/classes"/>

 </wb-module>

</project-modules>

Test

Déployer l’application dans tomcat et tester.

http://localhost:8080/Lab2/index.xhtml

Arborescence

Dans la vue Navigator, voici l’arborescence :

Création des pages

Dans un premier temps, nous allons créer deux pages. success.xhtml et echec.xhtml

success.xhtml

echec.xhtml

Editer la page index.xhtml

Ajouter le code en rouge suivant :

Test

Vous pouvez maintenant déployer l’application et démarrer le serveur.

Dans un navigateur, utilisez l’adresse http://localhost:8080/Lab2.

Une page contenant deux boutons apparaît .

En cliquant sur le bouton, vous pourrez alors voir :

Maintenant que se passe t’il si JSF ne trouve page la page correspondante ?

Partie2 Navigation Dynamique

Création du Managed Bean

Dans un premier temps, nous allons montrer l’utilisation des annotations pour définir le ManagedBean.

Pour cela, créez une classe com.formation.bean.DecisionBean dans le répertoire src du projet.

Cette classe possède une méthode calcul() avec une logique de prise de décision :

Si Math.random() < 0.2 alors Afficher success.xhtml

Sinon Afficher echec.xhtml

DecisionBean.java

package com.formation.bean;

import javax.faces.bean.ManagedBean;

@ManagedBean

public class DecisionBean {

public String calcul() {

return Math.random() < 0.2 ? “success” : “echec”;

}

}

Comme vous pouvez le voir, nous utilisons une annotation pour définir notre ManagedBean :

• @ManagedBean : déclare la classe comme définissant un Managed Bean

Utilisation du Managed Bean

Modifiez la page index.xhtml comme suit pour y rajouter un bouton d’appel à la méthode définit dans le ManagebBean.:

Editer la page index.xhtml

1. Supprimer le code suivant :

<fieldset>

<legend>Invalid action</legend>

Click button. You should get error page.<br />

<h:commandButton value=“Click (Bad)” action=“echec” />

</fieldset>

1. Adapter commandButton pour prendre en compte la navigation dynamique

…

<fieldset>

<legend>Valid action</legend>

Click button. You should get success page.<br />

<h:commandButton value=“Click (Good)” action=“#{decisionBean.calcul}“ />

</fieldset>

…

Test

Dans un navigateur, utilisez l’adresse http://localhost:8080/Lab2

Partie3 Navigation Dynamique avec fichier XML

Maintenant, nous allons reprendre le même exercice en déclarant les règles de navigation dans le fichier faces-config.xml.

Création des pages

Nous commençons par définir deux nouvelles pages success1.xhtml et echec1.xhtml, contenant respectivement les messages suivants :

• JSF 2.0: Success version 2
• et JSF 2.0: Echec Version 2

success1.xhtml

echec1.xhtml

Configuration de la navigation

Créer le fichier faces-config.xml dans WEB-INF et établir les règles de navigation suivantes :

Si outcome= « success » alors le serveur va lancer la page success1.xhtml

Si outcome= « echec » alors le serveur va lancer la page echec1.xhtml

La page courante est index.xhtml

Modifier le fichier faces-config.xml pour définir les règles de navigation.

faces-config.xml

Test

Dans un navigateur, utilisez l’adresse http://localhost:8080/Lab2

Question : Pourquoi le mapping par défaut ne fonctionne plus ?

Lire aussi :