gwt - 带有下拉箭头的 GWT 文本框

Question

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

让这个箭头显示在 TextBox 的右侧并可以点击的正确 GWT 布局是什么？

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