如何在GWT中实现JQueryUI滑块 [英] How to implement a JQueryUI slider in GWT

问题描述

最近我需要在GWT中实现一个滑块来捕获用户在任务中所取得的百分比进展。我对GWT孵化器的滑块并不满意，也不太喜欢使用像Spiffy UI或SmartGWT这样的外部库。我可以用什么方法在GWT中实现一个有效的滑块，而不需要做太多的驴工作？ 在经过大量搜索之后我决定用一个JQuery-Ui滑块去实现，它通过一个java包装类来实现。 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; 
导入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; 
 
 
 / ** 
 *这个小部件包装了JQuery UI Slider并允许使用单个滑块。 
 * 
 *所有选项都可以使用通用get / setIntOption，get / setStringOption，get / setBooleanOption 
 *方法获取或设置，但为最流行的方法提供了一些便利方法，如
 * setValues和setMinimum和setMaximum。请参阅SliderOptions以获取完整的选项列表。 
 * see SliderOption 
 * 
 * / 
 @SuppressWarnings（Convert2Diamond）
公共类SingleSlider扩展Widget {
 
私有JSONObject defaultOptions; 
私人列表< SliderListener> listeners = new ArrayList< SliderListener>（）; 
 
 / ** 
 *使用指定的ID创建默认滑块。该ID是必需的
 *，因为滑块需要特定的ID来连接。 
 * @param id  - 要创建的元素的ID 
 * / 
 public SingleSlider（String id）{
 this（id，null）; 
} 
 
 / ** 
 *创建一个带有指定ID的滑块。该ID是必需的
 *，因为滑块需要特定的ID来连接。 
 * @param id  - 要创建的元素的ID 
 * @param选项 - 任何可能选项的JSONObject，对于默认值可以为null 
 * / 
 public SingleSlider（String id ，JSONObject选项）{
 super（）; 
元素divEle = DOM.createDiv（）; 
 setElement（divEle）; 
 divEle.setId（id）; 
 
 defaultOptions = options; 
 if（defaultOptions == null）{
 defaultOptions = getOptions（0，100，0）; 
} 
} 
 
 / ** 
 *创建选项JSONObject的简便方法。使用SliderOption键。 
 * @param min  - 滑块的默认最小值
 * @param max  - 滑块的默认最大值
 * @param defaultValue  - 锚点的默认点
 * @return a JSONObject滑块选项
 * / 
 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））; 
返回选项; 
 
 $ b @Override 
 protected void onLoad（）{
 createSliderJS（this，getElement（）。getId（），defaultOptions.getJavaScriptObject（））; 
 super.onLoad（）; 
 
 
 @Override 
 protected void onUnload（）{
 destroySliderJS（this，getElement（）。getId（））; 
 super.onUnload（）; 
} 
 / ** 
 *获得滑块的最小可能值
 * @return返回最小值。 
 * / 
 public int getMinimum（）{
 return getIntOptionJS（getElement（）。getId（），SliderOption.MIN.toString（））; 
} 
 
 / ** 
 *设置滑块的最小可能值
 * @param minimum设置的最小值。 
 * / 
 public void setMinimum（int minimum）{
 setIntOptionJS（getElement（）。getId（），SliderOption.MIN.toString（），minimum）; 
} 
 
 / ** 
 *获取滑块的最大可能值
 * @return返回最大值。 
 * / 
 public int getMaximum（）{
 return getIntOptionJS（getElement（）。getId（），SliderOption.MAX.toString（））; 
} 
 
 / ** 
 *设置滑块的最大可能值
 * @param maximum设置的最大值。 
 * / 
 public void setMaximum（int maximum）{
 setIntOptionJS（getElement（）。getId（），SliderOption.MAX.toString（），maximum）; 
} 
 
 / ** 
 *仅设置一个定位点
 * @param值的便捷方法。 
 * / 
 public void setValue（int value）{
 setValueJS（getElement（）。getId（），value）; 
} 
 
 
 / ** 
 *设置一个选项数值
 * @param选项SliderOption 
 * @param值数字
 * / 
 public void setIntOption（SliderOption option，int value）{
 setIntOptionJS（getElement（）。getId（），option.toString（），value）; 
} 
 
 / ** 
 *获取选项数值
 * @param选项SliderOption 
 * @return值数字
 * / 
 public int getIntOption（SliderOption option）{
 return getIntOptionJS（getElement（）。getId（），option.toString（））; 
 
 $ b $ ** 
 *设置一个选项布尔值
 * @param选项SliderOption 
 * @param value布尔
 * / 
 public void setBooleanOption（SliderOption option，boolean value）{
 setBooleanOptionJS（getElement（）。getId（），option.toString（），value）; 
} 
 
 / ** 
 *获取一个选项布尔值
 * @param选项SliderOption 
 * @return值布尔
 * / 
 public boolean getBooleanOption（SliderOption option）{
 return getBooleanOptionJS（getElement（）。getId（），option.toString（））; 
} 
 
 / ** 
 *设置一个选项字符串值
 * @param选项SliderOption 
 * @param值字符串
 * / 
 public void setStringOption（SliderOption option，String value）{
 setStringOptionJS（getElement（）。getId（），option.toString（），value）; 
} 
 
 / ** 
 *设置一个选项字符串值
 * @param选项SliderOption 
 * @return值字符串
 * / 
 public String setStringOption（SliderOption option）{
 return getStringOptionJS（getElement（）。getId（），option.toString（））; 
} 
 $ b $ ** 
 *添加一个SliderListener 
 * @param l  -  SliderListener 
 * / 
 public void addListener（SliderListener l ）{
 listeners.add（l）; 
} 
 $ b $ ** 
 *删除SliderListener 
 * @param l  -  SliderListener 
 * / 
 public void removeListener（SliderListener l ）{
 listeners.remove（l）; 
 
 
 $ b private void fireOnStartEvent（Event evt，int value）{
 SliderEvent e = new SliderEvent（evt，this，value）; （SliderListener l：listeners）
 
 {
 l.onStart（e）; 
} 
} 
 
 private boolean fireOnSlideEvent（Event evt，int value）{
 SliderEvent e = new SliderEvent（evt，this，value）; （SliderListener l：listeners）
 
 {
 l.onStart（e）; 
} 
 
 boolean ret = true; 
 
（SliderListener l：listeners）{
 if（！l.onSlide（e））{
 //如果任何一个侦听器返回false，返回false，
 //但让他们都做他们的事
 ret = false; 
} 
} 
 
 return ret; 
} 
 
 private void fireOnChangeEvent（Event evt，int value，boolean hasOriginalEvent）{
 SliderEvent e = new SliderEvent（evt，this，value，hasOriginalEvent）; 
 
（SliderListener l：listeners）{
 l.onChange（e）; 
 
 
 
 private void fireOnStopEvent（Event evt，int value）{
 SliderEvent e = new SliderEvent（evt，this，value）; （SliderListener l：listeners）
 
 {
 l.onStop（e）; 
 
 
 
 $ b private private void setIntOptionJS（String id，String option，int value）/ *  -  {
 $ wnd。$（ ＃+ id）.slider（option，option，value）; 
}  -  * /; 
 
 $ b private private int getIntOptionJS（String id，String option）/ *  -  {
 return $ wnd。$（＃+ id）.slider（option，选项）; 
}  -  * /; 
 
 $ b $ private void setBooleanOptionJS（String id，String option，boolean value）/ *  -  {
 $ wnd。$（＃+ id）.slider（option ，选项，价值）; 
}  -  * /; 
 
 $ b私有本地boolean getBooleanOptionJS（字符串id，字符串选项）/ *  -  {
 return $ wnd。$（＃+ id）.slider（option，选项）; 
}  -  * /; 
 
 $ b $ private void setStringOptionJS（String id，String option，String value）/ *  -  {
 $ wnd。$（＃+ id）.slider（option ，选项，价值）; 
}  -  * /; 
 
 
私有本地String getStringOptionJS（String id，String option）/ *  -  {
 return $ wnd。$（＃+ id）.slider（option，选项）; 
}  -  * /; 
 
 private native void setValueJS（String id，int value）/ *  -  {
 $ wnd。$（＃+ id）.slider（option，value，value ）; 
}  -  * /; 
 
 $ b $ private private void createSliderJS（SingleSlider x，String id，JavaScriptObject options）/ *  -  {
 options.start = function（event，ui）{
 x 。@ za.co.bsg.ems.client.framework.ui.slider.SingleSlider :: fireOnStartEvent（Lcom / google / gwt / user / client / Event; I）（event，ui.value）; 
}; 
 options.slide = function（event，ui）{
 return x。@ za.co.bsg.ems.client.framework.ui.slider.SingleSlider :: fireOnSlideEvent（Lcom / google / gwt /用户/客户端/事件; I）（event，ui.value）; 
}; 
 options.change = function（event，ui）{
 var has = event.originalEvent？真假; 
 x。@ za.co.bsg.ems.client.framework.ui.slider.SingleSlider :: fireOnChangeEvent（Lcom / google / gwt / user / client / Event; IZ）（event，ui.value，has ）; 
}; 
 options.stop = function（event，ui）{
 x。@ za.co.bsg.ems.client.framework.ui.slider.SingleSlider :: 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）; 
}  -  * /; 
 
 
 
 
 
 $ b 
然后将此滑块合并到以下小部件中以创建百分比滑块 p> 
 
 
  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实现SliderListener，HasValueChangeHandlers< Integer> {
 
界面PercentageSliderUiBinder扩展了UiBinder< Widget，PercentageSliderWidget> {} 
 private static final PercentageSliderUiBinder UI_BINDER = GWT.create（PercentageSliderUiBinder.class）; 
 
 @UiField 
标签headingLabel; 
 @UiField（provided = true）
 SingleSlider singleSlider; 
 @UiField 
 IntegerBox percentBox; 
 @UiField 
标签percentageSignLabel; 
 
 private Set< ValueChangeHandler< Integer>> valueChangeHandlers; 
 
 public PercentageSliderWidget（long taskId，String heading，int existingProgress）{
 valueChangeHandlers = new HashSet<>（）; 
 JSONObject选项= SingleSlider.getOptions（0，100，existingProgress）; 
 singleSlider =新的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）; 
 
 $ b @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（））; 
返回true; 
 
 $ b @Override 
 public void onChange（SliderEvent e）{
 // do nothing 
} 
 
 @Override 
 public void onStop（SliderEvent e）{
 updateValues（e.getValue（），true）; 
 
 $ b @Override 
 public void onStart（SliderEvent e）{
 //什么也不做
} 
 
 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））; 
} 
} 
} 
 
} 
  
我最初的资源是以下
  http://www.zackgrossbart.com / hackito / gwt-slider /  
 
I recently needed to implement a slider in GWT to capture the percentage progress an user had made on a task. I was not happy with the slider from the GWT Incubator and was not too keen on using an external library like spiffy UI or SmartGWT. What alternatives could I use to implement an effective slider in GWT without doing too much donkey work ?
解决方案
After a fair amount of searching I decided on going with a JQuery-Ui slider that would be implemented through a java wrapper class. The interaction between GWT and the JQuery slider would be through the GWT Java Script Native Interface. To keep the additions to the required library as small as possible I downloaded a custom Jquery-Ui package (just core+slider) which was pretty light weight. The result was satisfactory for our needs, fitted into our MVP design pattern and was UI Bound.

The slider wrapper was as follows :
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) {
            [e-mail]::fireOnStartEvent(Lcom/google/gwt/user/client/Event;I)(event, ui.value);
        };
        options.slide = function(event, ui) {
            return [e-mail]::fireOnSlideEvent(Lcom/google/gwt/user/client/Event;I)(event, ui.value);
        };
        options.change = function(event, ui) {
            var has = event.originalEvent ? true : false;
            [e-mail]::fireOnChangeEvent(Lcom/google/gwt/user/client/Event;IZ)(event, ui.value, has);
        };
        options.stop = function(event, ui) {
            [e-mail]::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");
    }-*/;
}
This slider was then incorporated into the following widget to create a percentage slider
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));
            }
        }
    }

}
My starting resource was the following
http://www.zackgrossbart.com/hackito/gwt-slider/

                        
这篇关于如何在GWT中实现JQueryUI滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！