如何在 GWT 中构建 Facebook 风格的输入框 [英] How to build a Facebook-style input box in GWT

问题描述

您将如何在 GWT 中构建 Facebook 风格的输入框?

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

下图显示了我所说的Facebook式输入框的意思:

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

css(我没有使用 GWT 主题，也找不到设置人员列表样式的方法，所以我只使用了默认情况下与 GWT 相同的名称):

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屋！