Wicketでカスタムページャーの作り方

　WicketでPageableListViewを使ってページングできる表を作ったとき思うのは、デフォルトのページャーが下記のような感じでなんともイマイチということ。それで、自分でカスタマイズするときにいつも忘れてWebを検索する羽目になるので、書いておく。

デフォルトのページャーのなんともイマイチな表現

<< < 1 2 3 4 5 > >>

本当はこんな感じにしたいとか・・・

|<  前　G |o |o |o |o |o |o |o |gle 次 >|

　WicketでページャーはPagingNavigatorクラスを使えばできる。簡単に言うとこのクラスを拡張すればいいだけ。まず、PagingNavigatorクラスを拡張したクラスを作る。

public class MyPager extends PagingNavigator{

  public MyPager(String id, IPageable pager){
    super(id, pager);
  }

}

　つぎにこのクラスと同じディレクトリ内（パッケージ内）に、自分の好きな感じのページャーの表現を入れる。

MyPager.html

<wicket:panel>
  <div>
    <span><a rel="first" href="" wicket:id="first">|＜</a></span>&nbsp;&nbsp;
    <span><a rel="prev" href="" wicket:id="prev">前</a></span>&nbsp;&nbsp;
    G
    <span wicket:id="navigation">
      <a wicket:id="pageLink" href="#">
        <span wicket:id="pageNumber" style="display:none;">5</span>|&nbsp;o
      </a>
    </span>gle!
    <span><a rel="next" href="" wicket:id="next">次</a></span>&nbsp;&nbsp;
    <span><a rel="last" href="" wicket:id="last">＞|</a></span>
  </div>
</wicket:panel>

　あとは、使うだけ。

class HogePage extends WebPage{

  private PageableListView _view = new PageableListView("view", ...){
    // void populateItem(ListItem listitem)を実装しとく
  };

  public HogePage()[
    add(new MyPager("mypager", _view));
    add(_view);
  }

}

HogePage.html

  ... 省略

  <!-- ページャー -->
  <div style="text-align:right" wicket:id="mypager" />
  <table>
    <tr wicket:id="view">
        ...
    </tr>
  </talbe>
  

　ちなみに表の上下にページャーを入れる場合は、別々のwicket:idで作る。

class HogePage extends WebPage{

  private PageableListView _view = new PageableListView( ...){
    // void populateItem(ListItem listitem)を実装しとく
  };

  public HogePage()[
    add(new MyPager("mypager_top", _view));
    add(new MyPager("mypager_bottom", _view));
    add(_view);
  }

}

HogePage.html

  ... 省略

  <!-- ページャー -->
  <div style="text-align:right" wicket:id="mypager_top" />
  <table>
    <tr wicket:id="view">
        ...
    </tr>
  </talbe>
  <!-- ページャー -->
  <div style="text-align:right" wicket:id="mypager_bottom" />