Posted at

wicketのAjax機能を使ってみる

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>