フォームの入力項目

投稿日 2010/10/26

テキストボックス
ラジオボタン
- 任意のラベルを設定したい
チェックボックス（単一）
チェックボックス（複数）
- 任意のラベルを設定したい
コンボボックス（単一）
- 任意のラベルを設定したい
リストボックス（複数）
- 任意のラベルを設定したい

テキストボックス

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

クラスファイル。

Model<String> model = new Model<String>();
model.setObject("abc");
TextField<String> text = new TextField<String>("txt", model);
add(text);

Model<String> model = new Model<String>();

model.setObject("abc");

TextField<String> text = new TextField<String>("txt", model);

add(text);

HTML。

<input wicket:id="txt" type="text" />

1	<input wicket:id="txt" type="text" />

ラジオボタン

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

クラスは以下。

List<String> list = new ArrayList<String>();
list.add("0");
list.add("1");

Model<String> model = new Model<String>();
model.setObject("1");
RadioChoice<String> radio = new RadioChoice<String>("radio", model, list);
add(radio);

List<String> list = new ArrayList<String>();

list.add("0");

list.add("1");

Model<String> model = new Model<String>();

model.setObject("1");

RadioChoice<String> radio = new RadioChoice<String>("radio", model, list);

add(radio);

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

HTML は以下。

<span wicket:id="radio"></span>

1	<span wicket:id="radio"></span>

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

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

<span wicket:id="radio">
  <input name="radio" type="radio" value="0" id="radio1-0"/>
  <label for="radio1-0">0</label>
  <br /> 
  <input name="radio" type="radio" checked="checked" value="1" id="radio1-1"/>
  <label for="radio1-1">1</label>
  <br /> 
</span>

<br />

<br />

</span>

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

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

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

IChoiceRenderer<String> choiceRenderer = new ChoiceRenderer<String>() {
  @Override
  public Object getDisplayValue(String string) {
    if ("1".equals(string)) {
      return "有効";
    } else {
      return "無効";
    }
  }
};
List<String> list = new ArrayList<String>();
list.add("0");
list.add("1");

Model<String> model = new Model<String>();
model.setObject("1");
RadioChoice<String> radio =
  new RadioChoice<String>("radio", model, list, choiceRenderer);
add(radio);

IChoiceRenderer<String> choiceRenderer = new ChoiceRenderer<String>() {

@Override

public Object getDisplayValue(String string) {

if ("1".equals(string)) {

return "有効";

} else {

return "無効";

}

};

List<String> list = new ArrayList<String>();

list.add("0");

list.add("1");

Model<String> model = new Model<String>();

model.setObject("1");

RadioChoice<String> radio =

new RadioChoice<String>("radio", model, list, choiceRenderer);

add(radio);

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

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

class Entity implements Serializable {
  public String id;
  public String label;
  public Entity(String id, String label) {
    this.id = id;
    this.label = label;
  }
}

class Entity implements Serializable {

public String id;

public String label;

public Entity(String id, String label) {

this.id = id;

this.label = label;

}

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

IChoiceRenderer<Entity> choiceRenderer =
  new ChoiceRenderer<Entity>("label", "id");

Entity e1 = new Entity("0", "無効");
Entity e2 = new Entity("1", "有効");
List<Entity> list = new ArrayList<Entity>();
list.add(e1);
list.add(e2);

Model<Entity> model = new Model<Entity>();
model.setObject(e1);
RadioChoice<Entity> radio =
  new RadioChoice<Entity>("radio", model, list, choiceRenderer);
add(radio);

IChoiceRenderer<Entity> choiceRenderer =

new ChoiceRenderer<Entity>("label", "id");

Entity e1 = new Entity("0", "無効");

Entity e2 = new Entity("1", "有効");

List<Entity> list = new ArrayList<Entity>();

list.add(e1);

list.add(e2);

Model<Entity> model = new Model<Entity>();

model.setObject(e1);

RadioChoice<Entity> radio =

new RadioChoice<Entity>("radio", model, list, choiceRenderer);

add(radio);

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

チェックボックス（単一）

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

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

Model<Boolean> model = new Model<Boolean>();
model.setObject(true);
CheckBox checkBox = new CheckBox("check", model);
add(checkBox);

Model<Boolean> model = new Model<Boolean>();

model.setObject(true);

CheckBox checkBox = new CheckBox("check", model);

add(checkBox);

HTML。

<input wicket:id="check" type="checkbox" />

1	<input wicket:id="check" type="checkbox" />

チェックボックス（複数）

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

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

ArrayList<String> list = new ArrayList<String>();
list.add("0");
list.add("1");

Model<ArrayList<String>> model = new Model<ArrayList<String>>();
ArrayList<String> selectedList = new ArrayList<String>();
selectedList.add("1");
model.setObject(selectedList);

CheckBoxMultipleChoice<String> radio =
  new CheckBoxMultipleChoice<String>("check", model, list);

ArrayList<String> list = new ArrayList<String>();

list.add("0");

list.add("1");

Model<ArrayList<String>> model = new Model<ArrayList<String>>();

ArrayList<String> selectedList = new ArrayList<String>();

selectedList.add("1");

model.setObject(selectedList);

CheckBoxMultipleChoice<String> radio =

new CheckBoxMultipleChoice<String>("check", model, list);

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

HTML。

<span wicket:id="check"></span>

1	<span wicket:id="check"></span>

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

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

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

コンボボックス（単一）

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

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

クラスは以下。

List<String> list = new ArrayList<String>();
list.add("0");
list.add("1");

Model<String> model1 = new Model<String>();
model1.setObject("0");
DropDownChoice<String> drop1 =
  new DropDownChoice<String>("combo1", model1, list);
add(drop1);

Model<String> model2 = new Model<String>();
model2.setObject("1");
DropDownChoice<String> drop2 =
  new DropDownChoice<String>("combo2", model2, list);
add(drop2);

List<String> list = new ArrayList<String>();

list.add("0");

list.add("1");

Model<String> model1 = new Model<String>();

model1.setObject("0");

DropDownChoice<String> drop1 =

new DropDownChoice<String>("combo1", model1, list);

add(drop1);

Model<String> model2 = new Model<String>();

model2.setObject("1");

DropDownChoice<String> drop2 =

new DropDownChoice<String>("combo2", model2, list);

add(drop2);

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

HTMLは以下。

<select wicket:id="combo1">
  <option value="1">a</option>
  <option value="2">b</option>
</select>
<br />
<select wicket:id="combo2">
  <option value="3">c</option>
  <option value="4">d</option>
</select>

</select>

<br />

</select>

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

表示するとこうなる。

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

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

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

リストボックス（複数）

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

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

クラスは以下。

ArrayList<String> list = new ArrayList<String>();
list.add("0");
list.add("1");

Model<ArrayList<String>> model = new Model<ArrayList<String>>();
ArrayList<String> selectedList = new ArrayList<String>();
selectedList.add("1");
model.setObject(selectedList);

ListMultipleChoice<String> select =
  new ListMultipleChoice<String>("select", model, list);

add(select);

ArrayList<String> list = new ArrayList<String>();

list.add("0");

list.add("1");

Model<ArrayList<String>> model = new Model<ArrayList<String>>();

ArrayList<String> selectedList = new ArrayList<String>();

selectedList.add("1");

model.setObject(selectedList);

ListMultipleChoice<String> select =

new ListMultipleChoice<String>("select", model, list);

add(select);

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

HTMLは以下。

<select multiple="multiple" size="4" wicket:id="select">
  <option value="1">a</option>
  <option value="2">b</option>
</select>

</select>

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

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