Wicketで使う Spin.js のサンプル(2)

先日につづいて、Wicket の Panel を表示する場合で、Spin.js を使用する例です。

WicketAjaxLazyLoadPanel
org.apache.wicket.extensions.ajax.markup.html.AjaxLazyLoadPanel
を使用して onComponentLoadedで表示したモーダルを消すとういう工夫をします。


SamplePage.html を以下のように用意しますリンクで表示の遅い Panel を表示します。
前回同様、script タグでモーダルプログレスの初期設定を行います。
============================== SamplePage.html ================
<wicket:extend>
<div>
   <a href="#" wicket:id="lazypanel">view Panel</a>
</div>

<div wicket:id="container">
   <div wicket:id="panel"></div>
</div>

<script type="text/javascript">
$(function(){
   $('body').prepend('<div id="progress"></div>');
   initProgressModal('#progress');
});
</script>
</wicket:extend>
=================================================================
この SamplePage のクラスを以下のように用意します。

import org.apache.wicket.Component;
import org.apache.wicket.ajax.AjaxEventBehavior;
import org.apache.wicket.ajax.AjaxRequestTarget;
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.WebMarkupContainer;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.request.resource.JavaScriptResourceReference;
import org.sample.page.BasePage;
import org.sample.page.lazy.Referlazy;
import org.sample.jquery.ReferJquery;
/**
 * PanelLazyPage
 */

public class SamplePage extends BasePage{

   public SamplePage(){

      final WebMarkupContainer container = new WebMarkupContainer("container");
      container.setOutputMarkupId(true);
      container.add(new EmptyPanel("panel"));
      add(container);

      WebMarkupContainer clickLink = new WebMarkupContainer("lazypanel");
      clickLink.setOutputMarkupId(true);
      clickLink.add(new AjaxEventBehavior("onclick"){
         @Override
         protected void onEvent(AjaxRequestTarget target){
            // Loading... を表示する
            target.prependJavaScript("displayProgressModal('#progress', true);");
            container.remove("panel");
            container.add(new AjaxLazyLoadPanel("panel"){
               @Override
               public Component getLazyLoadComponent(String id){
                  return new LazyPanel(id);
               }

               @Override
               protected void onComponentLoaded(Component component,
AjaxRequestTarget target){
                  // Loading... を非表示にする
                  target.appendJavaScript("displayProgressModal('#progress', false);");
               }
               @Override
               public Component getLoadingComponent(String markupId){
                  return new Label(markupId, "");
               }

            });
            target.add(container);
         }
      });
      add(clickLink);
   }
   @Override
   public void renderHead(IHeaderResponse response){
      super.renderHead(response);
      response.render(JavaScriptHeaderItem.forReference(new JavaScriptResourceReference(ReferJquery.class, "spin.min.js")));
      response.render(JavaScriptHeaderItem.forReference(new JavaScriptResourceReference(Referlazy.class, "progressmodal.1.0.js")));
   }

}

=============================
BasePage は、以下の構成
============================== BasePage.html ==============================
<!DOCTYPE html>
<html xmlns:wicket="">http://wicket.apache.org">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
<div align="center" class="titlebar"><h2><a wicket:id="top" class="navi">Sample  Page</a></h2></div>
<wicket:child></wicket:child>
</body>
</html>
============================== BasePage.java ==============================
package org.sample.page;
import org.apache.wicket.markup.head.CssHeaderItem;
import org.apache.wicket.markup.head.IHeaderResponse;
import org.apache.wicket.markup.head.JavaScriptHeaderItem;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.link.BookmarkablePageLink;
import org.apache.wicket.request.resource.CssResourceReference;
import org.apache.wicket.request.resource.JavaScriptResourceReference;
import org.sample.page.home.HomePage;
import com.jquery.css.ReferJqueryCss;
/**
 * BasePage
 */

public class BasePage extends WebPage{
   public BasePage(){
      add(new BookmarkablePageLink<Void>("top", HomePage.class));
   }
   @Override
   public void renderHead(IHeaderResponse response){
      super.renderHead(response);
      response.render(CssHeaderItem.forReference(new CssResourceReference(ReferJqueryCss.class, "jquery-ui-1.10.3.custom.min.css")));
      response.render(CssHeaderItem.forReference(new CssResourceReference(BasePage.class, "sample.css")));
      
      response.render(JavaScriptHeaderItem.forReference(new JavaScriptResourceReference(com.jquery.ReferJquery.class, "jquery-2.0.3.min.js")));
      response.render(JavaScriptHeaderItem.forReference(new JavaScriptResourceReference(com.jquery.ReferJquery.class, "jquery.json-2.4.min.js")));
   }
}

初期表示は、SamplePage で、EmptyPanel を最初のPanelとして表示するので、以下のように用意します。

<!DOCTYPE html>
<html xmlns:wicket="">http://wicket.apache.org">
<body>
<wicket:panel></wicket:panel>
</body>
</html>

import org.apache.wicket.markup.html.panel.Panel;
/**
 * 初期表示の Panel
 */

public class EmptyPanel extends Panel{
   public EmptyPanel(String id){
      super(id);
   }
}