Как создать поле ввода в стиле Facebook в GWT

Question

Как бы вы построили поле ввода в стиле Facebook в GWT?

На следующем рисунке показано, что я имею в виду под полем ввода в стиле Facebook:

При наборе спискалюди отображаются, когда человек выбран, он будет отображаться внутри текстового поля.

Answer 1

Картинка в вопросе - это скриншот следующего кода и стиля.

public class PeopleBox extends HorizontalPanel implements
    ValueChangeHandler<String>, KeyDownHandler {
    SuggestBox inputBox;

    public PeopleBox() {
        inputBox = new SuggestBox(getOracle());

        this.setStylePrimaryName("peoplebox");
        /*
         * Put focus on the SuggestBox, if the user doesn't hit it (The whole
         * HorizontalPanel is styled in a way to make it look like a textbox,
         * but the actual textbox is smaller than the HorizontalPanel, so you
         * need something like this to keep the impression of the whole panel
         * being a textbox)
         */
        this.addDomHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                inputBox.getTextBox().setFocus(true);
            }
        }, ClickEvent.getType());

        // Display a message in the SuggestBox instead of using a Label to
        // display one. The events are used to delete and create this message
        inputBox.getTextBox().addBlurHandler(new BlurHandler() {
            public void onBlur(BlurEvent event) {
                if (inputBox.getTextBox().getValue().equals(""))
                    inputBox.getTextBox().setValue("add person...");
            }
        });

        inputBox.getTextBox().addFocusHandler(new FocusHandler() {
            public void onFocus(FocusEvent event) {
                if (inputBox.getTextBox().getValue().equals("add person..."))
                    inputBox.getTextBox().setValue("");
            }
        });

        inputBox.addValueChangeHandler(this);
        inputBox.getTextBox().addKeyDownHandler(this);

        inputBox.setStylePrimaryName("peoplebox-input");
        inputBox.getTextBox().setValue("add person...");

        this.add(inputBox);
    }
    //displays the selected person
    public void onValueChange(ValueChangeEvent<String> event) {
        this.insert(new PeopleDisplay(event.getValue()),
                this.getWidgetCount() - 1);
        this.inputBox.setValue("");

    }
    //deletes the person on the left side of the SuggestBox, if you hit backspace
    public void onKeyDown(KeyDownEvent event) {
        if (event.getNativeKeyCode() == KeyCodes.KEY_BACKSPACE
                && this.inputBox.getValue().equals("")
                && this.getWidgetCount() > 1) {
            this.remove(this.getWidgetCount() - 2);
        }
    }

    public MultiWordSuggestOracle getOracle() {
        MultiWordSuggestOracle oracle = new MultiWordSuggestOracle();
        oracle.add("Mark Zuckerberg");
        oracle.add("Tyler Winklevoss");
    oracle.add("Cameron Winklevoss");
        return oracle;
    }

    private class PeopleDisplay extends Grid implements ClickHandler {

        public PeopleDisplay(String name) {
        super(1, 2);
            this.setStylePrimaryName("peoplebox-peopledisplay");
            this.addClickHandler(this);
            this.setText(0, 0, name);
            this.setText(0, 1, "X");
     }

        public void onClick(ClickEvent event) {
            if (this.getCellForEvent(event).getCellIndex() == 1)
                this.setVisible(false);
        }
    }
}

css (я не использую GWT-тему и не могу найти стиль для списка людей, поэтому я просто использовал те же имена, что и GWT по умолчанию):

.peoplebox {
 background:white;
 height:37px;
 padding:0px 4px 0px 4px;
 border: 1px solid #060b15;
 border-top-left-radius: 5px 5px;
 border-top-right-radius: 5px 5px;
 border-bottom-left-radius: 5px 5px;
 border-bottom-right-radius: 5px 5px;
 margin-right:10px;
 cursor:text;
}

.peoplebox-input {
border:0px;
outline:none;
padding:6px;
font-size:inherit;
}
.peoplebox-peopledisplay {
background:#060b15;
color:#f1f1f1;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
padding:0xp 2px 0px 2px;
height:16px;
margin-right:5px;
margin-top:5px;
}
.gwt-SuggestBoxPopup {
background:white;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border: 1px solid #060b15;
}
.gwt-SuggestBoxPopup .item {

}
.gwt-SuggestBoxPopup .item-selected {
background:#060b15;
 color:#f1f1f1; 
}