jQuery mobile で構成するスマホ用サイトを、Wicket で作ることを考えた。
とりあえず、Wicket のバージョンは、1.4 で。。。
まずは、jQuery mobile のページ構成&遷移で大きな役割である <div data-role="page"> を
Wicket の Panel にすることにして、スマホ端末側の出力される HTML が1つでも、
画面ページ単位で動的な出力を制御することを目的にした。
jQuery mobile が同一HTML内での画面遷移が、タグの id属性を使うので
Wicket を使用する際に、コンポーネントの getMarkupId をオーバーライドして
getId() の結果を返すようにして、setOutputMarkupId(true) を実行することで、
wicket:id と id を同一にすることがポイントである。
先頭画面から呼ばれる各ページとして以下、Panel 継承クラスを用意する。
import org.apache.wicket.markup.ComponentTag;
import org.apache.wicket.markup.html.panel.Panel;
import org.apache.wicket.model.IModel;
/**
* PagePanel
*/
public class PagePanel extends Panel{
public PagePanel(String id){
super(id);
setOutputMarkupId(true);
}
public PagePanel(String id,IModel<?> model){
super(id,model);
setOutputMarkupId(true);
}
public PagePanel(String id,PagePanel...childs){
super(id);
setOutputMarkupId(true);
for(PagePanel p : childs){
add(new RoleLink(p.getId(),p));
}
}
public PagePanel(String id,IModel<?> model,PagePanel...childs){
super(id,model);
setOutputMarkupId(true);
for(PagePanel p : childs){
add(new RoleLink(p.getId(),p));
}
}
@Override
protected void onComponentTag(ComponentTag tag){
super.onComponentTag(tag);
tag.put("id",getId());
tag.put("data-role","page");
tag.put("data-add-back-btn","true");
tag.put("data-theme",getTheme());
}
/**
* jQuery Designe Theme
* @return "a","b","c","d","e"
*/
public String getTheme(){
return "b";
}
@Override
public String getMarkupId(){
return getId();
}
}
ページ内リンクのために以下を用意する
import org.apache.wicket.markup.ComponentTag;
import org.apache.wicket.markup.html.WebMarkupContainer;
/**
* RoleLink
*/
public class RoleLink extends WebMarkupContainer{
private PagePanel pagePanel;
public RoleLink(String id,PagePanel pagePanel){
super(id);
this.pagePanel = pagePanel;
}
@Override
protected void onComponentTag(ComponentTag tag){
tag.put("href","#"+this.pagePanel.getId());
tag.put("data-transition",getTransition());
}
//data-transition
public String getTransition(){
return "slide";
}
}
先頭の画面以外はこの Panelでページを構成する。
IndexPage.java = Wicket Page class
InfoPagePanel.java = 上記 PagePanel を継承
ItemPagePanel.java = 上記 PagePanel を継承
ItemDetailPagePanel.java = ItemPagePanel画面の子画面、PagePanel を継承
-------------- Index.html -----------------
<!DOCTYPE html>
<html xmlns:wicket="">http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd">
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>test</title>
<link rel="stylesheet" href="jquery/jquery.mobile-1.0b1.min.css"/>
<script src="jquery/jquery-1.6.2.min.js"></script>
<script src="jquery/jquery.mobile-1.0b1.min.js"></script>
<script type="text/javascript" src="js/useragent.js"></script>
</head>
<body>
<div data-role="page" data-theme="b">
<div wicket:id="header"></div>
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider">Menu</li>
<li>
<a wicket:id="linkInfo">お知らせ</a>
</li>
<li>
<a wicket:id="linkItem">商品</a>
</li>
</ul>
</div>
<div wicket:id="footer"></div>
</div>
<div wicket:id="info"></div>
<div wicket:id="item"></div>
<div wicket:id="itemDetail"></div>
</body>
</html>
------------- Header.html -----------------
<wicket:panel>
<h1>Items</h1>
</wicket:panel>
------------- Footer.html -----------------
<wicket:panel>
<h4>© 2011 uran</h4>
</wicket:panel>
-------------- InfoPagePanel.html -----------------
<wicket:panel>
<div wicket:id="header"></div>
<div data-role="content">
<h3>お知らせ</h3>
<p>サンプル
AAAAAAAAAA
<br/>BBBBBBBB
<br/>CCCCCCCC
</p>
</div>
<div wicket:id="footer"></div>
</wicket:panel>
-------------- ItemPagePanel.html -----------------
<wicket:panel>
<div wicket:id="header"></div>
<div data-role="content">
<h3>商品</h3>
<p>aaaaaaaa
<br/>bbbbbbbb
<br/>cccccccc
</p>
<br/><br/>
<div>
<a wicket:id="itemDetail" data-role="button" data-theme="c">商品詳細 について</a>
</div>
</div>
<div wicket:id="footer"></div>
</wicket:panel>
-------------- ItemDetailPagePanel.html -----------------
<wicket:panel>
<div wicket:id="header"></div>
<div data-role="content">
<h3>商品の詳細</h3>
<p>xxxxxxxxxxxxxxxxxxxx
<br/>xxxxxxxxxxxxxxxxxxxx
</p>
</div>
<div wicket:id="footer"></div>
</wicket:panel>
これに対してWicket の Javaソースは、、、
--------------------
import org.apache.wicket.behavior.SimpleAttributeModifier;
import org.apache.wicket.markup.html.panel.Panel;
/**
* Header
*/
public class Header extends Panel{
public Header(String id){
super(id);
add(new SimpleAttributeModifier("data-role","header"));
}
}
--------------------
import org.apache.wicket.behavior.SimpleAttributeModifier;
import org.apache.wicket.markup.html.panel.Panel;
/**
* Footer
*/
public class Footer extends Panel{
public Footer(String id){
super(id);
add(new SimpleAttributeModifier("data-role","footer"));
}
}
--------------------
/**
* InfoPagePanel
*/
public class InfoPagePanel extends PagePanel{
public InfoPagePanel(String id){
super(id);
add(new Header("header"));
add(new Footer("footer"));
}
}
-----------------
import org.apache.wicket.behavior.SimpleAttributeModifier;
import org.apache.wicket.markup.html.WebMarkupContainer;
/**
* ItemPagePanel
*/
public class ItemPagePanel extends PagePanel{
public ItemPagePanel(String id,String detailId){
super(id);
add(new Header("header"));
add(new WebMarkupContainer(detailId).add(new SimpleAttributeModifier("href","#"+detailId)));
add(new Footer("footer"));
}
}
-----------------
/**
* ItemDetailPagePanel
*/
public class ItemDetailPagePanel extends PagePanel{
public ItemDetailPagePanel(String id){
super(id);
add(new Header("header"));
add(new Footer("footer"));
}
}
--------------------
import org.apache.wicket.behavior.SimpleAttributeModifier;
import org.apache.wicket.markup.html.WebMarkupContainer;
import org.apache.wicket.markup.html.WebPage;
/**
* IndexPage
*/
public class IndexPage extends WebPage{
public IndexPage(){
InfoPagePanel infoPage = new InfoPagePanel("info");
ItemDetailPagePanel detailPage = new ItemDetailPagePanel("itemDetail");
ItemPagePanel itemPage = new ItemPagePanel("item",detailPage);
add(new Header("header"));
add(new RoleLink("linkInfo",infoPage));
add(new RoleLink("linkItem",itemPage));
add(new Footer("footer"));
add(infoPage);
add(itemPage);
add(detailPage);
}
}