How to make gmail search box similar ui in gwt - 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 );
}
}
`