JSF - Navigazione pagine

Le regole di navigazione sono quelle regole fornite da JSF Framework che descrive quale vista deve essere mostrata quando si fa clic su un pulsante o su un collegamento.

Le regole di navigazione possono essere definite nel file di configurazione JSF denominato faces-config.xml. Possono essere definiti in bean gestiti.

Le regole di navigazione possono contenere condizioni in base alle quali è possibile mostrare la vista risultante. JSF 2.0 fornisce anche la navigazione implicita in cui non è necessario definire regole di navigazione in quanto tali.

Navigazione implicita

JSF 2.0 fornisce auto view page resolver meccanismo denominato implicit navigation. In questo caso, è sufficiente inserire il nome della vista nell'attributo di azione e JSF cercherà quello correttoview pagina automaticamente nell'applicazione distribuita.

Navigazione automatica nella pagina JSF

Imposta il nome della vista nell'attributo di azione di qualsiasi componente UI JSF.

<h:form>
   <h3>Using JSF outcome</h3>
   <h:commandButton action = "page2" value = "Page2" />
</h:form>

Qui, quando Page2 si fa clic sul pulsante, JSF risolverà il nome della vista, page2 come estensione page2.xhtml e trova il file di visualizzazione corrispondente page2.xhtml nella directory corrente.

Navigazione automatica in Managed Bean

Definire un metodo nel bean gestito per restituire un nome di visualizzazione.

@ManagedBean(name = "navigationController", eager = true)
@RequestScoped

public class NavigationController implements Serializable {
   public String moveToPage1() {
      return "page1";
   }
}

Ottieni il nome della vista nell'attributo di azione di qualsiasi componente UI JSF utilizzando il bean gestito.

<h:form> 
   <h3> Using Managed Bean</h3>  
   <h:commandButton action = "#{navigationController.moveToPage1}" 
   value = "Page1" /glt; 
</h:form>

Qui, quando Page1 si fa clic sul pulsante, JSF risolverà il nome della vista, page1 come estensione page1.xhtml e trova il file di visualizzazione corrispondente page1.xhtml nella directory corrente.

Navigazione condizionale

Utilizzando il bean gestito, possiamo controllare molto facilmente la navigazione. Guarda il codice seguente in un bean gestito.

@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";
      }
   }
}

Passa pageId come parametro di richiesta nel componente UI 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>

Qui, quando si fa clic sul pulsante "Pagina1".

JSF creerà una richiesta con il parametro pageId = 1
Quindi JSF passerà questo parametro alla proprietà gestita pageId di navigationController
Ora viene chiamato navigationController.showPage () che restituirà la visualizzazione come pagina1 dopo aver controllato il pageId
JSF risolverà il nome della vista, pagina1 come estensione page1.xhtml
Trova il file di visualizzazione corrispondente page1.xhtml nella directory corrente

Risoluzione della navigazione in base all'azione

JSF fornisce un'opzione di risoluzione della navigazione anche se metodi diversi del bean gestito restituiscono lo stesso nome di visualizzazione.

Guarda il codice seguente in un bean gestito.

public String processPage1() { 
   return "page"; 
} 
public String processPage2() { 
   return "page"; 
}

Per risolvere le visualizzazioni, definire le seguenti regole di navigazione in 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>

Qui, quando si fa clic sul pulsante Pagina1:

navigationController.processPage1() viene chiamato che restituirà la visualizzazione come pagina
JSF risolverà il nome della vista, page1 come il nome della vista è page and from-action in faces-config is navigationController.processPage1
Trova il file di visualizzazione corrispondente page1.xhtml nella directory corrente

Avanti vs Reindirizzamento

JSF per impostazione predefinita esegue una pagina del server in avanti durante la navigazione in un'altra pagina e l'URL dell'applicazione non cambia.

Per abilitare il reindirizzamento della pagina, aggiungi faces-redirect=true alla fine del nome della 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>

Qui, quando Page1 pulsante sotto Forward viene cliccato, otterrai il seguente risultato.

Qui quando Page1 pulsante sotto Redirect viene cliccato, otterrai il seguente risultato.

Applicazione di esempio

Creiamo un'applicazione JSF di prova per testare tutti gli esempi di navigazione precedenti.

Passo	Descrizione
1	Crea un progetto con un nome helloworld sotto un pacchetto com.tutorialspoint.test come spiegato nel capitolo JSF - Crea applicazione .
2	Crea NavigationController.java in un pacchetto com.tutorialspoint.test come spiegato di seguito.
3	Crea faces-config.xml in una cartella WEB-INF e aggiorna il suo contenuto come spiegato di seguito.
4	Aggiorna web.xml in una cartella WEB-INF come spiegato di seguito.
5	Crea page1.xhtml e page2.xhtml e modifica home.xhtml in una cartella webapp come spiegato di seguito.
6	Compilare ed eseguire l'applicazione per assicurarsi che la logica aziendale funzioni secondo i requisiti.
7	Infine, crea l'applicazione sotto forma di file war e distribuiscila nel server Web Apache Tomcat.
8	Avvia la tua applicazione web utilizzando l'URL appropriato come spiegato di seguito nell'ultimo passaggio.

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 volta che sei pronto con tutte le modifiche apportate, compiliamo ed eseguiamo l'applicazione come abbiamo fatto nel capitolo JSF - Crea applicazione. Se tutto va bene con la tua applicazione, questo produrrà il seguente risultato.

↰ Previous page Next page ↱