现在我们来学习一下自定义的AjaxListener监听程序。最终效果如下所示。
来看一下代码。
public class HomePage extends WebPage {
public HomePage() {
final Form form = new Form("form");
form.add(new TextField("fakeField1", Model.of("")));
form.add(new TextField("fakeField2", Model.of("")));
form.add(new AjaxButton("ajaxButton"){
@Override
protected void onSubmit(AjaxRequestTarget target) {
try {
Thread.sleep(3000);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
@Override
protected void updateAjaxAttributes(AjaxRequestAttributes attributes) {
super.updateAjaxAttributes(attributes);
attributes.getAjaxCallListeners().add(new DisableComponentListener(form));
}
});
add(form);
}
}
对应的html页面
<html lang="en" xmlns:wicket="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<h2>
Press 'submit' to disable the form for (at least)
<br />
three seconds.
</h2>
<form wicket:id="form"
style="border: 1px solid; padding:5px">
Name:
<input type="text" wicket:id="fakeField1" />
<br />
Surname:
<input type="text" wicket:id="fakeField2" />
<br />
<input type="submit" value="submit"
wicket:id="ajaxButton" />
</form>
</div>
</body>
</html>
监听程序
public class DisableComponentListener extends AjaxCallListener {
private static PackageResourceReference customScriptReference =
new PackageResourceReference(DisableComponentListener.class, "demo/moveHiderAndIndicator.js");
private static PackageResourceReference jqueryUiPositionRef =
new PackageResourceReference(DisableComponentListener.class, "demo/jquery-ui-position.min.js");
private static PackageResourceReference indicatorReference =
new PackageResourceReference(DisableComponentListener.class, "demo/ajax-loader.gif");
private Component targetComponent;
public DisableComponentListener(Component targetComponent){
this.targetComponent = targetComponent;
}
@Override
public CharSequence getBeforeHandler(Component component) {
CharSequence indicatorUrl = getIndicatorUrl(component);
return ";DisableComponentListener.disableElement('" + targetComponent.getMarkupId() + "'," +
"'" + indicatorUrl + "');";
}
@Override
public CharSequence getCompleteHandler(Component component) {
return ";DisableComponentListener.hideComponent('" + targetComponent.getMarkupId() + "');";
}
protected CharSequence getIndicatorUrl(Component component) {
return component.urlFor(indicatorReference, null);
}
@Override
public void renderHead(Component component, IHeaderResponse response) {
ResourceReference jqueryReference =
Application.get().getJavaScriptLibrarySettings().getJQueryReference();
response.render(JavaScriptHeaderItem.forReference(jqueryReference));
response.render(JavaScriptHeaderItem.forReference(jqueryUiPositionRef));
response.render(JavaScriptHeaderItem.forReference(customScriptReference));
}
}