先日につづいて、Wicket の Panel を表示する場合で、Spin.js を使用する例です。
Wicket の AjaxLazyLoadPanel
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);
}
}
