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.
