gwt에서 Gmail 검색 상자를 유사하게 만드는 방법

Question

Gmail과 같은 검색 창 위젯이 필요한 GWT를 사용하여 응용 프로그램을 만들고 있습니다. 위젯을 만드는 방법과 위치를 알지 못합니다. 기본적으로 드롭 다운 아이콘을 사용하여 텍스트 상자를 만드는 데 사용해야하는 위젯/구성 요소입니다. 드롭 다운 아이콘을 클릭하면 gwt를 사용하는 고급 검색 패널이 열립니다.

Answer 1

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> 

`

및 ` 패키지 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, 나는 확실하지 않다 복합 {

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

} `