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

带有下拉箭头的GWT文本框

1 个答案: