jQuery mobile ページ遷移 Wicket ListView (1) の続き、
コンテンツ 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,"タイトル"));