JSF 中如何提交表單資料
Unit 02
目標
- 瞭解如何提交表單資料到伺服器端的 JSF Managed Bean
HTML Facelets
基本的 Form 的形式:
1
2
3
4
<h:form>
<h:inputText value="#{bind_to_bean_property}>" />
<h:commandButton value="display_value" action="#{bind_to_bean_method}">
</h:form>
h:inputText 的重要屬性
value: 目前元件的值, 綁定到 bean property, 需要回傳java.lang.Object型態
提交表單時, JSF 會自動把 value 的值複製到 bean property, 我們不用介入處理。
h:commandButton 的重要屬性
value: 按鈕的顯示值, must evaluate tojava.lang.Objectaction: 綁定到 Bean 的 public method, 或稱為 action method.
action method 函數簽名必須符合以下要求:
1
java.lang.Object action()
不帶參數的方法。JSF 會呼叫回傳 Object 的 toString(), 做為 action 的 outcome 值. outcome 會被傳入到 NavigationHandler 以處理頁面轉跳。
簡單來說, action method 的回傳值, 稱之為 outcome, 就是要轉跳的目的頁面名稱或代碼。
JSF 文件對 action 屬性的原始說明如下:
The expression must evaluate to a public method that takes no parameters, and returns an Object (the toString() of which is called to derive the logical outcome) which is passed to the NavigationHandler for this application. Source: commandButton (JSF 2.2 View Declaration Language: Facelets Variant)
User Story
- 使用者進入頁面後, 頁面顯示姓名及性別欄位, 供使用者輸入. 使用文字盒(InputBox)輸入名字, 使用 Radio Buttons 輸入性別.
- 按下 Submit 按鈕後, 將表單資料送到伺服端的 JSF Managed Bean 儲存.
- 之後, 轉跳頁面
showinfo顯示先前輸入的資訊
實作程序
Step 建立一個 JSF Managed Bean beans.Customer
這個 Bean 有兩個 property 及一個 action method.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package beans;
import javax.inject.Named;
import javax.enterprise.context.SessionScoped;
import java.io.Serializable;
/**
*
* @author user
*/
@Named(value = "customer")
@SessionScoped
public class Customer implements Serializable {
private String name;
private String gender;
/**
* Creates a new instance of Customer
*/
public Customer() {
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
public String handleAction(){
return "showinfo?faces-redirect=true";
}
}
Step 建立以下的 JSF 頁面 /index.xhtml
index page 中有一個 InputBox 及一個 SelectOneRadio 元件供使用者輸入.
<?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://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>Unit02: 表單資料提交 </title>
</h:head>
<h:body>
<h:form>
<h:outputLabel value="姓名" />
<h:inputText value="#{customer.name}"/> <br />
<h:outputLabel value="性別" />
<h:selectOneRadio value="#{customer.gender}">
<f:selectItem itemLabel="男" itemValue="F" />
<f:selectItem itemLabel="女" itemValue="M" />
</h:selectOneRadio> <br />
<h:commandButton action="#{customer.handleAction}" type="submit" value="Sumit" />
<h:commandButton action="index" type="reset" value="Reset" />
</h:form>
</h:body>
</html>
Step 建立以下的 JSF 頁面 /showinfo.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://xmlns.jcp.org/jsf/html">
<h:head>
<title>Show Customer Info</title>
</h:head>
<h:body>
Name: #{customer.name} <br/>
Gender: #{customer.gender == "F"? "男" : "女"} <br/>
<h:link outcome="index" > Back </h:link>
</h:body>
</html>
Step 測試你的程式
問題與討論
h:link伺服器端標籤在瀏覽器上顯示時, 是以那種 HTML 標籤顯示?Customer#handleAction()方法回傳的字串代表什麼意思? 有無faces-redirect=true請求參數會產生什麼不一樣的結果?- 底下的 EL 運算式
#{customer.gender == "F"? "男" : "女"}是什麽意思