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.

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.

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).

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

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.

custom.css

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

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

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

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

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

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.

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