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