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>