主なGUIコンポーネントの利用(3ページ目)

ポップアップメニューと一覧リスト

HTMLの<select>タグは、１つのタグで一覧リストやポップアップメニューを作成することができます。これらのGUIを作成するためのコンポーネントも、JSFには用意されています。ただし、１つではなく複数のものが。JSFでは、それぞれの表示のスタイルごとに異なるコンポーネントが用意されているのです。

・ポップアップメニューの表示
タグ：　 <h:selectOneMenu>
クラス： HtmlSelectOneMenu

ポップアップメニューの表示を行うためのものです。マウスでクリックすると項目が現れ、そこから項目を選びます。

・１項目選択のリスト
タグ：　 <h:selectOneListbox>
クラス： HtmlSelectOneListbox

１つの項目だけが選択できる一覧リストを表示します。リストに表示される項目数は、size属性で指定できます。

・複数項目選択のリスト
タグ：　 <h:selectManyListbox>
クラス： HtmlSelectManyListbox

複数の項目を選択できる一覧リストを表示します。やはりsizeで表示される項目数を設定できます。

では、これらもサンプルをあげておきましょう。ここでは、ポップアップメニューと単一項目のみ選択できる一覧リストを表示させてみます。

<h:form>
  <h:selectOneListbox id="select1" value="A">
    <f:selectItem itemLabel="Windows" itemValue="A" />
    <f:selectItem itemLabel="Linux" itemValue="B" />
    <f:selectItem itemLabel="Mac OS X" itemValue="C" />
  </h:selectOneListbox>
  <br /><br />
  <h:selectOneMenu id="select2" value="A">
    <f:selectItem itemLabel="Windows" itemValue="A" />
    <f:selectItem itemLabel="Linux" itemValue="B" />
    <f:selectItem itemLabel="Mac OS X" itemValue="C" />
  </h:selectOneMenu>
</h:form>

見ればわかるように、メニューやリストに表示する項目は、ラジオボタンと同様、<f:selectItem>タグを使って記述します。