How to create a Facebook style input box in GWT

Question

How would you build a Facebook-style input box in GWT?

The following figure shows what I mean by a Facebook-style input box:

When you enter a list of people is displayed, when a person is selected, it will be displayed inside the text box.

Answer 1

The image in question is a screenshot of the following code and style.

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 (I do not use the GWT theme and cannot find a way to style the list of people, so I used the same names as the default 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; }