Как добавить местозаполнитель в поле ввода текста GWT

Знает ли какой-либо виджет ввода текста Google Web Toolkit, который будет отображать сообщение внутри поля, когда он пуст?

например. поле имени, которое будет указывать: "введите свое имя", и когда пользователь начнет печатать, метка удаляется, чтобы отобразить введенный текст.

Как бы вы это сделали?

Daniel

Ответ 1

Это работает для меня в текстовом поле:

yourInputField.getElement().setPropertyString("placeholder", "enter your first name");

Я думаю, что это функция HTML5.

Ответ 2

С помощью этого решения вы можете определить любые дополнительные свойства в binder xml:

Решение:

public class MorePropertiesTextArea extends TextArea {
    private String moreProperties;

    public MorePropertiesTextArea() {}

    public void setMoreProperties(String moreProperties) {
        for (Entry<String, String> entry : parse(moreProperties).entrySet()) {
            getElement().setAttribute(entry.getKey(), entry.getValue());
        }
        this.moreProperties = moreProperties;
    }


    public String getMoreProperties() {
        return moreProperties;
    }

    private Map<String, String> parse(String moreProperties) {
        String[] pairStrings = moreProperties.split(";");
        HashMap<String, String> map = new HashMap<>();
        for (String pairString : pairStrings) {
            String[] pair = pairString.split("=");
            if(pair.length != 2)
                throw new IllegalArgumentException("at " + pair + " while parsing " + moreProperties + 
                        ". Use format like: 'spellcheck=false; placeholder=Write something here...'");
            map.put(pair[0].trim(), pair[1]);
        }
        return map;
    }

}

UI Binder xml:

<p2:MultiLineTextArea ui:field="taMultiLine" styleName="form-control muliLine"  
            moreProperties="spellcheck=false; placeholder=Write something here... " />

Результат html:

<textarea class="form-control muliLine" spellcheck="false" placeholder="Write something here..."></textarea>

Ответ 3

Я бы пошел с интерфейсом пользовательского интерфейса, который делает все это для вас (и многое другое).

Я использую GWT-Bootstrap 3 во всех своих проектах и более чем счастлив: https://github.com/gwtbootstrap3/gwtbootstrap3

Если вы не знаете bootstrap, лучше всего быстро пройти книгу bootstrap3, чтобы теперь вы работали с сеткой и другими материалами. Чем у вас есть головной убор при использовании gwt-bootstrap 3.

Другой, который вы можете посмотреть, это https://github.com/GwtMaterialDesign/gwt-material, который является оберткой для материала Google. Не использовал его сам, но я думаю, что это не плохой выбор.