JSF 選擇式元件的使用

hychen39@gmail.com

2015/08/20

簡介

介紹  h:selectManyListBox，h:selectOneListBox，h:selectOneMenu，f:selectItems

等標籤的使用方式。

使用 產生不同形式的網頁中選擇式元件，如 List Box、Check Box List、Radio List及Menu，參考下圖[1]:

在 的 body 中使用 f:selectItem 或者 f:selectItems 帶入可選擇的清單項目。

f:selectItem 的使用上，使用該標籤的 itemLabel 及 itemValue 屬性來設定選單項目的標籤及標籤值 ，使用範例可參考[2]。

相較於 f:selectItem 需手動列舉項目清單，使用 f:selectItems 可以自動地將 Collection 或者 Arrary 轉成清單項目。Collection 或 Array 中的成員需是 SelectItem 物件或者 Java Object[3]。

以下說明使用 f:selectItems 的方式，一為項目清單使用 SelectItem 物件表示，另一為使用 Java Object 表示。

回傳 SelectItem Collection 產生項目清單

Backing beans

#45-47 的 getOptions() 方法傳回 SelectItem List

JSF Page

#13 中的 的 value 屬性是對應到  cashier backing bean 中的 newsLetters property。

HTML Output

Rendered Results

回傳 Java Object Collection 產生項目清單

Backing Bean

在 Company class 下定義的 Employee 子類別:

在 #41~43 定義的Company 類別的 getEmployee() 傳回 Employee List。

JSF Page

使用 取得項目清單值。 中的 value 屬性指向 backing bean 中傳回 Java Object Array 的屬性； var 屬性為 Array 中的 Object; itemLabel 設為 Object 中做為標籤名稱的 property；itemValue 設為Object 中做為標籤值的 property。

HTML Output

Rendered Result

---

[1] P61 in http://fr.slideshare.net/baronm/jsf-java-server-faces-8153998

[2] http://www.jsftoolbox.com/documentation/help/12-TagReference/core/f_selectItem.html

[3] http://docs.oracle.com/javaee/6/javaserverfaces/2.1/docs/vdldocs/facelets/f/selectItems.html