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>