如何在GWT中构建Facebook风格的输入框 [英] How to build a Facebook-style input box in GWT
本文介绍了如何在GWT中构建Facebook风格的输入框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
下面的图片展示了我的意思是Facebook风格的输入框：
< img src =https://i.stack.imgur.com/h2g04.jpgalt =alt text>
当输入人员列表时显示，当一个人被选中时，它将显示在文本框内。
解决方案
问题中的图片是以下代码和样式。
public class PeopleBox extends HorizontalPanel implements
ValueChangeHandler< String>，KeyDownHandler {
SuggestBox inputBox;
public PeopleBox（）{
inputBox = new SuggestBox（getOracle（））;
this.setStylePrimaryName（peoplebox）;
/ *
*将焦点放在SuggestBox上，如果用户没有打它（整个
* HorizontalPanel的样式使它看起来像一个文本框，
*但实际的文本框比HorizontalPanel小，所以你
*需要这样的东西来保持整个面板的印象
*是一个文本框）
* /
this.addDomHandler（new ClickHandler（）{
public void onClick（ClickEvent event）{
inputBox.getTextBox（）。setFocus（true）;
}
}，ClickEvent.getType （））;
//在SuggestBox中显示一条消息，而不是使用Label到
//显示一条消息。这些事件用于删除和创建此消息
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）;
}
//显示所选人员
public void onValueChange（ValueChangeEvent< String> event）{
this.insert（new PeopleDisplay（event.getValue（）），
this.getWidgetCount（） - 1）;
this.inputBox.setValue（）;
$ b $ //删除SuggestBox左边的人，如果你点击退格键
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;
$ b $ private class PeopleDisplay extends Grid implements ClickHandler {
$ b $ 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 ）;
code
$ b css（I don' t使用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;
概述：无;
padding：6px;
font-size：inherit;
}
.peoplebox-peopledisplay {
background：＃060b15;
颜色：＃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;
颜色：＃f1f1f1;
}
How would you build a Facebook-style input box in GWT?
The following picture shows what I mean by Facebook-style input box:
When typing a list of people is displayed, when a person is selected it will be displayed inside of the textbox.
解决方案 The picture in the 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);
}
}
}
The css(I don't use a GWT-theme and coulnd't find a way to style the list of people, so I just used the same names as GWT does by default):
.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;
}
这篇关于如何在GWT中构建Facebook风格的输入框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
