Wicket ページングでのチェックボックス(1)

Wicket PagingNavigator+DataView と form のcheckbox を組み合わせる。
さらに、選択されたものをモーダルウィンドウで表示する。
(長くなるので2回に分けて投稿する)

----------- HTML 抜粋-----------
<div wicket:id="modal"></div>
<form wicket:id="myform">
<span wicket:id="paging1"></span><span wicket:id="records"></span> 件
<table cellspacing="0" class="view">
<thead><tr><th>Paper</th><th>WIDTH</th><th>選択</th></tr></thead>
<tbody>
    <tr wicket:id="view">
        <td wicket:id="name">[name]</td>
        <td wicket:id="width" align="right">[width]</td>
        <td><input wicket:id="flg" type="checkbox"/></td>
    </tr>
</tbody>
</table>

<div wicket:id="paging2"></div>
<br/>
<button wicket:id="pickup">送信</button>
</form>

WebPage クラスで Dataview生成は、IDataProvider 実装を使うことで
大量のデータ件数でもページングが定める範囲の件数をデータ取得する
ようにする。

--------- WebPage クラス ----------
public class GridPickModalPage extends WebPage{
   // IDataProvider 実装は、Google guice でインジェクト!
   @Inject private IDataProvider<Paper> provider;
   public GridPickModalPage(){
      final Logger logger = LoggerFactory.getLogger(this.getClass());
      // AbstractCheckBoxModel 実装のインナークラスを生成する時に、
      // 渡すデータSet=checkbox 選択したリストを final で初期化して
      // モーダルウィンドウ表示実行で渡す

      final Set<Paper> selectionValues = new HashSet<Paper>();

      final ModalWindow window = new ModalWindow("modal");
      // モーダルウィンドウの設定、setTitle setWindowClosedCallback 等を行う。
      /** ModalWindow が CLOSE する時に実行されるコールバックを定義。不要ならコメント*/

      window.setWindowClosedCallback(new ModalWindow.WindowClosedCallback(){
         public void onClose(AjaxRequestTarget target){
            //
         }
      });


      final Form<Void> form = new Form<Void>("myform");
      // 4件ずつ表示させるデータビュー
      DataView<Paper> view = new DataView<Paper>("view",this.provider,4){
         @Override
         protected void populateItem(final Item<Paper> item){
            Paper paper = item.getModelObject();
            item.add(new Label("name",paper.getName()));
            item.add(new Label("width",Integer.toString(paper.getWidth())));
            // <tr> class属性更新 で行毎に背景色を替える
            item.add(new AttributeModifier("class",true
              ,new AbstractReadOnlyModel<String>(){
                     @Override
                     public String getObject(){
                        return (item.getIndex() % 2 == 1) ? "even" : "odd";
                     }
                  }
               )
            );
            // チェックボックス
            item.add(new CheckBox("flg",new SelectItemUsingCheckboxModel(
                                        paper,selectionValues)));
         }
      };
      form.add(new PagingNavigator("paging1",view){
         @Override
         protected void onAfterRender(){
            super.onAfterRender();
            // チェックボックス選択を強制的に外す
            selectionValues.clear();
         }
      });
      form.add(new PagingNavigator("paging2",view){
         @Override
         protected void onAfterRender(){
            super.onAfterRender();
            selectionValues.clear();
         }
      });
      form.add(new Label("records",Integer.toString(this.provider.size())));
      AjaxButton submitButton = new  AjaxButton("pickup"){
         @Override
         protected void onSubmit(AjaxRequestTarget target,Form<?> form2){
            logger.debug("■ onSubmit !!");
            logger.debug("■ selectionValues size = "+selectionValues.size());
            for(Paper p : selectionValues){
               logger.debug("■ "+p.getName()+"  "+p.getWidth()+"  ");
            }
            // モーダルウィンドウの表示
            window.setContent(new GridPicker(window.getContentId(),selectionValues));
            window.show(target);
         }
      };
      add(window);
      form.add(submitButton);
      // CheckBox は、DataView の populateItem で add されてるので
      // form に view add だけでよい!

      form.add(view);
      add(form);
      add(new BookmarkablePageLink<Void>("gohome",HomePage.class));
   }
   class SelectItemUsingCheckboxModel extends AbstractCheckBoxModel{
      private Paper paper;
      private Set<Paper> selection;

      public SelectItemUsingCheckboxModel(Paper paper,Set<Paper> selection){
         this.paper = paper;
         this.selection = selection;
      }
      @Override
      public boolean isSelected() {
         return this.selection.contains(this.paper);
      }
      @Override
      public void select() {
         this.selection.add(this.paper);
      }
      @Override
      public void unselect() {
         this.selection.remove(this.paper);
      }
   }

}

--------------------------------------------------------
IDataProvider の実装などの続きは次回!!