JSF - Điều hướng trang

Quy tắc điều hướng là những quy tắc được cung cấp bởi JSF Framework mô tả chế độ xem nào sẽ được hiển thị khi một nút hoặc một liên kết được nhấp vào.

Quy tắc điều hướng có thể được xác định trong tệp cấu hình JSF có tên là face-config.xml. Chúng có thể được xác định trong đậu được quản lý.

Quy tắc điều hướng có thể chứa các điều kiện dựa trên đó có thể hiển thị chế độ xem kết quả. JSF 2.0 cung cấp điều hướng ngầm cũng như trong đó không cần xác định các quy tắc điều hướng như vậy.

Điều hướng ngầm định

JSF 2.0 cung cấp auto view page resolver cơ chế được đặt tên implicit navigation. Trong trường hợp này, bạn chỉ cần đặt tên chế độ xem trong thuộc tính hành động và JSF sẽ tìm kiếm chính xácview trang tự động trong ứng dụng đã triển khai.

Điều hướng tự động trong Trang JSF

Đặt tên chế độ xem trong thuộc tính hành động của bất kỳ Thành phần giao diện người dùng JSF nào.

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

Đây, khi Page2 được nhấp vào, JSF sẽ phân giải tên chế độ xem, page2 dưới dạng phần mở rộng page2.xhtml và tìm tệp chế độ xem tương ứng page2.xhtml trong thư mục hiện tại.

Điều hướng tự động trong hạt được quản lý

Xác định một phương thức trong bean được quản lý để trả về một tên dạng xem.

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

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

Nhận thuộc tính tên chế độ xem trong hành động của bất kỳ Thành phần giao diện người dùng JSF nào bằng cách sử dụng bean được quản lý.

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

Đây, khi Page1 được nhấp vào, JSF sẽ phân giải tên chế độ xem, page1 dưới dạng phần mở rộng page1.xhtml và tìm tệp chế độ xem tương ứng page1.xhtml trong thư mục hiện tại.

Điều hướng có điều kiện

Sử dụng bean quản lý, chúng tôi có thể rất dễ dàng kiểm soát điều hướng. Nhìn vào đoạn mã sau trong một bean được quản lý.

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

Chuyển pageId làm tham số yêu cầu trong Thành phần giao diện người dùng 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>

Tại đây, khi nút "Trang1" được nhấp vào.

  • JSF sẽ tạo một yêu cầu với tham số pageId = 1

  • Sau đó, JSF sẽ chuyển tham số này đến trang thuộc tính được quản lýId của navigationController

  • Bây giờ, navigationController.showPage () sẽ trả về dạng xem là page1 sau khi kiểm tra pageId

  • JSF sẽ phân giải tên chế độ xem, trang1 dưới dạng phần mở rộng page1.xhtml

  • Tìm tệp xem tương ứng page1.xhtml trong thư mục hiện tại

Giải quyết điều hướng dựa trên từ hành động

JSF cung cấp tùy chọn độ phân giải điều hướng ngay cả khi các phương thức khác nhau của bean được quản lý trả về cùng một tên chế độ xem.

Nhìn vào đoạn mã sau trong một bean được quản lý.

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

Để giải quyết các chế độ xem, hãy xác định các quy tắc điều hướng sau trong 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>

Tại đây, khi nút Trang1 được nhấp vào -

  • navigationController.processPage1() được gọi là sẽ trả về chế độ xem dưới dạng trang

  • JSF sẽ giải quyết tên chế độ xem, page1 như tên xem là page and from-action trong faces-config is navigationController.processPage1

  • Tìm tệp chế độ xem tương ứng page1.xhtml trong thư mục hiện tại

Chuyển tiếp so với Chuyển hướng

JSF theo mặc định thực hiện chuyển tiếp một trang máy chủ trong khi điều hướng đến một trang khác và URL của ứng dụng không thay đổi.

Để bật chuyển hướng trang, hãy nối thêm faces-redirect=true ở cuối tên chế độ xem.

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

Đây, khi Page1 nút dưới Forward được nhấp vào, bạn sẽ nhận được kết quả sau.

Ở đây khi Page1 nút dưới Redirect được nhấp vào, bạn sẽ nhận được kết quả sau.

Ứng dụng mẫu

Hãy để chúng tôi tạo một ứng dụng JSF thử nghiệm để kiểm tra tất cả các ví dụ điều hướng ở trên.

Bươc Sự miêu tả
1 Tạo một dự án với tên helloworld trong một gói com.tutorialspoint.test như được giải thích trong chương JSF - Tạo ứng dụng .
2 Tạo NavigationController.java theo gói com.tutorialspoint.test như được giải thích bên dưới.
3 Tạo face-config.xml trong thư mục WEB-INF và cập nhật nội dung của nó như được giải thích bên dưới.
4 Cập nhật web.xml trong thư mục WEB-INF như được giải thích bên dưới.
5 Tạo page1.xhtmlpage2.xhtml và Sửa home.xhtml dưới một webapp thư mục như được giải thích dưới đây.
6 Biên dịch và chạy ứng dụng để đảm bảo logic nghiệp vụ đang hoạt động theo yêu cầu.
7 Cuối cùng, xây dựng ứng dụng dưới dạng tệp chiến tranh và triển khai nó trong Apache Tomcat Webserver.
số 8 Khởi chạy ứng dụng web của bạn bằng URL thích hợp như được giải thích bên dưới trong bước cuối cùng.

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

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

Khi bạn đã sẵn sàng với tất cả các thay đổi được thực hiện, hãy để chúng tôi biên dịch và chạy ứng dụng như chúng tôi đã làm trong chương JSF - Tạo ứng dụng. Nếu mọi thứ đều ổn với ứng dụng của bạn, điều này sẽ tạo ra kết quả sau.