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.