Wicket 画像クリックでPanel切替

Wicket AJAX イベントでのPanel 切替えは、画像 onclick で切り替える方法も
スッキリしたデザインになって良いと思う。

例えば、以下のような画面、[+] 画像のクリックで画像とともにPanel 切替を
するとしたら、、、

f:id:posturan:20160314234406j:plain


[+] 画像をクリックすると以下のように、Panel を展開させる

f:id:posturan:20160314234414j:plain



このページ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);
   }
}