JSF: navegación de página
Las reglas de navegación son aquellas reglas proporcionadas por JSF Framework que describen qué vista se mostrará cuando se haga clic en un botón o enlace.
Las reglas de navegación se pueden definir en el archivo de configuración JSF llamado faces-config.xml. Se pueden definir en beans gestionados.
Las reglas de navegación pueden contener condiciones basadas en las cuales se puede mostrar la vista resultante. JSF 2.0 también proporciona navegación implícita en la que no es necesario definir reglas de navegación como tales.
Navegación implícita
JSF 2.0 proporciona auto view page resolver mecanismo llamado implicit navigation. En este caso, solo necesita poner el nombre de la vista en el atributo de acción y JSF buscará el correctoview página automáticamente en la aplicación implementada.
Navegación automática en la página JSF
Establezca el nombre de la vista en el atributo de acción de cualquier componente de interfaz de usuario JSF.
<h:form>
<h3>Using JSF outcome</h3>
<h:commandButton action = "page2" value = "Page2" />
</h:form>Aquí, cuando Page2 se hace clic en el botón, JSF resolverá el nombre de la vista, page2 como extensión page2.xhtml y busque el archivo de vista correspondiente page2.xhtml en el directorio actual.
Navegación automática en Managed Bean
Defina un método en el bean administrado para devolver un nombre de vista.
@ManagedBean(name = "navigationController", eager = true)
@RequestScoped
public class NavigationController implements Serializable {
public String moveToPage1() {
return "page1";
}
}Obtenga el nombre de la vista en el atributo de acción de cualquier componente de interfaz de usuario JSF utilizando un bean administrado.
<h:form>
<h3> Using Managed Bean</h3>
<h:commandButton action = "#{navigationController.moveToPage1}"
value = "Page1" /glt;
</h:form>Aquí, cuando Page1 se hace clic en el botón, JSF resolverá el nombre de la vista, page1 como extensión page1.xhtml y busque el archivo de vista correspondiente page1.xhtml en el directorio actual.
Navegación condicional
Usando el bean administrado, podemos controlar la navegación muy fácilmente. Mire el siguiente código en un bean administrado.
@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";
}
}
}Pase pageId como parámetro de solicitud en JSF UI Component.
<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>Aquí, cuando se hace clic en el botón "Página1".
JSF creará una solicitud con el parámetro pageId = 1
Entonces JSF pasará este parámetro a la propiedad administrada pageId de navigationController
Ahora se llama a navigationController.showPage () que devolverá la vista como page1 después de verificar el pageId
JSF resolverá el nombre de la vista, page1 como extensión page1.xhtml
Busque el archivo de vista correspondiente page1.xhtml en el directorio actual
Resolución de navegación basada en la acción
JSF proporciona la opción de resolución de navegación incluso si los diferentes métodos del bean administrado devuelven el mismo nombre de vista.
Mire el siguiente código en un bean administrado.
public String processPage1() {
return "page";
}
public String processPage2() {
return "page";
}Para resolver vistas, defina las siguientes reglas de navegación en 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>Aquí, cuando se hace clic en el botón Page1 -
navigationController.processPage1() se llama que devolverá la vista como página
JSF resolverá el nombre de la vista, page1 como el nombre de la vista es page and from-action en faces-config is navigationController.processPage1
Encuentra el archivo de vista correspondiente page1.xhtml en el directorio actual
Reenviar vs Redirigir
JSF de forma predeterminada realiza un avance de página del servidor mientras se navega a otra página y la URL de la aplicación no cambia.
Para habilitar la redirección de página, agregue faces-redirect=true al final del nombre de la vista.
<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>Aquí, cuando Page1 botón debajo Forward se hace clic, obtendrá el siguiente resultado.
Aquí cuando Page1 botón debajo Redirect se hace clic, obtendrá el siguiente resultado.
Aplicación de ejemplo
Creemos una aplicación JSF de prueba para probar todos los ejemplos de navegación anteriores.
| Paso | Descripción |
|---|---|
| 1 | Cree un proyecto con un nombre helloworld en un paquete com.tutorialspoint.test como se explica en el capítulo JSF - Crear aplicación . |
| 2 | Cree NavigationController.java en un paquete com.tutorialspoint.test como se explica a continuación. |
| 3 | Cree faces-config.xml en una carpeta WEB-INF y actualice su contenido como se explica a continuación. |
| 4 | Actualice web.xml en una carpeta WEB-INF como se explica a continuación. |
| 5 | Cree page1.xhtml y page2.xhtml y modifique home.xhtml en una carpeta de aplicaciones web como se explica a continuación. |
| 6 | Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos. |
| 7 | Finalmente, compile la aplicación en forma de archivo war e impleméntela en Apache Tomcat Webserver. |
| 8 | Inicie su aplicación web utilizando la URL adecuada como se explica a continuación en el último paso. |
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>Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación como lo hicimos en el capítulo JSF - Crear aplicación. Si todo está bien con su aplicación, esto producirá el siguiente resultado.
