WicketでダイナミックなWeb開発！(後編)(2ページ目)

フォームとモデルの関係

フォームの場合、もっとも重要なのは「送信された値の管理」です。Wicketでは、Webページで扱うデータ類は、モデルクラスを使って管理するのが基本となっています。例えば入力フィールドを使う場合は、入力されたテキストの値を保管するモデルクラスを用意し、これを利用して値を管理するわけです。

このモデルクラスには、ここでは「PropertyModel」というクラスを利用しています。これは名前の通り、プロパティの値を使って値を保持するモデルクラスです。これは、以下のような形で作成されます。

new PropertyModel( インスタンス , プロパティ名 )

このようにしてnewすることで、指定されたインスタンス内にあるプロパティの値を利用したモデルが作成されます。ここでは、フォーム関係の値を管理するための「FormModelBean」というクラスを用意して、そこにあるプロパティを利用することにしました。このクラスには、入力されたテキストとLabelに表示するテキストの２つの値をプロパティとして持たせています。

続いて、コンポーネント関係を見てみましょう。ここでは、「Form」「Label」「TextField」「Button」といったコンポーネントが作成されています。Labelは、前回既に使いましたね。ではその他のものについて説明しましょう。

Form――フォームのコンポーネントです。フォームを利用する場合にはこのコンポーネントを作成しておきます。

TextField――入力フィールドのコンポーネントです。<input type="text">で表示されるコントロールに相当するものです。これは、newする際、IDだけでなく、値を保持するためのモデルを引数に指定します。

Button――フォームに配置されるボタンのコンポーネントです。

これらのうち、TextFieldとButtonは、フォームで使うものですので、作成後、Formインスタンスにaddして組み込みます。そして、FormとLabelは、thisにaddしておきます。

ボタンの送信処理

が、ソースコードをよく見ると、「Button」インスタンスというのを作っていないことに気がつくことでしょう。代りに「FormButton」というものを作っていますね。これは、Buttonを継承して作られた、Buttonのサブクラスです。この部分ですね。

class FormButton extends Button {
  private static final long serialVersionUID = 1L;
  private Page1 page;
  
  public FormButton(Page1 page, String s){
    super(s);
    this.page = page;
  }
  
  public void onSubmit() {
    String result = "あなたは「" + page.getBean().getInputStr() +
        "」と書きました。";
    page.getBean().setMsgStr(result);
  }
}

なぜ、わざわざButtonを継承したクラスを用意しているのか？　それは、Buttonに用意されているonSubmitメソッドをオーバーライドするためです。これは、このボタンをクリックしてフォーム送信されたときに呼び出されるものです。ここで、ボタンクリック時の処理を用意していたのですね。

このonSubmitで行っていることは、Page1のFormModelBeanにあるinputプロパティの値を取り出し、それを加工してmsgプロパティに設定することだけです。msgプロパティの値を変更すると、このプロパティを設定されているモデルによって、Labelのテキストが変更されるのです。モデルというものを利用することで、このように直接的にコンポーネントの値を操作せず、値は値として操作すれば自動的にそれがコンポーネントに反映されるようになっているのですね。