JSF - Navigasi Halaman

Aturan navigasi adalah aturan yang disediakan oleh JSF Framework yang menjelaskan tampilan mana yang akan ditampilkan ketika tombol atau tautan diklik.

Aturan navigasi dapat ditentukan dalam file konfigurasi JSF dengan nama face-config.xml. Mereka dapat didefinisikan dalam biji yang dikelola.

Aturan navigasi dapat berisi kondisi berdasarkan tampilan yang dihasilkan dapat ditampilkan. JSF 2.0 juga menyediakan navigasi implisit di mana tidak perlu mendefinisikan aturan navigasi seperti itu.

Navigasi Implisit

JSF 2.0 menyediakan auto view page resolver mekanisme bernama implicit navigation. Dalam hal ini, Anda hanya perlu meletakkan nama tampilan di atribut tindakan dan JSF akan mencari yang benarview halaman secara otomatis dalam aplikasi yang diterapkan.

Navigasi Otomatis di Halaman JSF

Tetapkan nama tampilan dalam atribut tindakan dari setiap Komponen UI JSF.

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

Di sini, kapan Page2 tombol diklik, JSF akan menyelesaikan nama tampilan, page2 sebagai ekstensi page2.xhtml, dan temukan file tampilan yang sesuai page2.xhtml di direktori saat ini.

Navigasi Otomatis di Managed Bean

Tentukan metode dalam kacang terkelola untuk mengembalikan nama tampilan.

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

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

Dapatkan nama tampilan dalam atribut tindakan dari Komponen UI JSF menggunakan kacang terkelola.

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

Di sini, kapan Page1 tombol diklik, JSF akan menyelesaikan nama tampilan, page1 sebagai ekstensi page1.xhtml, dan temukan file tampilan yang sesuai page1.xhtml di direktori saat ini.

Navigasi Bersyarat

Dengan menggunakan kacang yang dikelola, kita dapat dengan mudah mengontrol navigasi. Lihat kode berikut di kacang yang dikelola.

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

Teruskan pageId sebagai parameter permintaan di 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>

Di sini, saat tombol "Halaman1" diklik.

  • JSF akan membuat permintaan dengan parameter pageId = 1

  • Kemudian JSF akan meneruskan parameter ini ke pageId properti yang dikelola dari navigationController

  • Sekarang navigationController.showPage () dipanggil yang akan mengembalikan tampilan sebagai halaman1 setelah memeriksa pageId

  • JSF akan menyelesaikan nama tampilan, halaman1 sebagai ekstensi halaman1.xhtml

  • Temukan file tampilan halaman1.xhtml yang sesuai di direktori saat ini

Menyelesaikan Navigasi Berdasarkan from-action

JSF menyediakan opsi resolusi navigasi bahkan jika metode berbeda kacang yang dikelola mengembalikan nama tampilan yang sama.

Lihat kode berikut di kacang yang dikelola.

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

Untuk mengatasi tampilan, tentukan aturan navigasi berikut di 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>

Di sini, ketika tombol Page1 diklik -

  • navigationController.processPage1() disebut yang akan mengembalikan tampilan sebagai halaman

  • JSF akan menyelesaikan nama tampilan, page1 seperti nama tampilan page and from-action di faces-config is navigationController.processPage1

  • Temukan file tampilan yang sesuai page1.xhtml di direktori saat ini

Maju vs Alihkan

JSF secara default menjalankan halaman server ke depan saat menavigasi ke halaman lain dan URL aplikasi tidak berubah.

Untuk mengaktifkan pengalihan halaman, tambahkan faces-redirect=true di akhir nama tampilan.

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

Di sini, kapan Page1 tombol di bawah Forward diklik, Anda akan mendapatkan hasil sebagai berikut.

Di sini kapan Page1 tombol di bawah Redirect diklik, Anda akan mendapatkan hasil sebagai berikut.

Contoh Aplikasi

Mari kita buat aplikasi uji JSF untuk menguji semua contoh navigasi di atas.

Langkah Deskripsi
1 Buat proyek dengan nama helloworld di bawah paket com.tutorialspoint.test seperti yang dijelaskan di JSF - bab Membuat Aplikasi .
2 Buat NavigationController.java di bawah paket com.tutorialspoint.test seperti yang dijelaskan di bawah ini.
3 Buat face-config.xml di bawah folder WEB-INF dan perbarui isinya seperti yang dijelaskan di bawah ini.
4 Perbarui web.xml di bawah folder WEB-INF seperti yang dijelaskan di bawah ini.
5 Buat page1.xhtml dan page2.xhtml dan memodifikasi home.xhtml bawah webapp folder seperti yang dijelaskan di bawah ini.
6 Kompilasi dan jalankan aplikasi untuk memastikan logika bisnis berfungsi sesuai kebutuhan.
7 Terakhir, buat aplikasi dalam bentuk file perang dan terapkan di Webserver Apache Tomcat.
8 Luncurkan aplikasi web Anda menggunakan URL yang sesuai seperti yang dijelaskan di bawah ini pada langkah terakhir.

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

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

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

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

Setelah Anda siap dengan semua perubahan yang dilakukan, mari kita mengkompilasi dan menjalankan aplikasi seperti yang kita lakukan di JSF - bab Membuat Aplikasi. Jika semuanya baik-baik saja dengan aplikasi Anda, ini akan memberikan hasil sebagai berikut.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved