像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的三角形.

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

(注意:代码未经测试,但应该可以帮助您入门)