2.3. f:selectItems / h:selectOneMenu
f:selectItems タグは 前項の f:selectItem と同様、リストボックスやチェックボックス等に含まれる項目 (Item) を定義します。異なる点は f:selectItems は複数件の項目 (Item) を定義することです。そのため管理対象 Bean と紐付けて使用することがほとんどかと思います。
また、h:selectOneMenu は HTML の <select size="1"> タグに対応しています。
f:selectItems または f:selectItem と組み合わせることでプルダウンメニューを出力することが可能となります。
sample2_2.xhtml
<h:body>
<h:form id="sample">
<h:selectOneMenu>
<f:selectItems value="#{itemList.items}"/>
</h:selectOneMenu>
</h:form>
</h:body>
ItemList.java
@ManagedBean(*) 必要部分のみ抜粋
public class ItemList {
public List<SelectItem> getItems() {
ArrayList<SelectItem> items = new ArrayList<SelectItem> ();
items.add(new SelectItem("book_001", "小説"));
items.add(new SelectItem("book_002", "技術本"));
items.add(new SelectItem("book_003", "雑誌"));
return items;
}
}
画面
HTML
<body>(*) 一部改行を追加しています。
<form id="sample" name="sample" method="post"
action="/glassfish/faces/sample/sample2_2.xhtml"
enctype="application/x-www-form-urlencoded">
<input type="hidden" name="sample" value="sample" />
<select name="sample:j_id-1631015111_613750af" size="1">
<option value="book_001">小説</option>
<option value="book_002">技術本</option>
<option value="book_003">雑誌</option>
</select>
<input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="2485459046956495775:3564858951512028665" />
</form>
</body>
(*) エスケープ文字は日本語に変換しています。
f:selectItems の value 属性で指定したプロパティで java.util.List 型 を復帰することで、複数の 項目を <option> として指定可能です。List に格納するオプジェクトは javax.faces.model.SelectItem となります。
setValue(String) メソッド (or コンストラクタ) での指定値が value 属性として、setLabel(String) メソッド (or コンストラクタ) での指定値が <option> の値として設定されます。
setValue(String) のみを指定した場合は <option> の値も同値となるのは f:selectItem と同様です。
また、h:selectOneMenu は <select> に変換され、name 属性と size 属性 が設定されます。
size 属性の値は"1"固定となります。
name 属性のデフォルト値は h:form の id 属性 (上記例では「sample」) + 謎の文字列となっていますが、id 属性を指定するとその値を優先します。
さらに value 属性を指定することでリストボックスの初期値を指定可能です。
ex.) <h:selectOneMenu id="book" value="book_002"/> での HTML と画面
<select id="sample:book" name="sample:book" size="1" >
<option value="book_001">小説</option>
<option value="book_002" selected="selected">技術本</option>
<option value="book_003">雑誌</option>
</select>
2.4. h:selectManyMenu
h:selectManyMenu は HTML の <select size="1" multiple> タグ (複数選択可能なプルダウンメニュー) に対応しています。詳細は h:selectOneMenu と同様になります。
(*) 通常は h:selectManyListbox を使用することが多いため h:selectManyMenu の出番はほとんどないかもしれません。ブラウザによって出力結果も異なるようですし。。。
h:selectOneMenu との違いは複数選択可能なプルダウンメニューとして表示されること、のはずなのですが、、、
ex.) <h:selectManyListbox id="book" value="#{itemList.selectedItems}"/> での HTML と画面
<select id="sample:book" name="sample:book" multiple="multiple" size="1">(*) #{itemList.selectedItems} に対応する Bean の実装は 前項 を参照してください。
<option value="book_001">小説</option>
<option value="book_002" selected="selected">技術本</option>
<option value="book_003" selected="selected">雑誌</option>
</select>
(*) 複数選択可能？
どうも Firefox ではうまくレンダリングできないようで、スクロールバーのない１行のリストボックスとなってしまいました。
ちなみに、IE (もちろん Windows です) で確認したところスクロールバーは表示され、Safari、Chrome では通常の (複数行の) リストボックスとなりました。
素直に h:selectManyListbox を使うべきなのでしょうね。
