フォームの入力項目

この記事の所要時間: 約7分

テキストボックス

TextField コンポーネントを使用する。

クラスファイル。

HTML。

ラジオボタン

RadioChoice コンポーネントを使用する。

クラスは以下。

選択肢を List 型で作成し、RadioChoice のコンストラクタの第三引数に渡す。Model の中身が初期表示時の選択値となる。

HTML は以下。

input タグを直接記述していないところがミソ。

実行するとこのように表示される。

wicket_form_radio_01.png

自動的に Label タグも作成されるので、ラベル部分をクリックしても選択状態を変えられる。

任意のラベルを設定したい

上記の方法だと、value の値がそのままラベルとしても表示されてしまう。コード値が「0」の場合はラベルには「無効」、「1」の場合は「有効」などと表示させたい場合は、ChoiceRenderer を作成する。

ChoiceRenderer#getDisplayValue(String) をオーバーライドして、コードに対応する名称を返却するような ChoiceRenderer を作成し、DropDownChoice のコンストラクタの第四引数に設定することで、コード値に対応するラベルを持ったラジオボタンを作成できる。コード値のほうを変更したい場合は、 getIdValue(String, int) をオーバーライドすればよい。

wicket_form_radio_02.png

別の方法もある。以下のような Bean があり、

この Bean の id をコード値、label を表示用のラベルとして使いたいという場合…

Listにコード値と名称を詰めた Bean を複数入れ、ChoiceRenderer のコンストラクタで「ラベル、コード値」の順で Bean のプロパティ名を指定することで、コード値とラベルの指定が実現できる。Bean のかわりに HashMap などを使用してもよい( Model の型引数は Serializable の実装が必要なので、Map ではダメ)。

チェックボックス(単一)

単一選択のチェックボックスには、CheckBox コンポーネントを使用する。

クラスファイル。値は Boolean 型で、true がチェック ON、false がチェック OFF。

HTML。

チェックボックス(複数)

複数選択可能なチェックボックスを作成する場合は、CheckBoxMultipleChoice コンポーネントを使用する。

クラスファイル。複数選択の場合、Boolean 型である必要は無い。

使い方は RadioChoice とほとんど変わらないが、複数選択できる関係上、対応する Model も複数取得可能な型引数を指定する必要がある。List でなく ArrayList にしているのは、Model クラスの型引数には Serializable インタフェースの実装が必要であるため。

HTML。

wicket_form_checkmulti_02.png

任意のラベルを設定したい

上記の方法だと、valueの値がそのままラベルとしても表示されてしまう。コード値が「0」の場合はラベルには「無効」、「1」の場合は「有効」などと表示させたい場合は、ChoiceRenderer を作成する。

ChoiceRenderer の使い方などはラジオボタンの場合とまったく同じなので省略。

wicket_form_checkmulti_02.png

コンボボックス(単一)

単一選択のselectタグに対応する。

DropDownChoice コンポーネントを使用する。複数の選択肢の中から一つを選ぶという性格上、使い方は RadioChoice とほとんど変わらない。

クラスは以下。

コンポーネントのクラスが変更になったこと以外はラジオボタンと同様。Model の中身が初期表示時の選択値となるのも一緒。

HTMLは以下。

HTMLに書いてある option タグはただのダミーで、実行時はページクラスで設定した List の中身が選択肢として設定される。

表示するとこうなる。

wicket_form_select_01.png

任意のラベルを設定したい

上記の方法だと、value の値がそのままラベルとしても表示されてしまう。コード値が「0」の場合は「無効」、「1」の場合は「有効」などと表示させたい場合は、ChoiceRenderer を作成する。

ChoiceRenderer の使い方などはラジオボタンの場合とまったく同じなので省略。

wicket_form_select_02.png

リストボックス(複数)

複数選択の select タグに対応する。

ListMultipleChoice コンポーネントを使用する。複数の選択肢の中から複数のものを選ぶという性格上、使い方は CheckBoxMultipleChoice とほとんど変わらない。

クラスは以下。

コンポーネントのクラスが変更になったこと以外は複数選択チェックボックスと同様。

HTMLは以下。

wicket_form_listmulti_01.png

任意のラベルを設定したい

上記の方法だと、value の値がそのままラベルとしても表示されてしまう。コード値が「0」の場合は「無効」、「1」の場合は「有効」などと表示させたい場合は、ChoiceRenderer を作成する。

ChoiceRenderer の使い方などはラジオボタンの場合とまったく同じなので省略。

wicket_form_listmulti_02.png