Wicket の tree のアイコンを変える

Wicket の tree のアイコンを変える場合、ツリーのコンポーネント

org.apache.wicket.extensions.markup.html.repeater.tree.NestedTree

に対して、外観テーマを指定するビヘビアである

org.apache.wicket.extensions.markup.html.repeater.tree.theme.WindowsTheme

が、どういうＣＳＳでアイコン画像を指定しているかを掴み、
如何に、同様の Themeビヘビアを用意するかでカスタマイズできる。

org.apache.wicket.extensions.markup.html.repeater.tree.content.Folder

コンポーネントの以下のメソッドをオーバーライドして用意するＣＳＳ、Themeビヘビアに沿って
ＣＳＳ　class名を返すようにする。

// フォルダが CLOSEしている時の CSS class名を返す。
protected String getClosedStyleClass()

// フォルダが OPEN している時の CSS class名を返す。
protected String getOpenStyleClass()

// フォルダではないコンテンツを表現する為の CSS class名を返す。
protected String getOtherStyleClass(T t)

getOtherStyleClass は、コンテンツ T の属性によって、返す class名を分ければ
コンテンツの種類によって異なるアイコンを表示できるはずだ。

前回の投稿、Wicket の tree を学ぶ(３）までに従えば、
以下のような StyleCustomTreeContent を用意すれば、アイコンカスタマイズ用になる。

import org.apache.wicket.Component;
import org.apache.wicket.MarkupContainer;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.markup.html.AjaxLink;
import org.apache.wicket.extensions.markup.html.repeater.tree.AbstractTree;
import org.apache.wicket.extensions.markup.html.repeater.tree.content.Folder;
import org.apache.wicket.model.IDetachable;
import org.apache.wicket.model.IModel;
/**
 * StyleCustomTreeContent.java
 */
public abstract class StyleCustomTreeContent<T> implements IDetachable{

   public abstract void onLeafClick(AjaxRequestTarget target, IModel<T> model);
   public abstract String getClosedFolderClass();
   public abstract String getOpenFolderClass();
   public abstract String getLeafClass(T t);

   @Override
   public void detach(){
   }
   
   public Component newContentComponent(String id, final AbstractTree<T> tree, IModel<T> model){
      return new Folder<T>(id, tree, model){
         @Override
         protected MarkupContainer newLinkComponent(String _id, final IModel<T> _model){
            T t = _model.getObject();
            if (tree.getProvider().hasChildren(t)){
               return super.newLinkComponent(_id, _model);
            }
            return new AjaxLink<T>(_id, _model){
               @Override
               public void onClick(AjaxRequestTarget target){
                  onLeafClick(target, _model);
               }
            };
         }
         @Override
         protected String getClosedStyleClass(){
            return getClosedFolderClass();
         }
         @Override
         protected String getOpenStyleClass(){
            return getOpenFolderClass();
         }
         @Override
         protected String getOtherStyleClass(T t){
            return getLeafClass(t);
         }
      };
   }
}


Wicket は配布している WindowsTheme のＣＳＳのままで書くなら、これの実装は、、、

@Override
public String getClosedFolderClass(){
   return "tree-folder-closed";
}
@Override
public String getOpenFolderClass(){
   return "tree-folder-open";
}
@Override
public String getLeafClass(Foo f){
   return "tree-folder-other";
}

Wicket は配布している
org.apache.wicket.extensions.markup.html.repeater.tree.theme
の下の theme.css の内容を覗くと、、


.tree-theme-windows .tree-folder-closed {
padding-left: 18px;
background-image: url(folder-closed.gif);
background-position: 0px 50%;
background-repeat: no-repeat;
}

.tree-theme-windows .tree-folder-open {
padding-left: 18px;
background-image: url(folder-open.gif);
background-position: 0px 50%;
background-repeat: no-repeat;
}

.tree-theme-windows .tree-folder-other {
padding-left: 18px;
background-image: url(folder-other.gif);
background-position: 0px 50%;
background-repeat: no-repeat;
}

と書かれているので、これを参考に CSSを用意して、

WindowsTheme と同様のビヘビアを用意すれば良い。