JSF - Navigation dans les pages
Les règles de navigation sont les règles fournies par JSF Framework qui décrivent la vue à afficher lorsqu'un bouton ou un lien est cliqué.
Les règles de navigation peuvent être définies dans le fichier de configuration JSF nommé faces-config.xml. Ils peuvent être définis dans des beans gérés.
Les règles de navigation peuvent contenir des conditions sur la base desquelles la vue résultante peut être affichée. JSF 2.0 fournit également une navigation implicite dans laquelle il n'est pas nécessaire de définir des règles de navigation en tant que telles.
Navigation implicite
JSF 2.0 fournit auto view page resolver mécanisme nommé implicit navigation. Dans ce cas, il vous suffit de mettre le nom de la vue dans l'attribut d'action et JSF recherchera le bonview page automatiquement dans l'application déployée.
Navigation automatique dans la page JSF
Définissez le nom de la vue dans l'attribut d'action de n'importe quel composant d'interface utilisateur JSF.
<h:form>
<h3>Using JSF outcome</h3>
<h:commandButton action = "page2" value = "Page2" />
</h:form>Ici, quand Page2 est cliqué sur le bouton, JSF résoudra le nom de la vue, page2 comme extension page2.xhtml et recherchez le fichier de vue correspondant page2.xhtml dans le répertoire courant.
Navigation automatique dans Managed Bean
Définissez une méthode dans le bean géré pour renvoyer un nom de vue.
@ManagedBean(name = "navigationController", eager = true)
@RequestScoped
public class NavigationController implements Serializable {
public String moveToPage1() {
return "page1";
}
}Obtenez le nom de vue dans l'attribut d'action de n'importe quel composant d'interface utilisateur JSF à l'aide d'un bean géré.
<h:form>
<h3> Using Managed Bean</h3>
<h:commandButton action = "#{navigationController.moveToPage1}"
value = "Page1" /glt;
</h:form>Ici, quand Page1 est cliqué sur le bouton, JSF résoudra le nom de la vue, page1 comme extension page1.xhtml et recherchez le fichier de vue correspondant page1.xhtml dans le répertoire courant.
Navigation conditionnelle
En utilisant le bean géré, nous pouvons très facilement contrôler la navigation. Regardez le code suivant dans un bean géré.
@ManagedBean(name = "navigationController", eager = true)
@RequestScoped
public class NavigationController implements Serializable {
//this managed property will read value from request parameter pageId
@ManagedProperty(value = "#{param.pageId}")
private String pageId;
//condional navigation based on pageId
//if pageId is 1 show page1.xhtml,
//if pageId is 2 show page2.xhtml
//else show home.xhtml
public String showPage() {
if(pageId == null) {
return "home";
}
if(pageId.equals("1")) {
return "page1";
}else if(pageId.equals("2")) {
return "page2";
}else {
return "home";
}
}
}Transmettez pageId en tant que paramètre de demande dans le composant d'interface utilisateur JSF.
<h:form>
<h:commandLink action = "#{navigationController.showPage}" value = "Page1">
<f:param name = "pageId" value = "1" />
</h:commandLink>
<h:commandLink action = "#{navigationController.showPage}" value = "Page2">
<f:param name = "pageId" value = "2" />
</h:commandLink>
<h:commandLink action = "#{navigationController.showPage}" value = "Home">
<f:param name = "pageId" value = "3" />
</h:commandLink>
</h:form>Ici, lorsque le bouton "Page1" est cliqué.
JSF créera une demande avec le paramètre pageId = 1
Ensuite, JSF passera ce paramètre à la propriété gérée pageId de navigationController
Maintenant, navigationController.showPage () est appelé, ce qui retournera la vue en tant que page1 après avoir vérifié le pageId
JSF résoudra le nom de la vue, page1 en tant qu'extension page1.xhtml
Recherchez le fichier de vue correspondant page1.xhtml dans le répertoire courant
Résolution de la navigation en fonction de l'action from-action
JSF fournit une option de résolution de navigation même si des méthodes de bean géré différentes renvoient le même nom de vue.
Regardez le code suivant dans un bean géré.
public String processPage1() {
return "page";
}
public String processPage2() {
return "page";
}Pour résoudre les vues, définissez les règles de navigation suivantes dans faces-config.xml
<navigation-rule>
<from-view-id>home.xhtml</from-view-id>
<navigation-case>
<from-action>#{navigationController.processPage1}</from-action>
<from-outcome>page</from-outcome>
<to-view-id>page1.jsf</to-view-id>
</navigation-case>
<navigation-case>
<from-action>#{navigationController.processPage2}</from-action>
<from-outcome>page</from-outcome>
<to-view-id>page2.jsf</to-view-id>
</navigation-case>
</navigation-rule>Ici, lorsque le bouton Page1 est cliqué -
navigationController.processPage1() est appelé qui retournera la vue en tant que page
JSF résoudra le nom de la vue, page1 comme le nom de la vue est page and from-action dans faces-config is navigationController.processPage1
Trouvez le fichier de vue correspondant page1.xhtml dans le répertoire courant
Transférer vs rediriger
JSF par défaut effectue un transfert de page de serveur lors de la navigation vers une autre page et l'URL de l'application ne change pas.
Pour activer la redirection de page, ajoutez faces-redirect=true à la fin du nom de la vue.
<h:form>
<h3>Forward</h3>
<h:commandButton action = "page1" value = "Page1" />
<h3>Redirect</h3>
<h:commandButton action = "page1?faces-redirect = true" value = "Page1" />
</h:form>Ici, quand Page1 bouton sous Forward est cliqué, vous obtiendrez le résultat suivant.
Ici quand Page1 bouton sous Redirect est cliqué, vous obtiendrez le résultat suivant.
Exemple d'application
Créons une application JSF de test pour tester tous les exemples de navigation ci-dessus.
| Étape | La description |
|---|---|
| 1 | Créez un projet avec un nom helloworld sous un package com.tutorialspoint.test comme expliqué dans le chapitre JSF - Créer une application . |
| 2 | Créez NavigationController.java sous un package com.tutorialspoint.test comme expliqué ci-dessous. |
| 3 | Créez faces-config.xml dans un dossier WEB-INF et mettez à jour son contenu comme expliqué ci-dessous. |
| 4 | Mettez à jour web.xml dans un dossier WEB-INF comme expliqué ci-dessous. |
| 5 | Créez page1.xhtml et page2.xhtml et modifiez home.xhtml sous un dossier webapp comme expliqué ci-dessous. |
| 6 | Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences. |
| sept | Enfin, créez l'application sous la forme d'un fichier war et déployez-la dans Apache Tomcat Webserver. |
| 8 | Lancez votre application Web en utilisant l'URL appropriée, comme expliqué ci-dessous à la dernière étape. |
NavigationController.java
package com.tutorialspoint.test;
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.RequestScoped;
@ManagedBean(name = "navigationController", eager = true)
@RequestScoped
public class NavigationController implements Serializable {
private static final long serialVersionUID = 1L;
@ManagedProperty(value = "#{param.pageId}")
private String pageId;
public String moveToPage1() {
return "page1";
}
public String moveToPage2() {
return "page2";
}
public String moveToHomePage() {
return "home";
}
public String processPage1() {
return "page";
}
public String processPage2() {
return "page";
}
public String showPage() {
if(pageId == null) {
return "home";
}
if(pageId.equals("1")) {
return "page1";
}else if(pageId.equals("2")) {
return "page2";
}else {
return "home";
}
}
public String getPageId() {
return pageId;
}
public void setPageId(String pageId) {
this.pageId = pageId;
}
}faces-config.xml
<?xml version = "1.0" encoding = "UTF-8"?>
<faces-config
xmlns = "http://java.sun.com/xml/ns/javaee"
xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation = "http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
version = "2.0">
<navigation-rule>
<from-view-id>home.xhtml</from-view-id>
<navigation-case>
<from-action>#{navigationController.processPage1}</from-action>
<from-outcome>page</from-outcome>
<to-view-id>page1.jsf</to-view-id>
</navigation-case>
<navigation-case>
<from-action>#{navigationController.processPage2}</from-action>
<from-outcome>page</from-outcome>
<to-view-id>page2.jsf</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>web.xml
<!DOCTYPE web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd" >
<web-app>
<display-name>Archetype Created Web Application</display-name>
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<context-param>
<param-name>javax.faces.CONFIG_FILES</param-name>
<param-value>/WEB-INF/faces-config.xml</param-value>
</context-param>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
</web-app>page1.xhtml
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:h = "http://java.sun.com/jsf/html">
<h:body>
<h2>This is Page1</h2>
<h:form>
<h:commandButton action = "home?faces-redirect = true"
value = "Back To Home Page" />
</h:form>
</h:body>
</html>page2.xhtml
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:h = "http://java.sun.com/jsf/html">
<h:body>
<h2>This is Page2</h2>
<h:form>
<h:commandButton action = "home?faces-redirect = true"
value = "Back To Home Page" />
</h:form>
</h:body>
</html>home.xhtml
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:f = "http://java.sun.com/jsf/core"
xmlns:h = "http://java.sun.com/jsf/html">
<h:body>
<h2>Implicit Navigation</h2>
<hr />
<h:form>
<h3>Using Managed Bean</h3>
<h:commandButton action = "#{navigationController.moveToPage1}"
value = "Page1" />
<h3>Using JSF outcome</h3>
<h:commandButton action = "page2" value = "Page2" />
</h:form>
<br/>
<h2>Conditional Navigation</h2>
<hr />
<h:form>
<h:commandLink action = "#{navigationController.showPage}"
value="Page1">
<f:param name = "pageId" value = "1" />
</h:commandLink>
<h:commandLink action = "#{navigationController.showPage}"
value="Page2">
<f:param name = "pageId" value = "2" />
</h:commandLink>
<h:commandLink action = "#{navigationController.showPage}"
value = "Home">
<f:param name = "pageId" value = "3" />
</h:commandLink>
</h:form>
<br/>
<h2>"From Action" Navigation</h2>
<hr />
<h:form>
<h:commandLink action = "#{navigationController.processPage1}"
value = "Page1" />
<h:commandLink action = "#{navigationController.processPage2}"
value = "Page2" />
</h:form>
<br/>
<h2>Forward vs Redirection Navigation</h2>
<hr />
<h:form>
<h3>Forward</h3>
<h:commandButton action = "page1" value = "Page1" />
<h3>Redirect</h3>
<h:commandButton action = "page1?faces-redirect = true"
value = "Page1" />
</h:form>
</h:body>
</html>Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application comme nous l'avons fait dans le chapitre JSF - Créer une application. Si tout va bien avec votre application, cela produira le résultat suivant.
