如何在gwt中使gmail搜索框类似ui(How to make gmail search box similar ui in gwt)

如何在gwt中使gmail搜索框类似ui(How to make gmail search box similar ui in gwt)

我们正在使用GWT创建一个需要像gmail这样的搜索框小部件的应用程序。 我不知道如何以及从哪里开始制作这样的小部件。 基本上我应该用什么小部件/组件来制作带有下拉图标的文本框，如果我点击下拉图标，它会打开一个带有高级搜索的面板，使用gwt.Please帮助

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

最满意答案

使用UiBinder工具，您可以快速设计您想要的内容：

`

<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>

`

和`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;

公共类SearchLikeGmail扩展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 ); }

}

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 ); }

} `