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 <[email protected]> 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 <[email protected]>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 [email protected].
>> To unsubscribe from this group, send email to
>> [email protected].
>> 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 [email protected].
> To unsubscribe from this group, send email to
> [email protected].
> 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 [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
