読者です 読者をやめる 読者になる 読者になる

Hedgehog Note

日々の開発メモです。

JSFの勉強2 selectOne系タグ

JSFの勉強です。今回はselectOne系のタグを使ってみます。

今回の内容

  • h:selectOneListbox
  • h:selectOneMenu
  • h:selectOneRadio
  • f:selectItem
  • f:selectItems

作るもの

リスト、プルダウン、ラジオのレンダリング結果を表示するだけです。h:selectOneListbox、h:selectOneMenu、h:selectOneRadioのそれぞれに対し、f:selectItemとf:selectItemsのバリエーションを確認します。

f:id:yoshiyuki9026:20170406232745p:plain

実装

FaceletsとバッキングBeanを1ファイルずつ作ります。

まずはFaceletsです。h:selectOne系タグをつらつらと書いていきます。基本的な使い方はどれも同じです。

index.xhtml

リスト、プルダウン、ラジオのいずれも選択値はvalueのEL式でバッキングBeanと紐付きます。各要素に表示する項目はf:selectItemかf:selectItemsで指定し、前者は項目を1つずつ定義し、後者はコレクションや配列を渡します。f:selectItemsを使用する場合、必要に応じてvarを定義し、itemLabelやitemValue、itemDisabled等を使用できます。

続いてバッキングBeanです。

IndexBean.java

各画面項目に紐づくフィールドの他、f:selectItems用のコレクションと配列を定義しています。products、getFruits()、getMyItems()がそれにあたります。送信ボタン用にsend()を定義していますが、今回は特に何も実装していません。

稼働確認

アプリを起動し、実際に出力されたHTMLソースを確認します(整形済)。

リストとプルダウンは素直な出力です。一方、ラジオはtableタグを使ってレンダリングするところが少し意外でした(ドキュメントを見ると仕様のようです)。 タグは下記のような対応で出力されます。

Facelets HTML
h:selectOneListbox リスト形式(size=n)のselectとoption
h:selectOneMenu プルダウン形式(size=1)のselectとoption
h:selectOneRadio input type=“radio”