jQuery mobile 画面遷移と Wicket

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);
   }
}