Wicket には、Wicket-extension のJAR の中にある AjaxLazyLoadPanel を使うと、
こようなインジケータで 遅い Panelコンテンツの表示の前に、Panel表示してくれるのが存在するのだが、Panel のHTMLというのはそのまま使うと左上に小さくこのように表示するのであまり目立たない。
このGIF画像は、
org/apache/wicket/ajax
に存在する。
AjaxLazyLoadPanel を継承してカスタマイズする。
import org.apache.wicket.Component;
import org.apache.wicket.extensions.ajax.markup.html.AjaxLazyLoadPanel;
import org.apache.wicket.markup.head.IHeaderResponse;
import org.apache.wicket.markup.head.JavaScriptHeaderItem;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.model.IModel;
import org.apache.wicket.request.resource.JavaScriptResourceReference;
/**
* LazyLoadPanel.
*/
public abstract class LazyLoadPanel extends AjaxLazyLoadPanel{
/**
* Constructor.
* @param id componemt ID
*/
public LazyLoadPanel(final String id){
this(id, null);
}
/**
* Constructor.
* @param id componemt ID
* @param model Wicket Model
*/
public LazyLoadPanel(final String id, final IModel<?> model){
super(id, model);
}
/**
* @param markupId The components markupid.
* @return The component to show while the real component is being created.
*/
@Override
public Component getLoadingComponent(final String markupId){
// プログレスメッセージを出すコンテンツを用意する
StringBuilder sb = new StringBuilder();
sb.append("<script type=\"text/javascript\">");
sb.append("$(function(){ ");
sb.append(" initProgressModal('#progress', { message: \"" + getMessage() + "\"});");
sb.append(" displayProgressModal('#progress', true);");
sb.append("});");
sb.append("</script>");
return new Label(markupId, sb.toString()).setEscapeModelStrings(false);
}
/**
* インジケータメッセージ.
* Loaddin... 以外のメッセージ表示する場合は、オーバーライドする。
* @return メッセージ
*/
public String getMessage(){
return "Loading...";
}
@Override
public void renderHead(IHeaderResponse response) {
super.renderHead(response);
response.render(JavaScriptHeaderItem.forReference(new JavaScriptResourceReference(LazyLoadPanel.class, "spin.min.js")));
response.render(JavaScriptHeaderItem.forReference(new JavaScriptResourceReference(LazyLoadPanel.class, "progressmodal.2.0.js")));
}
}
任意のメッセージを出す場合は、getMessage をオーバーライドする。
LazyLoadPanel.html は、以下のように用意する。
<?xml version="1.0" encoding="UTF-8" ?>
<wicket:panel xmlns:wicket="http://wicket.apache.org"><div id="progress"></div><div wicket:id="content"></div></wicket:panel>
この中の wicket:id="content" は、継承元のAjaxLazyLoadPanel から指定されている。
後は、好きなようにもっとカスタマイズすれば良いだろう。