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

チェックボックスとラジオボタン

続いて、項目のON/OFFや複数項目からの選択に用いられるチェックボックスとラジオボタンのコンポーネントについて説明しましょう。

・チェックボックスの作成
タグ：　 <h:selectBooleanCheckbox>
クラス： HtmlSelectBooleanCheckbox

チェックボックスは、<h:selectBooleanCheckbox>というタグで作成します。これは、Bean側ではHtmlSelectBooleanCheckboxというクラスに関連付けられます。一つ注意しておきたいのは、valueのタイプです。inputTextなどでは、Bean側でgetValue/setValueする値はStringでした。が、このHtmlSelectBooleanCheckboxのvalueは、Booleanになります。この点、間違えないようにしましょう。

また、この<h:selectBooleanCheckbox>タグだけだと、ただ単にチェックボックスのチェック部分が表示されるだけです。通常は、その横に項目名のテキストを表示するのが一般的ですが、これは別途用意しないといけません。

項目名は、<h:outputText>を使ってもいいのですが、やはりテキスト部分をクリックしてもチェックがON/OFFされるよう、HTMLの<label>に相当するものを使ったほうがよいでしょう。これは、以下のようなタグを使います。

<h:outputLabel for="関連付けするID">

これは、forで指定したIDのコンポーネントにラベルをつけるものです。このラベルをクリックすると、forで指定したIDのコンポーネントをクリックしたのと同じ働きをします。

・ラジオボタンの作成
タグ：　 <h:selectOneRadio>
クラス： HtmlSelectOneRadio

これは、ラジオボタンを作成するためのものです。が、実をいえば、このタグを書いただけではラジオボタンは表示されないのです。ラジオボタンは、「ラジオボタン表示用のタグ」と、「表示する項目のタグ」を組み合わせて作成します。この<h:selectOneRadio>タグの中に、表示する項目を示すタグを記述して、初めてラジオボタンが表示されるようになっているのです。項目のタグは、以下のようなものです。

<f:selectItem itemLabel="表示テキスト" itemValue="値">

<f:selectItem>タグは、表示する項目のタグです。実際に画面に表示されるテキスト（itemLabel）と、その項目が選択されたときにvalueに設定される値（itemValue）を属性として設定します。これを必要なだけ用意することで、複数のラジオボタンを表示することができます。

では、チェックボックスとラジオボタンを実際に表示する例を挙げておきましょう。初期状態でチェックボックスと１つ目のラジオボタンを選択した状態にしてあります。これは、それぞれのvalueの値を用意しておくことで可能です。

<h:form>
  <h:selectBooleanCheckbox id="check1" value="true" />
  <h:outputLabel value="チェック" for="check1" />
  <h:selectOneRadio id="radio1" value="A">
    <f:selectItem itemLabel="ラジオ1" itemValue="A" />
    <f:selectItem itemLabel="ラジオ2" itemValue="B" />
  </h:selectOneRadio>
</h:form>