martes, 5 de agosto de 2014

Refrescar componente con PartialSubmit y PartialTriggers

Descripción: En este artículo se va a explicar cómo realizar el refresco de un componente sin necesidad de refrescar toda la página, con el atributo partialSubmit y PartialTriggers.

Nota: Puedes descargar el ejemplo para hacer tus propias pruebas.Dentro del proyecto "PaginaBuscador.jspx" Descargar Ejemplo

Para realizar este refresco ADF incluye en sus componente AJAX que permite enviar datos al servidor y recibirlos sin la necesidad de refrescar una pantalla completa.

Utilizaremos para explicarlo un ejemplo en el que tenemos, una tabla (aftable), en el que actualmente disponemos un botón que realiza un refresco.






En este proceso de uso de partialTriggers, se hace referencia al atributo id del componente que genera el cambio.
Por ejemplo, queremos que cuando se seleccione un elemento en la tabla, se cambia el valor que tiene el OutputText, y muestre el valor de la columna LastName de la fila seleccionada.

En los siguientes pasos vamos a ir viendo los elementos que se van nombrando:
Ponemos en el campo Id de la tabla (aftable) el valor idTable. Así cuando queramos referirnos a la tabla como "disparador" del cambio, utilizaremos el Id que le hemos dado.



Si queremos también que el botón seleccionar pueda ser "disparador", haríamos lo mismo, pondríamos un valor en el atributo Id.
Nota: En 11g, no es necesario este paso, porque ya pone un valor por defecto a este atributo. De hecho todos los elementos de la página suelen tener un id asignado. Se recomienda eso sí, personalizarlo para que sea más fácil programarlo.


En esta imagen, hemos indicado que el botonSeleccionar sea el disparador del outputText. Si queremos que sea la tabla, podemos añadir el id de la tabla.
Nota: partialTriggers permite más de un disparador.

Al botón Seleccionar le podemos indicar que cuando sea pulsado, no haga un submit en el que refresque toda la página sino que lo haga parcialmente. Para ello usamos el atributo partialSubmit.



Con esto, el botón que se encuentra en la tabla, actualizaría el OutputText con el valor que tuviera la tabla en ese momento.

Si queremos que el cambio se haga sin necesidad de pulsar el botón, sino simplemente con la selección de un elemento de la tabla, utilizaremos el atributo autosubmit, que se encuentra dentro del facet Selection, en el elemento af:tableSelectOne.







No olvidar, que si hacemos esto del autosubmit, debemos indicar en el campo partialTriggers del botón, el valor "idTable", si no, no hará caso al cambio que se ha producido en la tabla.

No hay comentarios:

Publicar un comentario