martes, 29 de mayo de 2012

Especificar el ID de un radio button en GWT

En el caso de algunos elementos GWT el id se puede especificar simplemente con la operación setId de Element. Por ejemplo, para un botón el id se puede establecer así: 


this.buttonSetEnvironment.getElement().setId("btnEstablecerAmbiente");


Sin embargo, otros componentes como los radio button o los check boxes requieren conocer su estructura GWT para asignarles un id. Esto implica que asignar el id a un radio button no funciona con una sentencia como: 


radioButton.getElement().setId("miRadioButton");


Cuando se genera el código HTML el id queda asociado con un elemento span que contiene a nuestro radio button: 



<span id="miRadioButton" class="gwt-RadioButton tns-CheckBox">
  <input id="gwt-uid-1" type="radio" name="Grupo" value="on" tabindex="0">
  <label for="gwt-uid-1">CENT2</label>
</span>

Como se puede apreciar en el código anterior, el span agrupa al radio button y su respectivo label. Esto implica que los objetos RadioButton de GWT están compuestos por dos hijos (cuando se genera su HTML): un input y un label.  Sabiendo esto, podemos utilizar la clase DOM para acceder a la estructura del radio button y asignar el id al elemento que deseamos: 

private void setId(RadioButton radioButton, String id){
  Element radoButton_input = DOM.getChild(radioButton.getElement(),0);
  DOM.setElementAttribute(radoButton_input, "id", id);
}

De igual forma, si quisiéramos asignar un id al label, accederíamos al child 1.


Dicen algo muy interesante para el label. Su asociación con el button se especifica diferente en IE que para los demás navegadores: 

DOM.setElementAttribute(e_label, "htmlFor", newID); // For IE 
DOM.setElementAttribute(e_label, "for", newID); // For other 


No hay comentarios:

Publicar un comentario