ボタンの扱い方

フォームの扱い方」のエントリでは,フォームがサブミットされたときの処理の記述方法について紹介した。ただ,多くのWebアプリケーションでは,フォーム内に複数のボタンを配置して,それぞれ違った処理を行わせたいことがあると思う。今回は,そんな場合に使用するボタンコンポーネントについて取り上げる。

まずPOHPから考えよう。複数のボタンを同一フォームに配置するために,普通にサブミットボタンを複数記述すればよい。ただし,どのボタンかを特定できるようにwicket:id属性を付与しておくことがポイントだ。例えばこんな感じ。

<form wicket:id=”employeeForm”>
  ・・・
  <input wicket:id=”previous” type=”submit” value=”前へ” />
  <input wicket:id=”next” type=”submit” value=”次へ” />
</form>

各サブミットボタンに対応するコンポーネントとして,ButtonコンポーネントがWicketでは提供されている。このButtonコンポーネントを,「フォームの扱い方」で紹介したFormコンポーネントに登録する。

public class EmployeeForm extends Form {
  public EmployeeForm() {
    super(“employeeForm”);
    add(new Button(“previous”) {
      protected void onSubmit() {
        // [前へ]ボタン押下処理
      }
    });
    add(new Button(“next”) {
      protected void onSubmit() {
        // [次へ]ボタン押下処理
      }
    });
  }
}

Buttonクラスの匿名クラスにて,onSubmitメソッドをオーバーライドし,それぞれのボタンが押下されたときの処理を記述している。このように,サブミットボタンが押されたときの処理を記述するのは非常に簡単である。

上記のコードを実行すると,POHPは以下のHTMLに変換される。

<form action=”/wicket-test/first?path=0:employeeForm&interface=IFormSubmitListener” wicket:id=”employeeForm” method=”post”>
  ・・・
  <input value=”前へ” type=”submit” wicket:id=”previous” name=”previous”/>
  <input value=”次へ” type=”submit” wicket:id=”next” name=”next”/>
</form>

自動的にname属性が付与されている。もしPOHPの時点でname属性を記述していた場合は,値が自動的に置換される。

ちなみに,「フォームの扱い方」で紹介したFormコンポーネントに対してもonSubmitメソッドをオーバーライドしていた場合は,まずButtonコンポーネントのonSubmitメソッドが呼び出された後に,FormコンポーネントのonSubmitメソッドが呼び出される。片方だけというわけではないので,意識しておく必要がある。

Trackback URL:

コメントを残す

コメントを投稿するにはログインしてください。

Get Adobe Flash playerPlugin by wpburn.com wordpress themes