在GWT中实现的类似GMail的选择组合框

我对实现GMail中使用的组合框之类的东西很感兴趣，可以轻松地选择电子邮件。组合框的“默认”选项有一个复选框，可以单击该复选框选择所有电子邮件，否则您可以下拉该框并选择其他选择选项

您将如何在GWT中实现这一点

public class SelectionComboBox extends HorizontalPanel implements ClickHandler {
    private class ListItem extends Label implements ClickHandler {
        String text;
        public ListItem(String text) {
            this.text = text;
            this.setText(text);
            this.addClickHandler(this);
        }
        @Override
        public void onClick(ClickEvent event) {
            selectedValue = text;
            popup.hide();
        }
    }

    CheckBox combo;
    FlowPanel list;
    PopupPanel popup;
    String selectedValue;
    Label triangle;

    public SelectionComboBox() {
        list = new FlowPanel();
        popup = new PopupPanel();
        combo = new CheckBox();
        triangle = new Label();
        list.add(new ListItem("All"));
        list.add(new ListItem("None"));
        list.add(new ListItem("Read"));
        list.add(new ListItem("Unread"));
        list.add(new ListItem("Starred"));
        list.add(new ListItem("Unstarred"));
        popup.setWidget(list);
        popup.setPopupPosition(this.getAbsoluteLeft(),
            this.getAbsoluteTop() + this.getOffsetHeight());
        this.addDomHandler(this, ClickEvent.getType());
        triangle.addClickHandler(this);
        this.add(combobox);
        this.add(triangle);
    }

    public void addValueChangeHandler(ValueChangeHandler<Boolean> handler) {
        combo.addValueChangeHandler(handler);
    }

    public String getSelection() {
        return selectedValue;
    }

    @Override
    public void onClick(ClickEvent event) {
        popup.show();
    }
}

上面的样式将使用Css为您提供一个三角形

如果列表中没有应用于所选内容的元素，则可能必须添加一个不会选中复选框的功能

---

（注意：代码未经测试，但应该可以帮助您入门）

您可以使用Chrome的开发工具（或Firebug）检查该区域周围的DOM，了解元素的排列方式。从那里，您可以在UIBinder模板中模拟这一点。我没有任何具体的想法，但我就是这样开始工作的。我必须做一些类似的事情，并采取类似的方法。微妙之处在于让键盘也能正常工作。我试过了代码，代码相当接近，但主要问题是我不知道如何“修复”。现在的代码是，单击复选框会弹出选项，相反，它只会在单击箭头时显示选项，单击复选框会选择/取消选择没有弹出选项的所有表行。我是否使用图像或类似的东西来触发列表框？删除这一行：

this.addDomHandler（this，ClickEvent.getType（））

并且只有单击箭头时才会弹出列表。使用我提供的样式设置名为triangle的标签的样式，您只需使用css就可以得到一个比图像小的箭头，

height:0;
width:0;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-top:20px solid black;