JSF - Sayfada Gezinme

Gezinme kuralları, bir düğme veya bağlantı tıklandığında hangi görünümün gösterileceğini açıklayan JSF Framework tarafından sağlanan kurallardır.

Gezinme kuralları, faces-config.xml adlı JSF yapılandırma dosyasında tanımlanabilir. Yönetilen çekirdeklerde tanımlanabilirler.

Gezinme kuralları, sonuçtaki görünümün gösterilebileceği koşulları içerebilir. JSF 2.0, gezinme kurallarını bu şekilde tanımlamaya gerek olmayan örtük gezinme de sağlar.

Örtülü Gezinme

JSF 2.0 sağlar auto view page resolver mekanizma adlı implicit navigation. Bu durumda, görünüm adını eylem özniteliğine koymanız yeterlidir; JSF, doğruview dağıtılan uygulamada otomatik olarak sayfa.

JSF Sayfasında Otomatik Gezinme

Herhangi bir JSF UI Bileşeninin eylem özniteliğinde görünüm adını ayarlayın.

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

Burada, ne zaman Page2 düğmesi tıklandığında JSF görünüm adını çözecek, page2 page2.xhtml uzantısı olarak ve ilgili görünüm dosyasını bulun page2.xhtml mevcut dizinde.

Managed Bean'de Otomatik Gezinme

Bir görünüm adı döndürmek için yönetilen fasulye içinde bir yöntem tanımlayın.

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

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

Yönetilen bean kullanarak herhangi bir JSF UI Bileşeninin eylem özniteliğinde görünüm adını alın.

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

Burada, ne zaman Page1 düğmesi tıklandığında JSF görünüm adını çözecek, page1 page1.xhtml uzantısı olarak ve ilgili görünüm dosyasını bulun page1.xhtml mevcut dizinde.

Koşullu Gezinme

Yönetilen fasulye kullanarak navigasyonu çok kolay bir şekilde kontrol edebiliyoruz. Yönetilen bir fasulyede aşağıdaki koda bakın.

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

PageId'yi JSF UI Bileşeninde bir istek parametresi olarak geçirin.

<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>

Burada "Sayfa1" butonuna tıklandığında.

  • JSF, pageId = 1 parametresiyle bir istek oluşturacak

  • Ardından JSF, bu parametreyi navigationController'ın yönetilen özellik pageId'sine iletir.

  • Şimdi, navigationController.showPage () çağrılır ve bu, pageId'yi kontrol ettikten sonra görünümü page1 olarak döndürür.

  • JSF, görünüm adı olan page1'i page1.xhtml uzantısı olarak çözecektir.

  • Geçerli dizinde ilgili görünüm dosyası page1.xhtml'yi bulun

Hareketten Harekete Dayalı Gezinmeyi Çözümleme

JSF, yönetilen fasulye farklı yöntemleri aynı görünüm adını döndürse bile gezinme çözümleme seçeneği sağlar.

Yönetilen bir fasulyede aşağıdaki koda bakın.

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

Görünümleri çözmek için aşağıdaki gezinme kurallarını 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>

Burada, Sayfa1 düğmesi tıklandığında -

  • navigationController.processPage1() görünümü sayfa olarak döndürecek olan denir

  • JSF, görünüm adını çözecek, page1 görünüm adı page and from-action içinde faces-config is navigationController.processPage1

  • İlgili görünüm dosyasını bulun page1.xhtml mevcut dizinde

Yönlendirme ve Yönlendirme

JSF varsayılan olarak başka bir sayfaya giderken bir sunucu sayfası ileriye doğru gerçekleştirir ve uygulamanın URL'si değişmez.

Sayfa yeniden yönlendirmeyi etkinleştirmek için ekleyin faces-redirect=true görünüm adının sonunda.

<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>

Burada, ne zaman Page1 altındaki düğme Forward tıklandığında aşağıdaki sonucu alacaksınız.

Burada ne zaman Page1 altındaki düğme Redirect tıklandığında aşağıdaki sonucu alacaksınız.

Örnek Uygulama

Yukarıdaki tüm gezinme örneklerini test etmek için bir test JSF uygulaması oluşturalım.

Adım Açıklama
1 JSF - Uygulama Oluştur bölümünde açıklandığı gibi com.tutorialspoint.test paketi altında helloworld adıyla bir proje oluşturun .
2 Aşağıda açıklandığı gibi com.tutorialspoint.test paketi altında NavigationController.java oluşturun .
3 Bir WEB-INF klasörü altında faces-config.xml oluşturun ve içeriğini aşağıda açıklandığı gibi güncelleyin.
4 Aşağıda açıklandığı gibi bir WEB-INF klasörü altındaki web.xml dosyasını güncelleyin .
5 Oluşturma page1.xhtml ve page2.xhtml ve modify home.xhtml bir altında Webapp aşağıda açıklandığı gibi klasörde.
6 İş mantığının gereksinimlere göre çalıştığından emin olmak için uygulamayı derleyin ve çalıştırın.
7 Son olarak, uygulamayı savaş dosyası biçiminde oluşturun ve Apache Tomcat Web sunucusunda konuşlandırın.
8 Son adımda aşağıda açıklandığı gibi uygun URL'yi kullanarak web uygulamanızı başlatın.

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>

Yapılan tüm değişikliklere hazır olduğunuzda, uygulamayı JSF - Create Application bölümünde yaptığımız gibi derleyip çalıştıralım. Başvurunuzla ilgili her şey yolundaysa, bu aşağıdaki sonucu verecektir.