JSF - Navegação da Página
As regras de navegação são as regras fornecidas pelo JSF Framework que descreve qual visualização deve ser mostrada quando um botão ou link é clicado.
As regras de navegação podem ser definidas no arquivo de configuração JSF denominado faces-config.xml. Eles podem ser definidos em beans gerenciados.
As regras de navegação podem conter condições com base nas quais a visualização dos resultados pode ser mostrada. O JSF 2.0 também fornece navegação implícita em que não há necessidade de definir regras de navegação como tal.
Navegação implícita
JSF 2.0 fornece auto view page resolver mecanismo denominado implicit navigation. Neste caso, você só precisa colocar o nome da visão no atributo de ação e o JSF irá pesquisar o corretoview página automaticamente no aplicativo implementado.
Navegação automática na página JSF
Defina o nome da visualização no atributo de ação de qualquer componente de interface do usuário JSF.
<h:form>
<h3>Using JSF outcome</h3>
<h:commandButton action = "page2" value = "Page2" />
</h:form>Aqui quando Page2 botão for clicado, o JSF resolverá o nome da visualização, page2 como extensão page2.xhtml e encontre o arquivo de visualização correspondente page2.xhtml no diretório atual.
Navegação automática no Managed Bean
Defina um método no managed bean para retornar um nome de visão.
@ManagedBean(name = "navigationController", eager = true)
@RequestScoped
public class NavigationController implements Serializable {
public String moveToPage1() {
return "page1";
}
}Obtenha o nome da visualização no atributo de ação de qualquer componente de interface do usuário JSF usando o bean gerenciado.
<h:form>
<h3> Using Managed Bean</h3>
<h:commandButton action = "#{navigationController.moveToPage1}"
value = "Page1" /glt;
</h:form>Aqui quando Page1 botão for clicado, o JSF resolverá o nome da visualização, page1 como extensão page1.xhtml e encontre o arquivo de visualização correspondente page1.xhtml no diretório atual.
Navegação Condicional
Usando o bean gerenciado, podemos controlar facilmente a navegação. Observe o seguinte código em um bean gerenciado.
@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";
}
}
}Passe pageId como um parâmetro de solicitação no 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>Aqui, quando o botão "Página1" é clicado.
JSF irá criar uma solicitação com o parâmetro pageId = 1
Em seguida, o JSF passará este parâmetro para a propriedade gerenciada pageId de navigationController
Agora navigationController.showPage () é chamado, o que retornará a visualização como page1 após verificar o pageId
JSF resolverá o nome da visualização, page1 como extensão page1.xhtml
Encontre o arquivo de visualização correspondente page1.xhtml no diretório atual
Resolvendo a navegação com base na ação inicial
JSF fornece opção de resolução de navegação mesmo se métodos diferentes de bean gerenciado retornarem o mesmo nome de visualização.
Observe o seguinte código em um bean gerenciado.
public String processPage1() {
return "page";
}
public String processPage2() {
return "page";
}Para resolver as visualizações, defina as seguintes regras de navegação em 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>Aqui, quando o botão Página1 é clicado -
navigationController.processPage1() é chamado, o que retornará a visualização como página
JSF resolverá o nome da visão, page1 como o nome da vista é page and from-action dentro faces-config is navigationController.processPage1
Encontre o arquivo de visualização correspondente page1.xhtml no diretório atual
Avançar vs Redirecionar
O JSF, por padrão, executa um encaminhamento de página do servidor enquanto navega para outra página e a URL do aplicativo não muda.
Para habilitar o redirecionamento de página, anexe faces-redirect=true no final do nome da visualização.
<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>Aqui quando Page1 botão sob Forward for clicado, você obterá o seguinte resultado.
Aqui quando Page1 botão sob Redirect for clicado, você obterá o seguinte resultado.
Aplicação de exemplo
Vamos criar um aplicativo JSF de teste para testar todos os exemplos de navegação acima.
| Degrau | Descrição |
|---|---|
| 1 | Crie um projeto com o nome helloworld sob um pacote com.tutorialspoint.test conforme explicado no capítulo JSF - Criar aplicativo . |
| 2 | Crie NavigationController.java sob um pacote com.tutorialspoint.test conforme explicado abaixo. |
| 3 | Crie faces-config.xml em uma pasta WEB-INF e atualize seu conteúdo conforme explicado abaixo. |
| 4 | Atualize web.xml em uma pasta WEB-INF conforme explicado abaixo. |
| 5 | Crie page1.xhtml e page2.xhtml e modifique home.xhtml em uma pasta de webapp conforme explicado abaixo. |
| 6 | Compile e execute o aplicativo para ter certeza de que a lógica de negócios está funcionando de acordo com os requisitos. |
| 7 | Por fim, construa o aplicativo na forma de um arquivo war e implante-o no Apache Tomcat Webserver. |
| 8 | Inicie seu aplicativo da web usando o URL apropriado, conforme explicado abaixo na última etapa. |
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>Quando você estiver pronto com todas as alterações feitas, vamos compilar e executar o aplicativo como fizemos no capítulo JSF - Criar Aplicativo. Se tudo estiver certo com sua aplicação, isso produzirá o seguinte resultado.
