2
我最近需要在GWT中实现滑块来捕获用户在任务上所取得的百分比进度。我对GWT孵化器的滑块并不满意，也不太喜欢使用像Spiffy UI或SmartGWT这样的外部库。我可以用什么替代方法来实现GWT中的有效滑动，而不需要做太多的驴工作？如何在GWT中实现JQueryUI滑块
A
回答
1
经过大量的搜索之后，我决定使用一个可以通过java包装类实现的JQuery-Ui滑块。 GWT和JQuery滑块之间的交互将通过GWT Java脚本本地接口。为了使所需的库尽可能小，我下载了一个非常轻的自定义Jquery-UI包（只是核心+滑块）。结果满足我们的需求，符合我们的MVP设计模式，并且是UI绑定。
滑块包装如下：然后
package za.co.bsg.ems.client.framework.ui.slider;
import com.google.gwt.core.client.JavaScriptObject;
import com.google.gwt.json.client.JSONNumber;
import com.google.gwt.json.client.JSONObject;
import com.google.gwt.json.client.JSONString;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.ui.Widget;
import java.util.ArrayList;
import java.util.List;
/**
* This widget wraps the JQuery UI Slider and allows for single slider .
*
* All options can be get or set using generic get/setIntOption, get/setStringOption, get/setBooleanOption
* methods, but some convenience methods are provided for most popular such as
* setValues and setMinimum and setMaximum. See SliderOptions for full list of options.
* @see SliderOption
*
*/
@SuppressWarnings("Convert2Diamond")
public class SingleSlider extends Widget {
private JSONObject defaultOptions;
private List<SliderListener> listeners = new ArrayList<SliderListener>();
/**
* Create the default slider with the specified ID. The ID is required
* because the slider needs a specific ID to connect to.
* @param id - id of the element to create
*/
public SingleSlider(String id) {
this(id, null);
}
/**
* Create a slider with the specified ID. The ID is required
* because the slider needs a specific ID to connect to.
* @param id - id of the element to create
* @param options - JSONObject of any possible option, can be null for defaults
*/
public SingleSlider(String id, JSONObject options) {
super();
Element divEle = DOM.createDiv();
setElement(divEle);
divEle.setId(id);
defaultOptions = options;
if (defaultOptions == null) {
defaultOptions = getOptions(0, 100, 0);
}
}
/**
* A convenient way to create an options JSONObject. Use SliderOption for keys.
* @param min - default minimum of the slider
* @param max - default maximum of the slider
* @param defaultValue - default point of anchor
* @return a JSONObject of Slider options
*/
public static JSONObject getOptions(int min, int max, int defaultValue) {
JSONObject options = new JSONObject();
options.put(SliderOption.MIN.toString(), new JSONNumber(min));
options.put(SliderOption.MAX.toString(), new JSONNumber(max));
options.put(SliderOption.VALUE.toString(), new JSONNumber(defaultValue));
options.put(SliderOption.RANGE.toString(), new JSONString("min"));
return options;
}
@Override
protected void onLoad() {
createSliderJS(this, getElement().getId(), defaultOptions.getJavaScriptObject());
super.onLoad();
}
@Override
protected void onUnload() {
destroySliderJS(this, getElement().getId());
super.onUnload();
}
/**
* Gets the minimum possible value for the slider
* @return Returns the minimum.
*/
public int getMinimum() {
return getIntOptionJS(getElement().getId(), SliderOption.MIN.toString());
}
/**
* Sets the minimum possible value for the slider
* @param minimum The minimum to set.
*/
public void setMinimum(int minimum) {
setIntOptionJS(getElement().getId(), SliderOption.MIN.toString(), minimum);
}
/**
* Gets the maximum possible value for the slider
* @return Returns the maximum.
*/
public int getMaximum() {
return getIntOptionJS(getElement().getId(), SliderOption.MAX.toString());
}
/**
* Sets the maximum possible value for the slider
* @param maximum The maximum to set.
*/
public void setMaximum(int maximum) {
setIntOptionJS(getElement().getId(), SliderOption.MAX.toString(), maximum);
}
/**
* Convenience method for only 1 anchor
* @param value to set.
*/
public void setValue(int value) {
setValueJS(getElement().getId(), value);
}
/**
* Set an option numeric value
* @param option the SliderOption
* @param value the numeric
*/
public void setIntOption(SliderOption option, int value) {
setIntOptionJS(getElement().getId(), option.toString(), value);
}
/**
* Get an option numeric value
* @param option the SliderOption
* @return value the numeric
*/
public int getIntOption(SliderOption option) {
return getIntOptionJS(getElement().getId(), option.toString());
}
/**
* Set an option boolean value
* @param option the SliderOption
* @param value the boolean
*/
public void setBooleanOption(SliderOption option, boolean value) {
setBooleanOptionJS(getElement().getId(), option.toString(), value);
}
/**
* Get an option boolean value
* @param option the SliderOption
* @return value the boolean
*/
public boolean getBooleanOption(SliderOption option) {
return getBooleanOptionJS(getElement().getId(), option.toString());
}
/**
* Set an option string value
* @param option the SliderOption
* @param value the String
*/
public void setStringOption(SliderOption option, String value) {
setStringOptionJS(getElement().getId(), option.toString(), value);
}
/**
* Set an option string value
* @param option the SliderOption
* @return value the String
*/
public String setStringOption(SliderOption option) {
return getStringOptionJS(getElement().getId(), option.toString());
}
/**
* Add a SliderListener
* @param l - SliderListener
*/
public void addListener(SliderListener l) {
listeners.add(l);
}
/**
* Removes the SliderListener
* @param l - SliderListener
*/
public void removeListener(SliderListener l) {
listeners.remove(l);
}
private void fireOnStartEvent(Event evt, int value) {
SliderEvent e = new SliderEvent(evt, this, value);
for (SliderListener l : listeners) {
l.onStart(e);
}
}
private boolean fireOnSlideEvent(Event evt, int value) {
SliderEvent e = new SliderEvent(evt, this, value);
for (SliderListener l : listeners) {
l.onStart(e);
}
boolean ret = true;
for (SliderListener l : listeners) {
if (!l.onSlide(e)) {
//if any of the listeners returns false, return false,
//but let them all do their thing
ret = false;
}
}
return ret;
}
private void fireOnChangeEvent(Event evt, int value, boolean hasOriginalEvent) {
SliderEvent e = new SliderEvent(evt, this, value, hasOriginalEvent);
for (SliderListener l : listeners) {
l.onChange(e);
}
}
private void fireOnStopEvent(Event evt, int value) {
SliderEvent e = new SliderEvent(evt, this, value);
for (SliderListener l : listeners) {
l.onStop(e);
}
}
private native void setIntOptionJS(String id, String option, int value) /*-{
$wnd.$("#" + id).slider("option", option, value);
}-*/;
private native int getIntOptionJS(String id, String option) /*-{
return $wnd.$("#" + id).slider("option", option);
}-*/;
private native void setBooleanOptionJS(String id, String option, boolean value) /*-{
$wnd.$("#" + id).slider("option", option, value);
}-*/;
private native boolean getBooleanOptionJS(String id, String option) /*-{
return $wnd.$("#" + id).slider("option", option);
}-*/;
private native void setStringOptionJS(String id, String option, String value) /*-{
$wnd.$("#" + id).slider("option", option, value);
}-*/;
private native String getStringOptionJS(String id, String option) /*-{
return $wnd.$("#" + id).slider("option", option);
}-*/;
private native void setValueJS(String id, int value) /*-{
$wnd.$("#" + id).slider("option", "value", value);
}-*/;
private native void createSliderJS(SingleSlider x, String id, JavaScriptObject options) /*-{
options.start = function(event, ui) {
[email protected]::fireOnStartEvent(Lcom/google/gwt/user/client/Event;I)(event, ui.value);
};
options.slide = function(event, ui) {
return [email protected]::fireOnSlideEvent(Lcom/google/gwt/user/client/Event;I)(event, ui.value);
};
options.change = function(event, ui) {
var has = event.originalEvent ? true : false;
[email protected]::fireOnChangeEvent(Lcom/google/gwt/user/client/Event;IZ)(event, ui.value, has);
};
options.stop = function(event, ui) {
[email protected]::fireOnStopEvent(Lcom/google/gwt/user/client/Event;I)(event, ui.value);
};
$wnd.$("#" + id).slider(options);
}-*/;
private native void destroySliderJS(SingleSlider x, String id) /*-{
$wnd.$("#" + id).slider("destroy");
}-*/;
}
该滑块被纳入以下小部件创建一个百分比滑块
package za.co.bsg.ems.client.framework.ui.slider;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.logical.shared.HasValueChangeHandlers;
import com.google.gwt.event.logical.shared.ValueChangeEvent;
import com.google.gwt.event.logical.shared.ValueChangeHandler;
import com.google.gwt.event.shared.HandlerRegistration;
import com.google.gwt.json.client.JSONObject;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.IntegerBox;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.Widget;
import za.co.bsg.ems.client.event.IntegerValueChangeEvent;
import java.util.HashSet;
import java.util.Set;
public class PercentageSliderWidget extends Composite implements SliderListener, HasValueChangeHandlers<Integer> {
interface PercentageSliderUiBinder extends UiBinder<Widget, PercentageSliderWidget> {}
private static final PercentageSliderUiBinder UI_BINDER = GWT.create(PercentageSliderUiBinder.class);
@UiField
Label headingLabel;
@UiField(provided = true)
SingleSlider singleSlider;
@UiField
IntegerBox percentBox;
@UiField
Label percentageSignLabel;
private Set<ValueChangeHandler<Integer>> valueChangeHandlers;
public PercentageSliderWidget(long taskId, String heading, int existingProgress) {
valueChangeHandlers = new HashSet<>();
JSONObject options = SingleSlider.getOptions(0, 100, existingProgress);
singleSlider = new SingleSlider("singleSlider" + taskId, options);
singleSlider.setTitle(existingProgress + "%");
initWidget(UI_BINDER.createAndBindUi(this));
singleSlider.addListener(this);
percentBox.setValue(existingProgress);
percentBox.addValueChangeHandler(new ValueChangeHandler<Integer>() {
@Override
public void onValueChange(ValueChangeEvent<Integer> event) {
updateValues(event.getValue(), true);
}
});
headingLabel.setText(heading);
percentageSignLabel.setText("%");
}
public void setValue(int value) {
updateValues(value, false);
}
@Override
public HandlerRegistration addValueChangeHandler(final ValueChangeHandler<Integer> handler) {
valueChangeHandlers.add(handler);
return new HandlerRegistration() {
@Override
public void removeHandler() {
valueChangeHandlers.remove(handler);
}
};
}
@Override
public boolean onSlide(SliderEvent e) {
percentBox.setValue(e.getValue());
return true;
}
@Override
public void onChange(SliderEvent e) {
// do nothing
}
@Override
public void onStop(SliderEvent e) {
updateValues(e.getValue(), true);
}
@Override
public void onStart(SliderEvent e) {
// do nothing
}
private void updateValues(int progressValue, boolean fireEvents) {
singleSlider.setTitle(progressValue + "%");
singleSlider.setValue(progressValue);
percentBox.setValue(progressValue);
if (fireEvents) {
for (ValueChangeHandler<Integer> valueChangeHandler : valueChangeHandlers) {
valueChangeHandler.onValueChange(new IntegerValueChangeEvent(progressValue));
}
}
}
}
+1
我从未更加感谢能够使用纯JavaScript工作......：P – 2014-09-04 12:43:32
相关问题
- 1. 如何在jqueryUI滑块中添加PIPS滑块
- 2. 我如何使用gwt中的两个旋钮实现滑块
- 3. 在highcharts中实现滑块
- 4. jQueryUI的滑块控件增强的jQuery UI的滑块，点子实现问题
- 5. jQueryUI滑块 - 获取初始滑块值
- 6. 如何在jQueryUI选项卡上实现滑动效果
- 7. 如何实现JqueryUI Datepicker
- 8. 如何实现滑块div图像
- 9. jqueryui滑块+ jplayer音量值
- 10. jQueryUI的滑块 - 值toFixed（2）
- 11. JCarousel和JqueryUI滑块问题
- 12. 有没有非jQueryUI滑块？
- 13. JQueryUI滑块不能在IE上工作
- 14. 易于实现滑块库
- 15. JQuery bing滑块实现
- 16. JQuery滑块实现问题
- 17. 如何在Html/Css和React js中实现这个滑块？
- 18. 如何在GWT中实现HashMap？
- 19. 如何在GWT中实现JSNI
- 20. 在滑动滑块中实现缩放功能
- 21. 如何实现GWT多页
- 22. jQueryUI的滑块全局设置
- 23. jQueryUI的滑块 - 3个标签
- 24. jQueryUI范围滑块显示进度
- 25. jQuery克隆jQueryUI滑块怪异行为
- 26. 问题与jQueryUI的滑块（范围）
- 27. 你会如何在这里实现滑块的计时器？
- 28. 如何实现拖放在GWT
- 29. GWT：如何在CellTable上实现过滤？
- 30. jQueryUI滑块如何删除句柄边框
这应该是一个“问题”？ – 2014-09-04 12:19:50
更好？对不起这个新的 – 2014-09-04 12:24:31