带有下拉箭头的GWT文本框 [英] GWT Textbox with drop-down arrow

问题描述

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

正确的GWT布局将这个箭头显示在文本框的右侧并且可点击是什么？

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

解决方案

快速举例：

您需要在css上工作：

  public class GMailDropDown implements EntryPoint {
 $ b $ public void onModuleLoad（）{
 RootPanel.get（）。add（new DropDown（））; 
 
 $ b $ class DropDown extends Composite 
 implements ClickHandler 
 {
 
 private TextBox textBox = new TextBox（）; 
私人PushButton按钮; 
 
 
 public DropDown（）{
 
图片img = new图片（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）; 
 
 
 Horizo​​ntalPanel面板=新的Horizo​​ntalPanel（）; 
 panel.add（textBox）; 
 panel.add（button）; 
 
 panel.getElement（）。getStyle（）。setBorderWidth（1，Unit.PX）; 
 panel.getElement（）。getStyle（）。setBorderColor（black）; 
 panel.getElement（）。getStyle（）。setBorderStyle（BorderStyle.SOLID）; 
 
 //所有组合必须在其构造函数中调用initWidget（）。 
 initWidget（panel）; 
} 
 
 
 @覆盖
 public void onClick（ClickEvent event）{
 // TODO自动生成的方法存根
 
} 
} 
} 
  

也检查这个

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

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

I want to have a drop-down arrow in a textbox (actually SuggestBox in my case). GMail does this for advanced search functionality, (opens the advanced search dialog box).

What would be the proper GWT layout to have this arrow show up in the right-hand-side of the TextBox and be clickable?

Looking at GMail, I find a really odd image for the drop-down.

解决方案

Here's a quick example:

You need to work on the 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

        }
    }
}

also check this

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

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

这篇关于带有下拉箭头的GWT文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！