Series JSF – Phần 5: Chuyển trang / điều hướng trong JSF – Forward với Redirect

cuongth

7 năm ago

Chuyển trang trong JSF

JSF cung cấp cơ chế tự động xử lý page view theo tên. Bạn chỉ cần đặt tên của view vào trong action hoặc trong phần return của bean, JSF sẽ tự đọc tìm page view tương ứng để hiển thị.

Bạn có thể chỉ định đích tới trực tiếp trên trang JSF:

<h:form>
    <h:commandButton action="page2" value="Move to page2.xhtml" />
</h:form>

Hoặc chỉ định đầu ra ở trong managed bean:

@ManagedBean
@SessionScoped
public class NavigationBean {

  public String moveToPage2() {
    return "page2"; // outcome
  }

}

Mặc định trong JSF, nó sẽ thực hiện forward khi chuyển hướng tới 1 trang khác, do đó trình duyệt sẽ luôn hiển thị. Ví dụ, khi bạn di chuyển từ trang “index.xhtml” tới “page2.xhml”, trình duyệt vẫn sẽ hiển thị url là index.xhtml.

Để tránh điều này, bạn có thể yêu cầu JSF sử dụng redirection bằng cách thêm “faces-redirect=true” vào cuối trang cần trả về:

<h:form>
  <h:commandButton action="page2?faces-redirect=true"
    value="Move to page2.xhtml by JSF outcome (redirect = true)" />
</h:form>

Trang index.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:head>
  <title>Demo JSF</title>
</h:head>
<h:body>
  <h:link rel="stackjava.com">Demo JSF</h:link>
  <br />
  <h:form>
    <h:commandButton action="page2"
      value="Move to page2.xhtml by JSF outcome" />
  </h:form>
  <br />
  <h:form>
    <h:commandButton action="#{navigationBean.moveToPage2()}"
      value="Move to page2.xhtml by managed bean" />
  </h:form>

  <br />
  <h:form>
    <h:commandButton action="page2?faces-redirect=true"
      value="Move to page2.xhtml by JSF outcome (redirect = true)" />
  </h:form>
</h:body>
</html>

Trang 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:f="http://java.sun.com/jsf/core"
  xmlns:h="http://java.sun.com/jsf/html">

<h:head>
  <title>JSF Hello World</title>
</h:head>
<h:body>
  <h:link rel="stackjava.com">Demo JSF</h:link>
  <br/>
  <br/>
  <h:outputText value="this is page2.xhtml" />
</h:body>
</html>

Kết quả:

Khi click vào button 1 và 2

Khi click vào button 3

Forward với Redirect

Mình sẽ sử dụng luôn ví dụ trên, khi chuyển từ trang index.xhtml sang page2.xhtml

Sau khi user click button:

Forward:

JSF nhận action và thực thi forward tới “page2.xhtml”
JSF trả về “page2.xhtml”
URL trên trình duyệt không được update

Redirect:

Here’s how the page redirection works :

JSF nhận action và gửi “redirect” tới “page2.xhtml” sau đó trả lại reponse trình duyệt
Trình duyệt nhận response và gửi một request “GET” khác tới url “http://localhost:8080/JSF-Navigation/page2.xhtml”
JSF nhận request và trả về “page2.xhtml”
Trình duyệt hiển thị nôi dung của “page2.xhtml”, URL trên trình duyệt được cập nhật.

Okay, Done!

Các bạn có thể download code ví dụ trên tại đây: JSF-Navigation

Phần tiếp theo chúng ta sẽ tìm hiểu về những thẻ (tag) cơ bản trong JSF: https://stackjava.com/jsf/series-jsf-phan-6-cac-tag-co-ban-trong-jsf-framework.html

Thanks các bạn đã theo dõi.