Wicket AJAX イベントでのPanel 切替えは、画像 onclick で切り替える方法も
スッキリしたデザインになって良いと思う。
例えば、以下のような画面、[+] 画像のクリックで画像とともにPanel 切替を
するとしたら、、、
[+] 画像をクリックすると以下のように、Panel を展開させる
このページHTMLの該当箇所は、
<form wicket:id="form">
<table class="filter">
<tr>
<td>検索条件<img wicket:id="image" align="bottom"/></td>
<td><div wicket:id="conditonPanel"></div></td>
</tr>
<tr><td><input type="submit" value="検索"/></td></tr>
</table>
</form>
検索入力などがある Panel のHTML は、
<wicket:panel>
<div class="filter">
<input wicket:id="unLimit" type="checkbox"/> 1,000 円未満
<input wicket:id="likeWord" type="text"/> を含む
<input wicket:id="dateField" type="text" size="8" maxlength="10"/>
</div>
</wicket:panel>
として、空のPanel HTML を次のように用意する
<html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd">
<body>
<wicket:panel></wicket:panel>
</body>
</html>
画像、と対応するPanelクラスを用意して本体のPageクラスでは、
WebMarkupContainer で<img>[+]画像を割り当てて、AjaxEventBehavior で
onclick のイベント処理を書けばよい。
Panel は最初の空表示Panelをセットしておく。
更新対象コンポーネントに setOutputMarkupId(true) の実行を忘れないようにする。
import java.text.SimpleDateFormat;
import java.util.Date;
import jp.nadia.page.panel.PanelSampleMenu;
import org.apache.wicket.Component;
import org.apache.wicket.ajax.AjaxEventBehavior;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.behavior.SimpleAttributeModifier;
import org.apache.wicket.markup.html.WebMarkupContainer;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.link.BookmarkablePageLink;
import org.apache.wicket.markup.html.panel.Panel;
import org.apache.wicket.model.IModel;
import org.apache.wicket.model.Model;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
public class ImgClickPage extends WebPage{
private boolean openImage = false;
Panel panel;
public ImgClickPage(){
final Logger logger = LoggerFactory.getLogger(this.getClass());
this.panel = new EmptyPanel("conditonPanel");
this.panel.setOutputMarkupId(true);
final IModel<Boolean> unlimitModel = new Model<Boolean>(false);
final IModel<String> likeWordModel = new Model<String>();
final IModel<Date> dateModel = new Model<Date>();
final Form<Void> form = new Form<Void>("form"){
@Override
protected void onSubmit(){
logger.debug("■■■ onSubmit!!");
logger.debug("■ unlimit = "+unlimitModel.getObject());
logger.debug("■ likeWord = "+likeWordModel.getObject());
Date dt = dateModel.getObject();
SimpleDateFormat sf = new SimpleDateFormat("yyyy/MM/dd");
logger.debug("■ Date field = "+(dt==null ? "null" : sf.format(dt)));
}
};
form.setOutputMarkupId(true);
WebMarkupContainer image = new WebMarkupContainer("image");
image.add(new SimpleAttributeModifier("src","img/closed.gif"));
image.add(new SimpleAttributeModifier("alt","開く"));
image.add(new SimpleAttributeModifier("title","開く"));
image.add(new AjaxEventBehavior("onclick"){
@Override
protected void onEvent(AjaxRequestTarget target){
Component ct = form.get("image");
ct.add(new SimpleAttributeModifier("src"
,isOpenImage() ? "img/closed.gif" : "img/opened.gif"));
ct.add(new SimpleAttributeModifier("alt"
,isOpenImage() ? "開く" : "閉じる"));
ct.add(new SimpleAttributeModifier("title"
,isOpenImage() ? "開く" : "閉じる"));
setOpenImage(!isOpenImage());
form.remove("conditonPanel");
Panel p = getPanel();
if (isOpenImage()){
p = new ConditonPanel("conditonPanel"
,unlimitModel,likeWordModel,dateModel);
}else{
p = new EmptyPanel("conditonPanel");
}
p.setOutputMarkupId(true);
form.add(p);
target.addComponent(ct);
target.addComponent(form);
}
});
image.setOutputMarkupId(true);
add(image);
form.add(image);
form.add(this.panel);
add(form);
}
protected Panel getPanel(){
return this.panel;
}
public boolean isOpenImage(){
return this.openImage;
}
public void setOpenImage(boolean openImage){
this.openImage = openImage;
}
}
-------------------------------------------------------------
import java.util.Date;
import org.apache.wicket.extensions.markup.html.form.DateTextField;
import org.apache.wicket.extensions.yui.calendar.DatePicker;
import org.apache.wicket.markup.html.form.CheckBox;
import org.apache.wicket.markup.html.form.TextField;
import org.apache.wicket.markup.html.panel.Panel;
import org.apache.wicket.model.IModel;
public class ConditonPanel extends Panel{
public ConditonPanel(String id,IModel<Boolean> unlimitModel
,IModel<String> likeWordModel,IModel<Date> dateModel){
super(id);
add(new CheckBox("unLimit",unlimitModel));
add(new TextField<String>("likeWord",likeWordModel));
DateTextField dateField = new DateTextField("dateField",dateModel,"yyyy/MM/dd");
dateField.add(new DatePicker());
add(dateField);
}
}
-------------------------------------------------------------
import org.apache.wicket.markup.html.panel.Panel;
public class EmptyPanel extends Panel{
public EmptyPanel(String id){
super(id);
}
}