PrimeFaces (JSF2). Cómo detectar el fin de carga de la página con JavaScript

Primefaces  es una librería que implementa JSF2, de modo que facilita la creación de aplicaciones Web en un entorno J2EE a través del uso de componentes prefabricados como menús, botones, tablas de datos, formularios, etcétera. Puedes encontrar demostraciones de su potencial y un catálogo de sus componentes en este enlace: http://www.primefaces.org/showcase/

Aunque se use Primefaces, el resultado que llega al navegador siempre es el mismo: un conjunto de etiquetas HTML junto con complejas implementaciones en JavaScript que se generan automáticamente a partir del código Java y de componentes en XHTML. Como todo sistema que abstrae al programador de los niveles inferiores, siempre es complicado realizar algunas operaciones específicas que se salen de lo establecido para la tecnología.

Tal es el caso de la detección de cuándo se ha terminado de cargar la página y el usuario tiene toda la información para operar. Habría que distinguir dos fases de forma genérica:

  • Carga de la estructura HTML de la página
  • Carga de las llamadas asíncronas (AJAX) para la obtención de datos.

En muchas ocasiones JSF2 (y por ende Primefaces) utilizan AJAX para obtener los datos del servidor, lo que implica que la página puede haber cargado su estructura y scripts, pero éstos continúan con su ejecución. El resultado es que el usuario no puede utilizar la página hasta un poco después de que el navegador le haya notificado que ha acabado: faltan tablas por completar, combos, datos dinámicos, etcétera.

Sería bueno por lo tanto contar con un mecanismo que nos permitiese realizar alguna acción cuando se ha terminado esa carga de datos. Se puede usar en algunas ocasiones cuando los que nos ofrece PrimeFaces no es suficiente: por ejemplo bloquear la pantalla con un fondo e icono de carga hasta que no esté plenamente operativa en la primera carga.

Como PrimeFaces utiliza jQuery para operar, simplemente aprovecharemos la posibilidad que nos brinda esta librería de Javascript: se enlazan un document.ready dentro de otro, de modo que el segundo se ejecutará cuando haya acabado el primero, que es el que contiene todas las operaciones de PrimeFaces

$(document).ready(function(){
    $(document).ready(function(){
        //Código Javascript que queramos ejecutar después de Primefaces
    });
});
Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s