Cómo agregar un marcador de posición a un campo de entrada de texto GWT

Question

¿Conoce algún widget de entrada de texto de Google Web Toolkit que muestre un mensaje dentro del campo cuando está vacío?

E.g. un campo de primer nombre que diga: 'ingrese su nombre' y cuando el usuario empiece a escribir la etiqueta se eliminará para mostrar el texto escrito.

¿Qué le parece?

Daniel

Answer 1

Esto hace el trabajo por mí en un área de texto:

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

Creo que es una característica de HTML5.

Answer 2

Con esta solución se pueden definir las propiedades adicionales en carpeta xml:

La solución:

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

} 

interfaz de usuario Carpeta xml:

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

Resultado html:

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

Answer 3

Me gustaría ir con un marco de interfaz de usuario que hace todo esto para usted (y más).

estoy usando GWT-Bootstrap 3 en todos mis proyectos y estoy más que feliz por ello: https://github.com/gwtbootstrap3/gwtbootstrap3

Si usted no sabe el arranque remoto que lo mejor es ir rápidamente a través de un libro de bootstrap3 por lo que ahora cómo el sistema Grid y otras cosas funcionan. Que tiene cabecera al utilizar gwt-bootstrap 3.

Otro que puede ver es https://github.com/GwtMaterialDesign/gwt-material que es un contenedor para Google Material. No lo uso yo mismo, pero creo que no es una mala elección.