Liferay 7.1. Plantillas de interfaz de la aplicación

En esta entrada Liferay 7.1. Plantillas de interfaz de la aplicación hacemos un acercamiento a las anteriormente llamadas plantillas de aplicación. Pero, ¿qué son las plantillas de interfaz de la aplicación?

¿Qué son las plantillas de interfaz de la aplicación?

Las llamadas plantillas de interfaz de la aplicación, plantillas de aplicación o ADT (Application Display Templates) son plantillas realizadas con Freemarker (preferiblemente) o Velocity.

Aunque se sigue pudiendo elegir Velocity, Freemarker es la opción por defecto y recomendada. No sin razón, es muy superior en rendimiento y mejor en funcionalidades.

¿Dónde se pueden aplicar plantillas de interfaz de la aplicación?

Freemarker y Liferay van de la mano desde hace tiempo y lo hacen utilizandose en diferentes tipos de entidades Liferay. Las ADT sin embargo, están limitadas a:

• Blogs
• Galería multimedia
• Mapa del sitio
• Menú de navegación
• Navegación por categorías
• Navegación por etiquetas
• Publicador de contenidos
• Publicador RSS
• Ruta de navegación
• Selector de idioma
• Wiki

Las listas dinámicas de datos, también son susceptibles de tener su propia plantilla de visualización de datos llamada plantilla de lista, aunque no como parte de las plantillas de interfaz de aplicación.

Es posible crear una plantilla de lista que actúe como plantilla de interfaz para las listas dinámicas de datos. Sin embargo, debemos acudir a otro punto de Liferay para hacerlo. Será necesario hacer uso del widget (aplicación, portlet, como queráis llamarlo, cambia por versiones…) [Muestra de listas de datos dinámicos] que se encuentra en la categoría de [Colaboración].

Plantillas por defecto y guía

Liferay provee por defecto de una serie de plantillas de interfaz a todos estos widgets mencionados más arriba que son la interfaz que emplean por defecto.

Si listamos las tablas de la base de datos de Liferay, veremos que existe una tabla llamada ddmtemplate. Visualizamos la estructura de esa tabla y buscamos el campo templateKey. Este campo contiene unos valores que identifican a qué widget se está aplicando más algún dato adicional.

Igualmente, existe otro campo llamado script que contiene el código fuente de las plantillas. En Freemarker, por supuesto.

Aquí podemos obtener muchos conocimientos: API de Liferay, uso de estilos y tags, uso de Freemarker, buenas prácticas, etc.; no olvidemos que esto lo han realizado los chicos de Liferay. Estos conocimientos nos permitirán tanto cambiar la interfaz de estos widgets, como usar algunos para generar aplicaciones sin necesidad de añadir nada nuevo a Liferay. Es más, podremos aplicar la información obtenida al estudiar estas plantillas por defecto a plantillas de contenido, layouts, plugins que hagan uso de Freemarker y por supuesto: Themes.

Ejemplo simple:

<#-- Plantilla de interfaz del visor de contenido web. La más simple, básicamente, muestra el contenido web asociado a una plantilla de contenido web (también Freemarker): -->
${content.getData()}

Ejemplo más elaborado:

<#-- Plantilla LANGUAGE-ICON-FTL que muestra el widget de idiomas con esta interfaz de iconos. Para ello hace uso de TAGS JSP como liferay_aui que realizan mucho trabajo por nosotros. -->
<#if entries?has_content>
   <#list entries as entry>
      <#if entry.isSelected()>
         <#assign cssClass = "current-language" />
      <#if>

      <#if !entry.isDisabled()>
         <@liferay_aui["icon"] cssClass=cssClass image=entry.getW3cLanguageId()?lower_case markupView="lexicon" message=entry.getLongDisplayName() url=entry.getURL() />
      </#if>
   </#list>
</#if>

A tener en cuenta

El editor que proporciona Liferay Portal para estas plantillas es básico. Si aumentamos la complejidad de ésta, se nos quedará corto rápidamente. Es conveniente usar un editor que permita trabajar cómodo con Freemarker (coloreado de sintaxis, etc.). El propio portal de Freemarker nos provee de información al respecto: https://freemarker.apache.org/editors.html .

La herramienta Eclipse dispone de varios plugins que nos permiten trabajar con Freemarker. Puesto que ya es una herramienta muy conocida, os indico una alternativa (también plugin de Eclipse) más, de software libre: http://freemarker-ide.sourceforge.net/ .

Algo que no debemos olvidar tampoco, es que no debemos trabajar en Producción, por supuesto. Es por eso que es importante hacer uso de las funcionalidades de Staging de Liferay Portal.

Conclusión

Lo dicho, es una forma excelente de desarrollar para Liferay sin muchos de los problemas de crear un entorno de desarrollo, agregar nuevos plugins, etc.

Si quieres conocer más, la documentación de Liferay te ofrece información. De hecho, después de leer este artículo y si te sigue interesando el tema, el siguiente paso es ir aquí: https://dev.liferay.com/es/discover/portal/-/knowledge_base/7-1/styling-apps-and-assets .

Nada más, un saludo y hasta otra.