JSF link, commandLink y outputLink

JavaServer Faces nos ofrece una serie de componentes para implementar enlaces en las páginas de nuestras aplicaciones, se trata de los componentes JSF h:link, h:outputLink y h:commandLink. Los tres componentes tienen en común que, una vez procesada la página, se traducen en una etiqueta de HTML, pero cada uno cuenta con características que lo hacen aplicables en situaciones determinadas.

JSF link

JSF permite agregar enlaces a nuestras vistas mediante la utilización de la etiqueta h:link. Esta etiqueta usa el valor del atributo value para generar el texto del enlace, y el valor del atributo outcome para generar la URL, que será resuelta mediante las reglas de navegación. La URL resultante se asignará al atributo href del enlace generado. Luego de ser procesada, se renderizará como un elemento <a href> de HTML.

El componente h:link es útil para crear los enlaces internos de nuestra aplicación. El siguiente código:

<h:link value="Link" outcome="result" />

será renderizado como sigue luego de ser procesado:

<a href="/jsf-link/pages/result.jsf">Link</a>

JSF Link con parámetros

El siguiente código generará un hipervínculo con parámetros:

<h:link value="Link con parametros" outcome="result-param">
	<f:param name="nombre" value="Juan"></f:param>
</h:link>

El código generado es el siguiente:

<a href="/jsf-link/pages/result-param.jsf?nombre=Juan">Link con parametros</a>

JSF Link con imagen

El siguiente código generará un hipervínculo con una imagen:

<h:link outcome="result">
	<h:graphicImage library="images" name="jcodepoint_logo.jpg" />
</h:link>

El código generado es el siguiente:

<a href="/jsf-link/pages/result.jsf"><img src="/jsf-link/javax.faces.resource/jcodepoint_logo.jpg.jsf?ln=images"></a>

JSF commandLink

La etiqueta h:commandLink de JSF genera un hipervínculo que se comporta como un botón submit al hacer click sobre él. En el hipervínculo generado se habrá agregado el evento onclick para realizar el submit del formulario.

JSF CommandLink con Action

Con el atributo action indicamos mediante una expresión el método del correspondiente Managed Bean a ser ejecutado al hacer click sobre el vínculo, visualizando a continuación la vista retornada por este método. Si se omite este atributo simplemente se recargará la vista actual.

<h:form id="customerForm">
	<h:commandLink id="simpleCommandLink" action="#{exampleBean.goToResultPage}" value="CommandLink" />
</h:form>

El código generado es el siguiente:

<a id="customerForm:simpleCommandLink" href="#" onclick="mojarra.jsfcljs(document.getElementById('customerForm'),{'customerForm:simpleCommandLink':'customerForm:simpleCommandLink'},'');return false">CommandLink</a>

JSF CommandLink con Action y parámetro

El siguiente código generará un hipervínculo con parámetros:

<h:form id="customerForm">
	<h:commandLink id="commandLinkWithParam" action="#{exampleBean.goToResultParam}" value="CommandLink con Parámetros" >
		<f:param name="nombre" value="jcodepoint" />
	</h:commandLink>
</h:form>

El código generado es el siguiente:

<a id="customerForm:commandLinkWithParam" href="#" onclick="mojarra.jsfcljs(document.getElementById('customerForm'),{'customerForm:commandLinkWithParam':'customerForm:commandLinkWithParam','nombre':'jcodepoint'},'');return false">CommandLink con Parámetros</a>

CommandLink con imagen

El siguiente código generará un hipervínculo con una imagen:

<h:form id="customerForm">
	<h:commandLink id="commandLinkWithImage" action="#{exampleBean.goToResultPage}">
		<h:graphicImage library="images" name="jcodepoint_logo.jpg" />
	</h:commandLink>
</h:form>

El código generado es el siguiente:

<a id="customerForm:commandLinkWithImage" href="#" onclick="mojarra.jsfcljs(document.getElementById('customerForm'),{'customerForm:commandLinkWithImage':'customerForm:commandLinkWithImage'},'');return false"><img src="/jsf-command-link/javax.faces.resource/jcodepoint_logo.jpg.jsf?ln=images"></a>

JSF outputLink

La etiqueta h:outputLink de JSF genera un hipervínculo cuyo atributo href será generado a partir del atributo value de h:outputLink. Si se omite el atributo value, el href resultante hará referencia a la página actual. El texto del enlace resultante se genera con el contenido del componente.

Dado que el h:outputLink tiene asignada la URL vinculada directamente en su atributo value, este componente no puede usar con las reglas de navegación, pero es ideal para usar enlaces directos y/o enlaces a URLs externas.

<h:outputLink value="pages/result.xhtml">Resultado</h:outputLink>

El código generado es el siguiente:

<a href="pages/result.xhtml">Resultado</a>

JSF OutputLink con parámetros

<h:outputLink value="pages/result-param.xhtml">
	<h:outputText value="Resultado con parámetros" />
	<f:param name="nombre" value="jcodepoint" />
</h:outputLink>

El código generado es el siguiente:

<a href="pages/result-param.xhtml?nombre=jcodepoint">Resultado con parámetros</a>

JSF OutputLink con imagen

<h:outputLink value="pages/result.xhtml">
	<h:graphicImage library="images" name="jcodepoint_logo.jpg" />
</h:outputLink>

Conclusión

En este artículo vimos en detalle los componentes que nos ofrece JavaServer Faces para crear enlaces en nuestras páginas. En resumen:

h:link hace uso del outcome del caso de navegación y genera una etiqueta de HTML asignando al atributo href la URL correspondiente.

h:commandLink ejecuta un POST del formulario mediante Javascript por lo que este componente debe estar ubicado dentro de un h:form.

h:outputLink: genera una etiqueta <a> de HTML con una URL completa que ejecuta una solicitud GET. La URL no es procesada por el framework. Este componente es indicado para enlaces externos.

Te puede interesar