Liferay Portal personalizado con ADT (Application Display Templates)

Una de las principales y más interesantes características del Liferay Portal (desde la versión 6.2) son los ADT (Application Display Templates o, en una traducción libre, “Plantillas de para mostrar aplicaciones”). Estas permiten modificar de forma sencilla como se renderizan (muestran mediante el html generado) ciertos portlets, sin necesidad de cambiar el comportamiento del propio Liferay tocando sus JSP’s.

 

AntecedenteS EN VERSIONES ANTERIORES DE LIFERAY

Uno de los mayores inconvenientes a la hora de personalizar Liferay Portal (en versiones anteriores a la 6.2) era que la funcionalidad y el aspecto de los portlets que proporciona “era el que era”. A base de sobrescribir estilos en nuestro tema se puede cambiar algo el aspecto, pero ciertos cambios estéticos o de usabilidad son imposibles ya que necesitan de modificaciones en el HTML generado por un portlet que “es el que es”.

Existe la forma “sucia” de arreglar esto, usando Hooks. Y digo sucia, porque cuando se modifica mediante un hook la forma en que, por ejemplo, se muestran las migas de pan, esta modificación se aplicaba a todos los sitios generados con ese Liferay Portal.

Este comportamiento de los hooks provoca que los administradores de un Liferay, en el que van a convivir varios sitios web, conviertan prácticamente en tabú el hablar de utilizar hooks.

Pero alguien en Liferay escuchó las súplicas de los que trabajamos con Liferay y ideo los ADT (Application Display Templates o, en una traducción libre “Plantillas de para mostrar aplicaciones”).

 

Manos en harina

Una explicación más sesuda la podéis encontrar de la mano de Eduardo García en su blog de Liferay, pero yo haré una versión más coloquial, incluyendo un ejemplo.

Mediante los ADT’s se nos permite generar plantillas directamente dentro de Liferay (no es necesario crear ningún tipo de artefacto que haya que desplegar en el servidor y al que los de sistemas nos van a poner pegas). Al programar estas plantillas (usando velocity o freemarker) decidimos el nuevo HTML y/o funcionalidades generados.

Posteriormente, al utilizar el portlet en nuestro sitio web podremos seleccionar la forma en la que se va a visualizar. Hasta ahora el portlet ponía a nuestra disposición unas maneras por defecto, pero ahora, además, podremos seleccionar la que hemos generado con el ADT.

 

Un ejemplo:

Supongamos que queremos crear el típico listado de tareas pero queremos que al visualizarlas en nuestra web estas se muestren con un icono que identifique su importancia (grave, normal, bajo).

Para conseguir esto:

  1. Crearemos una nueva estructura de tareas que conste de Título, descripción y nivel de relevancia.
  2. Para mostrar los contenidos en la web usaremos el Asset Publisher, pero entre las formas de mostrar los contenidos no dispone de manera de mostrar mediante un icono la relevancia.
  3. Es entonces cuando generaremos un ADT para el Asset Publisher, que generará un listado como el actual, pero al que le añadiremos, antes del título, una etiqueta “span” con un class que identifique el nivel de relevancia. Luego ya es solo cuestión de los estilos de nuestro tema que se muestre el icono.
  4. Si en otro lugar de la web queremos hacer una visualización diferente (ej: mostrar las tareas en un sistema de carrusel, un listado a dos columnas, etc…) generaríamos un nuevo ADT sin tener que crear nuevas estructuras, duplicar contenidos, etc…

 

Colofón

Si bien es cierto que no es posible modificar la forma en que se muestran todas las aplicaciones de Liferay, el conjunto de las disponibles en la versión 6.2 (sólo se soportan siete portlets) es un buen comienzo y las promesas para la versión 7 (actualmente en cocina) son más que halagüeñas.

 

Bola extra

Además de todo lo expuesto, resulta que hacer nuestros portlets (los que nosotros creamos) compatibles con esta nueva característica es cuestión de seguir unos sencillos pasos.

Una respuesta

  1. Alberto
    Jul 15, 2015 - 01:22 PM

    Gracias por el post.
    Había podido leer algo sobre esta nueva funcionalidad de la 6.2.
    Un ejemplo siempre viene bien en cualquier caso.

    Un saludo.

Deja un comentario