带下拉箭头的GWT文本框

Question

我想在文本框中有一个下拉箭头（实际上是我的情况下的SuggestBox）。 GMail为高级搜索功能执行此操作（打开高级搜索对话框）。

什么是正确的GWT布局，让这个箭头出现在TextBox的右侧并且可点击？

看着GMail，我发现了一个非常奇怪的图像下拉。

Answer 1

这里有一个简单的例子：

您需要在CSS的工作：

public class GMailDropDown implements EntryPoint { 

    public void onModuleLoad() { 
     RootPanel.get().add(new DropDown()); 
    } 

    class DropDown extends Composite 
    implements ClickHandler 
    { 

     private TextBox textBox = new TextBox(); 
     private PushButton button; 


     public DropDown() { 

       Image img = new Image("https://ssl.gstatic.com/ui/v1/zippy/arrow_down.png"); 

       button = new PushButton(img); 

       button.getElement().getStyle().setPaddingLeft(5, Unit.PX); 
       button.getElement().getStyle().setPaddingRight(5, Unit.PX); 
       button.getElement().getStyle().setPaddingTop(3, Unit.PX); 
       button.getElement().getStyle().setPaddingBottom(7, Unit.PX); 

       button.addClickHandler(this); 
       button.removeStyleName("gwt-PushButton"); 

       textBox.getElement().getStyle().setBorderWidth(0, Unit.PX); 


       HorizontalPanel panel = new HorizontalPanel(); 
       panel.add(textBox); 
       panel.add(button); 

       panel.getElement().getStyle().setBorderWidth(1, Unit.PX); 
       panel.getElement().getStyle().setBorderColor("black"); 
       panel.getElement().getStyle().setBorderStyle(BorderStyle.SOLID); 

       // All composites must call initWidget() in their constructors. 
       initWidget(panel); 
     } 


     @Override 
     public void onClick(ClickEvent event) { 
      // TODO Auto-generated method stub 

     } 
    } 
} 

还要检查这个

https://developers.google.com/web-toolkit/doc/latest/DevGuideUiCustomWidgets

https://developers.google.com/web-toolkit/doc/latest/DevGuideClientBundle