How to make gmail search box similar ui in gwt

Question

We are making an application using GWT that require a search box widget like gmail has. I dont know how and where to start to make such widget. Basically what widget/component should i use to make a text box with a dropdown icon,where if i click the dropdown icon it opens a panel with advanced search using gwt.Please help

Answer 1

with UiBinder tool, you can design fastly what you wish :

`

<g:HTMLPanel>
    <g:VerticalPanel>
        <g:HorizontalPanel>
            <g:TextBox/>
            <g:PushButton text="V" ui:field="pushButton"/>
            <g:PushButton text="Search"/>
        </g:HorizontalPanel>
        <g:VerticalPanel ui:field="optionsPanel">
            <g:HorizontalPanel>
                <g:Label text="Foo"/>
                <g:TextBox/>
            </g:HorizontalPanel>
            <g:HorizontalPanel>
                <g:Label text="Bar"/>
                <g:TextBox/>
            </g:HorizontalPanel>
        </g:VerticalPanel>
    </g:VerticalPanel>
</g:HTMLPanel>

`

and ` package yde.dev.client;

import com.google.gwt.core.client.GWT; import com.google.gwt.uibinder.client.UiBinder; import com.google.gwt.user.client.ui.Composite; import com.google.gwt.user.client.ui.Widget; import com.google.gwt.uibinder.client.UiField; import com.google.gwt.user.client.ui.VerticalPanel; import com.google.gwt.user.client.ui.PushButton; import com.google.gwt.uibinder.client.UiHandler; import com.google.gwt.event.dom.client.ClickEvent;

public class SearchLikeGmail extends Composite {

private static SearchLikeGmailUiBinder uiBinder = GWT
        .create(SearchLikeGmailUiBinder.class);
@UiField VerticalPanel optionsPanel;
@UiField PushButton moreOptionsBttn;

interface SearchLikeGmailUiBinder extends UiBinder<Widget, SearchLikeGmail> {
}

public SearchLikeGmail() {
    initWidget(uiBinder.createAndBindUi(this));
    optionsPanel.setVisible( false );
}

@UiHandler("moreOptionsBttn")
void onMoreOptionsBttnClick(ClickEvent event) {
    optionsPanel.setVisible( true );
}

} `