wiQuery の Slider

CSS、AJAXで簡単に導入できるスライドバーを探していた、気に入るものは
なかなかなくて、結局たどりついたのが、jQuery をラップしてる wiQuery でした。

http://code.google.com/p/wiquery/

ハンドル移動イベントをサーバで受け取って値を取得してAJAX で部分再描画できるのが
気に入りました。

http://wiquery-examples.appspot.com/ の Slider を参考にすると

Color RGB を選択表示するのにこんなものが書ける。
Panel として作ることで、再利用可能とする。
AbstractDefaultAjaxBehavior の getCallbackUrl を実行するために、
自Pageインスタンスを渡すコンストラクタになる


import org.apache.wicket.Session;
import org.apache.wicket.ajax.AbstractDefaultAjaxBehavior;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.markup.html.form.AjaxButton;
import org.apache.wicket.behavior.HeaderContributor;
import org.apache.wicket.behavior.SimpleAttributeModifier;
import org.apache.wicket.markup.html.CSSPackageResource;
import org.apache.wicket.markup.html.WebMarkupContainer;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.form.TextField;
import org.apache.wicket.markup.html.panel.FeedbackPanel;
import org.apache.wicket.model.Model;
import org.apache.wicket.model.PropertyModel;
import org.apache.wicket.validation.validator.PatternValidator;
import org.odlabs.wiquery.ui.core.DefaultJsScopeUiEvent;
import org.odlabs.wiquery.ui.slider.Slider;

/**
 * RGB color Slider
 *  呼び出し元のWebPage が、コンストラクタに自Page インスタンスを渡すようにする
 *     add(new RGBColorSlider("rgbslider",
this);
 */

public class RGBColorSlider extends Panel{
   private Integer redInteger;
   private Integer greenInteger;
   private Integer blueInteger;
   private String rgbvalue;
   public RGBColorSlider(String id,Page callPage){
      super(id);
      this.init(callPage,"FFFFFF");
   }
   public RGBColorSlider(String id,Page callPage,String initRGBvalue){
      super(id);
      this.init(callPage,initRGBvalue.toUpperCase());
   }
   private void init(Page callPage,String initRGBvalue){
      final WebMarkupContainer color = new WebMarkupContainer("color");
      color.setOutputMarkupId(true);
      setRgbvalue(initRGBvalue);
      color.add(new SimpleAttributeModifier("style","background-color: #"+initRGBvalue+";\""));
      this.redInteger = Integer.parseInt(initRGBvalue.substring(0,2),16);
      this.greenInteger = Integer.parseInt(initRGBvalue.substring(2,4),16);
      this.blueInteger = Integer.parseInt(initRGBvalue.substring(4,6),16);
      final Label rgbValue = new Label("rgbValue",new PropertyModel(this,"rgbvalue"));
      rgbValue.setOutputMarkupId(true);
      final Label redValue = new Label("redValue",new PropertyModel(this,"redInteger"));
      redValue.setOutputMarkupId(true);
      final Label greenValue = new Label("greenValue",new PropertyModel(this,"greenInteger"));
      greenValue.setOutputMarkupId(true);
      final Label blueValue = new Label("blueValue",new PropertyModel(this,"blueInteger"));
      blueValue.setOutputMarkupId(true);

      AbstractDefaultAjaxBehavior redBehavior = new AbstractDefaultAjaxBehavior(){
         @Override
         protected void respond(AjaxRequestTarget target){

            Integer iv = Integer.parseInt(this.getComponent().getRequest()
                         .getParameter("redInteger"));
            setRedInteger(iv);
            String hex = iv < 16 ? "0"+Integer.toHexString(iv).toUpperCase()
                         : Integer.toHexString(iv).toUpperCase();
            setRgbvalue(hex+getRgbvalue().substring(2,6));
            color.add(new SimpleAttributeModifier("style","background-color: #"+getRgbvalue()+";\""));
            target.addComponent(redValue);
            target.addComponent(rgbValue);
            target.addComponent(color);

         }
      };

      callPage.add(redBehavior);
      final Slider redSlider = new Slider("redSlider",0,255);
      redSlider.setStep(1);
      redSlider.setValue(this.redInteger);
      redSlider.setChangeEvent(new DefaultJsScopeUiEvent(
           "wicketAjaxGet('"+redBehavior.getCallbackUrl(true)
            +"&redInteger='+"+Slider.UI_VALUE + ",null,null,function(){return true;})")
      );
      redSlider.setOutputMarkupId(true);
      //----------------------------------------------------
      //  green  blue も同様にビヘビアと Slider を生成
      //----------------------------------------------------

      add(color);
      add(rgbValue);
      add(redValue);
      add(greenValue);
      add(blueValue);
      add(redSlider);
      add(greenSlider);
      add(blueSlider);
      rgbValue.add(getCSS());

      Form<Void> form = new Form<Void>("colorform");
      final FeedbackPanel feedback = new FeedbackPanel("feedback");
      feedback.setOutputMarkupId(true);
      form.add(feedback);
      final TextField<String  inputhex = new TextField<String>("inputhex",new Model<String>());
      inputhex.add(new PatternValidator("([0-9]|[a-f]|[A-F]){6}"));
      form.add(inputhex);
      form.add(new AjaxButton("submit"){
         @Override
         protected void onSubmit(AjaxRequestTarget target,Form<?  f){
            Session.get().cleanupFeedbackMessages();
            target.addComponent(feedback);
            String colorhex = inputhex.getModelObject();
            if (colorhex==null) return;
            colorhex = colorhex.toUpperCase();
            setRgbvalue(colorhex);
            color.add(new SimpleAttributeModifier("style","background-color: #"+getRgbvalue()+";\""));
            target.addComponent(rgbValue);
            target.addComponent(color);
            int rv = Integer.parseInt(colorhex.substring(0,2),16);
            redSlider.setValue(rv);
            setRedInteger(rv);
            int gv = Integer.parseInt(colorhex.substring(2,4),16);
            greenSlider.setValue(gv);
            setGreenInteger(gv);
            int bv = Integer.parseInt(colorhex.substring(4,6),16);
            blueSlider.setValue(bv);
            setBlueInteger(bv);
            target.addComponent(redValue);
            target.addComponent(greenValue);
            target.addComponent(blueValue);
            target.addComponent(redSlider);
            target.addComponent(greenSlider);
            target.addComponent(blueSlider);

         }
         @Override
         protected void onError(final AjaxRequestTarget target, final Form ff){
            target.addComponent(feedback);
         }
      });
      add(form);
   }
   protected Integer getRedInteger(){
      return this.redInteger;
   }
   protected void setRedInteger(Integer redInteger){
      this.redInteger = redInteger;
   }
   protected Integer getGreenInteger(){
      return this.greenInteger;
   }
   protected void setGreenInteger(Integer greenInteger){
      this.greenInteger = greenInteger;
   }
   protected Integer getBlueInteger(){
      return this.blueInteger;
   }
   protected void setBlueInteger(Integer blueInteger){
      this.blueInteger = blueInteger;
   }
   protected HeaderContributor getCSS(){
      return CSSPackageResource.getHeaderContribution(RGBColorSlider.class,"RGBColorSlider.css");
   }
   protected String getRgbvalue(){
      return this.rgbvalue;
   }
   protected void setRgbvalue(String rgbvalue){
      this.rgbvalue = rgbvalue;
   }
}

--------- RGBColorSlider.html ----------
<wicket:panel>
<table class="colorslider">
<tr>
    <td class="hex" colspan="2">#<span wicket:id="rgbValue">F0ECE8</span></td>
    <td wicket:id="color" class="color" rowspan="2"></td>
</tr>
<form wicket:id="colorform">
<tr><td colspan="2" class="set"># <input wicket:id="inputhex" type="text" size="5" maxlength="6" />
        <div wicket:id="feedback" class="feedback"></div>
        <br/><input wicket:id="rendersubmit" type="submit" value="render"/>
    </td>
</tr>
</form>
<tr><td class="ct">Red</td>
    <td wicket:id="redValue" class="dec">255</td>
    <td class="bar"><div wicket:id="redSlider"></div></td>
</tr>
<tr><td class="ct">Green</td>
    <td wicket:id="greenValue" class="dec">255</td>
    <td class="bar"><div wicket:id="greenSlider"></div></td>
</tr>
<tr><td class="ct">Blue</td>
    <td wicket:id="blueValue" class="dec">255</td>
    <td class="bar"><div wicket:id="blueSlider"></div></td>
</tr>
</table>
</wicket:panel>
;