Jak dodać element zastępczy do pola wprowadzania tekstu GWT

Question

Czy znasz wtyczkę wejściową tekstu Google Web Toolkit, która wyświetla komunikat w polu, gdy jest pusta?

E.g. pole z nazwą, które brzmi: "wpisz swoje imię", a gdy użytkownik zacznie pisać, etykieta zostanie usunięta, aby wyświetlić wpisany tekst.

Jak byś się o tym dowiedział?

Daniel

Answer 1

To działa na mnie w textarea:

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

myślę, że jest to cecha HTML5.

Answer 2

Dzięki takiemu rozwiązaniu można określić dodatkowe właściwości w wiążącej xml:

Rozwiązanie:

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... " /> 

Wynik html:

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

Answer 3

Chciałbym użyć ram interfejsu użytkownika, który robi to wszystko dla ciebie (i więcej).

Używam GWT-Bootstrap 3 we wszystkich moich projektach i jestem bardziej niż zadowolony o tym: https://github.com/gwtbootstrap3/gwtbootstrap3

Jeśli nie wiesz bootstrap to najlepiej, aby szybko przejść przez książce bootstrap3 Więc teraz jak system Grid i inne rzeczy działają. Niż masz dobry start, gdy używasz gwt-bootstrap 3.

Kolejny, na który możesz spojrzeć, to https://github.com/GwtMaterialDesign/gwt-material, który jest opakowaniem dla materiałów Google. Nie wykorzystałem go sam, ale uważam, że nie jest to zły wybór.