如何在GWT中構建Facebook式輸入框

Question

如何在GWT中構建Facebook式輸入框？

下圖爲我的意思被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主題和coulnd't找到一種方法，風格人的名單，所以我只是用相同名稱的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; 
}