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 呼び出しで意識させないように することが今回の重要な目的の１つである。 続きは、こちら、 jQuery mobile ページ遷移 Wicket ListView （１） の続き、 コンテンツ Panel の ListView を展開するPanel import java.util.List; import org.apache.wicket.AttributeModifier; import org.apache.wicket.Page; import org.apache.wicket.markup.ComponentTag; import org.apache.wicket.markup.MarkupStream; import org.apache.wicket.markup.html.WebMarkupContainer; import org.apache.wicket.markup.html.link.BookmarkablePageLink; import org.apache.wicket.markup.html.list.ListItem; import org.apache.wicket.markup.html.list.ListView; import org.apache.wicket.markup.html.panel.Panel; /** * RolesViewPanel.java */ public class RolesViewPanel extends Panel{ public RolesViewPanel(String id,List<ContentPanel> list ,final Class<? extends Page> titlePage ,final String title){ super(id); final int lastIndex = list.size() - 1; add(new ListView<ContentPanel>("roleview",list){ int ix = -1; @Override protected void populateItem(ListItem<ContentPanel> item){ final String viewId = getId(); final int index = getAutoIndex(); ContentPanel panel = item.getModelObject(); item.add(new Header("header")); item.add(new Footer("footer")); final Integer previndex =index - 1; final Integer nextindex = index + 1; WebMarkupContainer roleheader = new WebMarkupContainer("roleHeader"){ @Override protected void onComponentTag(ComponentTag tag){ tag.put("data-theme",getBarTheme()); } }; roleheader.add(new WebMarkupContainer("hprev"){ @Override protected void onComponentTag(ComponentTag tag){ super.onComponentTag(tag); tag.put("href","#"+viewId+"_"+previndex); tag.put("data-role","button"); tag.put("data-rel","back"); tag.put("data-inline","true"); tag.put("data-icon","arrow-l"); tag.put("data-theme",getButtonTheme()); } @Override public boolean isVisible(){ return previndex < 0 ? false : true; } }); roleheader.add(new BookmarkablePageLink<Void>("title",titlePage){ @Override public void onComponentTagBody(MarkupStream markupStream,ComponentTag openTag){ replaceComponentTagBody(markupStream,openTag,title); } }); roleheader.add(new WebMarkupContainer("hnext"){ @Override protected void onComponentTag(ComponentTag tag){ super.onComponentTag(tag); tag.put("href","#"+viewId+"_"+nextindex); tag.put("data-role","button"); tag.put("data-inline","true"); tag.put("class","ui-btn-right"); tag.put("data-icon","arrow-r"); tag.put("data-theme",getButtonTheme()); } @Override public boolean isVisible(){ return nextindex > lastIndex ? false : true; } }); item.add(roleheader); item.add(panel); WebMarkupContainer rolefooter = new WebMarkupContainer("roleFooter"){ @Override protected void onComponentTag(ComponentTag tag){ tag.put("data-theme",getBarTheme()); } }; rolefooter.add(new WebMarkupContainer("fprev"){ @Override protected void onComponentTag(ComponentTag tag){ super.onComponentTag(tag); tag.put("href","#"+viewId+"_"+previndex); tag.put("data-role","button"); tag.put("data-rel","back"); tag.put("data-inline","true"); tag.put("data-icon","arrow-l"); tag.put("data-theme",getButtonTheme()); } @Override public boolean isVisible(){ return previndex < 0 ? false : true; } }); rolefooter.add(new WebMarkupContainer("fnext"){ @Override protected void onComponentTag(ComponentTag tag){ super.onComponentTag(tag); tag.put("href","#"+viewId+"_"+nextindex); tag.put("data-role","button"); tag.put("data-inline","true"); tag.put("class","ui-btn-right"); tag.put("data-icon","arrow-r"); tag.put("data-theme",getButtonTheme()); } @Override public boolean isVisible(){ return nextindex > lastIndex ? false : true; } }); item.add(rolefooter); item.add(new AttributeModifier("id",getId()+"_"+index)); item.add(new AttributeModifier("data-theme",getPageTheme())); } protected int getAutoIndex(){ this.ix++; return this.ix; } }); setRenderBodyOnly(true); } /** * jQuery Designe Theme * @return "a","b","c","d","e" */ public String getButtonTheme(){ return "b"; } public String getBarTheme(){ return "a"; } public String getPageTheme(){ return "b"; } } これで、呼び出し側のHTML は、、、 <body> <div wicket:id="rolesPanel"></div> </body> と書いておき、 以下のように呼び出す List<ContentPanel> list = new ArrayList<ContentPanel>(); // コンテンツ表示する Panel を list に add する。 add(new RolesViewPanel("rolesPanel",list,IndexPage.class,"タイトル")); |
Wicket >