wiQuery Slider を部品化

wiQuyey Slider を Wicket Panel　としてラップしてしまえば使いやすくなる。
ULタグ、LIタグで書くことにした。

import org.apache.wicket.Page;
import org.apache.wicket.ajax.AbstractDefaultAjaxBehavior;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.behavior.HeaderContributor;
import org.apache.wicket.markup.html.CSSPackageResource;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.panel.Panel;
import org.apache.wicket.model.PropertyModel;
import org.odlabs.wiquery.ui.core.DefaultJsScopeUiEvent;
import org.odlabs.wiquery.ui.slider.Slider;
/**
 * Slider and Value
 *
 * Usage:
 * public Slidervalue(String id
 *    ,int maxValue,ValuePosition valeposition,final Page callPage);
 * public Slidervalue(String id
 *    ,int value,int maxValue,ValuePosition valeposition,final Page callPage);
 *
 * value = setting value and display value
 * maxValue = Max value
 * valeposition = Slidervalue.ValuePosition ; LEFT or RIGHT or NONE
 * callPage = this Component use WebPage
 */
public class Slidervalue extends Panel{
   private Integer sliderValue;
   private Label leftLabel;
   private Label rightLabel;
   public Slidervalue(String id,int maxValue,ValuePosition valeposition
   ,final Page callPage){
      super(id);
      setSliderValue(0);
      this.init(maxValue,callPage,valeposition);
   }
   public Slidervalue(String id,int value,int maxValue,ValuePosition valeposition
   ,final Page callPage){
      super(id);
      setSliderValue(value);
      this.init(maxValue,callPage,valeposition);
   }
   public enum ValuePosition{
      LEFT,RIGHT,NONE;
   }
   private void init(int maxValue,final Page callPage
                    ,ValuePosition valeposition){
      this.leftLabel  = new Label("slidervalue_l"
                                 ,new PropertyModel<Slidervalue>(this,"sliderValue"));
      this.leftLabel.setOutputMarkupPlaceholderTag(true);
      final AbstractDefaultAjaxBehavior sliderBehaviorLeft = new AbstractDefaultAjaxBehavior(){
         @Override
         protected void respond(AjaxRequestTarget target){
            setSliderValue(Integer.parseInt(this.getComponent()
.getRequest().getParameter("sliderValue")));
            target.addComponent(getLeftLabel());
         }
      };
      this.rightLabel  = new Label("slidervalue_r"
,new PropertyModel<Slidervalue>(this,"sliderValue"));
      this.rightLabel.setOutputMarkupPlaceholderTag(true);
      final AbstractDefaultAjaxBehavior sliderBehaviorRight = new AbstractDefaultAjaxBehavior(){
         @Override
         protected void respond(AjaxRequestTarget target){
            setSliderValue(Integer.parseInt(this.getComponent()
.getRequest().getParameter("sliderValue")));
            target.addComponent(getRightLabel());
         }
      };
      final Slider slider = new Slider("slider",0,maxValue);
      slider.setStep(1);
      slider.setValue(this.sliderValue);
      if (valeposition==ValuePosition.LEFT){
         this.rightLabel.setVisible(false);
         callPage.add(sliderBehaviorLeft);
         slider.setChangeEvent(new DefaultJsScopeUiEvent(
"wicketAjaxGet('"+sliderBehaviorLeft.getCallbackUrl(true)
              +"&sliderValue='+"+Slider.UI_VALUE + ",null,null,function(){return true;})")
         );
      }else if(valeposition==ValuePosition.RIGHT){
         callPage.add(sliderBehaviorRight);
         this.leftLabel.setVisible(false);
         slider.setChangeEvent(new DefaultJsScopeUiEvent(
"wicketAjaxGet('"+sliderBehaviorRight.getCallbackUrl(true)
               +"&sliderValue='+"+Slider.UI_VALUE + ",null,null,function(){return true;})")
         );
      }else{
         this.rightLabel.setVisible(false);
         this.leftLabel.setVisible(false);
         callPage.add(sliderBehaviorLeft);
         slider.setChangeEvent(new DefaultJsScopeUiEvent(
"wicketAjaxGet('"+sliderBehaviorLeft.getCallbackUrl(true)
              +"&sliderValue='+"+Slider.UI_VALUE + ",null,null,function(){return true;})")
         );
      }
      add(this.leftLabel);
      add(this.rightLabel);
      add(slider);
      add(getCSS());
   }
   public void setValue(AjaxRequestTarget target,int value){
      this.sliderValue = value;
      target.addComponent(this.leftLabel);
   }
   protected HeaderContributor getCSS(){
      return CSSPackageResource.getHeaderContribution(Slidervalue.class,"Slidervalue.css");
   }
   public int getSliderValue(){
      return this.sliderValue;
   }
   protected void setSliderValue(Integer sliderValue){
      this.sliderValue = sliderValue;
   }
   protected Label getLeftLabel(){
      return this.leftLabel;
   }
   public Label getRightLabel(){
      return this.rightLabel;
   }
}
-------------- Slidervalue.html -----------------
<wicket:panel>
<div id="sliderdiv">
<ul>
<li wicket:id="slidervalue_l" class="value"></li>
<li class="bar"><div wicket:id="slider"></div></li>
<li wicket:id="slidervalue_r" class="value"></li>
</ul>
</div>
</wicket:panel>
------------- Slidervalue.css --------------------
@CHARSET "UTF-8";

#sliderdiv{ margin: 0; padding: 0; width: 510px; 
            background-color: #f0f0f0; }
#sliderdiv ul{
border: 1px solid #000000;
list-style-type: none; margin: 0;
padding-top: 10px;
padding-bottom: 25px;
padding-left: 0px;
padding-right: 0px;
}
#sliderdiv li{ float: left; font-size: 11pt; }
#sliderdiv li.value{ text-align: center; width: 60px; }
#sliderdiv li.bar{ padding-left: 20px; padding-right: 20px; width: 400px; }

WebPage クラスで、

new Slidervalue("slider1",21,100,ValuePosition.LEFT,this);
new Slidervalue("slider2",34,100,ValuePosition.RIGHT,this);

のように生成して描画すると