Ya todos sabemos que Liferay 7 está en el horno y ya le queda poco para salir, por ello vamos a ir adelantándonos a la salida y vamos a empezar a saber un poco más de la nueva mecánica que han implementado.
Hoy toca el turno de los temas de apariencia y como van a funcionar a partir de ahora. Han sacado bastantes novedades respecto a ellos asi que vamos a verlo poco a poco.
Vamos a tomar como punto de inicio la forma en la que se crean los temas de apariencia.
Ant a muerto y han nacido trillizos!
A partir de ahora ya no utilizaremos ANT para hacer la creación y los despliegues de los temas de apariencia. En lugar de esto, utilizaremos: Yeoman, Gulp y Bower.
Yeoman hará las veces de wizard y nos permitirá crear nuevos plugins a través de su asistente de creación o importarlos, por el momento.
Gulp nos permitirá, entre otros, realizar los despliegues, compilaciones, comprobar errores de CSS, etc.
Por último, Bower nos permitirá gestionar las dependencias de los plugins aunque este aún no lo hemos probado.
Nuestro primer tema de apariencia en Liferay 7
Si aún nos te has instalado todo lo que he indicado en el artículo anterior ¡No sé a que esperas!
Para crear un tema de apariencia lo primero que debemos hacer es descargarnos todo el software que os indicaba más arriba. Para ello, debemos abrir una consola CMD(Inicio -> Ejecutar -> CMD) y escribir lo siguiente:
npm install -g yo gulp bower
Esto nos instalará Yeoman, Gulp y Bower.
(NOTA:Antes de seguir aseguraros de que habéis arrancado Liferay 7 ya que si no a la hora de crear el tema no os encontrará la carpeta deploy)
Lo siguiente será instalar el generador de tema de Liferay, pero antes debéis colocaros con la consola sobre el directorio en el que queréis crear el tema de apariencia. A continuación escribís lo siguiente:
npm install -g generator-liferay-theme
Si todo ha ido bien se mostrará esto:
En este punto ya estamos listos para crear el tema de apariencia. Empezamos ejecutando:
yo liferay-theme
Lo siguiente que nos pide es el nombre del tema de apariencia, en nuestro caso pulsamos intro para que coja el por defecto(My Liferay Theme).
Nos pide el ID del tema que queremos crear. AL igual que antes, lo vamos a dejar por defecto(my-liferay-theme).
Ya queda poco, ahora toca la versión del tema de apariencia, en este caso, 7.0. Lo elegimos moviendo las flechas arriba y abajo y pulsando intro.
Ahora el lenguaje que vamos a utilizar en nuestras templates, yo me decanto por velocity.
¿Soporte para Compass? Esto dependerá de si váis a usar compass o no. Liferay ya lo está deprecando asi que queda a vuestra elección pero yo le voy a dar a no.
Una vez terminado este último paso nos creará el tema de apariencia después de ejecutar una serie de comandos de npm.
Por último, nos pedirá la ruta del tomcat de Liferay 7, en mi caso D:\liferay-portal-7.0-ce-a1\tomcat-7.0.62.
¡Y ya esta! Fácil, sencillo y para toda la familia :)
En la carpeta SRC ya veréis que hay una carpeta CSS creada con un _custom.css creado. Esto ya funciona como en versiones anteriores, creamos los archivos con las rutas que queremos modificar(templates, js, images, etc).
Una vez modificado lo que queráis necesitamos desplegar el tema de apariencia, para ello, debemos ejecutar el siguiente comando(siempre situándonos sobre la carpeta del tema de apariencia):
gulp deploy
Esto compilará nuestro tema de apariencia y lo desplegará en el portal. Si entráis al portal y os váis a Sites -> Site Pages podéis ver abajo como está creado y listo para usarse.
Para terminar, quiero dar un agradecimiento especial a Marcos Castro, miembro del equipo de Liferay España por el fantástico Workshop de temas de apariencia que nos impartió.