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

Hedgehog Note

日々の開発メモです。

JSFの勉強3 selectMany系タグ

JSFの勉強です。前回はselectOne系のタグを使いましたが、今回はselectMany系のタグを使ってみます。名前の通り単一選択か複数選択かの違いですが、言ってしまえばそれだけなので使い方はほぼ同じです。

今回の内容

  • h:selectManyListbox
  • h:selectManyMenu
  • h:selectManyCheckbox

作るもの

複数選択可能なリスト、プルダウン、チェックボックスレンダリング結果を表示します。各タグそれぞれでf:selectItemとf:selectItemsのバリエーションを確認します。

f:id:yoshiyuki9026:20170408141558p:plain

実装

画面の実装です。h:selectMany系タグを順に書いていきます。

index.xhtml

リスト、プルダウン、チェックボックスのいずれも選択値はvalueのEL式でバッキングBeanと紐付けます。selectOne系のタグとは異なり、バッキングBean側は配列・コレクションを用意する必要があります。各要素に表示する項目はf:selectItemかf:selectItemsで指定します。ここは前回のselectOne系と同じです。(コードもほぼコピペ)

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

IndexBean.java

前述の通り、画面項目と紐づくプロパティは配列・コレクションとします。この例では配列、List、Setを使用しています。

稼働確認

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

リストとプルダウンに"multiple"属性が出力されています。プルダウンの複数選択がどこまで実用的かはさておき、期待通りの結果です。チェックボックスはラジオと同様tableタグでレンダリングされます。レイアウトは通常横並びですが、layoutにpageDirectionを指定していれば縦並びとなります。(上記ではcheckbox2が該当)

タグは下記のような対応で出力されます。

Facelets HTML
h:selectManyListbox リスト形式(size=n)のselect+multipleとoption
h:selectManyMenu プルダウン形式(size=1)のselect+multipleとoption
h:selectManyCheckbox input type=“checkbox”