像GWT中实现的选择组合框一样的GMail

Question

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

您将如何在GWT中实现这一目标？

Answer 1

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();
    }
}

三角形的样式：

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

上面的样式会为你提供一个只使用Css的三角形。

如果列表中没有适用于选择的元素，则可能必须添加不会选中复选框的功能。

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