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 の実装などの続きは次回!!