Creación de temas con Liferay 7

Liferay permite generar temas propios para modificar la apariencia del portal a las necesidades de cada sitio. Los temas de Liferay son la herramienta que nos ofrece para personalizar el look and feel de un sitio o una página.

Tema vs Themelet en Liferay

Es importante que separemos el concepto de tema en Liferay y themelet. Un themelet es un componente que contiene el look and feel de un apartado concreto de nuestro sitio o página.

Consideraciones a la hora de crear un nuevo tema para Liferay

Cuando se construye un nuevo tema, es muy frecuente heredar a su vez de otros temas, ya sea del tema tema styled o bien del tema unstyled. Si no heredamos de alguno de estos temas, es muy probable que el portal pierda funcionalidad, ya que Liferay está preparado para funcionar correctamente con ciertas clases y elementos que proveen estos temas.

Para generar un tema en Liferay, lo único que tenemos que hacer es seguir las instrucciones que Liferay nos recomienda desde su web oficial.

Pasos para crear un tema en Liferay

Generar un tema en Liferay no tiene mucho misterio, cualquier desarrollador de Liferay lo habrá hecho alguna vez empleando el theme generator de Liferay. En un principio, generar el tema y hacer alguna modificación es una tarea bastante sencilla. Además, los temas de Liferay vienen con la tecnología de bootstrap y clay, herramientas css que pone a nuestro alcance para hacer desarrollos CSS sin necesidad de demasiada definición de estilos.

Lo único que tenemos que hacer es trabajar desde nuestro fichero _custom.scss y desde este, podemos acceder a todos los recursos que nos ofrece Liferay de los temas heredados.

Pero, tal y cómo hemos dicho anteriormente, para un desarrollador que esté habituado a trabajar con Liferay, esto es una cosa normal. Cuando tenemos que hacer un diseño de portal más moderno y tiene que entrar un diseñador que no tiene conocimientos de Liferay, la cosa empieza a complicarse un poco más.

Sencillo para desarrolladores, complicado para diseñadores

Normalmente, un diseñador no sabe trabajar con un entorno tan complejo como Liferay (con su entorno java+tomcat+etc) por lo que generar temas suele ser mucho más costoso para estos perfiles a pesar de tener el conocimiento correcto para trabajar con los estilos.

Proyecto alternativo a metodología normal

Para facilitar su labor, suelo generar un proyecto más sencillo para que los diseñadores con lo único que tengan que trabajar sea con un HTML, hojas de estilo y recursos javascript e imágenes. En su proceso en fase experimental y tiene sus contras, pero en general está dando muy buenos resultados.

Lo primero que monto, es un HTML base de una página de Liferay, pero sin javascript y sin css, únicamente el HTML puro que genera Liferay. Con esto ya tendríamos la base con la cual trabajar.

Después, extraigo del tema styled los recursos de javascript, css e imágenes. Con todo esto, lo monto todo en una carpeta que acabará teniendo nuestro html y las carpetas de css, image y js.

Ahora, sólo faltaría preparar el html para que lea de estos recursos. Para esto, es necesario entender cómo Liferay genera las hojas de estilo. Liferay trabaja generando los css con SASS, por lo que nuestro diseñador tiene que tener conocimientos de SASS (algo que prácticamente todos los diseñadores conocen). Lo único que se necesita es alguna herramienta que compile en tiempo real el código SASS (prepros por ejemplo) almacenado en la carpeta /css y genere los ficheros CSS resultantes, el main.css y el clay.css.

Para que el CSS resultante pueda compilar, se necesitan unas dependencias SASS que inicialmente el proyecto styled no contiene en la carpeta /css y se puede obtener desde aquí. Con incluirlos en una carpeta llamada liferay dentro de /css, ¡asunto arreglado!

Incluir temas en HTML

Una vez que estos recursos se generan, solamente debemos incluirlos en el HTML base que hemos generado en el mismo orden en el que Liferay los incluiría: primero el clay.css y después el main.css. El main.js también se debe incluir en el HTML. Con esto ya tenemos el entorno para un diseñador bien montado y estable. Ahora el siguiente punto es analizar cómo debería trabajar para luego aplicar los cambios al tema que se genere finalmente.

El diseñador debería trabajar únicamente con el fichero SASS llamado _custom.scss, pero al trabajar con este fichero, puede generar tantas carpetas como considere. Lo recomendable sería generar una carpeta dentro de /css y dentro de /image con todos los recursos que considere e incluir únicamente las dependencias de los ficheros sass de estas carpetas en el fichero _custom.scss, de tal manera que cuando un diseñador efectue algún cambio en los diseños, aplicarlos en el tema sea una tarea tan sencilla como copiar y pegar el fichero _custom.scss y las carpetas personalizadas.

Este proceso es muy mejorable: podrían automatizarse las generaciones de este proyecto, automatizar los cambios del proyecto del diseños al tema, etc.

El único factor que tendremos que tener en cuenta es enseñarle al diseñador que Liferay espera ciertos patrones de HTML cuando añade un portlet o cuando se cambia de plantilla una página. Si logramos que tenga esto en cuenta, tendrá toda la potencia que ofrece Liferay para generar temas a mano y con un sistema muchísimo más sencillo y ágil para diseñar.

Contacta con Hiberus

Este proceso está en fase experimental, pero ya lo hemos aplicado con éxito en varios proyectos y cada vez que se aplica en uno, el diseñador obtiene más experiencia, mejorando la calidad de los diseños y reutilizando elementos y variables que ofrece Liferay, provocando que generar nuevos temas en Liferay sea una tarea mucho más sencilla que de la manera convencional.

Además, si quieres conocer algunos de nuestros casos de éxito de Liferay y ejemplos de portales hechos con Liferay, puedes ver cómo lo hemos hecho para clientes como Gobierno de Aragón, El Corte Inglés o Walgreens Boots Alliance.