Wicketで作成されているWebアプリケーションで、画面の動的更新がしたいとなったとき
jQuery使おうとしたけど、WicketにAjax機能があることを知ったので試してみた。

今回は、テキストエリアのフォーカスが外れた時に入力値をチェックするAjax処理を実装。

実装例

Java

public class BasePage extends WebPage {

  public maintProcedureCellOpenCloseForvCenterUpdate() throws Exception {
  
    // 入力項目定義
    Form<Void> form = new Form<Void>("form");
    add(form);

    final TextField<String> text = new TextField<String>("text", new PropertyModel<String>(this, "text"));
    form.add(text);

    // ajaxで表示を変更するlabel定義
    final MultiLineLabel label = new MultiLineLabel("label", "label");
    label.setOutputMarkupId(true);
    add(label);

    text.add(new AjaxFormComponentUpdatingBehavior("onblur") {

        @Override
        protected void onUpdate(AjaxRequestTarget target) {

        // TODO: 任意のバリデーション処理実装
        
        label.setDefaultModelObject("バリデーション結果を設定");
        
        // 画面を更新
        target.addComponent(label);
        }
    });
  }
}

動的に更新する要素に対して、 setOutputMarkupId(true) を設定する必要がある
設定しない場合、画面更新時にエラーになる

HTML

<html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd" >
<head>
    <meta http-equiv="Content-Type" content="text/html charset=UTF-8">
</head>
<body>
    <wicket:extend>

    <pre wicket:id="label">内容</pre>
    <form wicket:id="form" method="post">
      <input type="text" wicket:id="text" />
    </form>

    </wicket:extend>
</body>
</html>