jQuery mobile ページ遷移 Wicket ListView (2)

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,"タイトル"));