GMail как комбинированный список выбора, реализованный в GWT

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.

Возможно, вам придется добавить функцию, которая не будет выбиратьФлажок, если в списке нет элементов, которые относятся к выбору.

(Примечание: код не проверен, но должен помочь вам начать работу)