mmm, its a bit more complicated than that.
All what you need is in here:
http://code.google.com/p/google-web-toolkit-incubator/source/browse/trunk/src/com/google/gwt/gen2/picker/client/SliderBar.java
On Wed, Aug 3, 2011 at 7:24 AM, Deepak Singh <deepaksingh...@gmail.com>wrote:
> Hi Gal,
>
> I followed the instructions and prepared a uibinder which looks same as
> hotel finder two way slider.
>
> <g:HTMLPanel>
> <div class="GPTJ3ICDOV">
> <div style="align:left">
> <div class="GPTJ3ICDLV">
> <span class="GPTJ3ICDMV">Price per night</span>
> <span class="GPTJ3ICDKV"><g:Label
> ui:field="slidingData"></g:Label></span>
> </div>
> </div>
> <div class="GPTJ3ICDPV">
> <div class="GPTJ3ICDIU">
> <div class="GPTJ3ICDOU" ui:field="container">
> <div class="GPTJ3ICDNU"></div>
> <div class="GPTJ3ICDBV" style="left: 0px; width:
> 190px;"></div>
> <g:Image styleName="GPTJ3ICDMU"
> ui:field="leftSlider"></g:Image>
> <g:Image styleName="GPTJ3ICDAV"
> ui:field="rightSlider"></g:Image>
> </div>
> </div>
> </div>
> </div>
>
> </g:HTMLPanel>
>
> Now in java class, i add handlers to the images leftSlider and righSlider
> as follows
>
> public void addhandlers() {
> leftSlider.addDragEnterHandler(new DragEnterHandler() {
>
> @Override
> public void onDragEnter(DragEnterEvent event) {
> }
> });
> leftSlider.addDragExitHandler(new DragExitHandler() {
>
> @Override
> public void onDragExit(DragExitEvent event) {
> }
> });
> leftSlider.addDragOverHandler(new DragOverHandler() {
>
> @Override
> public void onDragOver(DragOverEvent event) {
>
> }
> });
> leftSlider.addDropHandler(new DropHandler() {
>
> @Override
> public void onDrop(DropEvent event) {
> }
> });
> leftSlider.addMouseMoveHandler(new MouseMoveHandler() {
>
> @Override
> public void onMouseMove(MouseMoveEvent event) {
>
> leftSlider.getElement().getStyle().setLeft(event.getRelativeX(container),
> Unit.PX);
>
> }
> });
>
> rightSlider.addMouseMoveHandler(new MouseMoveHandler() {
>
> @Override
> public void onMouseMove(MouseMoveEvent event) {
>
> rightSlider.getElement().getStyle().setLeft(event.getRelativeX(container),
> Unit.PX);
>
> }
> });
> }
> Initially when the page renders, it is fine. When i do mouse over the
> slider images,
> i observe that
> 1) MouseMoveHandler works only with mouse movement from left to right. If a
> move the mouse from right direction to left, nothing happens.
> 2) Also, how do i check bounds?
> 3) How to set the minimum and maximum value of the sliders?
>
> Thanks
> Deepak
>
>
>
>
> On Tue, Aug 2, 2011 at 5:44 AM, Gal Dolber <gal.dol...@gmail.com> wrote:
>
>> a quick decoding of the one there:
>>
>> // Markup
>>
>> .labelLeft {
>> left:-12px; // Min position
>> height: 25px;
>> width: 25px;
>> background-color: #444;
>> }
>>
>> .labelRight {
>> left:178px; // Max position
>> height: 25px;
>> width: 25px;
>> background-color: #444;
>> }
>>
>> <g:HTMLPanel>
>> <div>
>> <div style="float:left">Label left</div>
>> <div style="float:right">Label right</div>
>> </div>
>>
>> <div ui:field="container">
>> <div style="left: 0px; width: 190px;
>> height:5px;background-color:#777"></div>
>> <g:Label ui:field="leftLabel"
>> styleName="{style.labelLeft}"></g:Label>
>> <g:Label
>> ui:field="rightLabel" styleName="{style.labelRight}"></g:Label>
>> </div>
>> </g:HTMLPanel>
>>
>> // For the leftLabel
>> If you will use html use drag start, drag move and drag end events and do
>> not capture the event, everything else is the same.
>> If you wont use html5, on mouse down event do:
>> Event.setCapture(leftLabel.getElement());
>> And on mouse up event Event.releaseCapture(leftLabel.getElement());
>> Capturing the element means that all events will be passed to that element
>> till release.
>> Then you need to implement the mouse move for the label:
>>
>> 1. Find the mouse position relative to the sliders container
>> (event.getRelativeX(container) and event.getRelativeY(container))
>> 2. Calculate the current position
>> 3. Check bounds
>> 4. Set the position of the slider (basically set the left style to the
>> position you want)
>>
>> do the same for the right slider, add some pretty styles and you are ready
>> to go.
>>
>> Regards
>>
>> On Mon, Aug 1, 2011 at 4:09 PM, Karthik Reddy
>> <karthik.ele...@gmail.com>wrote:
>>
>>> The feedback widget seems identical to the one used in google plus.
>>>
>>> --
>>> You received this message because you are subscribed to the Google Groups
>>> "Google Web Toolkit" group.
>>> To view this discussion on the web visit
>>> https://groups.google.com/d/msg/google-web-toolkit/-/_9l2ocSOyxgJ.
>>>
>>> To post to this group, send email to google-web-toolkit@googlegroups.com
>>> .
>>> To unsubscribe from this group, send email to
>>> google-web-toolkit+unsubscr...@googlegroups.com.
>>> For more options, visit this group at
>>> http://groups.google.com/group/google-web-toolkit?hl=en.
>>>
>>
>>
>>
>> --
>> Guit: Elegant, beautiful, modular and *production ready* gwt applications.
>>
>> http://code.google.com/p/guit/
>>
>>
>>
>>
>> --
>> You received this message because you are subscribed to the Google Groups
>> "Google Web Toolkit" group.
>> To post to this group, send email to google-web-toolkit@googlegroups.com.
>> To unsubscribe from this group, send email to
>> google-web-toolkit+unsubscr...@googlegroups.com.
>> For more options, visit this group at
>> http://groups.google.com/group/google-web-toolkit?hl=en.
>>
>
> --
> You received this message because you are subscribed to the Google Groups
> "Google Web Toolkit" group.
> To post to this group, send email to google-web-toolkit@googlegroups.com.
> To unsubscribe from this group, send email to
> google-web-toolkit+unsubscr...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/google-web-toolkit?hl=en.
>
--
Guit: Elegant, beautiful, modular and *production ready* gwt applications.
http://code.google.com/p/guit/
--
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
