![5px]( "5px")
本文介绍了如何在GWT中构建Facebook风格的输入框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 下面的图片展示了我的意思是Facebook风格的输入框： 当输入人员列表时显示，当一个人被选中时，它将显示在文本框内。解决方案问题中的图片是以下代码和样式。 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风格的输入框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 09-13 15:54