« Terug

Trabajando con JavaScript con JSF+RichFaces: jsFunction

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:

  • reRender.
  • process.
  • ...

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.

 

Opmerkingen
Link naar je weblog URL:

comments powered by Disqus