Guide liferay themestraining_lr6.2_v1

GUIDE - LIFERAY THEMES
TRAINING 6.2 CE/EE
VERSION 1.0
JANUARY 1, 2014
1PRÓLOGO.............................................................................................3
2INTRODUCCIÓN.....................................................................................3
2.1INTRODUCCIÓN A LIFERAY.........................................................................................3
2.2INTRODUCCIÓN A TEMAS DE APARIENCIA (LIFERAY THEMES)............................................5
2.3INSTALANDO EL SERVIDOR LIFERAY PARA EL DESARROLLADOR..........................................6
2.4INSTALANDO Y CONFIGURANDO LIFERAY'S PLUGINS SDK.................................................6
2.4.1Pasos para instalar y configurar Plugins SDK................................................7
2.4.2Pasos para instalar Liferay IDE (Extensión de Eclipse).................................8
2.4.3Pasos para instalar Liferay Developer Studio (Desarrollo Liferay EE)...........9
2.5INTERFAZ DE USUARIO DE LIFERAY............................................................................10
2.5.1Navigation Menu.........................................................................................10
2.5.2Dockbar......................................................................................................11
2.5.3Portlets.......................................................................................................11
2.6INTRODUCCIÓN A PLUGINS.......................................................................................11
3ANATOMÍA DE UN THEME.....................................................................11
3.1TEMPLATES PRINCIPALES Y ESTRUCTURA DE CARPETAS.................................................11
3.2EXTENDIENDO LIFERAY THEMES ADECUADAMENTE........................................................12
3.3CONSTRUYENDO UN THEME EN LIFERAY.....................................................................13
3.4CREANDO UN THEME DESDE CERO............................................................................14
3.4.1Crear Theme utilizando Plugins SDK...........................................................14
3.4.2Crear Theme utilizando Liferay IDE / Liferay Developer Studio..................15
3.4.3Ficheros importantes a tener en cuenta.....................................................17
3.4.4Tecnologías utilizadas por Liferay para UI...................................................17
3.4.5Ficheros de configuración del Theme.........................................................19

4DESARROLLO DE THEMES....................................................................20
4.1 MODIFICANDO LA CABECERA (HEADER)....................................................................20
4.2 PERSONALIZANDO EL MENÚ DE NAVEGACIÓN PRINCIPAL................................................22
4.3 APLICANDO ESTILOS A LAS CAJAS DE LOS PORTLETS....................................................24
4.4 MODIFICANDO EL PIE (FOOTER)...............................................................................25
4.5 PERSONALIZANDO HOJAS DE ESTILOS.......................................................................26
4.5.1 Referenciando imágenes desde el Theme.................................................28
5DESARROLLO DE THEMES – THEMES AVANZADOS..................................29
5.1 CREANDO ESQUEMAS DE COLOR (COLOR SCHEMES) ADICIONALES.................................29
5.2 CONFIGURACIONES EN THEMES...............................................................................31
5.3 LAYOUT TEMPLATES..............................................................................................32
5.4 EMPAQUETANDO LOS THEMES PARA SU DISTRIBUCIÓN..................................................36
5.4.1 Empaquetado desde el Plugins SDK..........................................................36
5.4.1 Empaquetado desde Liferay IDE / Liferay Developer Studio......................36
5.5 INTRODUCCIÓN A VELOCITY....................................................................................37
5.6 USANDO VELOCITY PARA ACCEDER A VARIABLES........................................................37
5.6.1 Lista de variables Velocity disponibles para Themes.................................37
5.6.2 Lista de variables Velocity disponibles para Layout Templates.................43
5.6.3 Lista de variables Velocity disponibles para Contenidos Web....................44
5.7 INTERNACIONALIZACIÓN DE MENSAJES (I18N) EN EL THEME..........................................44
5.8 EMBEBIENDO PORTLETS EN EL THEME......................................................................45
5.9 EMBEBIENDO PORTLETS EN EL LAYOUT TEMPLATE.......................................................46
5.10 DISEÑO PARA CONTENIDOS WEB Y PORTLETS..........................................................46
5.11 DISEÑO RESPONSIVO (MOBILE/TABLETS/ESCRITORIO)...............................................47
5.12 CÓMO INCLUIR JQUERY Y OTRAS LIBRERÍAS JAVASCRIPT EN LOS THEMES.........................50
5.13 RESUMEN..........................................................................................................51
5.14 BUENAS PRÁCTICAS............................................................................................51
5.15 COMO OPTIMIZAR EL RENDIMIENTO........................................................................52
5.16 USO DE MAVEN PARA CONSTRUIR THEMES..............................................................53
5.16.1 Listado de Artefactos Liferay disponibles para trabajar con Maven.........53
5.16.2 Listado de Arquetipos Liferay disponibles para trabajar con Maven........54
5.16.3 Listado de Targets Liferay disponibles para trabajar con Maven.............54
5.16.3 Repositorios Maven Disponibles..............................................................54

2014 Guide - Liferay Themes Training 6.2 CE/EE Page | 3

1 Prólogo
Este documento es la guía del curso de Liferay Themes Training
LR6.2.
En él se describen los diferentes aspectos relacionados con el curso
desde el punto de vista técnico, con el objetivo que el
Diseñador/Maquetador, cuente con la información relevante y de
interés necesaria, para realizar Themes en Liferay Portal de manera
adecuada.
2 Introducción
2.1 Introducción a Liferay.
Liferay Portal es uno de los frameworks de portales más maduros y de
mayor auge en el mercado a nivel mundial. Es un producto de código
abierto (Open Source), y totalmente personalizable para cumplir las
exigencias en el ámbito empresarial.
También es una plataforma Web corporativa que ayuda a desarrollar
soluciones empresariales con resultados inmediatos y valor a largo
plazo.
Es un producto “server-agnóstico”, multiplataforma y diseñado para
integrarse dentro del entorno empresarial.
Se basa en estándares J2EE y cumple con las especificaciones de
Portlets JSR 168/286.

Como funcionalidades principales podemos encontrar las siguientes:
CMS
Incorpora un CMS muy completo, con versionado de contenidos Web y
ficheros del gestor documental. Publicación diferida,
exportación/importación de datos, categorías y etiquetas, meta-datos,
workflows de aprobación, soporte multi-dispositivo, etc.
Componentes Built-in
Liferay viene de serie con una gran cantidad de componentes, como
portlets, Layout Templates, Themes, y herramientas colaborativas,
Wiki, Foros, Blogs, Calendario, etc.
Templates
Los templates o plantillas, son utilizadas para facilitar la
personalización y reutilización de aspectos del portal, como ser:
plantillas de Sitios Web, plantillas de páginas, plantillas de contenidos,
y hasta plantillas de aplicaciones (Portlets). Dichas plantillas permiten
de una manera fácil y rápida personalizar el portal, e incluso facilita su
administración. Por ejemplo, para el caso de plantillas de Sitios Web,
es posible mantener cientos de Webs desde una sola plantilla maestra,
o bien contar con plantillas predefinidas para diferentes tipos de
páginas habituales.
Internacionalización (i18n)
Prácticamente todo en Liferay soporta el llamado multi-linguismo,
focalizando en componentes (Portlets), contenidos Web, páginas, etc.
de tal manera que de una manera muy sencilla se puedan crear sitios
webs internacionalizados.

Alta disponibilidad y tolerancia a fallos.
Liferay soporta nativamente su instalación en alta disponibilidad. Esto
quiere decir, que se puede instalar más de un nodo en modo
activo-activo, para permitir la redundancia y tolerancia a fallos, así
como su escalado horizontal.
Para ello se basa en Cluster Link, el cual es una implementación del
producto que permite el replicado de Caches e Índices entre los
diferentes nodos del Cluster, lo que lo hace un producto robusto y
escalable a nivel de arquitectura.
Sistema de permisos
Liferay proporciona de serie un sistema de permisos que incluye,
Usuarios, Roles, Grupos y Organizaciones con un nivel de permisos
que puede ir desde alto nivel, a permisos de grano fino, permitiendo
controlar de manera fiable la seguridad del portal.
Conclusión
Como conclusión final a la pregunta ¿qué es Liferay?, podemos decir
que Liferay es:
Plataforma Web
Gadgets, Portlets, Páginas, Temas, elementos de navegación y Sitios
Web.
Sistema WCM
Repositorio de Documentos, Contenidos Web, Workflows de
aprobación, Versionado.
Plataforma de Integración

Integración de diferentes herramientas de Empresa, Sitios, bajo una
misma UI.
Plataforma de Colaboración
Colaboración de Equipos, Organización, Social.
Plataforma de Aplicaciones Sociales
Herramientas Sociales integradas, Blogs, Foros, Wikis, Calendarios,
Tareas, etc.
2.2 Introducción a Temas de Apariencia (Liferay
Themes).
Liferay incluye el concepto de Temas (Themes) a partir de la versión
3.5 para permitir a los usuarios cambiar el Look & Feel de sus
portales y adaptarlos a sus necesidades.
Los Temas (Themes) son plugins de Liferay. Se construyen de una
manera estándar como otros tipos de extensiones (plugins) del portal.
Esto permite “componentizar” y distribuir de una manera sencilla los
diferentes componentes que se requieran.
Cada tipo de plugin está formado por una estructura de directorios
concreta, y para el caso de los themes, éstos pueden contener
plantillas, CSS, Imágenes, JavaScript, XMLs, etc.
Los Themes también permiten el concepto de herencia, para facilitar
su reutilización y reducir el tiempo de desarrollo.

Una vez construido y desplegado en Liferay, un theme puede ser
aplicado tanto a sitios Web como a páginas. Incluso se pueden
configurar en plantillas de sitio Web o plantillas de páginas, para que
de manera automática, éstos se apliquen al utilizar este tipo de
plantillas a la hora de construir nuestras webs o páginas.
A través de los themes, vamos a poder dar estilos no sólo al propio
Web (cabecera Head, pie Footer, Cuerpo Body), sino también
podremos dar estilos a otros componente y elementos como, Portlets,
Layout Templates y Contenidos Web.
Los themes también permiten tener configuraciones propias, es decir,
que es posible definir campos que el usuario podrá seleccionar para
personalizar o cambiar el comportamiento del theme desde la UI, con
el objetivo de brindar más flexibilidad. Estos campos luego pueden ser
leídos para obtener su valor desde el código del propio theme, y así
realizar las acciones que consideremos. Por ejemplo una configuración
típica, es mostrar no el logo de la cabecera.
Existe una característica llamada esquemas de color (Color Schemes),
y éstas son variantes de color de un mismo theme. Es decir, que lo
que cambiará es solamente la hoja de estilos e imágenes, no así sus
plantillas. Esto permite por ejemplo tener un mismo theme con
diferentes gamas de color, Azul, Rojo, Verde, etc.
Como hemos mencionado anteriormente en este mismo apartado, los
themes utilizan el concepto de herencia. Liferay viene con varios
themes de base, como son: _unstyled, _styled, classic,
control_panel. También es posible heredar de cualquier theme
propio!
Cual es el concepto detrás de la herencia, es sencillo. Se basa en que
uno desarrolla un theme, heredando desde otro una parte muy
importante de su funcionalidad, con cientos de imágenes, iconos,

scripts, etc. y el desarrollador de themes, sólo va a realizar pequeños
cambios para llevar el theme a sus requisitos, sin tener que partir
desde “cero”, ya que esto sería muy trabajoso y llevaría tiempos
extraordinarios.
2.3 Instalando el servidor Liferay para el
Desarrollador.
Para poder trabajar con Liferay como desarrollador, la manera más
habitual es instalar un entorno en local para trabajar, es decir, en el
propio equipo del desarrollador.
Para ello debemos seguir los siguientes pasos:
Paso 1: Descargar un bundle de Liferay (paquete ya preconfigurado
con un servidor de aplicaciones). En nuestro ejemplo descargaremos
el bundle te Tomcat y Liferay de la siguiente URL:
http://www.liferay.com/es/downloads/liferay-portal/available-releases

Paso 2: Una vez realizada la descarga, descomprimir el bundle en una
carpeta.
2.4 Instalando y configurando Liferay's Plugins
SDK.
Liferay proporciona un entorno de desarrollo para facilitar la
construcción y despliegues de extensiones como Portlets, Themes,
Layout Templates, Hooks, etc. Este entorno se basa en una
herramienta llamada Plugins SDK, la cual a su vez se apoya en
Apache ANT y Apache Maven para brindar una serie de targets que
permiten construir, y desplegar los plugins.
Hay algunas opciones para la instalación del Plugins SDK:
Una de ellas es descargar únicamente el Plugins SDK para ser utilizado
desde línea de comandos. Para la versión Liferay Portal Community
Edition (CE) se puede descargar desde el siguiente enlace:
http://www.liferay.com/es/downloads/liferay-portal/available-releases

NOTA: Para todas las versiones de Liferay Portal Enterprise
Edition (EE) las descargas se realizan desde el portal de clientes
(Customer Portal), a través de una cuenta de cliente o desarrollador
autorizado.
2.4.1 Pasos para instalar y configurar Plugins SDK.
Paso 1: Una vez descargado, simplemente descomprimirlo en una
carpeta:
liferay-plugins-sdk-6.2.0-ce-ga1-20131101192857659.zip 
liferay-plugins-sdk-6.2.0 (esta carpeta la llamaremos ${sdk.dir})
Paso 2: Para funcionar el Plugins SDK requiere instalar Apache ANT.
Para ello descargar la última versión en formato .zip o .tar.gz desde:
http://ant.apache.org/bindownload.cgi
Una vez descomprimido el archivo de ANT, colocarlo en una carpeta, y
configurar por un lado una variable de entorno llamada ANT_HOME,
apuntando a la carpta raíz de ANT, y por otro agregando
ANT_HOME/bin al PATH del sistema.
Para comprobar que ANT está bien instalado, ejecutar en una consola:
ant –version
Esto debería dar una salida indicando la versión instalada, por
ejemplo:
Apache Ant(TM) version 1.8.4 compiled on August 8 2013
Paso 3: Antes de poder utilizar el Plugins SDK es necesario
configurarlo, para ello se debe crear un fichero en la carpeta raíz del
Plugins SDK llamado: ${sdk.dir}/build.[username].properties

rememplazando [username] por el nombre de usuario que esté
utilizando en el sistema. Ejemplo: build.mati.properties
En él debemos configurar algunas propiedades que tienen valores por
defecto en el fichero buid.properties del Plugins SDK, y que serán
sobrescritas por nuestro fichero personalizado.
Buena
práctica
No se debe modificar nunca el fichero original del
Plugins SDK ${sdk.dir}/build.properties
Luego editar nuestro fichero ${sdk.dir}/build.[username].properties y
poner en él las siguientes líneas de configuración:
app.server.type=[Indicar el tipo de servidor, por defecto su valor es
tomcat]
app.server.parent.dir=[Indicar el directorio donde está
descomprimido el Servidor Liferay bundle, por defecto su valor es $
{sdk.dir}/../bundles]
app.server.tomcat.dir=[Indicar el directorio que contiene el servidor
de aplicaciones, por defecto su valor es $
{app.server.parent.dir}/tomcat-7.0.42]
Si está utilizando por ejemplo Liferay 6.2 CE con el bundle llamado
liferay-portal-6.2.0-ce-ga1 con Tomcat 7.0.42 y su ubicación es
C:/Liferay/bundles/liferay-portal-6.2.0-ce-ga1, debe especificar las
siguientes líneas en el fichero ${sdk.dir}/build.
[username].properties :

app.server.type=tomcat
app.server.parent.dir=C:/Liferay/bundles/liferay-portal-6.2.0-ce-ga1
app.server.tomcat.dir=${app.server.parent.dir}/tomcat-7.0.42
2.4.2 Pasos para instalar Liferay IDE (Extensión de
Eclipse).
En lugar de tener que instalar el Plugins SDK y ANT de manera
manual, existen otra alternativa mucho más simple, que es la de
instalar un IDE de Liferay, ya sea la distribución para CE basada en
Eclipse IDE + Pugins conocida como Liferay IDE, o bien mediante
la versión para desarrolladores con suscripción de pago llamada
Liferay Developer Studio, el cual es una personalización de Eclipse
IDE.
Ambas opciones se pueden descargar para su sistema operativo
desde la siguiente URL:
http://www.liferay.com/es/downloads/liferay-projects/liferay-ide
Nota: Liferay IDE viene en dos formatos, o bien ya con Eclipse incluido
en un solo fichero de descarga, o bien mediante URLs de repositorios
para instalar en su propio Eclipse existente los plugins IDE de Liferay
como complementos siguiendo las instrucciones de la página. Para
nuestro ejemplo utilizaremos la opción de descarga completa de
Liferay IDE con Eclipse + Plugins.
Paso 1: Descargar Liferay IDE como un único fichero ya con Eclipse
IDE incluido.

Paso 2: Una vez descargado Liferay IDE, descomprimirlo en una
carpeta, por ejemplo c:/Liferay/ide/
Paso 3: Para ejecutar Liferay IDE, simplemente hacer doble click
sobre el fichero llamado Eclipse.

2.4.3 Pasos para instalar Liferay Developer Studio
(Desarrollo Liferay EE).
Liferay Developer Studio es la versión para desarrolladores que
trabajan con la versión de suscripción Enterprise Edition (EE) de
Liferay.
Paso 1: Una vez autenticado en www.liferay.com con una cuenta de
suscripción autorizada, puede descargar Liferay Developer Studio de
la siguiente URL:
http://www.liferay.com/es/downloads/liferay-projects/liferay-ide
Paso 2: Una vez descargado Liferay Developer Studio, descomprimirlo
en una carpeta, por ejemplo c:/Liferay/ide/
Paso 3: Para ejecutar Liferay Developer Studio, simplemente hacer
doble click sobre el fichero llamado LiferayDeveloperStudio.

2.5 Interfaz de usuario de Liferay.
La interfaz de usuario (UI) de Liferay, es un tipo de interfaz rica, la
cual define unas regiones específicas comúnmente utilizadas para la
creación de Sitios Webs. En la siguiente figura podemos ver los
elementos más importantes:
2.5.1 Navigation Menu
Este es el menú principal del sitio, generalmente de tipo horizontal
debajo de la cabecera del theme. Este menú muestras las diferentes
páginas de un sitio Web y puede ser multinivel.
2.5.2 Dockbar
El Dockbar es la barra de accesos principal, para poder navegar a
diferentes sitios webs, acceder al panel de control (Control Panel), o
bien ir al perfil del usuario.

2.5.3 Portlets
Los llamados portlets son los componentes que se utilizan para poblar
nuestras páginas y dotarlas de contenidos, funcionalidad, elementos
multimedia, herramientas, etc.
Estos componentes pueden por lo general se aglutinan en la zona
media del theme, entre la cabecera y el pie de página. A esta porción
se la suele llamar cuerpo o body de la página, y permite mover
portlets (Drag & Drop) entre las diferentes columnas, para configurar
la página a nuestro gusto o requerimiento.
2.6 Introducción a Plugins.
La manera recomendada para extender Liferay, es mediante la
construcción de plugins. Los tipos de plugins pueden ser, Portlets,
Themes, Layout Templates, Hooks, Ext y Web.
Una vez construidos, éstos se empaquetan como ficheros WAR para
ser desplegados en Liferay. Las herramientas más habituales para
construir estos ficheros WAR es ANT (Plugins SDK) o Maven ambos de
Apache.

Al lanzar la construcción mediante las herramientas Ant o Maven, se
procede a construir el proyecto del plugin en cuestión. Una vez
finalizado el proceso deconstrucción y empaquetado, el fichero WAR
generado, es depositado en la carpeta llamada Auto Deploy. Esta
carpeta básicamente es escaneada permanentemente por Liferay
para detectar paquetes a instalar.
Una vez que el portal detecta un plugin para instalar, lo preprocesa,
desempaquetándolo, realizando tareas como aplicar librerías
necesarias, registrar sus ficheros, etc. y procede a su despliegue
dentro del servidor de aplicaciones.
Al finalizar el proceso de instalación el plugin está listo para ser
utilizado.
Tanto para agregar, o modificar un plugin existente, el proceso es el
mismo.
3 Anatomía de un Theme

3.1 Templates Principales y Estructura de
Carpetas.
La interfaz de usuario (UI) de Liferay, es un tipo de interfaz rica que
puede ser personalizable en el producto, a través de un tipo de plugin
llamado Theme o Tema de Apariencia.
Con este tipo de plugins podemos definir el Look & Feel general de
los diferentes Sitios Web y/o páginas individuales.
Básicamente un theme define los estilos de todos los portlets y
contenidos de una página, por tanto éste controla el modo en que se
ve dicha página o Sitio Web, incluso cuando pensamos en diseños Web
multi-dispositivo o con diseño responsivo.
Desde el punto de vista del desarrollo, un theme se compone de un
conjunto de ficheros CSS, imágenes, Javascript y plantillas de
Velocity, JSP o Freemarker.
Cada theme se compone a partir de una serie de carpetas específicas,
que son requeridas para la correcta construcción de nuestro plugin, al
igual que ciertos ficheros de configuración que describiremos más
adelante, pero donde básicamente damos información acerca del
plugin y acerca del propio theme, con el objetivo que Liferay sepa
como debe instalar, y ejecutar nuestro theme en el portal.
En la siguiente imagen se muestra una estructura de ficheros típica.

Tal y como se muestra en la figura anterior, existen unas series de
carpetas en nuestra estructura de theme, las cuales son sobrescritas
en tiempo de despliegue por el contenido de nuestra carpeta de
trabajo llamada _diffs.
La idea de la carpeta _diffs, es que el desarrollador de themes coloque
allí sus nuevos ficheros y los que desee sobrescribir, manteniendo la
misma estructura de carpetas base para que ello funcione, como ser:
css, images, js y templates. Es decir, que dentro de la carpeta _diffs
se deben crear estas mismas carpetas en la medida que se deseen
sobrescribir los diferentes elementos.
Ejemplos: _diffs/css, _diffs/images, _diffs/js, _diffs/templates
Buena
práctica
No se debe modificar nunca los ficheros CSS
originales fuera de la carpeta _diffs, ni tampoco se
deben copiar estos CSS dentro de la carpeta _diffs. En
lugar de ello, crear un fichero custom–xxxx.css
donde xxxx es el nombre del fichero CSS que se
quiere sobrescribir y realizar la sobreescritura de las

diferentes clases utilizando el lenguaje CSS.
3.2 Extendiendo Liferay Themes adecuadamente.
Así mismo Liferay viene con varios themes de base, como son:
_unstyled, _styled, classic, control_panel, de los cuales podemos
heredar a la hora de hacer un tema para nuestro portal. También es
posible heredar de cualquier theme propio, que a su vez puede estar
heredando de los base de Liferay.
Para entender mejor este concepto de herencia de themes, veamos el
siguiente gráfico que esquematiza su estructura.

Aquí se puede ver como nuestro theme (en color verde), puede
realizar una herencia de un theme que desee, ya sea interno de
Liferay, o bien de uno propio. Es importante destacar que sólo se
puede heredar de uno en concreto, no de multiples a la vez, aunque sí
que es posible heredar de varios indirectamente, si del que heredamos
a su vez hereda de otro.
Por ejemplo, lo más habitual a la hora de hacer un theme de Liferay en
un tiempo razonable, es heredar del llamado theme classic, este
theme a su vez hereda de _styled, que es un theme que contiene
información básica de diseño y que es aprovechado por el theme
classic.
El theme _styled a su vez, hereda de _unstyled, que es un theme sin
diseño de apariencia, pero que proporciona varias funcionalidades

requeridas por todos los themes, como por ejemplo las variables de
Velocity que nos permite acceder a información de contexto en
nuestro theme, como por ejemplo el nombre del web o el logo, o si el
usuario está autenticado o no, etc. y que veremos más adelante.
3.3 Construyendo un Theme en Liferay.
Para construir un theme en Liferay es necesario primero diseñar el
tema desde el punto de vista de Diseño Web. Para ello es preciso
identificar aquellos elementos que formarán parte de nuestro theme y
cuáles no.
Se deben definir convenciones de nombres para dar estilos a portlets
y componentes creados por el equipo de desarrollo.
La maquetación inicial puede existir o no, dependiendo del nivel de
experiencia del diseñador/maquetador a la hora de construir el theme.
Buena
práctica
Si se parte de una maqueta HTML, una buena manera
de evitar problemas de compatibilidad con los
diferentes navegares, es comprobar primero que la
propia maqueta HTML funciona en todos los
navegadores requeridos, antes de comenzar con los
trabajos de construcción e integración del theme.
Esto reduce los tiempos de detección de fallos en una
edad temprana del desarrollo.
Veamos la estructura más tradicional de un theme en la próxima
imagen.

Header (Cabecera)
La cabecera del theme suele contener el logo de empresa, a veces
también el logo del cliente final, el menú de navegación Dockbar, y a
veces se suele instanciar en la cabecera el portlet de búsqueda
(search).
En esta cabecera, también se suelen poner enlaces (links) fijos como
(Contáctenos, Ayuda, etc.)
Otro elemento importante del header es el menú horizontal principal
de navegación (Navigation Menu) que suele ser el último elemento de
la cabecera y se carga a través de un include.
Body (Cuerpo)
El body o cuerpo, es la zona media principal donde se colocarán la
mayor parte de los componentes (portlets), que el usuario tendrá
disponible en la página.

La zona del body, también se subdivide en columnas y filas, para
permitir colocar los diferentes portlets en lugares concretos, utilizando
Drag & Drop, a la hora de confeccionar nuestras páginas.
El responsable de permitir esta subdivisión del body, son los llamados
Layout Templates, y son un tipo de plugin específico y son
aplicables a las páginas.
En la siguiente imagen, podemos ver un ejemplo de un layout
template de dos columnas en una proporción de 30% para la columna
izquierda, y un 70% para la columna derecha. Por lo general se
realizan estas proporciones de manera elástica o dinámica para que
se adapte a la pantalla, pero puede darse el caso de que estas
medidas de anchos, sean fijas en pixeles, aunque prácticamente esta
técnica ya no se utiliza.
Footer (Pie)

En el pie generalmente encontramos enlaces estáticos simples a
páginas transversales, como pueden ser, Política de Privacidad, Mapa
del Sitio, etc. aunque también podemos encontrar en ciertas
ocasiones, un menú dinámico similar al Navigation Menu, para listar
de manera dinámica las páginas disponibles en varias columnas.
Buena
práctica
Si tenemos que desarrollar un pie (footer) de página
muy grande, o con lógica, una buena opción es
extraer el código del fichero portal_normal.vm, y
llevarlo a un fichero separado, por ejemplo uno
llamado footer.vm, para luego ser incluido desde el
portal_normal.vm con la siguiente línea de código:
#parse ("$full_templates_path/footer.vm")
3.4 Creando un Theme desde cero.
En este apartado veremos como crear un theme desde cero, y
tenemos básicamente dos posibilidades:
3.4.1 Crear Theme utilizando Plugins SDK
El Plugins SDK de Liferay permite de manera muy sencilla la creación
de un theme desde línea de comandos.
Paso 1: Desde la consola, ir a la carpeta ${sdk.dir}/themes/ y
ejecutar el siguiente comando:
Linux / Mac
./create.sh myweb "My Web Theme"
Windows
create.bat myweb "My Web Theme"
Donde myweb es el ID de nuestro theme, y “My Web Theme”, es el
nombre que tendrá nuestro theme dentro de Liferay.

La ejecución de este comando creará la siguiente carpeta con el
esqueleto base para nuestro theme: $
{sdk.dir}/themes/myweb-theme
Tip
1) En los sistemas Linux y Mac, la primera vez, los
ficheros ejecutables “.sh”, hay que darles permisos
de ejecución para poder utilizarlos, con lo cual antes
hay que realizar el siguiente comando la primera vez:
Ejemplo para el script de creación: chmod +x
create.sh
2) No utilice la palabra “theme” en el id del theme, ya
que el SDK agrega automáticamente el sufijo
“-theme” ejemplo: myweb-theme.
3.4.2 Crear Theme utilizando Liferay IDE / Liferay
Developer Studio
Tanto el Liferay IDE como el Liferay Developer Studio de Liferay
permiten de manera muy sencilla la creación de un theme desde su
interfaz gráfica.
Paso 1: Desde dentro del IDE seleccionar la opción crear nuevo
plugin:
Paso 2: Indicar el nombre del plugin y en el tipo seleccionar Theme:

Paso 3: En el siguiente paso, se pide que se indique tanto el theme
padre para aplicar la herencia. Lo habitual es partir desde el theme
classic de Liferay.
Por otro lado se pide el tipo de tecnología a utilizar en el theme, que
por lo general y al igual que Liferay utilizaremos Velocity.
Una vez creado el esqueleto del theme, ya se puede comenzar a
trabajar en él para desarrollar nuestro diseño personalizado en base a
nuestras necesidades.
Paso 4: Crear las siguientes carpetas:
[my-theme]/docroot/_diffs/css/
[my-theme]/docroot/_diffs/images/
[my-theme]/docroot/_diffs/templates/
Paso 5: Crear el fichero que será nuestro punto de extensión a las
hojas de estilos:
[my-theme]/docroot/_diffs/css/custom.css

Paso 6: Copiar la plantilla principal del theme desde el theme
heredado:
Desde: [my-theme]/docroot/templates/portal_normal.vm
Hacia: [my-theme]/docroot/_diffs/templates/portal_normal.vm
Paso 7: Desplegar el Theme y comprobar que funciona correctamente
antes de continuar, haciendo botón derecho sobre el
proyectoSDKdeploy como se observa en la siguiente imagen:
Tip Desde el Plugins SDK, se pueden ejecutar los targets
de ANT, por ejemplo, para realizar el despliegue del
theme, se debe ejecutar el siguiente comando desde
la consola y ubicado en la carpeta raíz del theme que
queramos desplegar:
ant clean deploy

Con el comando anterior, estamos invocando dos
targets de ANT en secuencia, primero se realizará un
clean borrando los ficheros utilizados temporalmente
en el proceso de despliegue, y luego el target
deploy, el cual realiza la tarea de construcción y
despliegue del plugin.
Paso 8: Agregar las imágenes favicon.ico, screenshot.png y
thumbnail.png en la carpeta /images. Estos ficheros tienen que ser
reemplazados en realidad por los ficheros definitivos una vez el theme
está terminado, para poder tomar un screenshot, realizar un
thumbnail y fabricarle un icono (favicon.ico).
Paso 9: Realizar las modificaciones necesarias para llegar al theme
deseado a nivel HTML, CSS, imágenes, scripts…
3.4.3 Ficheros importantes a tener en cuenta
Los siguientes ficheros son los más importantes a la hora de crear un
theme:
TEMPLATES
/templates/init_custom.vm - Utilizado para inicializar variables,
servicios, etc, que serán utilizados en el theme.
/templates/navigation.vm - Define el menú horizontal principal de
navegación del Site.
/templates/portal_normal.vm - Plantilla principal del Sitio.
/templates/portal_pop_up.vm - Plantilla principal del Sitio utilizada
en el modo popup.
/templates/portlet.vm - Plantilla utilizada para las cajas de los
Portlets.

CSS
/css/custom.css - Fichero CSS principal desde el cual se construirá la
estructura necesaria para dar estilos al portal.
JAVASCRIPT
/js/main.js - Fichero JS principal donde se inyectan algunos
comportamientos de elementos como el navigation o breadcrumb.
También podemos agregar aquí Javasctipt personalizado.
3.4.4 Tecnologías utilizadas por Liferay para UI
AlloyUI
Es un Framework Javascript de desarrollo de UI construido sobre la
librería YUI3 de Yahoo. AlloyUI utiliza también el Framework Javascript
creado por Twitter Bootstrap (HTML/CSS), para simplificar el
desarrollo de UI en aplicaciones Web.
Para mayor información sobre estas tecnología consultar las siguientes
URL:
http://alloyui.com/
http://getbootstrap.com/
HTML5
AlloyUI se basa en la estructura de HTML5. Esta estructura sólo se
basa en un único <!doctype>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>

</head>
<body>Body of the document</body>
</html>
HTML5 Introduce nuevos elementos con sentido semántico como
<nav>, <footer> en lugar de <div>,<span>, y otros nuevos
elementos multimedia como <audio> y <video>.
Éste se ha sido diseñado para cumplir con las exigencias de los Sitios
Web modernos de una manera estandarizada.
Para mayor información sobre esta tecnología consultar la siguiente
URL:
http://www.w3.org/community/webed/wiki/HTML
Style – CSS3
La última versión del estándar de CSS, es compatible con sus
predecesores, e introduce nuevos módulo de mejoras como:
Selectores, Backgrounds y Borders, Text Effects, Animations, Multiple
Column Layout, etc…
div {
border:2px solid;
border-radius:25px;
}
URL:
http://www.w3.org/community/webed/wiki/CSS

3.4.5 Ficheros de configuración del Theme
Éstos ficheros se encuentran en la carpeta /docroot/WEB-INF/
- liferay-look-and-feel.xml – Define el id/nombre/versión del theme,
su configuración y esquemas de color.
<theme id=”tiger” name=”Tiger”>
<settings>
<setting key="portlet-setup-show-borders-default"
value="false"/>
</settings>
</theme>
- liferay-plugin-package.properties – Define información del
plugin, versiones soportadas, licencia, autor, etc.
name=Training1
module-group-id=liferay
module-incremental-version=1
page-url=http://www.liferay.com
…
author=Liferay, Inc.
licenses=LGPL
liferay-versions=6.2.0+
resources-importer-developer-mode-enabled=true

4 Desarrollo de Themes
4.1 Modificando la cabecera (Header).
Para modificar el theme se debe editar el fichero:
[my-theme]/docroot/_diffs/templates/portal_normal.vm
Para comprender mejor este fichero, vamos a analizarlo en
profundidad.
En la siguiente imagen se puede ver su estructura:
Como podemos ver, existen diferentes zonas que en realidad son
elementos <div> que se utilizan para definir el body, dentro de éste

se encuentra el wrapper, y a su vez dentro de éste, se encuentran el
header, content y footer.
En cada uno de ellos se colocan los diferentes elementos de código
como pueden ser Macros de Velocity que van a insertar diferentes
porciones de HTML, o variables que podemos utilizar en nuestro
theme, y también includes de otros ficheros o contenidos necesarios
para el correcto funcionamiento del tema.
Ahora que hemos visto el esquema general del fichero
portal_normal.vm, vamos a centrarnos en la cabecera del theme o
header.
La cabecera del theme se encuentra identificada por el elemento
<header>.
Vamos a comentar el código más significativo para comprenderlo
mejor:
<header id="banner" role="banner"> (Cabecera)
<div id="heading">
<h1 class="site-title"> (Logo principal y nombre del sitio)
<a class="$logo_css_class" href="$site_default_url"
title="#language_format ("go-to-x", [$site_name])">
<img alt="$logo_description" height="$site_logo_height"
src="$site_logo" width="$site_logo_width" />
#if ($show_site_name)
<span class="site-name" title="#language_format
("go-to-x", [$site_name])">
$site_name

</span>
#end
</a>
</h1>
<h2 class="page-title"> (Título de la página)
<span>$the_title</span>
</h2>
</div>
#if ($has_navigation || $is_signed_in) (Menu Principal Navigation)
#parse ("$full_templates_path/navigation.vm")
#end
</header>
Todo lo que se agregue dentro de este elemento <header>, aparecerá
en la cabecera del theme.
Buena
práctica
Es importante que mientras se vayan modificando las
diferentes partes del HTML del theme, se respeten las
estructuras existentes del theme heredado, como son
los principales divs contenedores y sus atributos
como ids, nombres de clases, roles, etc. y centrarse
en modificar lo que ellos contienen. De esta forma
evitaremos pérdida de funcionalidad del theme
heredado.
4.2 Personalizando el menú de Navegación
principal.

Para modificar el menú principal de navegación horizontal, es decir, el
llamado Navigation Menu, se debe copiar y editar el siguiente
fichero heredado:
Desde: [my-theme]/docroot/templates/navigation.vm
Hacia: [my-theme]/docroot/_diffs/templates/navigation.vm
mejor:
#foreach ($nav_item in $nav_items)
...
#end
Cada ítem $nav_item, corresponde a cada una de las opciones de
menú de navegación principal. Por eso se recorren, con un #foreach
para iterar la lista de elementos del menú y poder extraer la
información de cada página como el nombre, enlace (link), target, etc,
para así poder generar el HTML correspondiente al menú horizontal.
A través de $nav_item, se puede acceder a los diferentes atributos y
configuraciones de cada página, ejemplo: $nav_item.icon(),
$nav_item.getName(), $nav_item.getURL().
Ejemplo:
<a aria-labelledby="layout_$nav_item.getLayoutId()"
$nav_item_attr_has_popup class="$nav_item_link_css_class"
href="$nav_item.getURL()" $nav_item.getTarget() role="menuitem">
<span>$nav_item.icon() $nav_item.getName()
$nav_item_caret</span>
</a>

Así mismo, a través de $nav_item.hasChildren(), se accede a las
páginas hijas del ítem en cuestión.
#foreach ($nav_child in $nav_item.getChildren())
...
#end
Cada ítem $nav_child, es igual a un $nav_item, es decir, posee sus
mismos atributos, configuraciones, etc.
A través de $nav_child, se puede acceder a los diferentes atributos y
configuraciones de cada página, ejemplo: $nav_item.icon(),
$nav_item.getName(), $nav_item.getURL().
<li class="$nav_child_css_class" id="layout_$nav_child.getLayoutId()"
$nav_child_attr_selected role="presentation">
<a aria-labelledby="layout_$nav_child.getLayoutId()"
href="$nav_child.getURL()" $nav_child.getTarget()
role="menuitem">$nav_child.getName()</a>
</li>
4.3 Aplicando estilos a las cajas de los Portlets.
Para modificar la caja de los portelts, se debe copiar y editar el
siguiente fichero heredado:
Desde: [my-theme]/docroot/templates/portlet.vm
Hacia: [my-theme]/docroot/_diffs/templates/portlet.vm

mejor:
<section class="portlet" id="portlet_$portlet_id"> (Contenedor del
portlet)
<header class="portlet-topper"> (Cabecera del portlet)
<h1 class="portlet-title"> (Título del portlet)
$theme.portletIconPortlet() <span
class="portlet-title-text">$portlet_title</span>
</h1>
<menu class="portlet-topper-toolbar"
id="portlet-topper-toolbar_$portlet_id" type="toolbar"> (Toolbar con
opciones del portlet)
#if ($portlet_display.isShowBackIcon())
<a class="portlet-icon-back"
href="$portlet_back_url">#language ("return-to-full-page")</a>
#else
$theme.portletIconOptions()
#end
</menu>
</header>
<div class="portlet-content"> (Cuerpo del portlet)
$portlet_display.writeContent($writer)
</div>
</section>

Desde este fichero es posible modificar el aspecto de las cajas de los
portlets modificando el HTML, pero como siempre respetando los
<div> principales contenedores y sus atributos como ids, nombre,
roles, etc. Por otro lado hay que tener en cuenta que cualquier cambio
en este fichero afectará a la visualización de las cajas de todos los
portlets en aquellas páginas que se utilice este theme.
4.4 Modificando el pie (Footer).
El pie también se encuentra en el fichero:
El pie del theme se encuentra identificado por el elemento <footer>.
mejor:
<footer id="footer" role="contentinfo"> (Contenedor del footer)
<p class="powered-by">
#language ("powered-by") <a
href="http://www.liferay.com" rel="external">Liferay</a>
</p>
</footer>
Para modificar el pie de página, simplemente editar el HTML dentro de
la etiqueta <footer>.

4.5 Personalizando Hojas de Estilos.
Como hemos visto el custom.css es el fichero donde, a partir del él,
comenzaremos la personalización de las hojas de estilos. Este es el
último fichero CSS incluido en la herencia de themes, con el fin de
permitir “sobrescribir” cualquier estilo que se necesite cambiar.
El fichero custom.css es incluido desde el fichero del theme heredado
main.css, de hecho es la última línea de este fichero. La idea es que
justamente se utilice la principal característica de CSS (Cascading
Style Sheets), la cual es la habilidad de sobrescribir en cascada
estilos en tiempo de ejecución, al ser cargados e interpretados por un
navegador. Por tanto al ser incluido en último lugar luego de todos los
estilos de toda la cadena de herencia, permite redefinir cualquier
estilo que necesitemos cambiar a nuestro gusto.
Buena
práctica
Es justamente por la habilidad de sobreescritura o
redefinición de estilos en los ficheros CSS Cascading
Style Sheets, que nunca se debe copiar un CSS
desde el theme padre a la carpeta _diffs/css, ya
que esto va a provocar muchas dificultades a la hora
de mantener el theme ante parches del producto, y lo
peor de todo es la gran dificultad y coste asociado
que esto tendrá, en futuras migraciones a nuevas
versiones de Liferay.
Contenido de [my-theme]/docroot/css/main.css

@import url(base.css);
@import url(application.css);
@import url(layout.css);
@import url(dockbar.css);
@import url(navigation.css);
@import url(portlet.css);
@import url(extras.css);
@import url(custom.css);
La técnica más utilizada para realizar un theme, es utilizar la
característica de herencia, y aplicar pequeños cambios hasta llevar el
Diseño Web a cumplir los requisitos deseados.
Liferay 6.2 viene integrado con Compass, el cual es un Open Source
CSS Authoring Framework, que utiliza el lenguaje Sass para
permitir la creación de potentes hojas de estilos. El concepto base es
el pre-procesamiento de los ficheros CSS.
Si abrimos por ejemplo el fichero [my-theme]/docroot/css/base.css,
veremos que la primera línea es:
@import "compass”;
Esta directiva proporciona el acceso al uso de Compass y sus
características ya integradas en los Themes de Liferay.

Un mixin es una función CSS que puede tener o no parámetros, y da
como salida una definición de estilos. Un mixin se declara utilizando el
comando @mixin y es llamado utilizando el comando @include.
@mixin custom-field-focus {
background: #CECE none;
border-color: #FF0;
}
input, textarea {
&.focus {
@include custom-field-focus;
}
}
En el ejemplo anterior se define una función llamada
custom-field-focus que se aplica cada vez que se le asigna a un
elemento input o textarea el class focus, cambiando su color de
borde y background.
Compass utiliza el lenguaje SASS, y este último tiene dos sintaxis
diferentes, Scss (extensión .scss) y Sass (extensión .sass). La sintaxis
más comúnmente utilizada es Scss ya que Sass se basa en
indentaciones de las líneas en lugar de llaves {}, siendo más antigua
y menos utilizada.
Para mayor información sobre estas tecnología consultar las siguientes
URL:
http://compass-style.org/

http://sass-lang.com/
4.5.1 Referenciando imágenes desde el Theme
Para referenciar imágenes en el theme, se pueden utilizar diferentes
técnicas.
Desde CSS
Para referenciar imágenes desde el CSS, la mejor manera es hacerlo
con un path relativo utilizando “../images”, por ejemplo:
.box img {
background-image: url(../images/box_bg.png);
}
Desde Templates
Para referenciar imágenes desde templates, la mejor alternativa es
utilizar el siguiente formato a través de la variable de Velocity
$images_folder:
<img src=”$images_folder/my_image.png” />
Buena
práctica
Siempre que sea posible, se debe evitar poner las
imágenes a nivel de templates en el propio HTML del
theme. En lugar de ello, es mucho mejor aplicar
imágenes a través de las clases CSS para los
diferentes elementos.
Hay que tener en cuenta que todas las imágenes que

se apliquen directamente sin el uso de CSS no
podrán ser una parte dinámica de los llamados
Esquemas de Color (Color Schmenes), ya que
serán fijas y no cambiarán al cambiar la hoja de
estilos.
5 Desarrollo de Themes – Themes
Avanzados
5.1 Creando Esquemas de Color (Color Schemes)
adicionales.
Liferay proporciona una característica en los themes llamada
esquemas de color o Color Schemes. Estos están pensados para
themes que necesitan variantes de color de un mismo theme, es decir,
cambian sus CSS e imágenes, pero el HTML no se modifica. Con esta
funcionalidad, se puede tener un theme que tiene un color por
defecto, y luego una serie de colores que el usuario puede seleccionar
para su Sitio Web, e incluso podría aplicar un color a diferentes
páginas para identificar secciones en un mismo sitio Web.
Veamos unos pasos sencillos para crear esquemas de color:
Paso 1: Los esquemas de color (Color Schemes), se definen en el
fichero:
[my-theme]/docroot/WEB-INF/liferay-look-and-feel.xml
<theme id=”good-day" name=”Good Day"> (Información del theme)
<settings> (Configuraciones personalizadas)
<setting key="my-setting" value="my-value" />

</settings>
<color-scheme id="01" name="Day"> (Esquema de Color 01)
<css-class>day</css-class> (Clase css del esquema de color)
<color-scheme-images-path> (Path a las imágenes del esquema
de color)
${images-path}/color_schemes/${css-class}
</color-scheme-images-path>
</color-scheme>
<color-scheme id="02" name="Night"> (Esquema de Color 02)
<css-class>night</css-class>
</color-scheme>
</theme>
Paso 2: Para crear las carpetas y ficheros necesarios de los
esquemas de color dentro del theme, podemos basarnos en el
ejemplo anterior:
[my-theme]/docroot/_diffs/css/color_schemes/day.css
[my-theme]/docroot/_diffs/css/color_schemes/night.css
[my-theme]/docroot/_diffs/images/color_schemes/day
[my-theme]/docroot/_diffs/images/color_schemes/night
Estas carpetas y ficheros contendrán la información de estilos e
imágenes necesarias para implementar el cambio de colores del
theme.
Por otro lado es posible especificar un screenshot.png y
thumbnail.png para cada esquema de color, colocando los ficheros
en la carpeta de imágenes de cada esquema de color, en este caso
del ejemplo day y night.

Paso 3: Agregar a [my-theme]/docroot/_diffs/css/custom.css
@import url(color_schemes/day.css);
@import url(color_schemes/night.css);
En cada fichero CSS se debe anteponer el nombre principal del class
del color scheme a cada definición de estilo, por ejemplo para
day.css:
.day .mytime {
}
5.2 Configuraciones en Themes.
Los themes pueden tener configuraciones, esto es muy útil cuando
queremos permitir que los administradores puedan seleccionar
diferentes opciones en el theme para un Sitio Web, y de esta manera,
desde la propia administración de Liferay, puedan configurar ciertas
cosas de utilidad para modificar el comportamiento del diseño. Por
ejemplo, estas son algunos de los usos más comunes: permitir un
diseño de ancho fijo o variable, seleccionar si se quiere mostrar o no el
logo de la cabecera, indicar un contenido Web para ser mostrado en la
cabecera o pie, indicar si se quiere mostrar o no un buscador en la
cabecera, etc.
Las configuraciones personalizables se definen en el fichero:
[my-theme]/docroot/WEB-INF/liferay-look-and-feel.xml

<theme id=”my-design" name=”My Design">
<settings>
<setting key="my-setting" value="my-value" /> (Configuración
con Clave/Valor)
</settings>
</theme>
Desde los ficheros templates (.vm), se pueden leer las diferentes
propiedades indicando su key como se indica en el siguiente ejemplo:
$theme.getSetting("my-setting")
5.3 Layout Templates.
Como hemos visto anteriormente los plugins llamados Layout
Templates, son utilizados para subdividir la zona del cuerpo o body
de la página.
Liferay Portal viene de fábrica con varios Layout Templates, éstos
proveen un gran abanico de posibilidades para la confección de
páginas, permitiendo diferentes tipos de disposición de elementos.

Los layout templates se subdividen básicamente en filas, columnas, y
porcentajes para definir el ancho. Por ejemplo, un layout template de
dos columnas 30/70, significa que éste divide el body en sólo dos
columnas verticales, y que la columna de la izquierda es el 30% del
espacio disponible, y la columna derecha ocupa el 70% restante.
En ciertos proyectos y de acuerdo a las necesidades del mismo, a
veces es necesario construir layout templates propios.
Para ello se debe crear un nuevo plugin, similar a como hicimos para
crear un theme, pero esta vez seleccionando el la opción de tipo de
plugin Layout Template.

Al igual que los themes los layout templates también tienen su propia
estructura de carpetas y ficheros.
[project-name]-layouttpl/
docroot/

META-INF/
WEB-INF/
liferay-layout-templates.xml
liferay-plugin-package.properties
[project-name].png
[project-name].tpl
[project-name].wap.tpl
build.xml
Ficheros del Layout Template:
[project-name].tpl: Genera el HTML de la estructura del template.
[project-name].wap.tpl: Variante del template para dispositivos
móviles. WAP (Wireless Application Protocol).
[project-name].png: Thumbnail representando la disposición del
layout template.
Ficheros de configuración del Layout Template:
liferay-layout-templates.xml: Especifica el id/nombre del layout
template, y la ubicación de sus ficheros TPL y PNG.
liferay-plugin-package.properties: Describe el proyecto que
contiene el plugin, al igual que en el resto de plugins, esta información
es utilizada por el proceso de auto-despliegue en caliente de Liferay.
Vamos a centrarnos en la estructura HTML de un layout template.
Para ello veamos el fichero columns-2.tpl de un layout de ejemplo de
dos columnas.

<div class="columns-2" id="main-content" role="main">
<div class="portlet-layout row-fluid">
<div class="portlet-column portlet-column-first span6"
id="column-1">
$processor.processColumn("column-1",
"portlet-column-content portlet-column-content-first")
</div>
<div class="portlet-column portlet-column-last span6"
id="column-2">
"portlet-column-content portlet-column-content-last")
</div>
</div>
</div>
Como vemos los layout templates se construyen a partir de elementos
<div> y de cierta lógica. Su construcción debe seguir algunas normas
para evitar pérdida de funcionalidad en el portal. A continuación se
explican cada una de ellas.
Paso1: En el <div> principal se deben aplicar una serie de atributos
requeridos por Liferay, en este caso, class="columns-2” (con el
nombre del proyecto del Layout Template). También el id=“
main-content” y el role=“main” deben ser aplicados a este <div>
principal.
Paso2: Dentro del <div> principal, hay que crear elementos <div>
para cada fila del layout template. Se deben aplicar las clases

portlet-layout y row-fluid CSS a estos <div> por ejemplo: <div
class="portlet-layout row-fluid">.
Paso3: A su vez dentro de cada fila <div>, se deben especificar
elementos <div> para una o más columnas. Cada <div> de columna
debe tener la clase portlet-column. Si una columna es la primera,
última, o simplemente una columna en la fila, se debe especificar otra
clase CSS: portlet-column-first, portlet-column-last, o
portlet-column-only.
Paso4: Los nuevos themes de Liferay 6.2, utilizan un fork de Twitter
Bootstrap llamado Alloy Bootstrap que afecta a los layout
templates. Los layout templates utilizan el sistema de grid de 12
columnas.
Para cada <div> de columna, se debe especificar una clase CSS
llamada span[width] donde width es el numerador de porción
respecto a los 12 bloques, que representa el ancho de la columna.

Por ejemplo un span6 ocuparía un 50%.
URL:
http://getbootstrap.com/css/#grid
Paso5: A continuación, para cada columna <div>, hay que
especificar un ID único. Ejemplo: id="column-1", id="column-2",
etc..
Paso 6: Por último, dentro de cada columna <div>, la directiva de
Velocity que será responsable de agregar los portlets que han sido
configurados en cada columna:
$processor.processColumn("column-1", "portlet-column-content
portlet-column-content-first")
5.4 Empaquetando los Themes para su
distribución.
Los themes al igual que otros plugins se empaquetan y distribuyen
como ficheros .war

El empaquetado se puede generar a partir del Plugins SDK ya sea
desde el IDE de Liferay, o desde la línea de comandos utilizando
Apache ANT o MAVEN.
5.4.1 Empaquetado desde el Plugins SDK
Si quisiéramos empaquetar y desplegar un plugin desde línea de
comandos, simplemente debemos ejecutar desde la carpeta raíz de
nuestro proyecto el siguiente comando:
ant clean deploy
En este comando no sólo se invoca el target deploy, sino que antes se
invoca al target clean, esto es para asegurarse que ningún fichero
temporal antiguo, incluso borrado de nuestro theme o plugin,
permanezca en el paquete generado de manera no deseada.
Si quisiéramos hacer el equivalente utilizando Apache Maven, el
comando sería:
mvn clean install
Este comando no sólo realiza el clean, sino que al utilizar el target
install, en lugar de package, no sólo empaqueta el código
compilado, sino que también lo instala en el repositorio de Maven para
que esté disponible a otros plugins, por ejemplo otro theme que quiera
heredar de éste.

5.4.1 Empaquetado desde Liferay IDE / Liferay
Developer Studio
Desde los IDE de Liferay es muy sencillo empaquetar nuestros plugins
para su distribución, simplemente ejecutar los targets clean y deploy
desde la interfaz:
5.5 Introducción a Velocity.
Apache Velocity es un motor de templates basado en Java, que
provee un lenguaje de templates para referenciar objetos definidos en
el código Java. Es un proyecto open source dirigido por Apache
Software Foundation.
URL:
http://velocity.apache.org/

Liferay utiliza este motor de templates para renderizar los themes,
layout templates, plantillas de contenidos, etc.
También define una serie de variables disponibles en los templates
para ser utilizados por los desarrolladores, con el fin de proporcionar
visibilidad a estas herramientas e información de contexto desde los
templates. Por ejemplo acceder a información del sitio Web que se
está visualizando, o información acerca del usuario autenticado en ese
momento en el portal.
5.6 Usando Velocity para Acceder a Variables.
Desde las plantillas Velocity (templates .vm) de los themes es posible
acceder a variables proporcionadas por el portal. Estas se listan a
continuación.
5.6.1 Lista de variables Velocity disponibles para
Themes
## ———- Common variables ———- ##
$theme_display
$portlet_display
$theme_timestamp
$theme_settings
$css_class
$layout
$page_group
$liferay_toggle_controls

$liferay_dockbar_pinned
$css_folder
$images_folder
$javascript_folder
$templates_folder
$full_css_path
$full_templates_path
$css_main_file
$js_main_file
$company_id
$company_name
$company_logo
$company_logo_height
$company_logo_width
$company_url
$user_id
$is_default_user
$user_first_name
$user_middle_name
$user_last_name
$user_name
$is_male
$is_female
$user_birthday
$user_email_address
$language_id

$w3c_language_id
$time_zone
$user_greeting
$user_comments
$user_login_ip
$user_last_login_ip
$is_signed_in
$group_id
## ———- URLs ———- ##
$show_add_content
$add_content_text
$add_content_url
$layout_text
$layout_url
$show_control_panel
$control_panel_text
$control_panel_url
$show_home
$home_text
$home_url
$show_my_account
$my_account_text
$my_account_url
$show_page_settings
$page_settings_text
$page_settings_url

$show_sign_in
$sign_in_text
$sign_in_url
$show_sign_out
$sign_out_text
$sign_out_url
$show_toggle_controls
$toggle_controls_text
$toggle_controls_url
$update_available_url
## ———- Page ———- ##
$the_title
$selectable
$is_maximized
$is_freeform
$page_javascript_1
$page_javascript_2
$page_javascript_3
$layout
$page = $layout
$is_first_child
$is_first_parent
$the_title
$is_portlet_page
$all_portlets
$column_1_portlets

$column_2_portlets
$column_3_portlets
$column_4_portlets
$column_5_portlets
$maximized_portlet_id
$typeSettingsProperties
$page_javascript_1
$page_javascript_2
$page_javascript_3
$community_name
$css_class
$my_places_portlet_url
$community_default_public_url
$community_default_private_url
$community_default_url
$the_title
$layouts
$pages
## ———- Navigation ———- ##
$nav_items
$has_navigation
## ———- Staging ———- ##
$show_staging
$staging_text
## ———- My places ———- ##
$show_my_places

$my_places_text
## ———- Includes ———- ##
$dir_include
$bottom_include
$bottom_ext_include
$content_include
$top_head_include
$top_messages_include
## ———- Date ———- ##
$date
$current_time
$the_year
Tip
Se pueden ver todas las variables disponibles en el
fichero:
[APP_SERVER_PORTAL_DIR]/html/themes/
_unstyled/templates/init.vm
Esta es una de las razones del porqué todos los
themes terminan heredando del theme _unstyled.
Layout Templates
A continuación se listan las variables disponibles desde los ficheros
.tpl de los Layout Templates.

Contenidos Web
A continuación se listan las variables disponibles desde plantillas .vm
utilizadas en Contenidos Web, y que son utilizadas para acceder a
información del propio contenido Web.
$reserved-article-id.data
$reserved-article-version.data
$reserved-article-title.data
$reserved-article-create-date.data
$reserved-article-modified-date.data
$reserved-article-display-date.data

$reserved-article-author-id
$reserved-article-author-name
$reserved-article-author-email-address
$reserved-article-author-comments
$reserved-article-author-organization>
$reserved-article-author-location$reserved-article-author-job-title
5.7 Internacionalización de mensajes (i18n) en el
Theme.
Utilizamos mensajes internacionalizados para mostrar texto en
diferentes idiomas de manera dinámica. Estos textos se deben definir
en ficheros de idioma cargados en el contexto del portal, del estilo
Language.properties
Generalmente se utilizan plugins de tipo Hook para incluir nuevos
mensajes en los diferentes idiomas.
Utilizando la macro #language es posible acceder a las claves (keys)
definidas en los diferentes ficheros de idioma, dependiendo el idioma
del usuario.
Por ejemplo, la siguiente línea devolverá en el template del theme el
valor de la key cuyo nombre sea “copyright-text”.
#language (”copyright-text”)
5.8 Embebiendo Portlets en el Theme.
Es posible embeber portlets directamente en el theme de manera
programática ya sean instanciables o no-instanciables. Hay veces
que se requiera esta característica, aunque se debe pensar que un

portlet colocado con esta técnica, no será posible quitarlo por los
administradores, es un portlet colocado “a mano”.
Colocando la siguiente línea en nuestro template, estamos colocando
el portlet de búsqueda no-instanciable en el theme de manera
programática:
$theme.runtime("77”)
Para colocar un portlet instanciable hay que especificar el nombre de
instancia completo. Este nombre de instancia se puede obtener
mirando el código fuente de la página por ejemplo:
INSTANCE_5anm6NtLp0kZ
Con la siguiente línea se coloca una instancia concreta del portlet
Navigation
$theme.runtime("71_INSTANCE_5anm6NtLp0kZ")

5.9 Embebiendo Portlets en el Layout Template.
Así mismo también es posible embeber portlets directamente en el
layout template de manera programática ya sean instanciables o
no-instanciables, similar como para los templates de themes.
<div class="columns_1_4_1" id="main-content" role="main">
<div class="portlet-layout row-fluid">
<div class="portlet-column portlet-column-only" id="column-1">
$processor.processPortlet(
"my-hello-world-portlet_WAR_myhelloworldportlet")
"portlet-column-content portlet-column-content-only")
</div>
</div>
.....
</div>
En el ejemplo anterior, se incrusta en la columna-1 como primer
elemento, un portet llamado
my-hello-world-portlet_WAR_myhelloworldportlet.
5.10 Diseño para Contenidos Web y Portlets.
Para dar diseño y estilos a Contenidos Web y Portlets vamos a
utilizar básicamente las mismas técnicas de CSS explicadas hasta
ahora.

Por lo general se utiliza un elemento <div> principal que encierra, o
bien el contenido Web, o bien el portlet.
Para el caso de los contenidos Web, es posible dar estilos en el propio
contenido mediante el uso de la etiqueta <style>, o bien mediante el
propio Theme, destinando estilos a este fin. Hay que tener en cuenta
que si los estilos son embebidos en el propio contenido, este se verá
igual en cualquier theme, y será autocontenido. Pero hay veces que se
quiere que los estilos estén a nivel del Theme, y que sea éste el
encargado de poner diseño a los contenidos. Ambas técnicas son
válidas, dependerá de la necesidad concreta.
Para el caso de portlets, podemos dar estilos dentro del propio portlet,
en el theme, e incluso en la propia instancia vía panel de
administración desde el icono de Look & Feel.
Si queremos que nuestro portlet se vea siempre igual, sin importar en
que theme se coloque, sus estilos deberán permanecer en el propio
portlet. Si por el contrario queremos que nuestro portlet se integre
dentro del diseño general de un theme, entonces sus estilos deben ser
colocados en el theme.
Buena
práctica
Una buena técnica para ello, es crear un fichero
[my-theme]/docroot/_diffs/css/xxxx-portlet.css
donde xxxx es el nombre del portlet al que se le
quiere dar estilos, y este fichero incluirlo desde el
fichero custom.css de tal modo que queden bien
identificados los estilos de un portlet concreto.
Por último el uso de estilos personalizados a nivel de configuración del
propio portlet a través del icono de Look & Feel, no es para nada

recomendada, ya que esta información, además de ser únicamente
aplicada a ésa instancia concreta del portlet, lleva a pérdida de control
sobre los estilos y muchas veces trae inconvenientes difíciles de
localizar.
5.11 Diseño Responsivo
(Mobile/Tablets/Escritorio).
Liferay proporciona herramientas para realizar Diseños Web
Responsivos, tanto a nivel de Themes, como también de Layout
Templates o Contenidos Web. Incluso podemos realizar multi-sites
para diferentes dispositivos utilizando la característica de Reglas de
Familias de Dispositivos proporcionada por Liferay.
AlloyUI permite la detección por Javascript del tamaño de pantalla del
dispositivo (Smartphones/Tables/Desktop), y la utilización de esta
información en los ficheros CSS de nuestro Theme.
Ejemplos:
• iPad en landscape o Desktop cuya pantalla es >= 960 pixeles
de ancho.
• iPad en portrait cuya pantalla es <= 720 pixeles de ancho.
• Smartphone en portrait (480 px), o en landscape (320 px).
Para poder aplicar estilos de acuerdo al tipo de pantalla, es necesario
realizar una serie de pasos que se describen a continuación:

Paso1: Incluir en el portal_normal.vm de nuestro theme, el
siguiente META.
…
<head>
<title>$the_title - $company_name</title>
<meta content="target-densitydpi=160dpi,
width=device-width,
minimum-scale=1.0, maximum-scale=1.0"
name="viewport" />
$theme.include($top_head_include)
</head>
…
Paso 2: Agregar la siguiente invocación para habilitar los
aui-viewport.
Esta llamada también se puede realizar desde el fichero:
[my-theme]/docroot/_diffs/js/main.js
…
</body>
<script type="text/javascript">
AUI().use('aui-viewport');
</script>
$theme.include($bottom_include)
</html>
…

Paso 3: Agregar estilos personalizados para los diferentes tipos de
pantalla en el fichero:
[my-theme]/docroot/_diffs/css/custom.css
.aui-view-lt480 #navigation li {
display: block;
float: none;
}
.aui-view-480 #navigation li {
display: block;
float: none;
}…
Estos tipos de estilos se pueden aplicar para las el resto de
resoluciones de pantalla si se desea que sea completamente
responsivo:

Aplicando las diferentes opciones podremos dar estilos para diferentes
tamaños de pantallas, con lo cual podemos de una manera unificada
realizar nuestro diseño responsivo acorde a las necesidades del
proyecto.
5.12 Cómo incluir jQuery y otras librerías
Javascript en los Themes.
Si quisiéramos incluir jQuery u otra librería Javascript a nuestro
theme, basta con colocar la librería en la carpeta js de nuestro theme,
por ejemplo:
[my-theme]/docroot/_diffs/js/jquery.js o custom-script.js, y luego
incluirlo en el template principal:
...
<head>
#js("$javascript_folder/jquery.js")
#js("$javascript_folder/custom-script.js")
…

Esto nos permite aplicar a nuestro theme de manera unificada una
librería para que siempre esté disponible.
Buena
práctica
Existe otra manera de cargar una librería Javascript
en todo el portal a la vez, incluso no importando el
theme de que se trate , subiendo el fichero JS al
propio Liferay, y mediante la correcta configuración
de la propiedad del portal-ext.properties
javascript.barebone.files=
Esta técnica NO suele ser la manera más
recomendada, ya que afecta a todo el portal en su
conjunto y puede traer problemas con componentes
de terceros que no fueron pensados para convivir con
estas librerías globales.
5.13 Resumen.
Como resumen general del curso de themes podemos concluir los
siguientes puntos:
• Un Theme es un tipo de plugin que define como se verán los
Sitios Webs o páginas que lo utilicen en Liferay Portal.
• Es posible realizar diseños responsivos para soportar diferentes
tipos de tamaño de pantallas de dispositivos.
• Los themes se componen básicamente de HTML, CSS, Imágenes,
Templates y Javascript y permiten tener diferentes esquemas de
color y configuraciones.
• Se empaquetan en ficheros WAR para su distribución e instalación
dentro de Liferay Portal.

• Su construcción más adecuada es mediante la herencia de otros
themes de base, que permitan la reutilización, y acorten los
tiempos de desarrollo.
Dentro del marco de desarrollo de themes, pueden existir algunos
roles diferentes del equipo de desarrollo que trabajan en conjunto para
realizar las diferentes partes del portal. Por lo general, suele haber
diseñadores por una lado, luego maquetadotes HTML/CSS, y por otro
lado los programadores.
Con la práctica, se logra formar en un solo perfil los dos primeros
casos, es decir, Diseño y Maquetación, algunas veces llamado
también Integrador de Themes.
Como hemos visto el uso de Themes es la respuesta de Liferay a la
personalización de apariencia o Look&Feel del producto.
5.14 Buenas Prácticas.
• Si se parte de una maqueta HTML estática para construir el
theme, comprobar primero, que ésta funciona en los diferentes
navegadores requeridos. Esto nos permitirá evitar problemas que
son de base de la propia maqueta HTML/CSS, y que no tienen
nada que ver con el Theme, de hecho una vez integrado como
Theme, es mucho más difícil detectar y solucionar estos tipos de
errores.
• Definir junto a los programadores una serie de reglas de nombres
para los estilos, utilizando el concepto de <div
class=”mi-portlet”> contenedor con el id del portlet como
clase principal de cada vista (jsp) que se utilice en el portlet. Esto

nos deja en cada fichero, por ejemplo mi-portlet.css, comenzar
cada class de estilos con la clase principal del portlet .miportlet
{}. De esta manera se asegura que los estilos aplicados a un
portlet sólo aplican a dicho portlet y no interfiere con otros
componentes que puedan estar cargados en la misma página.
• Evitar el uso de estilos fuera de las hojas de estilo (CSS).
Cualquier estilo por fuera del theme, no estará controlado por el
mismo, y esto es una mala práctica habitual que trae multitud de
problemas a la hora de realzar mantenimiento del portal, o bien
realizar modificaciones futuras.
• Crear a partir del custom.css una estructura de ficheros
importados. [liferay-css]_overrides.css para los estilos que se
deseen sobrescribir o redefinir provenientes de themes
heredados. Como se ha mencionado anteriormente utilizar
ficheros del estilo [id-portlet].css, con el objetivo de mejorar la
organización de los estilos y su mantenimiento.
• Para las imágenes se recomienda crear las siguientes carpetas:
[my-theme]/docroot/_diffs/images/custom y dentro de custom,
podemos crear las subcarpetas:
[my-theme]/docroot/_diffs/images/custom
- theme
- portlets
De tal modo que dentro de theme, se coloquen todas las imágenes
que corresponden al theme en general, y dentro de portlets, podamos

crear subcarpetas para cada uno de nuestros portlets que requieran
imágenes propias.
5.15 Como optimizar el rendimiento.
Liferay utiliza opciones para desarrollo que por defecto estarán
activas desde el IDE a través del fichero
portal-developer.properties, y éstas son cargadas a través del
fichero portal-ide.properties. Estas propiedades desactivan las
compresiones y cacheo de CSS, JS, e Imágenes.
Para un mayor rendimiento recordar activarlas en el entorno de
preproducción para asegurarse de que todo funciona según lo
esperado.
theme.css.fast.load=trae
theme.images.fast.load=trae
javascript.fast.load=true
Tip Estas propiedades se pueden activar vía URL para
una petición concreta (request), a la hora de
comprobar los estilos originales antes de ser
comprimidos en uno sólo por ejemplo si agregamos:
http://www.miweb.com/web/guest?css_fast_load=0
Estamos desactivando la compresión de los CSS para
la petición actual. Esto facilita su inspección con
herramientas como Firebug.
Si indicamos un valor de =0 estamos desactivando, si
ponemos =1 estamos activando la propiedad.
Estas son las diferentes opciones:
- css_fast_load=[0|1]
- js_fast_load=[0|1]
- images_fast_load=[0|1]

Existe otra propiedad llamada strip, la cual se utiliza
para indicar a Liferay si queremos activar o
desactivar la compresión del propio HTML quitando
espacios y colocando toda la página en una línea:
- strip=[0|1]
Ejemplo:
http://www.miweb.com/web/guest?strip=0
Se recomienda controlar el peso de las páginas para evitar tiempos
demasiado grandes de carga. Una buena herramienta para visualizar
estos tiempos desde el navegador, es la extensión de Firefox
Firebug.
5.16 Uso de Maven para construir Themes.
Apache Maven es una herramienta muy completa para gestión de
despliegues, dependencias, documentación etc.
Desde el lanzamiento de Liferay 6.2, la herramienta Liferay IDE trae
soporte para Maven!
Desde línea de comandos se cuenta con una serie de arquetipos que
permiten crear la estructura de un theme, o cualquier otro tipo de
plugin con un simple comando.
mvn archetype:generate
-DarchetypeArtifactId=liferay-theme-archetype
-DarchetypeGroupId=com.liferay.maven.archetypes

-DarchetypeVersion=6.2.0-ga1 -DartifactId=lrexperts-theme
-DgroupId=com.lrexperts.liferay -Dversion=1.0.0-SNAPSHOT
Estos arquetipos también son utilizados automáticamente desde
Liferay IDE o Liferay Developer Studio, cuando creamos un plugin
de Maven utilizando estas herramientas.
5.16.1 Listado de Artefactos Liferay disponibles para
trabajar con Maven
Artefactos
- portal-client
- portal-impl
- portal-service
- portal-web
- support-tomcat
- util-bridges
- util-java
- util-taglib
5.16.2 Listado de Arquetipos Liferay disponibles para
trabajar con Maven
Arquetipos
- liferay-ext-archetype
- liferay-hook-archetype
- liferay-layouttpl-archetype
- liferay-portlet-archetype
- liferay-servicebuilder-archetype
- liferay-theme-archetype
- liferay-web-archetype

5.16.3 Listado de Targets Liferay disponibles para
trabajar con Maven
- liferay:build-ext
- liferay:build-lang
- liferay:build-service
- liferay:build-thumbnail
- liferay:build-wsdd
- liferay:deploy
- liferay:direct-deploy
- liferay:theme-merge
5.16.3 Repositorios Maven Disponibles
Repo Maven Global (Público)
http://repo1.maven.org/maven2/com/liferay/maven/plugins/liferay-maven-plugin/
http://repo1.maven.org/maven2/com/liferay/maven/archetypes/liferay-portlet-archetype/
CE (Público)
https://repository.liferay.com/nexus/content/groups/liferay-ce/
EE (Privado) Requiere cuenta autorizada.
https://repository.liferay.com/nexus/content/groups/liferay-ee/

Guide liferay themestraining_lr6.2_v1

Recommandé

Recommandé

Contenu connexe

Similaire à Guide liferay themestraining_lr6.2_v1

Similaire à Guide liferay themestraining_lr6.2_v1 (20)

Dernier

Dernier (20)

Guide liferay themestraining_lr6.2_v1