Bien sabido es que la interfaz de Liferay 7 fue transformada a una Single Page Application ó SPA -por sus siglas en inglés-.
Los SPA son aplicaciones web que no precisamente hacen un redireccionamiento entre las páginas que contenga la aplicación, ya que la aplicación se carga una sola vez. Esto significa que la URL de nuestra aplicación no va cambiar de manera natural, eso también es manipulado manualmente (usualmente con un módulo de routing). Esto significa que si tu quieres ejecutar una bloque de código en común para todas las páginas, y dicho código lo añades en las configuraciones avanzadas globales, ya sea de public pages ó private pages, este código sólo será ejecutado la primera vez en que llegas a la aplicación.
Al darte cuenta de esto, es muy probable que pienses en poner este bloque de código en las configuraciones avanzadas de cada una de las páginas en donde deseas ejecutar ese código. Pero ¿qué pasaría si tuvieras un portal con diez páginas, y además manejas navegación de segundo nivel? Te darás cuenta de que esto no es mantenible, ya que cada vez que quieras modificar por alguna razón ese bloque de código, tendrás que hacerlo en todas las páginas donde agregaste ese código.
En las SPAs la manera de navegar entre páginas se le conoce como routing o enrutamiento.
Algunos frameworks como Angular, Ember o Meteor han adoptado los principios de SPA, así que si ya has utilizado alguno de ellos, esto te debe ser familiar. Y bueno, Liferay 7 no es la excepción, ya que también tiene su manera de navegar entre páginas.
Entonces, volviendo a nuestro problema inicial de cómo ejecutar un bloque de código en varias páginas sin tener que forzar un redireccionamiento y cargado de página por completo, en Liferay tenemos un objeto expuesto en el browser.
Este objeto tiene varias propiedades muy útiles, dentro de las cuales está nuestra SPA. Ésta propiedad nos ofrece otras propiedades donde podemos saber el tiempo de expiración de la cache de Liferay, notificaciones de usuario, paths que han sido excluidos, así como una propiedad llamada app.
La propiedad app también tiene otras propiedades, pero para nuestro caso, nos importa la propiedad de events_, que como el nombre lo dice, cuenta con eventos que nos dicen en qué momento se ejecutan las siguientes acciones:
- Comenzar a navegar entre las páginas
- Antes de navegar
- Al terminar de navegar
Con estos eventos, es suficiente para ejecutar nuestro código de manera exitosa al cambiar entre la diferentes páginas en nuestro SPA sin tener que recargar la(s) páginas.
Si has usado jQuery y sus eventos, esto te será familiar:
Liferay.SPA.app.on("endNavigation", function(event) {
// Ejecuta algo aquí después de haber cambiado de página
});
Lo anterior usa una función (on), la cual registra un evento y una acción a ejecutar a través de una función después de que se haya disparado el evento endNavigation.
Como puedes observar el evento endNavigation se dispara en el momento en que la navegación de nuestra SPA ha cambiado y terminado, es decir; imaginemos que te encuentras en la página Home te tu sito y en la navegación das un click a otra página llamada About Us, cuando la SPA haya terminado de llevarte de la página Home a la de About Us se ejecutará el código anterior.
Entonces, ahora ya sabes como ejecutar código JavaScript sin tener que recargar la página en Liferay 7.
No hay mucha documentación oficial sobre el objeto de Liferay 7 que está expuesto en el objeto global window, así que te recomiendo explorarlo un poco más para descubrir qué otras cosas podemos obtener de éste.