JSF Facelets + Senna

Estuve revisando la biblioteca "Senna" que permite cargar parte de una página sin necesidad de cargar toda la página, y se me ocurrió combinarlo con JSF Facelets. Así que en este post veremos cómo se hace

La idea es la siguiente: tenemos una página usando plantillas (con facelets) y cada vez que hacemos clic en una opción de menú, se carga tooooda la página incluyendo las mismas opciones y las mismas plantillas, para ver solo cambiar una parte.

Por una parte está bien, ya que al hacer clic en el enlace, la dirección que aparece en el navegador cambia a esa página, y así podemos compartir ese enlace a los amigos. Pero por otro lado está mal, porque tendría que cargar todo el contenido cada vez que navegamos de una opción a otra. Si usamos AJAX, (en conjunción con - por ejemplo - jquery para obtener el contenido de la otra página usando el comando .get ) nos resolvería la primera parte del problema, pero no nos resuelve el cambio de dirección en el navegador.

Así que para esto, hagamos un ejemplo con facelets (que es la manera de generar plantillas en JSF). Para ver un ejemplo de cómo usar los facelets, revisemos el post anterior Tutorial JSF 2.2: Facelets.

Aquí tenemos la plantilla, común y corriente:

Aunque aquí he incluido las llamadas a las bibliotecas de Senna (opcional en este caso) no afecta al funcionamiento de la página.

Actualización: En Firefox funciona sin problema ejecutar el sennajs desde su código fuente en github, pero desde Google Chrome y MSIE no, por tanto, hay que bajar la biblioteca y colocarlo en el proyecto.

Y aquí un ejemplo de una página usando la plantilla



Es más, podemos usar formularios



Con esto podríamos hacer una prueba de ejecución y - con ayuda del Firebug o cualquier monitoreador de llamadas de HTTP en el navegador (vamos, con la tecla F11) - podemos ver qué pasa cuando hacemos clic en cada opción superior:

Primera página:

Clic en la página 2:

Como podemos ver, siempre carga toda la página html, y eso que estamos usando muy poco contenido, pero técnicamente vuelve a cargar TODO el html, todos los tags, todas las cabeceras, etc. Y solo queremos que cargue la parte del contenido principal... y que cada vez que cargue, la dirección de la página en el navegador cambie. Aquí vamos a crear un archivo javascript para que nos haga el milagro.


Y esto lo agregamos en nuestra plantilla, que sea al final de la página:

Solo mirar la línea 37 para incluir el arhivo. js, y nada más!

Ahora probemos:
Página inicial... carga como debería ser:

Clic en la tercera página:

oooh!!! cargó solo el contenido y la dirección de la web cambió!!

y ahora, el formulario...(página 2)

... y cargó!! Y eso que no han visto ejecutando el formulario.

Vamos, aquí sí se debe cargar todo el contenido, porque es un submit de JSF, a menos que hagan un cambio usando <f:ajax />

Y si nos aburre declarar página por página en el .js que se debe aplicar el Senna, entonces podemos usar patrones.

Y si no quieres que todos los enlaces sean susceptibles al Senna, entonces podemos anularlos de la siguiente manera: agregamos una clase cualquiera al tag que queremos anular (por ejemplo los que tengan el class no-senna... línea 24)...


... y le decimos al Senna que no los considere usando una búsqueda de css.

Bibliografía

Para más información, revisar la documentación misma de Senna http://sennajs.com/docs/. Aquí solo di algunos alcances.

Código fuente

Como siempre, aquí paso el código fuente...

https://bitbucket.org/apuntesdejava/tutorial-jsf/src/tip/jsf-senna-app/

... para que lo exploren o el proyecto entero para que lo bajen

https://java.net/projects/apuntes/downloads/download/web/jsf-senna-app.tar.gz

Si te gustó, hazlo saber.. y si crees que es útil, compártelo. Es gratis