http://www.google.com/hotelfinder

[Deepak Singh]

Hi All,

Google recently launched its hotel finder application
http://www.google.com/hotelfinder

Very nice.
Some queries regarding this one:

1) Is this in GWT or some other technology? While inspecting through the page source i see gwt-label elements
2) Select a particular row on the search result and the row gets expanded with more details. How it is possible to implement this feature with GWT datagrid ?
3) on the left side, there are some filter options available. Here The Two Way Slider component has been used to filter Price per night. How can we have / create this component in GWT ?

Lets start the discussion over the features of this hotelfinder.

Regards
Deepak

[Gal Dolber]

Wow, really nice app. 

1) Yes, its gwt.

2) Thats not a datagrid, but a pile of divs. Seems to be a ScrollPanel(cause it works on ipad) with a FlowPanel inside and a bunch of custom components inside it. The row expansion its just a widgets changing its contents. 

3) These widgets may be from http://code.google.com/p/google-web-toolkit-incubator/ or maybe they did custom ones for this app.

Regards

--
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-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@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/

[Gal Dolber]

PD: the feedback feature is amazing!

[Deepak Singh]

Yes.

So can we expect some features to be made open source / included in GWT by google ?
At lease i need this slider component asap. How it is possible to get that.

[Gal Dolber]

I'm not the right person to answer that, but you should really try to build you custom widget. A dual-slider like that isn't hard to do and once you start building your own widgets you don't need to rely on google to include  the ones you need inside gwt.

Regards

[Boris Lenzinger]

the following search on Google "gwt slider" returns some interesting results. You should find what you are looking for.

[Deepak Singh]

It would be great if someone give some hints or some sample code for Two way slider custom component and such kind of data table in gwt.

Thanks in advance

Deepak

[Karthik Reddy]

The feedback widget seems identical to the one used in google plus. 

[Gal Dolber]

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

[Deepak Singh]

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

[Gal Dolber]

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

[P.G.Taboada]

On 1 Aug., 12:42, Deepak Singh <deepaksingh...@gmail.com> wrote:
> Hi All,

> 2) Select a particular row on the search result and the row gets expanded
> with more details. How it is possible to implement this feature with GWT
> datagrid ?

There is a new table builder API that makes this possible. Checkout
and build trunk, have a look at the showcase, cell widgets, custom
data grid.

[Deepak Singh]

Yes.

But can i get any help/ source code for the two way slider which is being used in hotel finder ?

Thank
Deepak

[Nick Siderakis]

Does anyone know what the hotel app is using for RPC? 

It doesn't look like standard RequestFactory or GWT-RPC. 

Example request body: 

[,[[,"hs","[,[,\"nyc\",\"2011-08-10\",1]\n]\n"] ] ,[,[[,"b_lr","1:83"] ,[,"b_lr","2:141"] ,[,"b_qu","0"] ] ] ]