producto añadido a tu cesta!

Liferay Archives - entrepixels · diseño, maquetación, desarrollo páginas web y Fotografía

Liferay 6.2 y bootstrap 3

Integración de BootStrap 3 con Liferay 6.2

Escrito por | Entrepixels, Liferay | 9 Comentarios

16/05/2016: Editamos la entrada con una mejora sobre la forma de importar la CSS de BootStrap

18/05/2016: Editamos nuevamente aportando algunas mejoras de importación y mantenibilidad de BootStrap (gracias a Marcos Castro de Liferay por el aporte)

En este post intentaremos arrojar algo de luz, después de nuestra experiencia en varios proyectos, sobre la integración de bootstrap 3 en Liferay 6.2

Buscando por la red podemos encontrar bastante información al respecto y los problemas que plantea esta integración. Tras analizar y dar vueltas a todas las posibles soluciones y con la experiencia adquirida en varios proyectos os planteamos la que para nosotros es la mejor opción.

La problemática

Liferay 6.2 viene con las CSS de BootStrap 2.3.2 de manera nativa, no así con su JavaScript asociado, por lo que la verdadera problemática se basa únicamente en la CSS. Si alguno ha intentado insertar en un tema de apariencia de Liferay 6.2 la CSS de BootStrap 3 se encontraría con que todo deja de funcionar allá donde está aplicado el tema (dockbar, configuraciones de portlets, etc…).

Vamos con un caso práctico. En este caso hemos usado la CSS de BootStrap 3.3.5, pero es aplicable a cualquier versión de BootStrap 3. Insertamos en nuestro tema de apariencia la CSS de BootStrap 3.

CSS bootstrap 3 en Liferay 6.2

Main css Liferay 6.2

Seleccionamos nuestro tema de apariencia con la CSS de BootStrap 3 insertada y nos encontramos ya con problemas. El dockbar de Liferay 6.2 aparece vacío y los controles de los portlets han desaparecido.

Tema Liferay 6.2 BootStrap 3 seleccionado

Problemas BootStrap 3 con Liferay 6.2

Como podemos comprobar la problemática es suficientemente grande como para echarnos para atrás y desechar la idea de BootStrap 3. En realidad, si no es absolutamente necesario quizá la mejor opción sea aprovechar BootStrap 2.3.2 que viene integrado, pero si el beneficio de usar BootStrap 3 os va compensar vamos a proponeros una solución.

Solución para integrar BootStrap 3 en Liferay 6.2

Se nos planteó un proyecto en el que se nos exigía usar BootStrap 3 con Liferay 6.2, entonces había que darle una vuelta al asunto. Si la problemática es únicamente vía CSS centrémonos en ella. Veremos que la solución no es para nada compleja. Os planteamos dos opciones en función de si os manejáis bien con NodeJS y/o Bower o no.

Opción 1 si no nos manejamos con NodeJs y/o Bower y menos elegante

Partimos de la CSS de BootStrap 3.3.5 que nos podemos descargar en http://blog.getbootstrap.com/2015/06/15/bootstrap-3-3-5-released/. Vamos a partir de la CSS de BootStrap 3 sin comprimir, para poder ver un par de problemáticas (después podéis importar la versión minificada). Aprovechamos que Liferay 6.2 soporta SASS porque si no la labor sería insufrible. Lo que vamos a hacer es “envolver” toda la CSS de BootStrap con una clase padre, que luego aplicaremos a una capa que englobe el contenido en Liferay. Si con palabras no se entiende del todo bien lo vemos con un ejemplo.

En primer lugar englobamos todo el contenido de nuestra template “portal_normal.vm” (o ftl) en una capa con la clase “bs3″ (podéis poner la clase que queráis).

Portal normal Liferay 6.2 con BootStrap 3

Después hemos de envolver todas las clases de la CSS de BootStrap 3 con la clase padre .bs3, que a su vez hemos de englobar con la clase .aui para sobreescriba la mayor parte de estilos que puedan chocar con la versión 2.3.2 de BootStrap. Para ello nos aprovechamos de que Liferay soporta SASS, modificamos la extensión de la CSS de BootStrap con la extensión .scss y posteriormente procederemos a importarla desde la CSS de aui.css. Por tanto, en este punto, donde antes habíamos importado la CSS desde el main.css de Liferay deberíamos quitarlo, pues BootStrap 3 lo importaremos desde el fichero aui.css.

AUI CSS con bootstrap 3

aui.css
AUI CSS con bootstrap 3

Como podéis ver en la captura del “portal_normal.vm”, la capa bs3 está dentro del body, por lo que todos los estilos que afecten al elemento html y body quedarían fuera. Con esto hacemos que BootStrap 3 afecte sólo al contenido de Liferay y no de problemas con el “core”.

De la CSS de BootStrap tendremos que copiar algunos estilos que por la importación mediante SASS unos, y porque no les afecta la clase bs3 otros, no se aplican correctamente. Nosotros los movemos al custom.css.

  • Las clases iniciales que afectan al html y al body.
  • El font-face de los glyphicons.
  • Los keyframes.

Liferay 6.2 con BootStrap 3

Liferay 6.2 con BootStrap 3

Liferay 6.2 con BootStrap 3

custom.css
Liferay 6.2 con BootStrap 3

Opción 2 usando Bower.

El concepto es exactamente el mismo que en la opción 1, pero aprovecharemos el gestor de paquetes bower para facilitar la mantenibilidad ante posibles actualizaciones de BootStrap.

La modificación en el fichero portal_normal.vm (o ftl) es exactamente la misma, es decir, añadimos una capa con la clase .bs3 que englobe a todo el contenido

Portal normal Liferay 6.2 con BootStrap 3

Desde línea de comandos nos situamos sobre nuestro directorio css del tema e instalamos el paquete de bootstrap-sass en su versión 3.3.5. Para ello introducimos lo siguiente: bower install bootstrap-sass#3.3.5

Install bootstrap sass width bower

bootstrap sass instalado

Ahora en nuestra aui.css la importación de BootStrap 3.3.5 quedaría de la siguiente manera.

Importar bootstrap sass en liferay

De este modo si sabemos de alguna actualización de BootStrap que queramos utilizar, gracias a bower podemos realizarla con el siguiente código sobre nuestra carpeta css: bower update bootstrap-sass

Para este caso la problemática del font-face y los keyframes persiste, por lo que nos tendremos que llevar a nuestra custom.css esos estilos para que funcionen correctamente

Custom css Liferay 6.2

Vemos una vez finalizada la “conversión” de la CSS el resultado.

Liferay 6.2 con BootStrap 3

Liferay 6.2 con BootStrap 3

Ya tenemos todo funcionando y sin problemas. Es muy probable que en alguna cosa tengamos algún conflicto entre las propiedades CSS de BootStrap 2.3.2 de Liferay 6.2 y las de nuestro BootStrap 3, pero es cuestión de casos puntuales que tendremos que pulir. Para finalizar añadimos el JavaScript de BootStrap 3 (y jquery si no lo hemos hecho), las “fonts” para los glyphicons, compilamos y probamos a hacer algunas pruebas para ver si funcionan los componentes de BootStrap 3.

Ejemplo Liferay 6.2 con BootStrap 3

Para finalizar, comentar que las layouts de Liferay 6.2 siguen el marcado de BootStrap 2.3.2. Esto no supone ningún problema, pues seguirán funcionando correctamente. Si queremos hacer uso de BootStrap 3 también para las layouts tendremos que replicar las que hay modificando el marcado adaptándolo a la grid de BootStrap 3. Si además queremos meter algún tema de BootStrap 3 en nuestro tema de Liferay 6.2 tendremos que hacer el mismo proceso de englobar las clases en .aui .bs3 {} para la CSS correspondiente.

Espero que este post os haya sido de utilidad

Liferay 7

Desarrollo de temas de apariencia -themes- en Liferay 7

Escrito por | Entrepixels, Liferay | No hay comentarios

Liferay nos ha anunciado el lanzamiento de su nueva versión Liferay 7 para el primer trimestre de 2016. Para estar al día de su evolución y sus novedades disponemos ya de su versión Alpha 2 que podemos descargarnos de SourceForge: página de descarga de Liferay 7 Alpha 2

Nos descargamos el bundle con tomcat y lo arrancamos de manera habitual (tomcat-dir/bin/startup.bat o .sh).

Desde Entrepixels, como especialistas en desarrollo de temas de apariencia -themes- Liferay, nos gusta estar al día y os contaremos en detalle aquellas novedades que nos encontraremos a la hora de crear temas de apariencia en esta nueva versión.

Una de las grandes problemáticas que nos encontramos a la hora de trabajar con los temas de apariencia de Liferay es su lentitud de compilación. Tanto si utilizamos ant, como maven, y dependiendo de la máquina y del número de líneas css, podíamos tardar minutos en una sola compilación. Liferay se ha dado cuenta de esto y quiere poner remedio para la versión 7.

Si alguno de vosotros tiene experiencia en el desarrollo de temas quizá se haya dado cuenta de que hemos hablado de descargar el bundle con tomcat, pero no la sdk de plugins. Aquí reside el gran cambio; pese a que vamos a poder seguir desarrollando temas como veníamos haciendo hasta ahora con el plugins sdk (ver tutorial para desarrollo de temas de apariencia en Liferay6.2), podremos pasar a trabajar con herramientas mucho más ágiles.

¡Comenzamos!

Dependencias

Nosotros trabajamos sobre Windows por lo que las explicaciones las realizaremos para el trabajo bajo esta plataforma, aunque creemos que es fácilmente extrapolable a aquellos que trabajen bajo Linux o Mac.

Necesitaremos tener instalado lo siguiente:

  • Nodejs
  • Python 2.7.10 (Sólo en Windows)
  • Visual Studio (Sólo en Windows). A la hora de instalarlo sólamente necesitaremos marcar la siguiente casilla, el resto podemos desmarcarlas todas: Custom > Programming… > Visual C++ (el proceso de instalación es largo)

Una vez instaladas todas las dependencias procederemos con el siguiente paso:

Yeoman, Gulp y Bower

Yeoman, Gulp y Bower son las tres herramientas en las que nos basaremos para crear y compilar nuestros nuevos temas de apariencia. Hay que tener en cuenta que nos encontramos ante una versión Alpha de Liferay, por lo que nos podremos encontrar problemas que se irán arreglando con el tiempo, pero es importante ir acostumbrándose a las nuevas metodologías de trabajo que nos facilitarán la vida.

Resumimos:

  • Yeoman. Ellos se definen como un “andamio web para aplicaciones modernas”. Podemos decir que es un asistente que nos ayuda a crear nuestros proyectos web.
  • Gulp será nuestra herramienta de nodejs para compilar nuestros temas de apariencia.
  • Bower será nuestra herramienta para gestionar dependencias

¡Manos a la obra! En primer lugar vamos a proceder a instalar Yeoman, Gulp y Bower. Nos situamos sobre la consola de Windows y tecleamos el siguiente comando:

npm install -g yo gulp bower

Instalando Yo, Gulp y Bower

Ahora toca instalar el generador de temas de liferay. Para ello, en la misma línea de comandos escribiremos lo siguiente:

npm install -g generator-liferay-theme

Instalando generador de temas de Liferay

Ya disponemos de todas nuestras herramientas listas para empezar.

Creando temas de apariencia

Para la creación del tema de apariencia utilizaremos Yeoman. En la línea de comandos, sobre el directorio que queramos crear el tema, tecleamos:

yo liferay-theme

Creando tema de apariencia con Yeoman

Comienza aquí nuestro asistente para crear el tema. En primer lugar indicaremos el nombre que le queremos dar, por ejemplo, “tema-prueba”.

Creando tema de prueba Liferay con Yeoman

Después nos pregunta si queremos usar ese nombre como id para el tema. Esto lo dejamos a vuestro gusto. (Tened en cuenta que a medida que evolucionen la herramienta es posible que alguno de los pasos cambie).

En el siguiente paso seleccionaremos si queremos que el tema sea para la versión 7 o las 6.2 de Liferay (aún no hemos probado qué tal funciona con la versión 6.2). Seleccionaremos la 7.

Seleccionamos Liferay 7 en yeoman

Tras esto nos preguntará si queremos usar velocity o freemarker para nuestro tema. Elegís con la que soláis trabajar. En nuestro caso velocity.

Freemarker o velocity para nuestro tema

Ahora nos preguntará si queremos usar Sass o no en nuestro tema (Nota: en estas versiones iniciales ha habido complicaciones si elegimos sí en este paso, si te ocurre entiendo que se solucionarán en breve).

Yeoman pregunta si queremos sass en nuestro tema

Ya tendremos nuestro tema creado y por último nos pregunta la ruta de nuestro tomcat de liferay.

Seleccionamos nuestro directorio de tomcat

Ya tenemos nuestro tema creado y listo para trabajar.

Tema creado

Podéis trastear un poco con el tema para analizar algunas novedades respecto al método de trabajo con ant o maven. Por ejemplo ahora en el fichero package.json es donde queda definido el tema padre, si hemos decidido usar velocity o freemarker o el nombre del tema. En liferay-theme.json se definirán los paths del tema y el tomcat, por ejemplo. El resto funcionará como en versiones anteriores. Dentro de la carpeta src iremos colocando nuestras carpetas css, js, templates, images… con sus ficheros correspondientes (visitad nuestro tutorial para liferay 6.2 si queréis más detalles).

Ahora sólo nos quedará compilar nuestro tema de apariencia. Para ello nos situamos sobre el directorio del tema desde consola y tecleremos lo siguiente:

gulp build ó gulp deploy

El primero compilará nuestro tema y generará un war, el segundo además mandará una copia a nuestro servidor.

Compilando con gulp

Como podremos observar los tiempos de compilación son mucho más reducidos.

Tiempo compilación

Si hemos hecho “gulp deploy” nos vamos al panel de control de nuestro Liferay y ahí tenemos nuestro tema (como no hemos hecho nada nos sale sin imagen representativa ni nada).

Seleccionamos nuestro tema en el panel de control de Liferay

Hasta aquí el desarrollo de nuestros temas apariencia para Liferay 7. Como véis se agiliza mucho el proceso de compilación.

Apuntes finales

Antes de terminar un apunte sobre dos comandos que ya existen con las nuevas herramientas (seguro que habrá más) y que nos pueden resultar de utilidad.

gulp init

Sobre nuestro tema de apariencia este comando nos relanza el asistente de yeoman por si queremos modificar algún parámetro.

gulp watch

Sobre nuestro tema de apariencia este comando hace que los cambios se desplieguen en caliente sobre nuestro servidor sin necesidad de compilar.

Esperamos que este post os haya sido de utilidad. Próximamente os contaremos algunas novedades más sobre Liferay 7, como es el tema de los themelets.

Symposium Liferay 2015

Entrepixels · Nos vamos al Symposium de Liferay

Escrito por | Entrepixels, Liferay | No hay comentarios

Los próximos 21 y 22 de Octubre tendrá lugar en el Hotel Mirasierra de Madrid, el Symposium de Liferay 2015 en España.

Como especialistas en temas de apariencia de Liferay, desde entrepixels queremos estar al día de las últimas novedades que nos traerá Liferay 7 y por eso asistiremos al evento para tomar parte de interesantes charlas y un workshop sobre el desarrollo de temas de apariencia en Liferay 7, que pronto verá la luz y parece que vendrá plagado de novedades.

Aprovechamos a recordaros que podéis descargaros, de forma gratuita, un tema de apariencia para Liferay 6.2 que hemos colgado recientemente en nuestra web desde el siguiente enlace: Descarga gratuita tema de apariencia entrepixels Liferay 6.2

Si tú también asistes al Symposium nos vemos por Madrid!

Tema de apariencia entrepixels

Tema de apariencia responsivo gratuito para Liferay 6.2 entrepixels-theme

Escrito por | Diseño Web, Liferay | Un comentario

Hoy queremos compartir un tema de apariencia (theme) para Liferay 6.2 que hemos creado para su descarga de forma gratuita.

Consiste en un tema responsivo, con una estructura muy adecuada para sitios corporativos y que viene con una plantilla de sitio con la que poder crear un portal desde cero en muy pocos pasos.

El tema de apariencia es compatible con todos los paquetes de Liferay 6.2, incluídas las versiones Community y Enterprise.

Para poder utilizarlo es muy sencillo. Simplemente descarga el tema desde nuestra página de descargas que os indicamos a continuación: http://www.entrepixels.com/producto/tema-de-apariencia-entrepixels-para-liferay-6-2-ce-y-ee/

Una vez descargado copia el fichero .war en tu directorio deploy de Liferay y el tema quedará instalado automáticamente. Tras la instalación, si quieres ver un ejemplo de sitio completo solamente has de acceder al panel de control e ir a sitios web como se indica en la siguiente captura.

Panel de control Liferay 6.2

Cuando estemos dentro podemos situarnos sobre la pestaña plantillas de sitio, seleccionar Entrepixels-theme y pinchar en el enlace visitar: página del sitio web para ver cómo está hecho.

Enlace a plantilla site

O bien añadir un nuevo sitio con la plantilla de entrepixels-theme como se muestra a continuación.

Crear site con plantilla entrepixels

El aspecto del tema de apariencia debería ser como el que os mostramos a continuación.

Tema de apariencia entrepixels

Tema de apariencia entrepixels para Liferay 6.2 CE y EE

Esperamos que os guste y os sirva de ayuda. Si necesitáis ayuda intentaremos resolverla lo antes posible.

Liferay

Tutorial cómo crear temas de apariencia (themes) Liferay paso a paso desde cero

Escrito por | Liferay | 17 Comentarios

Google+

Desde entrepixels, queremos compartir nuestra experiencia en el desarrollo de temas de apariencia de Liferay explicando cómo crear un tema (theme) desde cero paso a paso. No es fácil encontrar mucha documentación sobre este tema en español, por lo que creemos que os puede resultar interesante.

Nosotros trabajamos habitualmente sobre Windows, pero explicaremos el proceso de forma que el contenido sea perfectamente válido para aquellas personas que trabajen bajo Linux o MAC. No nos basaremos ni en Eclipse, ni en Netbeans, ni en Liferay IDE.., para que cada uno pueda trabajar con la herramienta que se sienta más cómodo. Sólo necesitaremos tener instalado en nuestro equipo Java, Apache Ant y descargarnos una versión de Liferay con su plugin-sdk asociada. Para el ejemplo trabajaremos con Liferay 6.2, que es la última versión a día de hoy, y nosotros tenemos instaladas las java 1.7 y el apache ant 1.9.3. Para aquellos que no estéis muy familiarizados con la instalación y configuración de Java y Ant, os dejamos un par de enlaces de cómo configurar las variables de entorno para java y para apache ant.

Una vez tengamos funcionando las java y el apache ant, nos crearemos una carpeta (Por ejemplo "Liferay6.2"), donde copiaremos y descomprimiremos tanto nuestro Liferay, como nuestra sdk para plugins. Para evitarnos tener que configurar ficheros, es importante que separemos en dos carpetas el Liferay y la sdk de los plugins y las llamemos "bundles" y "plugins" respectivamente. En realidad el nombre importante es "bundles", la carpeta de plugins puede llamarse de otra forma, pero esta es la nomenclatura y estructura de carpetas habitual. Con ello evitaremos tener que configurar el "build.properties" de nuestros plugins con las rutas de Liferay. Nos quedará algo como esto:

Captura de Estructura de directorios de Liferay

Una vez tengamos nuestro Liferay con sus carpetas bien organizadas, procedemos a arrancar nuestro portal. Nosotros solemos trabajar con un Liferay bajo tomcat, por lo que nos vamos a nuestra carpeta "bundles->tomcat->bin" y ejecutamos el "startup" (.bat o .sh dependiendo de la plataforma bajo la que estemos). Cuando haya arrancado procedemos a crear nuestro nuevo tema de apariencia (theme) de Liferay. En entrepixels utilizamos la línea de comandos para crear nuestros temas de apariencia. Si utilizadas la IDE de Liferay hay opciones de menú específicas para ello, pero a nosotros nos resulta más cómodo hacerlo "a mano", pues tú tienes el control de todo. Bien, abrimos nuestra línea de comandos y nos situamos sobre la carpeta "plugins->themes". Procedemos a ejecutar el siguiente comando: create id_tema "nombre_tema", donde id_tema será el identificardor que queramos darle a nuestro tema y nombre_tema será el nombre que se muestre a la hora de utilizarlo en el portal.

Captura desde línea de comandos para crear un theme de Liferay

Para la versión Liferay 6.2 la primera vez que creas un tema tarda un poquito, independientemente de lo potente que sea tu ordenador. Una vez pasada esta primera vez los temas se crean de forma mucho más ágil. Si todo ha ido bien, nos encontraremos con el siguiente mensaje en línea de comandos: "BUILD SUCCESSFUL Total Time: x seconds" y dentro de nuestra carpeta "plugins->themes" nos aparecerá una nueva carpeta con el nombre "id_tema-theme". Si no ha ido bien, lo más probable es que no tengas bien configuradas las variables de entorno de ant.

Creación correcta de theme Liferay desde línea de comandos

Nueva carpeta con nuestro nuevo theme Liferay

Ya tenemos nuestro nuevo tema de Liferay creado. Veamos ahora los primeros pasos a seguir. En primer lugar tenemos que decidir en qué tema nos vamos a basar, es decir, cuál va a ser nuestro tema padre. Para ello vamos a la carpeta raíz de nuestro tema y abrimos el fichero "build.xml".

carpeta raíz tema de Liferayaspecto del fichero build.xml tema de Liferay

Podemos heredar de cualquier tema que tengamos desplegado en nuestro Liferay, pero habitualmente lo haremos del classic, welcome (versión 6.2), _styled o _unstyled. Si heredamos del classic o el welcome, nuestro nuevo tema inicialmente tendrá visualmente un aspecto igual al del tema que hayamos heredado. Heredar de estos temas puede ser útil para hacer pruebas, o alguna demo rápida (o que casualmente queramos un tema muy parecido a alguno de ellos), pero lo más normal es que no sea así. Si lo hacemos para temas completamente diferentes nos pasaremos todo el rato sobreescribiendo los estilos del tema del que estemos heredando. Nosotros personalmente heredamos la mayoría de las veces del tema _styled, que es un tema que viene prácticamente “plano”, solamente tiene los estilos básicos de Liferay relacionados con configuraciones, el dock, etc. Por otro lado podemos heredar del tema “_unstyled” que nos dejará un Liferay completamente “desnudo”, es decir, habría que maquetarlo absolutamente todo. Veamos con una captura después de heredar del “_styled” y del “_unstyled” respectivamente para ver de lo que hablamos.

heredando del tema _styled de Liferayheredando del tema _unstyled de Liferay

Como podemos ver el tema styled nos ayuda con la maquetación básica del portal y su funcionalidad, y a su vez apenas lleva estilos que haya que ir sobreescribiendo. Lanzarse a heredar del tema _unstyled sólo lo recomendamos para aquellos que necesiten un lavado de cara completo de Liferay, en el que incluso haya que cambiar los estilos que sólo va a ver el administrador o gestor de contenidos.

Ya tenemos decidido de qué tema vamos a heredar. Supongamos que heredamos del styled. ¿Cuál es el siguiente paso? Ahora vamos a compilar nuestro tema y desplegarlo en el portal. Para ello abrimos línea de comandos y nos situamos sobre la carpeta raiz de nuestro tema e introducimos el siguiente comando: ant clean deploy . El "clean" es opcional pero recomedable pues en alguna ocasión nos puede evitar problemas de que no se sobreescriban bien los cambios que vayamos haciendo en nuestro tema. Si todo ha ido bien nos encontraremos con algo como sigue.

compilamos tema de apariencia de Liferay
compilación correcta tema de apariencia de Liferay

Una vez ha terminado la compilación, en nuestra ventana del tomcat de Liferay veremos que ha detectado la presencia de un nuevo tema y procede a desplegarlo. Cuando termine nos encontraremos con un mensaje como este.

Despliegue tema de apariencia de Liferay correcto

Si en alguno de estos puntos hemos tenido problemas de compilación o despligue miraremos los errores que nos pueda dar la tarea del ant o el tomcat al desplegar. El error más habitual podría ser que no hayas seguido la estructura y nomenclatura de carpetas (plugins y bundles) mencionadas anteriormente en este artículo.

Ya tenemos nuestro tema desplegado, y al realizar las tareas del ant nos han aparecido nuevas carpetas y ficheros en el tema. Estos se copian automáticamente del tema que hayamos heredado. Vamos a ver cómo nos aparece el tema en nuestro portal, y algunos detalles que debemos pulir antes de seguir adelante y explicar la estructura de un tema por dentro.

Seleccionar nuevo tema de Liferay

Podemos ver que aparece nuestro tema de Liferay, pero carece de thumbnail y el autor del mismo aparece como Liferay. Vamos proceder a cambiar esto. Para ello vamos a personalizar 4 aspectos.

  • Thumbnail del tema.
  • Screenshot del tema.
  • Favicon del tema.
  • Autor del tema.

Para el screenshot, el thumbnail crearemos dos dos .png con el aspecto final de nuestro portal: screenshot.png (el ancho que queramos, 1024px recomendado) y thumbnail.png (de 150px de ancho recomendado). Además tendremos nuestro favicon.ico personalizado. Para ubicarlos iremos a la carpeta “docroot->diffs”, crearemos una nueva carpeta dentro llamada “images” y allí los colocaremos. En la próxima compilación y despliegue del tema (ant clean deploy) aparecerán cambiados (el favicon es posible que se quede cacheado una buena temporada).

Modificar thumbnail y favicon de un tema de Liferay

Para terminar con los cuatro puntos mencionados anteriormente debemos modificar el fichero “liferay-plugin-package.properties“. Para ello crearemos dentro de la carpeta "docroot->diffs" una nueva carpeta llamada "WEB-INF" en la que duplicaremos el fichero "liferay-plugin-package.properties" que nos podemos encontrar en la carpeta "docroot->WEB_INF" de nuestro tema. Editaremos este fichero duplicado (el que hemos copiado en "docroot->diffs->WEB-INF" no el original) con cualquier editor y pondremos nuestros datos.

Aspecto del fichero liferay-plugin-package.properties del tema de Liferay

Una vez modificado al seleccionar nuestro tema ya nos aparece todo correctamente.

seleccionar tema de Liferay personalizado

Una vez llegados a este punto ya tenemos un tema creado por nosotros mismos con el que poder empezar a trabajar. A continuación explicaremos la estructura básica de un tema de Liferay. Pero antes hay un tema importante que hay que tener en cuenta. Siempre vamos a trabajar y a modificar ficheros dentro de la carpeta diffs (dentro de docroot). En la carpeta ráiz de docroot tenemos las carpetas base del tema del que hemos heredado. Si trabajamos sobre ellas, cada nueva compilación nos machacará los cambios que hayamos hecho con el código del tema que hayamos heredado. Si queremos cambiar cualquier fichero debemos crear la misma estructura de directorios dentro de la carpeta diffs y sobreescribir el fichero que deseemos. Sólo así nuestros cambios tendrán efecto. Por poner un ejemplo concreto, si quiero sobreescribir la "custom.css" del tema del que he heredado, debería crear dentro de diffs la carpeta "css", copiar el fichero custom.css y a partir de ahí comenzar a realizar los cambios oportunos. En este punto os recomendamos hacer algunas pruebas para que veáis de primera mano los resultados.

Es importante realizar los cambios sobre la carpeta diffs

A continuación vamos a explicar brevemente la estructura de carpetas y ficheros que contienen a la hora de manejar un tema de apariencia (theme) de Liferay. Empezamos, en primer lugar con las css. El tema styled de Liferay viene por defecto con las siguientes css.

Css en un tema de apariencia de Liferay

Como se puede observar, los nombres de las css, si estamos familiarizados con Liferay, son bastante intuitivos. Por norma general sólo modificaremos dos ficheros respecto a los originales (aunque por supuesto podremos incluir más). Los ficheros a modificar serían main.css y custom.css. El primero de ellos es el que incluye con "imports" todas las css que se utilizan. Podemos necesitar modificarlo para quitar alguna css de las que se importan (poco habitual), o para añadir ficheros css nuevos. Por otro lado “custom.css” es un fichero originalmente vacío, que se importa en último lugar en la main.css y es donde meteremos nuestro código personalizado. Al ser importado en último lugar en la “main.css” los estilos sobreescribirán cualquier clase definida anteriormente en cualquier otro fichero.

Estructura main.css de Liferay Custom css de Liferay originalmente vacía

La carpeta imágenes tiene poco que explicar. En ella se almacenan las imágenes que vienen con el tema que hayamos heredado. Si queremos sobreescribir alguna imagen simplemente hemos de buscarla, replicar dentro de la carpeta diffs aquella estructura de carpetas donde se encuentre y poner nuestra nueva imagen con el mismo nombre que la imagen que queramos machacar. Es común y buena práctica crearnos una nueva carpeta (o varias) dentro de “images” donde metamos la imágenes nuevas que vayamos a usar para maquetar nuestro portal.

Pasamos ahora a la carpeta templates. En ella nos vamos a encontrar en ficheros velocity las diferentes estructuras html del portal. Es donde tendremos que tocar si queremos modificar la estructura HTML de nuestro portal.

Ficheros de la carpeta template de Liferay

El fichero init_custom.vm si no programamos velocity no lo tocaremos para nada. Se utiliza para declarar variables de dicho lenguaje que posterioremente queremos utilizar en cualquiera de los otros ficheros velocity. El fichero portal_normal.vm es el que contiene el marcado HTML con la estructura general de todas las páginas de la parte pública del portal. Es decir, cabecera con sus elementos, cuerpo (sólo se define el contenedor), y pie de página.

Ejemplo de portal_normal.vm de Liferay

Al que no esté acostumbrado se le hará un poco raro ver el lenguaje velocity metido entre el html, pero se le coge el truco rápido. Desde portal_normal.vm se hace la llamada a la navegación principal con el siguiente comando #parse (“$full_templates_path/navigation.vm”) que viene a ser lo equivalente a un import, en este caso del fichero navigation.vm que contiene el menú principal de navegación de Liferay. Dentro de la capa con id="content", dentro de la portal_normal.vm también se hace una llamada al contenido central correspondiente de cada página con los siguientes comandos.


#if ($selectable)
$theme.include($content_include)
#else
$portletDisplay.recycle()

$portletDisplay.setTitle($the_title)

$theme.wrapPortlet("portlet.vm", $content_include)
#end

Nos quedan dos plantillas velocity por ver. portlet.vm contiene la estructura HTML de cada uno de los portlets. Básicamente es un section con su encabezado, el menú de opciones de cada portlet y el contenido del mismo. Si necesitamos cambiar algo de su estructura HTML es aquí donde debemos tocar. Por último portal_pop_up.vm contiene la estructura HTML de los popups que nos encontramos dentro del portal.

Vamos por último con la última carpeta que vamos a analizar. Se trata de la carpeta js. En ella nos encontraremos con un fichero main.js. Este fichero se ejecuta siempre que se carga una página y nos viene preparado con tres funciones interesantes que podemos utilizar. Recordamos que Liferay desde su versión 6.0 viene con su propio framework javascript incrustado por defecto, Alloy UI (AUI).

Código javascript del mail.js de Liferay

Todo el código que metamos dentro de la primera función se ejecutará al cargar la página. Es equivalente a un jQuery(ready) y similar (no igual) al window.load() de javascript. El código que incluyamos en la segunda función se ejecutará cada vez que se cargue un portlet de la página actual. Por último aquel código incluído dentro de la tercera función se ejecutará después de que todos los portltes de la página estén cargados.

Si queremos añadir nuevos ficheros javascript a nuestro portal, lo haremos directamente en la template portal_normal.vm, como si lo estuviesemos incluyendo en cualquier otro tipo de proyecto "<script src="…>

Y hasta aquí este tutorial de cómo crear temas de apariencia (themes) de Liferay paso a paso desde cero. Esperamos que os haya servido de utilidad.