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
Hola Entrepixels,
¿Y como hacéis para que el marcado de los portlets de liferay sea el de bootstrap 3?
¿Hay alguna manera de usar ui:forms y que el marcado sea el adecuado?
Es mejor usuar el js de Bootstrap y pasar olimpicamente del js que ya trae liferay?
yo casi prefiero usar los recursos que tengo y no tener que añadir nada extra.
Las taglib de aui te generarán el mismo marcado que hasta ahora, por lo que el para los portlets tendrías que poner tú mismo el marcado. Respecto a JavaScript el de bootStrap 3 lo usarías para aquellos casos en los que uses el marcado de bootStrap 3 y el AUI de Liferay para los componentes de Liferay que utilices.
Estamos de acuerdo contigo en que lo mejor es usar el Liferay tal cual viene, el post está pensado a ofrecer una ayuda si por algún motivo necesitas usar bootStrap 3.
Muchas gracias por comentar.
Un saludo!
Juanra
Buen post.
Justo este trabajo he tenido que realizarlo recientemente.
Los temas siempre han sido un dolor de cabeza en Liferay. Hay que buscarse soluciones como esta para intentar solventar estas problemáticas.
Un saludo.
Gracias Alberto.
Nos alegra que te haya servido.
Un saludo!
Buenos días,
Una pregunta: Si por ejemplo editáis un contenido web “desde la opción editar debajo del panel” y no desde administración… ¿Os aparece el pop-up donde está el código de la plantilla o lo oculta por problemas de compatibilidad?
Yo esto lo he hecho pero de otra
Buenos días!
Una pregunta, si desde un contenido web “editáis plantilla en el mismo panel” y no desde administración… ¿Os muestra el pop-up de edición de plantilla?
He hecho la integración de otra manera y lo único que me fallaba era este pop-up de edición desde el propio contenido…
Un saludo!!
Good job!!!
Hola Juanma.
Por desgracia no funciona de este modo tampoco. Hemos probado algunas variaciones eliminando bootStrap 2 y el problema persiste. Me temo que es un efecto colateral de insertar bootStrap 3 en Liferay 6.2.
Muchas gracias por comentar.
Un saludo!
Gracias por contestar,
A este problema le he dado millones de vueltas. Incluso he llegado a tocar librerías del pop-up pero llegó un punto en que era insostenible seguir. Es una pena que solo este pequeño “error” puede estropear el trabajo de algunos meses “depende del cliente”.
Os dejo un enlace creado por mí para hacerlo de otra manera: http://stackoverflow.com/questions/35011112/work-with-bootstrap-3-3-6-in-liferay-6-2
Muchas gracias por vuestra atención,
Un saludo!!
Gracias a ti por pasarte Juanma.
En su día, a raíz de nuestro post, Marcos de Liferay, con el que tenemos relación, estuvo dándole una vuelta y planteó una solución eliminando bootStrap 2 y dejando sólo la versión 3. En cualquier caso el problema que planteas persiste: https://web.liferay.com/es/web/marcos.castro/blog
Todo apunta a que Liferay no estaba preparado para utilizar una versión distinta de bootStrap, de hecho en el mismo Symposium tras preguntarles dudas sobre integrar bootStrap 3 no se han llegado a mojar y han recomentado dejar la versión original si no es estrictamente necesario.
Un saludo!