Introducción
El framework RichFaces nos permite manejar JavaScript dentro de nuestras páginas de una forma muy elegante. Una de las alternativas más utilizadas es el componente a4j:jsFunction nos permite hacerlo de una forma sencilla.
El componente a4j:jsFunction
Introducción
Permite crear funciones JavaScript de una forma algo especial.
IMPORTANTE: Debe definirse SIEMPRE dentro de un formulario.
Su sintaxis se muestra a continuación:
<a4j:jsFunction
name=""
action="">
...
</a4j:jsFunction>
Sus atributos más importantes son name, action y render.
Atributo name
Permite definir el nombre de la función JavaScript que posteriormente podrá ser ejecutada desde cualquier componente dentro de alguno de sus atributos de tipo evento. Por ejemplo:
<a4j:form>
<h:inputText value="#{js.texto2}"></h:inputText>
...
<a4j:jsFunction name="metodo1" ...>
</a4j:jsFunction>
</a4j:form>
<span onclick="metodo1();">accion</span>
Al hacer click sobre el span accion se ejecuta la función JavaScript definida mediante el componente js:Function dentro de un formulario.
Atributo action
Permite desencadenar una acción en servidor mediante la función JavaScript. El lenguaje de expresión permite identificar el nombre del bean y el nombre del método a ejecutar. Por ejemplo:
<a4j:form>
<h:inputText value="#{js.texto2}"></h:inputText>
<a4j:jsFunction name="metodo1" action="#{js.accion}">
</a4j:jsFunction>
</a4j:form>
...
public class BeanJS {
...
public String accion(){
...
}
De tal forma que, desde cualquier punto de la página se podrá activar el envío de un determinado formulario sin más que, por ejemplo:
...
<span onclick="metodo1();">accion</span>
...
Paso de parámetros
Podemos utilizar funciones JavaScript que reciben parámetros:
<span onmouseover="metodo1('valor1');">Prueba</span>
El componente a4j:actionparam permite definir parámetros y asignarlos donde sea necesario:
<a4j:form>
<a4j:jsFunction name="metodo1" action="#{js.accion}">
<a4j:actionparam name="param1" assignTo="#{js.texto}"/>
</a4j:jsFunction>
</a4j:form>
Renderización parcial
La función JavaScript, además de desencadenar acciones, es capaz de re-renderizar parcialmente la respuesta generada posteriormente, como muchos otros componentes.
Los atributos que podemos utilizar son, como en cualquier otro componente:
Ejemplo con el atributo render:
<a4j:form>
<a4j:jsFunction name="metodo1" action="#{js.accion}"
render=”campo01”>
<a4j:actionparam name="param1" assignTo="#
{js.dato1}"/>
</a4j:jsFunction>
</a4j:form>
<div>
<h:outputText id="campo01" value="#{js.dato1}" />
</div>
Conclusión
El programador debe familiarizarse con el uso de este componente, dado que muchas funcionalidades JavaScript podrán resolverse gracias a él.