ボタンの扱い方

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

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

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

各サブミットボタンに対応するコンポーネントとして, 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に変換される。

  ・・・    name=”previous”/>   

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

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

このエントリーをはてなブックマークに追加

関連記事

スマートスピーカーはもう終わったデバイス?

QMK FirmwareとRaspberry Pi PicoでSPLIT_USB_DETECTを使わない方法

40%キーボードに慣れるためにやったこと

Lunakey PicoでQMK Firmwareを動かしてみました

Googleアシスタント向け会話型アクションが1年後にシャットダウンされます