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; 
}