Cuando trabajamos con JSF tenemos que tener cuidado con los ids que asignamos a cada componente, dado que estos deben ser únicos.

JSF y otras librerías, para prevenir problemas en este sentido, siguen las siguientes reglas:

1. Cuando no se asigna un id de manera explícita a un elemento se le genera un client id único.
2. A todos los client ids (autogenerados o fijos) le antepone los client ids de los componentes padres, por ejemplo un inputText que se encuentre dentro de un form tendría un client id de la siguiente forma: nombreForm:nombreInputText.
3. Componentes como a4j:repeat van incluso más alla,  generando client ids  con esta estructura nombreForm:nombreRepeat:indice:componente.

Antes de la última versión de rich faces (http://www.jboss.org/jbossrichfaces/downloads/) teníamos el problema de tener que estar pendientes de los client id, por ejemplo para obtener un elemento teníamos que escribir algo como esto:

document.getElementById(“formName:elementName”)

Sin embargo rich proporciona ahora 4 métodos muy interesantes para obtener referencias a los componentes desde javascript:

• rich:clientId(‘id’) retorna el client id compuesto del componente JSF
• rich:element(‘id’) es una contracción de document.getElementById(#{rich:clientId(‘id’)})
• rich:component(‘id’) es una contracción de #{rich:clientId(‘id’)}.component
• rich:findComponent(‘id’) devuelve una instancia de UIComponent tomando el id como parámetro.

Veamos un ejemplo:

<script>
function getLinkAndDoClick() {
#{rich:element('linkid')} .onclick();
}
</script>
 
<h:form>
<a4j:commandLink id=”linkid” value=”Haz click aqui” action=”#{somebean.someAction()}”/>
</h:form>

De esta manera se puede obtener referencias a los componentes JSF sin tener que estar preocupándose cómo sus client id son generados.

No related posts.

Autor: Giancarlo Corzo

Socio y Gerente de desarrollo de nuevos productos en Antartec. Con experiencia en desarrollo de interfaces para Web, Móvil (en especial para iPhone). Me desempeño además como Profesor en la universidad PUCP asesorando a los futuros tesistas.

• Entrada Anterior: Performance: Uso de @Create
• Siguiente Entrada: Maven en detalle – Parte 1