さらに前回の続き。CalendarDaysPanel の更新、ページの一部更新を
AJAX で実行してみる
/**
* AJAX 更新カレンダー表示サンプル
*/
public class CalendarAjaxSample extends WebPage{
IModel<Date> targetDateModel;
public CalendarAjaxSample(){
// 対象月の決定
final CalenderHelper helper = new CalenderHelper(getRequestCycle());
this.targetDateModel = new Model<Date>(helper.getTargetDate());
// table tbody
final WebMarkupContainer tbody = new WebMarkupContainer("tbody");
tbody.setOutputMarkupId(true);
// カレンダーPanel
final Panel panel = new CalendarDaysPanel("calendar",new Model<CalendarRequest>(
new CalendarRequestImpl(getTargetDateModel().getObject()
,FooPage.class
,new PageParameters())
));
tbody.add(panel);
add(tbody);
// 年の表示
final Label year = new Label("year",new AbstractReadOnlyModel<String>(){
@Override
public String getObject(){
Calendar c = Calendar.getInstance();
c.setTime(getTargetDateModel().getObject());
return Integer.toString(c.get(Calendar.YEAR));
}
});
year.setOutputMarkupId(true);
add(year);
// 月の表示
final Label month = new Label("month",new AbstractReadOnlyModel<String>(){
@Override
public String getObject(){
Calendar c = Calendar.getInstance();
c.setTime(getTargetDateModel().getObject());
return Integer.toString(c.get(Calendar.MONTH)+1);
}
});
month.setOutputMarkupId(true);
add(month);
//------------ 前月と翌月リンク --------------------------------------
add(new WebMarkupContainer("prev").add(new AjaxEventBehavior("onclick"){
@Override
protected void onEvent(AjaxRequestTarget target){
setTargetDateModelDate(helper.prevDate(getTargetDateModel()));
tbody.remove("calendar");
tbody.add(
new CalendarDaysPanel("calendar",new Model<CalendarRequest>(
new CalendarRequestImpl(getTargetDateModelDate()
,FooPage.class
,new PageParameters())
)
));
target.addComponent(tbody);
target.addComponent(year);
target.addComponent(month);
}
}));
add(new WebMarkupContainer("next").add(new AjaxEventBehavior("onclick"){
@Override
protected void onEvent(AjaxRequestTarget target){
setTargetDateModelDate(helper.nextDate(getTargetDateModel()));
tbody.remove("calendar");
tbody.add(
new CalendarDaysPanel("calendar",new Model<CalendarRequest>(
new CalendarRequestImpl(getTargetDateModelDate()
,FooPage.class
,new PageParameters())
)
));
target.addComponent(tbody);
target.addComponent(year);
target.addComponent(month);
}
}));
}
protected void setTargetDateModelDate(Date dt){
this.targetDateModel.setObject(dt);
}
protected Date getTargetDateModelDate(){
return this.targetDateModel.getObject();
}
protected IModel<Date> getTargetDateModel(){
return this.targetDateModel;
}
}
----------- ＨＴＭＬ ---------------------
<table class="calendar">
<tr><td><a wicket:id="prev" class="calendar">＜</a></td>
<td colspan="5"><span wicket:id="year"></span>年 <span wicket:id="month"></span>月</td>
<td><a wicket:id="next" class="calendar">＞</a></td>
</tr>
<tbody wicket:id="tbody">
<!-- span wicket:id="calendar" が 置き換わる -->
<span wicket:id="calendar"></span>
</tbody>
</table>
