jQuery mobile ＋ Wicket で、data-role ページ遷移を表現するのに、ListView で、Panel を
展開させたら jQuery mobile ＋Wicket のパターンとして使い回せると思った。
（２回に分けて投稿）
<wicket:panel>
<div wicket:id="roleview" data-role="page" data-theme="b">
<div wicket:id="header"></div>
<div wicket:id="roleHeader" data-role="header" data-theme="a">
<a wicket:id="hprev" href="#" data-role="button" data-rel="back"
data-inline="true" data-icon="arrow-l" data-theme="b">Prev</a>
<h2><a wicket:id="title" rel="external"
style="color: #FFFFFF; text-decoration:none;" href="#">Title</a>
</h2>
<a wicket:id="hnext" href="#" data-role="button"
data-inline="true" class="ui-btn-right" data-icon="arrow-r" data-theme="b">Next</a>
</div>
<div wicket:id="content" data-role="content"></div>
<div wicket:id="roleFooter" data-role="header" data-theme="a">
<a wicket:id="fprev" href="#" data-role="button" data-rel="back"
data-inline="true" data-icon="arrow-l" data-theme="b">Prev</a>
<h2></h2>
<a wicket:id="fnext" href="#" data-role="button"
data-inline="true" class="ui-btn-right" data-icon="arrow-r" data-theme="b">Next</a>
</div>
<div wicket:id="footer"></div>
</div>
</wicket:panel>
この HTML に対する Panel クラスの説明の前に wicket:id="roleview" が、
展開する ListView に渡すコンテンツ表示用のPanel を紹介する
内容は簡単で、Panel を継承して、data-role 属性値、content を設定するだけ
import org.apache.wicket.AttributeModifier;
import org.apache.wicket.markup.html.panel.Panel;
import org.apache.wicket.model.IModel;
/**
* ContentPanel.java
*/
public class ContentPanel extends Panel{
public ContentPanel(String id){
super(id);
add(new AttributeModifier("data-role","content"));
}
public ContentPanel(String id,IModel<?> model){
super(id,model);
add(new AttributeModifier("data-role","content"));
}
}
表示するページのコレクション、List<ContentPanel> を渡して、上のHTML で
ListView として展開する。その時のページ遷移リンク先の制御、
div の id 属性値と、href 属性値の指定を、ListView 呼び出しで意識させないように
することが今回の重要な目的の１つである。
続きは、こちら、
