Artículos Etiquetados ‘RichFaces’

Como funciona a4j:jsFunction

19 Octubre 2010

Volviendo a los temas de JSF y Java, hoy día quisiera escribir sobre a4j (Ajax4JSF), una librería que fue integrada al framework Seam y que permite darle una naturaleza AJAX a los componentes JSF tradicionales. En este artículo centraré mi atención en un componente bastante útil denominado jsFunction.

jsFunction es un componente de soporte dentro de la librería y que es usado para poder hacer llamadas asíncronas al servidor desde cualquier código JavaScript que estemos escribiendo. Para tener un punto de referencia podemos decir que se comporta de una manera similar a la etiqueta a4j:commandButton, dado que permite realizar llamadas AJAX al servidor pero de una manera asíncrona.

Veamos un ejemplo:

<script type="text/javascript">
     function validateAndSave() {
       if (validate()) {
          save('all');
       }
     }
</script>
<body>
  <h:form>
    <a4j:jsFunction name="save" action="#{myBean.save()}" reRender="listPanel">
        <a4j:actionParam name="param1" assignTo="#{myBean.aParameter}"/>
    </a4j:jsFunction>
    <a4j:outputPanel id="listPanel">
       ....
    </a4j:outputPanel>
  </h:form>
</body>

Cuando se usa a4j:jsFunction es posible iniciar la petición AJAX desde cualquier JavaScript y hacer una actualización parcial de la página o utilizar la información procesada en el JavaScript que se ejecuta de retorno.

Los siguientes escenarios son ideales para usar el componente:

  • Actualizar registros del lado de la capa Modelo después de cerrar una ventana emergente (popup).
  • Realizar una operación de guardado de información de manera asíncrona.
  • Actualizar una variable que será utilizada luego por otro método (ojo con la llamada asíncrona).

Pueden ver un ejemplo completo en la página de demo de RichFaces. (live demo)

Uso de RichFaces tabPanel con JavaScript

7 Abril 2009

En esta ocasión trataré sobre el uso del componente tabPanel de RichFaces usándolo con funciones JavaScript para dos casos en particular:

  • Hacer el cambio de tabs.
  • Verificar si un tab está activo.

El tabPanel presenta 3 maneras para realizar el cambio de un tab a otro mediante el atributo switchType:

  • client (se carga la información de todos los tabs).
  • ajax (se carga la información mediante ajax, cada vez que se entra al tab).
  • server (se carga la información cada vez que se entra al tab, actualizando toda la página).

» Leer más: Uso de RichFaces tabPanel con JavaScript

Carga dinámica de combos usando JSF y richfaces

28 Enero 2009

La carga dinámica de un combo basado en la selección de un combo previo es un problema relativamente clásico y que ha sido abordado de distintas maneras a lo largo del tiempo.

En este post queremos mostrarles como es que nosotros abordamos el tema usando componentes JSF y de Richfaces para resolver el problema.

» Leer más: Carga dinámica de combos usando JSF y richfaces