読者です 読者をやめる 読者になる 読者になる

AjaxLazyLoadPanel を継承する

Wicket には、Wicket-extension のJAR の中にある AjaxLazyLoadPanel を使うと、
 

f:id:posturan:20160313185751g:plain


こようなインジケータで 遅い 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 から指定されている。


後は、好きなようにもっとカスタマイズすれば良いだろう。