先日投稿の「画像リソース不使用のSpin モーダル」 を利用して、Wicket と組み合わせて使用してみる。
jQuery 2.0.3 と、公開した progressmodal.1.0.js を使います。
今回は、form送信とリンクの例です。Panel の使用例は次回にします。
HTMLソースを以下のように用意します。
今回は、Wicketのフラグメント機能の元、作成してあると仮定して wicket:extend を使ってます。
<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<wicket:extend>
<form wicket:id="form" method="post">
<input wicket:id="submit" type="submit" value="GO"></td>
</form>
<a wicket:id="tolazy" href="#">to LazyPage</a>
<script type="text/javascript">
$(function(){
$('body').prepend('<div id="progress"></div>');
initProgressModal('#progress');
});
</script>
</wicket:extend>
</html>
=============================
scriptタグを埋め込んでるので、HTMLをブラウザが読み込んだ時に、progressmodal.1.0.js が用意するモーダルの初期設定を行います。
WebPage 継承クラスのコンストラクタで以下のようにします。
onComponentTag をオーバーライドして、onclick に、モーダルの表示を実行するようにしているのが
ポイントです。
Form<Void> form = new Form<Void>("form"){
@Override
protected void onSubmit(){
setResponsePage(LazyViewPage.class);
}
};
WebMarkupContainer submit = new WebMarkupContainer("submit"){
@Override
protected void onComponentTag(ComponentTag tag){
super.onComponentTag(tag);
tag.put("onclick", "displayProgressModal('#progress', true);" );
}
};
form.add(submit);
add(form);
add(new BookmarkablePageLink<Void>("tolazy", LazyViewPage.class){
@Override
protected void onComponentTag(ComponentTag tag){
super.onComponentTag(tag);
tag.put("onclick", "displayProgressModal('#progress', true);" );
}
});
また、WebPage 継承クラスでは、renderHead でJavaScript ソースを参照するように定義します。
@Override
public void renderHead(IHeaderResponse response){
super.renderHead(response);
// jQuery を参照
response.render(JavaScriptHeaderItem.forReference(new JavaScriptResourceReference(com.jquery.ReferJquery.class, "jquery-2.0.3.min.js")));
// Spin.js を参照
response.render(JavaScriptHeaderItem.forReference(new JavaScriptResourceReference(ReferJquery.class, "spin.min.js")));
// 用意したプログレス JS ソースを参照
response.render(JavaScriptHeaderItem.forReference(new JavaScriptResourceReference(Referlazy.class, "progressmodal.1.0.js")));
}
