GMail like selection combobox implemented in GWT

Question

I'm interested in implementing something like the combobox used in GMail to easily select emails. The "default" selection of the combobox has a checkbox that can be clicked to select all emails, otherwise you can dropdown the box and choose another selection option.

How would you go about implementing this in 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();
    }
}

Style for the triangle:

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

The above styles will give you a triangle just using Css.

You might have to add a feature that will not select the Checkbox if the list hasn't elements that apply to the selection.

(Note: Code is untested, but should help you get started)