Guía básica de Liferay

Guía básica de Liferay
En este curso básico de Liferay aprenderás qué es Liferay, qué
ofrece y, en unos sencillo pasos, aprenderás a crear tus propios
plugins para ampliar este fantástico CMS.
Sergio Gonzalez Barrios

Guía básica de Liferay
Índice
1. ¿Qué es Liferay?............................................................................................................ 3
1.2 Versiones ............................................................................................................................. 3
1.3 Licencias .............................................................................................................................. 3
1.4 Tipos de servidor ................................................................................................................. 4
1.4 Plugins Liferay ..................................................................................................................... 4
1.5 ALLOY................................................................................................................................... 4
2. Instalando un servidor Liferay ...................................................................................... 5
3. Plugins ........................................................................................................................... 7
3.1 Tipos de Plugins ................................................................................................................... 8
3.1.1 Theme ........................................................................................................................... 8
3.1.2 Layout ........................................................................................................................... 8
3.1.3 Portlet ........................................................................................................................... 8
3.1.4 Hook ............................................................................................................................. 8
3.2 Instala un servidor Apache Ant ........................................................................................... 9
3.3 Instala Java JDK.................................................................................................................. 10
3.4 Instala el IDE Liferay en Eclipse ......................................................................................... 11
3.5 Crea tu primer plugin ........................................................................................................ 16
3.6 Crea tu primer Theme ....................................................................................................... 17
3.7 Crea tu primer Layout ....................................................................................................... 19
3.8 Crea tu primer Hook .......................................................................................................... 21
3.9 Crea tu primer Portlet ....................................................................................................... 28
4. ALLOY .......................................................................................................................... 33
4.1 Documentación ................................................................................................................. 33
4.2 Plugins, widgets y utilidades ............................................................................................. 34
4.2.1 Widget ........................................................................................................................ 34
4.2.2 Plugin .......................................................................................................................... 35
4.2.3 Utilidades.................................................................................................................... 35
4.2.4 Ejemplo de uso ........................................................................................................... 35
4.3 Crea tu propio plugin......................................................................................................... 37
Visita www.chekis.es
2

Guía básica de Liferay
1. ¿Qué es Liferay?
Liferay es un gestor de contenidos de código abierto escrito en Java que nos permite crear
un portal web de una forma muy sencilla y rápida y administrar sus contenidos mediante
un panel de control muy intuitivo.
Fue creado en el año 2000 y desde entonces no ha parado de crecer, tanto es así, que cada
año su cuota de mercado crece sin parar y ya se ha convertido en uno de los principales
CMS del momento dando soluciones a un gran número de importantes empresas
nacionales y multinacionales.
1.2 Versiones
Desde su creación, Liferay ha pasado por numerosas versiones, cada una más
evolucionada que la anterior. Actualmente, su versión más reciente es la 6.1 pero aún
se siguen utilizando, y mucho, las versiones 6.0 y 5.2.x.
Por supuesto, desde este libro os vamos a recomendar siempre que utilicéis la versión
más actual del producto ya que será la más estable y solucionará muchas de las
deficiencias de versiones anteriores.
1.3 Licencias
Liferay se distribuye bajo 2 tipos de licencias diferentes. La denominada CE y la EE.
La CE es la licencia gratuita y de libre distribución que se aplica a todos aquellos
productos que te descargas directamente desde su web. Esta licencia te da permiso
para usar su producto, crear plugins y distribuirlos si fuese el caso.
La EE es la licencia Enterprise y como ya habréis imaginado es de pago. Como para la
mayoría de productos de este tipo, las licencias Enterprise son bastante caras y
suelen estar sólo al alcance de proyectos con un presupuesto relativamente elevado.
¿Qué diferencia hay entre ambas licencias?
La respuesta es simple, la EE es mucho más completa y estable que la CE a nivel de
calidad. Si contratas una licencia EE estás adquiriendo un servicio de soporte con lo
que tienes la posibilidad, en caso de encontrar algún fallo en el producto o bug, de
solicitar a Liferay que lo arregle o te dé una solución para arreglarlo. Si tu licencia es
CE y encuentras un fallo en el producto no podrás solicitar a Liferay que te lo
solucione, tendrás que ser tú mismo el que lo arregle o busque una alternativa.
Obviamente, Liferay dedica la mayoría de sus recursos a solucionar los posibles
Visita www.chekis.es
3

Guía básica de Liferay
problemas que surjan en las versiones con licencias EE ya que son las que les reportan
beneficios.
1.4 Tipos de servidor
A la hora de instalar un servidor Liferay debemos elegir sobre qué tipo de servidor
queremos que corra.
Liferay se distribuye bajo varios tipos de servidor. A continuación tenéis la lista de
servidores:
Tomcat
Geronimo
Glassfish
JBoss
Jetty
JOnAS + Tomcat
Resin
Nosotros te recomendamos que utilices un Tomcat ya que es la más fácil de
implementar y es el más extendido.
Más adelante veremos cómo se instala un servidor de este tipo y lo basaremos en un
servidor Tomcat.
1.4 Plugins Liferay
En Liferay existen 4 tipos principales de plugins diferentes:
Themes o temas de apariencia
Layouts o plantillas de página
Hooks
Portlets
Estos plugins permiten añadir nuevas funcionalidades y servicios al portal original
mejorando la calidad y aumentando su versatilidad. Más adelante podréis ver en que
consiste cada uno de estos plugins y cómo podemos crearlos.
1.5 ALLOY
A partir de la versión 6.0, Liferay incluyó en su portal de forma nativa este framework
javascript. En versiones anteriores a la 6.0 incluía la librería jQuery para dar soporte a
todas sus funcionalidades dinámicas.
Este nuevo framework fue desarrollado a partir de YUI 3, un framework desarrollado
por la compañía Yahoo y que, aunque en Europa no está muy extendido su uso, sí lo
está en EEUU.
Visita www.chekis.es
4

Guía básica de Liferay
ALLOY da soluciones y funcionalidades para la mayoría de código desarrollado para
Liferay y, gracias a ser desarrollado a partir de YUI3, dispone de todas sus
funcionalidades originales.
Como todo framework tiene sus pros y sus contras, en este caso, a pesar de dar
infinidad de funcionalidades adaptadas a las necesidades de Liferay y evitar la
necesidad de cargar otras librerías javascript hemos de decir que su gran
inconveniente es su escasa documentación. Es cierto que dispone de una API completa
donde podéis encontrar toda la documentación con las diferentes funcionalidades que
ofrece pero carece casi por completo de ejemplos completos de uso a diferencia de
otros frameworks como jQuery.
Es por estos motivos que hoy en día todavía no está muy extendido su uso a la hora de
desarrollar nuevas funcionalidades para un proyecto y muchos programadores optan
por incluir la librería jQuery o cualquier otra para evitar imprevistos o problemas.
Personalmente opino que es un framework muy potente, que ofrece infinidad de
posibilidades pero que si no tienes unos conocimientos medios/altos no te renta
utilizarlo ya que en cuanto te encuentres un problema tardarás tiempo en solucionarlo
por la escasa documentación, problemas que con frameworks como jQuery no pasaría
ya que si buscas tu problema en Google te saldrán miles de entradas con la solución y
con ALLOY eso no pasaría.
Aún así os animo a adentraros en el mundo de ALLOY ya que os resultará muy
interesante y hará que os esforcéis.
2. Instalando un servidor Liferay
Debemos descargar tanto el portal Liferay como el paquete de Plugins desde este enlace:
http://www.liferay.com/es/downloads/liferay-portal/available-releases
Una vez descargado ambos archivos debemos descomprimir el portal en el directorio que
queramos, por ejemplo en D:\ quedando de la siguiente manera D:\Liferay 6.1 GA2
Dentro de esta carpeta creamos otra carpeta llamada bundles y metemos en ella todo el
contenido de "liferay-portal-6.1.1-ce-ga2". Creamos también al mismo nivel que bundles
otra carpeta llamada plugins y descomprimimos en ella el otro archivo que habíamos
descargado ("liferay-plugins-sdk-6.1.1").
Una vez hecho todo esto, vamos a lanzar el portal. Nos vamos a la carpeta
bundles/tomcat/bin/ y ejecutamos startup.bat.
Esto lanzará una consola en la cual veréis todos los registros de inicialización de Liferay.
Una vez termine de iniciarse se abrirá automáticamente en vuestro navegador
predeterminado una pestaña donde podréis ver el inicializador de Liferay. En caso de no
abrirse sola podéis acceder mediante la URL http://localhost:8080
Visita www.chekis.es
5

Guía básica de Liferay
En esta pantalla podéis configurar los datos del portal, del administrador y la base de datos
que utilizará Liferay (por defecto Hypersonic).
Tras finalizar la configuración tendremos que esperar unos pocos minutos (2-3min) para
que configure y una vez termine nos mostrará una pantalla de confirmación.
A continuación debéis establecer una contraseña para vuestra cuenta de administrador:
Visita www.chekis.es
6

Guía básica de Liferay
Lo siguiente será establecer la típica pregunta secreta y su respuesta para recuperar
nuestra contraseña en caso de que se nos olvide:
Tras este último paso nos llevará directamente a nuestro portal que estará accesible
mediante la URL http://localhost:8080
3. Plugins
Un plugin Liferay es una extensión del mismo que permite ampliar las funcionalidades y
servicios que ofrece el portal. Existen 4 tipos de plugins principales diferentes: Theme,
Layout, Hook y Portlet.
Visita www.chekis.es
7

Guía básica de Liferay
3.1 Tipos de Plugins
3.1.1 Theme
Un Theme o Tema de Apariencia es un plugin que permite modificar el estilo o
diseño de un portal web o de una página concreta.
Cada Tema de Apariencia puede disponer de una serie de Esquemas de color
que permiten hacer variantes del mismo Tema de Apariencia y mantenerlo
todo en un mismo plugin. Por ejemplo, podemos hacer que un Tema de
Apariencia tenga 2 variantes de tonalidades, una en azul y otra en rojo.
3.1.2 Layout
Una Layout o Plantilla es un plugin que permite definir una disposición de
página diferente para cada página. Son sobre ellas sobre las que se colocan los
portlets y afectan única y exclusivamente al contenido central de la página. La
cabecera, navegación principal y footer se definirían directamente en el
theme.
Por ejemplo, podemos tener plantillas de 2 columnas al 50%, 3 columnas al
33%, 1 fila al 100% y 2 columnas al 50%, etc.
3.1.3 Portlet
Los Portlets son el componente principal de programación de Liferay.
Funcionan como módulos independientes y cada uno tiene una funcionalidad
diferente. Cualquier código creado dentro de un portlet no afectará nunca al
código nativo del portal. Por ejemplo, podemos tener un portlet de Agenda,
otro de Blog, otro de RSS, etc.
Liferay dispone de numerosos Portlet nativos pero nosotros podemos crear
tantos como queramos para dar solución a todas nuestras necesidades o
modificar los que ya nos ofrece Liferay mediante Hooks
3.1.4 Hook
A diferencia de los portlets, este tipo de plugin permite modificar el código
nativo del portal. Se utilizan, sobretodo, para modificar el código de algún
portlet nativo del portal, definir variables de idioma o modificar alguna
funcionalidad del portal.
Existen 4 tipos de hooks principales:
Custom JSPs: Permiten modificar el código de uno o varios portlets
mediante la modificación de sus JSPs.
Portal properties: Permiten modificar las propiedades del portal o definir
nuevas propiedades.
Visita www.chekis.es
8

Guía básica de Liferay
Services: Permiten modificar los servicios del portal directamente o añadir
nuevos.
Language properties: Permiten declarar nuevas variables de idiomas para
facilitar la internacionalización del portal. Estas variables luego será usadas
en diferentes puntos del portal como, por ejemplo, para traducir algún
texto de un Tema de Apariencia o de un Portlet.
3.2 Instala un servidor Apache Ant
Lo primero que debemos hacer es explicar para que instalamos este servidor.
Gracias a este servidor Apache Ant podremos realizar las compilaciones necesarias
para generar los diferentes paquetes WAR que desplegaremos en nuestro portal
Liferay.
Lo primero será descargar el servidor de la siguiente dirección
http://ant.apache.org/bindownload.cg
Para instalar el Apache Ant no tenemos nada más que descomprimir el archivo en la
carpeta que nosotros queramos.
A continuación debemos de añadir a las variables de entorno las herramientas Ant
para que podamos ejecutar los comandos necesarios, para ello:
Vamos a Panel de Control->Sistema y Seguridad->Configuración avanzada del sistema
->Opciones avanzadas->Variables de entorno(ESTAMOS EN WINDOWS 7)
Ahora debemos de incluir la ruta de la carpeta bin de nuestro Apache Ant, en nuestro
caso sería D:\apache-ant-1.8.2\bin\
Buscamos la variable Path en Variables del Sistema y la editamos. Al final del todo
añadimos la ruta de vuestro Apache Ant quedando de la siguiente forma:
Ahora creamos la variable ANT_HOME y le añadimos la ruta D:\apache-ant-1.8.2\
Visita www.chekis.es
9

Guía básica de Liferay
Para probar que todo funciona abrimos la consola cmd(Inicio y ejecutamos CMD) y
escribimos ant -version y deberíamos de obtener respuesta.(Acordaros que debemos
tener instaladas las JDK de java).
3.3 Instala Java JDK
Para instalar las Java JDK debemos descargarnos el paquete desde
http://www.oracle.com/technetwork/es/java/javase/downloads/index.html
Una vez descargadas las instalamos y seguimos los pasos que nos va mostrando uno
por uno(no hay pérdida).
Una vez instalado todo debemos de añadirlas a las variables de entorno de nuestra
máquina.
Vamos a Panel de Control->Sistema y Seguridad->Configuración avanzada del sistema
->Opciones avanzadas->Variables de entorno(ESTAMOS EN WINDOWS 7)
Ahora debemos de incluir la ruta de la carpeta bin de nuestro Java JDK, en nuestro
caso sería C:\Program Files\Java\jdk1.7.0_13\bin
Buscamos la variable Path en Variables del Sistema y la editamos. Al final del todo
añadimos la ruta de vuestras Java JDK quedando de la siguiente forma:
Visita www.chekis.es
10

Guía básica de Liferay
3.4 Instala el IDE Liferay en Eclipse
Liferay nos proporciona una serie de herramientas para facilitarnos la labor de
desarrollo de sus componentes(portlets, hooks, themes, layouts). Nosotros vamos a
ver cómo podemos instalar el plugin de Liferay par eclipse paso a paso y como
configurarlo adecuadamente para que todo funcione correctamente.
Antes de nada debemos tener instalado en nuestro ordenador el servidor de Liferay(en
nuestro caso Liferay 6.1) y sus plugins correspondientes.
Una vez tengamos todo el servidor de Liferay listo empezaremos con la instalación del
plugin de desarrollo.
El plugin lo podéis encontrar en la siguiente dirección de Liferay
http://www.liferay.com/downloads/liferay-projects/liferay-ide . Os recomiendo bajar
tanto el eclipse como el plugin todo junto.
En nuestro caso vamos a instalarnos el eclipse de cero. Como estamos en Windows
vamos a bajarnos el "Eclipse Juno + Liferay IDE v1.6.1 (Windows 64bits)" que es el que
corresponde para Windows 7 x64. Tenéis disponibles para Linux y Mac también.
Para instalar el eclipse que nos hemos bajado sólo tenemos que descomprimir el
fichero donde nosotros queramos y una vez descomprimido ejecutamos el fichero
"eclipse.exe" .
Una vez dentro de eclipse debemos de mostrar la vista de Liferay. Para ello, arriba a la
derecha se sitúa un cuadrado en forma de tabla que nos abre las perspectivas. Tan solo
debemos clicar sobre la de Liferay y en caso de que no esté visible elegimos Other-
>Liferay.
Visita www.chekis.es
11

Guía básica de Liferay
Una vez hecho esto, ya estamos preparados para empezar a configurar el eclipse con
nuestro servidor Liferay.
Ahora debemos se situarnos en la pestaña de Server(abajo a la izquierda). Clic derecho
-> New -> Server.
Visita www.chekis.es
12

Guía básica de Liferay
En la siguiente ventana elegimos Liferay Inc -> Liferay v6.1 CE Server.
Ahora debemos de seleccionar la ruta donde está el Tomcat de nuestro servidor
Liferay. En nuestro caso "D:\Liferay 6.1 GA2\bundles\tomcat-7.0.27". El resto lo
dejamos por defecto y le damos a "Finish".
Visita www.chekis.es
13

Guía básica de Liferay
Lo siguiente es instalar el SDK plugins de Liferay. Para ello vamos al menú superior y le
damos a Window->Preferences->Liferay->Installed Plugin SDKs->Add.
Visita www.chekis.es
14

Guía básica de Liferay
Ahora debemos seleccionar la ruta donde tenemos el SDK de Liferay, en nuestro caso
"D:\Liferay 6.1 GA2\plugins". Le damos a OK y vemos como se añade una nueva
entrada en preferences con el plugin que acabamos de añadir.
Visita www.chekis.es
15

Guía básica de Liferay
Una vez hecho todo esto ya tenemos nuestro entorno de desarrollo en Eclipse listo
para empezar a crear nuestros propios componentes Liferay. Podemos controlar el
servidor desde la ventana de Servers, compilar y desplegar componentes, etc.
Para comprobar que todo va bien vamos a la pestaña de servers y le damos al botón
verde en forma de "play". Una vez lanzado el servidor(tarda unos minutos)
comprobamos que se lanza correctamente entrando en http://localhost:8080
Así, de esta forma, hemos instalado el plugin de Liferay para Eclipse de una forma muy
fácil y sencilla y hemos dejado todo preparado para empezar a desarrollar
componentes.
3.5 Crea tu primer plugin
Una vez tengamos instaladas tanto las Java JDK y el servidor Apache Ant ya podremos
empezar a crear plugins nuevos.
Para hacerlo es tan fácil como abrir una consola CMD (Inicio -> cmd). Una vez abierta
nos desplazamos hasta la ruta de nuestro servidor Liferay y una vez en él accedemos a
la carpeta “plugins”.
En nuestra explicación vamos a crear un theme pero el proceso es el mismo para
cualquier tipo de plugin.
Como vamos a crear un theme nos desplazamos a la carpeta “plugins/themes” con la
consola CMD y una vez en esa carpeta ejecutamos el siguiente comando:
Visita www.chekis.es
16

Guía básica de Liferay
create new “Este es mi primer tema de apariencia”
Donde “new” es el nombre del plugin y “Este es mi primer tema de apariencia” es la
descripción del plugin.
Tras ejecutar el comando anterior automáticamente creara un plugin de tema de
apariencia con el nombre new-theme(ya que estábamos en plugins/themes ).
De esta forma tan fácil y encilla podremos crear plugins. En las siguientes secciones
podréis ver como se crea cada uno de los plugins detallando a fondo cada uno de ellos.
3.6 Crea tu primer Theme
Los temas de apariencia en Liferay son el pilar básico sobre el que se sustenta todo el
portal, su estructura y su estilo.
Cada uno de los temas lleva en su interior 4 carpetas básicas: css, templates, images y
javascript.
En la carpeta de css podréis encontrar todos los css que se aplican desde nuestro tema
al portal. A pesar de que incluye muchos ficheros .css os recomiendo que todo cambio
css que debáis hacer lo realicéis sobre custom.css ya que es el último css que se incluye
a través de main.css, el cual se encarga de incluir todos los ficheros .css.
Luego tenemos la carpeta de templates, y dentro de ella unos cuantos archivos .vm .En
ella podemos encontrar el archivo portal-normal.vm. Este es el archivo que le da forma
a nuestra web. Se encarga de crear tanto el head como el body y sobre ellos cargar
todo lo necesario para crearla (cabecera, pie, navigation, bloques definidos por
nosotros, etc).
El resto de archivos .vm de esta carpeta no son más que pequeños bloques que
mejoran la organización y modularidad de la página cuyo fin último es el de ser
cargados desde portal-normal.vm en la página.
La tercera carpeta que tenemos es la de images y no creo que necesite explicación.
Contiene todas las imágenes que se utilizan en los css.
Visita www.chekis.es
17

Guía básica de Liferay
Y por último tenemos la carpeta de javascript que, como su propio nombre indica,
tendrá todos los archivos javascript que utilicemos en nuestro tema.
Si añadimos nuevos archivos .JS a esta carpeta deberíamos de incluirlos en el head
declarado en portal-normal.vm para que se puedan incluir en el tema.
Vamos a pasar ahora a explicar cómo debemos de crear los temas de apariencia.
Para crear un tema de apariencia abriremos una consola cmd y nos desplazaremos a la
carpeta themes dentro de los plugins. En nuestro caso D:\Liferay 6.1
GA2\plugins\themes
Una vez en la carpeta themes ejecutamos el siguiente comando.
create new "Esto es mi primer tema"
Donde "new" es el nombre del tema y "Esto es mi primer tema" es la descripción del
tema que veremos a la hora de elegir el tema a aplicar en la administración de páginas.
Ahora ya tenemos creado el tema pero está vacío, por tanto, el siguiente paso será
copiar las carpetas de un tema por defecto que trae Liferay y, a partir de él, nosotros lo
personalizaremos a nuestra manera.
Para ello ,hemos elegido el tema classic que está en D:\Liferay 6.1
GA2\bundles\tomcat-7.0.27\webapps\ROOT\html\themes\classic .Copiaremos las
carpetas css, templates, images y javascript y las pegaremos en la carpeta _diffs dentro
de nuestro nuevo tema creado. Ahora ya estamos preparados para empezar a
personalizar nuestro tema a nuestro gusto pero eso ya será trabajo de cada uno.
Cuando queramos aplicar los cambios del tema en nuestro portal deberemos hacer lo
siguiente: nos desplazaremos como antes, mediante la consola a la ubicación
D:\Liferay 6.1 GA2\plugins\themes y ejecutaremos el siguiente comando:
ant deploy
Visita www.chekis.es
18

Guía básica de Liferay
Con esto, tendremos ya compilado el tema y listo para usarse en el portal. Para
aplicarlo, como ya se explicó antes vamos a nuestro portal y nos logueamos.
Una vez logueados vamos al dockbar y le damos a "Administrar" -> Página ->
Apariencia -> Defina un estilo específico para esta página .En este punto veremos
todos los temas que tenemos disponibles, incluido el que acabamos de compilar
recientemente y con darle un simple click aplicaremos el tema, así de sencillo. Siempre
y cuando estemos trabajando de manera local.
En caso de tener que trabajar con una máquina remota, deberemos subir el tema a ella
una vez compilado y para ello haremos lo siguiente: vamos al Panel de control->
Instalación de plugins->Temas de apariencia->Instalar más temas de apariencia->Subir
y aquí elegimos el war correspondiente a nuestro tema.
Estos WAR están en la carpeta D:\Liferay 6.1 GA2\plugins\dist
(NOTA: acordaros de hacer el ant deploy al tema antes de subirlo)
Y con esto ya tendríamos nuestro tema subido y listo para usarse.
3.7 Crea tu primer Layout
Las plantillas son el elemento que le da forma al contenido central de cada página de
nuestro portal. Por lo general tendremos numerosas plantillas por cada portal ya que
se suelen distribuir de forma diferente en función de cada página(2 columnas iguales,
3 columnas, 2 columnas con una más ancha que otra, etc).
Las plantillas de Liferay tienen una peculiaridad y es que son ellas las que definen la
propiedad de drag&drop de los portlets sobre ellas. Para ello, siempre que creemos
una nueva plantilla debemos de acordarnos de añadir la class="lfr-column" a cada
columna que es la que permite el drag&drop sobre ellas.
Para crear una nueva plantilla es igual de simple que con los temas. Abrimos una
consola cmd y vamos hasta D:\Liferay 6.1 GA2\plugins\layouttpl .Una vez aquí
ejecutamos create miplantilla "Mi plantilla" donde “miplantilla” es el nombre de la
plantilla y “Mi plantilla” es la descripción de la misma que veremos desde Liferay a la
hora de aplicarla al portal.
Visita www.chekis.es
19

Guía básica de Liferay
Llegados a este punto, vamos a hacer que nuestra plantilla cumpla con los requisitos
básicos de Liferay y para ello, como en los temas, copiamos la estructura básica de una
plantilla ya creada por Liferay. Nosotros hemos elegido D:\ Liferay 6.1
GA2\bundles\tomcat-7.0.27\webapps\ROOT\layouttpl\2_column_i. Copiamos el
contenido de los 3 archivos correspondientes a esta plantilla:
2_column_i.png,2_column_i.tpl y 2_column_i.wap.tpl en los archivos de la nueva
plantilla. Sólo copiamos el contenido de cada uno.
En 2_column_i.png tenemos el thumb que mostrará Liferay en el panel de
administración de plantillas.
La estructura de la plantilla estará en 2_column_i.tpl. A partir de esta plantilla básica
de Liferay que distribuye las columnas con un ancho del 50% nosotros vamos a
convertirla en una de 2 columnas pero con una distribución del 40% 60%. Para ello tan
sólo debemos de cambiar donde trae aui-w50 por aui-w40 y aui-w60
respectivamente(a la columna 1 le ponemos el 40 y a la segunda el 60). Dependiendo
de la versión de Liferay que tengáis este código variará un poco pero todo el proceso
de creación es igual(nosotros estamos usando Liferay 6.1).
Ahora tan sólo deberíamos de compilar la plantilla con “ant deploy” y tendríamos ya la
plantilla lista para usarse.
Visita www.chekis.es
20

Guía básica de Liferay
Del mismo modo que los temas, si trabajamos en local nos aparecerá la plantilla
directamente en el Dockbar->Administrar->Disposición de la página pero si estamos
trabajando remotamente deberemos de subir el war al servidor y para ello vamos al
Panel de control->Instalación de plugins->Plugins de plantillas de página->Instalar más
plantilla->Subir y aquí elegimos el war de la plantilla que estará en D:\liferay-portal-
6.0.6\plugins\dist y listo.
Las plantillas se aplican siempre de forma local, por tanto, deberemos de ir página por
página aplicando la que corresponda en cada caso.
3.8 Crea tu primer Hook
En el caso de los Hooks os recomendamos que utilicéis el IDE de Liferay para crearlos y
programarlos ya que es más sencillo que crearlos desde cero desde la consola CMD.
Lo primero que debemos hacer es descargar el SRC de Liferay donde podremos
encontrar todo el código fuente de Liferay, el cual necesitaremos para saber donde
debemos modificar y las rutas de cada portlet dentro de Liferay. Podemos descargarlo
desde el siguiente enlace donde debemos seleccionar "Portal Source".
Lo último será importar el código fuente a eclipse y estamos preparados para empezar.
Una vez hecho todo esto ya estamos listos para empezar a desarrollar un hook.
Como ejemplo a desarrollar vamos a coger el portlet de blogs y modificar su código
mediante un hook para que muestre un texto por ejemplo "FECHA:".
Para crear nuestro primer hook debemos ir al eclipse, justo debajo de search podemos
ver un icono cuadrado oscuro de "Create a new Liferay Plugin Proyect".
Visita www.chekis.es
21

Guía básica de Liferay
Le damos y nos aparece una nueva ventana donde seleccionamos el nombre del
proyecto(MiHook) y más abajo seleccionamos como tipo de plugin Hook.
Visita www.chekis.es
22

Guía básica de Liferay
Podemos observar también en esta ventana que podemos seleccionar tanto el plugin
SDK a usar como el servidor, en nuestro caso, sólo tendremos uno y no deberemos de
modificar nada pero si tuviéramos más de 1 servidor nos aparecerían ahí todos los que
tuviéramos.
Una vez hecho todo le damos a "Finish".
Ya tenemos el hook creado pero está vacío.
Visita www.chekis.es
23

Guía básica de Liferay
Ahora debemos ir al SRC de Liferay y buscar donde se encuentra el portlet a modificar,
en nuestro caso el de blogs.
Se encuentra en portal->portal-web->docroot->html->portlet->blogs.
Para hacer el hook debemos de copiar el archivo a modificar del portlet, en este caso
sería "view_entry_content.jsp", y copiarlo en nuestro hook pero de la siguiente
manera:
Debemos de reproducir toda la ruta del archivo a modificar del portlet en nuestro
hook desde la carpeta HTML a partir de /docroot/WEB-INF del hook.
En nuestro caso, el archivo view_entry_content.jsp del portlet blogs a modificar esta
en: /portal-web/docroot/html/portlet/blogs/view_entry_content.jsp
Nuestro hook quedaría de la siguiente forma estructurado: MiHookhook/docroot/WEB-INF/html/portlet/blogs/view_entry_content.jsp.
En
view_entry_content.jsp es donde debemos de copiar el código del fichero del portlet y
es aquí donde modificaremos el código para que el hook sobrescriba las funciones del
portlet.
Visita www.chekis.es
24

Guía básica de Liferay
Una vez creada la estructura del hook vamos a modificar el archivo
view_entry_content.js del hook para mostrar el mensaje "FECHA:" para que salga
delante de la fecha de publicación de cada entrada del blog.
En nuestro caso, deberíamos de buscar el bloque que tiene por class "entry-date" y ahí
dentro añadir una línea como la siguiente:
FECHA:
Como vemos es muy simple de modificar lo que nosotros queramos. Acordaros
siempre de hacerlo sobre la copia de la JSP sobre el hook.
Por último debemos indicar la ruta a partir de la cual Liferay debe buscar los cambios
de nuestro hook. Esto se debe hacer sobre el fichero liferay-hook.xml que se encuentra
en /MiHook-hook/docroot/WEB-INF/liferay-hook.xml
Aquí dentro debemos de añadir entre las etiquetas lo siguiente:
/WEB-INF
Visita www.chekis.es
25

Guía básica de Liferay
De esta forma indicamos que la carpeta HTML cuelga de WEB-INF. Si quisiéramos
podríamos cambiar la estructuración de nuestro hook e indicarle aquí donde se halla la
carpeta HTML.
Para terminar, sólo nos queda desplegar el hook yendo a la ventana de Ant en el
eclipse que se encuentra abajo a la derecha.
Visita www.chekis.es
26

Guía básica de Liferay
Seleccionamos nuestro hook, lo abrimos, buscamos "deploy" y clicamos sobre él.
Visita www.chekis.es
27

Guía básica de Liferay
Una vez termine de desplegar tendremos listo nuestro hook. Tan solo debemos ir al
navegador y abrir Liferay( http://localhost:8080 ) acordándonos de lanzarlo antes de
abrirlo ,obviamente, y una vez abierto añadimos el portlet blogs a cualquier página.
Añadimos una entrada al blog y podremos ver como se muestra el mensaje "FECHA:"
junto a la fecha de publicación de cada entrada.
3.9 Crea tu primer Portlet
Al igual que con los Hooks, os recomendamos que utilicéis el IDE Liferay de Eclipse para
crear los portlets ya que nos genera toda la estructura básica con tan solo unos pocos
clicks.
Para crear nuestro primer Portlet iremos al Eclipse y clicaremos sobre File->New-
>Liferay Proyect
Visita www.chekis.es
28

Guía básica de Liferay
En la siguiente pantalla debemos elegir el nombre de nuestro plugin, el servidor sobre
el que se creará y sus SDK. Por último debemos seleccionar el tipo de plugin(portlet).
Una vez rellenemos todos los campos le damos a “Next” en la siguiente pantalla
debemos marca la casilla “Create custom portlet class”.
Visita www.chekis.es
29

Guía básica de Liferay
Continuamos a la siguiente pantalla y escribimos el nombre que queremos dar a la
class CSS de nuestro portlet, en nuestro caso” MiPrimerPortlet”.
En la siguiente pantalla vamos a modificar la ruta de las JSPs para que estén en
/html/jsps y además, vamos a marca la casilla Edit en Portlets Modes para que cree esa
vista. Más adelante explicaremos para qué son cada vista del portlet y que representa
cada una.
Visita www.chekis.es
30

Guía básica de Liferay
Por último, en la pantalla final nos permite seleccionar si queremos que nuestro
portlet tenga múltiples instancias, si queremos que se añada al panel de control y
además, a qué categoría se añade. En nuestro caso, dejaremos desmarcada la opción
de instancias múltiples pero marcaremos que se añada al panel de control, a la
categoría “Samples”.
Tras marca estas casillas, le damos a Next y en la siguiente pantalla le daremos a
“Finish” y automáticamente se creará el Portlet.
Debería de quedarnos una estructura parecida a la siguiente:
Visita www.chekis.es
31

Guía básica de Liferay
Lo más importante en lo que debemos fijarnos es en las JSPs edit.jsp y view.jsp.
View.jsp corresponde a la vista pública del portlet, la que cualquier persona con los
mínimos permisos puede ver.
Edit.jsp corresponde a la vista de preferencias desde la que podremos configurar
cualquier parámetro que creemos.
Para nuestro ejemplo de creación de un Portlet vamos a modificar view.jsp y
desplegaremos el Portlet para saber que todo ha ido bien.
En view.jsp vamos a escribir lo siguiente:
Este es mi primer portlet
Hola mundo.
Una vez hecho guardamos y, al igual que con los Themes o Layouts, abrimos una
consola CMD, nos desplazamos a la ruta del portlet y escribimos el comando:
ant deploy
Con esto ya tendremos disponible para su uso el portlet por lo que solo nos quedará
irnos al navegador web, entrar en nuestro Liferay local, loguearnos y una vez
logueados vamos al Dock -> Add -> More
Visita www.chekis.es
32

Guía básica de Liferay
Buscamos dentro de la categoría “Sample” nuestro portlet y lo tiramos en el portal.
De esta forma podemos crear los portlets de una manera sencilla y en apenas unos
minutos. Otra cosa muy diferente será programarlos para que hagan exactamente lo
que queramos.
4. ALLOY
En un apartado anterior definíamos lo que era ALLOY y cuáles eran sus pros y , sobretodo,
sus contras. En este apartado vamos a resaltar cuales son las bondades de este framework
desarrollado para hacernos la vida dentro de Liferay mucho más fácil.
4.1 Documentación
En http://alloyui.com/deploy/api/ disponéis de toda la información relacionada
con este framework aunque como ya decíamos anteriormente no encontraréis
muchos ejemplos completos.
Visita www.chekis.es
33

Guía básica de Liferay
En la siguiente dirección http://www.liferay.com/community/liferayprojects/alloy-ui/demos
podréis encontrar todos los plugins, widgets y utilidades
adicionales de que dispone el framework
4.2 Plugins, widgets y utilidades
ALLOY dispone de una serie de widgets, plugins y utilidades que nos hacen la vida
más fácil a la hora de desarrollar ciertos aspectos de nuestros portales. Por
ejemplo, de forma nativa nos permite generar ventanas emergente o “Dialogs”,
tooltips, autocompletadores, etc.
A continuación vamos a ver todos los componentes de que dispone y para qué
sirve cada uno:
4.2.1 Widget
Autocomplete: Crea una lista de opciones predefinidas que ira sugiriendo
al usuario a medida que vaya escribiendo en un campo de texto.
Button: Permite crear botones que mejoran y generalizan el estilo de todo
ellos.
Calendar: Crea un calendario que puede ser mostrado de diferentes
formas. Por ejemplo al clicar sobre un campo de fecha o estar siempre
mostrado.
Charts: Muestra datos numéricos representados mediante un gráfico
interactivo.
Color Picker: Genera un selector de color con el que puedes interactuar y
posteriormente el selector produce el código HEX del color elegido.
Dialog: Permite generar ventanas modales y a su vez estas pueden cargar
lo que le indiquemos(portlets, contenido web, texto plano, código HTML,
etc).
Editable: Crea un editor de contenido en línea.
Image Gallery: Crea una galería de imágenes, la cuales, al ser clicadas se
muestran en un carrusel de imágenes a pantalla completa.
Paginator: Permite paginar cualquier conjunto de datos.
Panel: Es un contenedor con funcionalidad específica y componentes
estructurales con aplicaciones orientadas a interfaces de usuario.
Ratings: Crea un componente de puntuación mediante estrellas.
Tabs: Muestra una serie de pestañas las cuales se asocian con contenidos
concretos.
TextBox List: Crea una lista de elementos seleccionados a partir de una
caja de texto.
Toolbar: Crea una barra de herramientas.
Tooltips: Muestra información de ayuda para imágenes, enlaces, títulos,
etc.
Treeview: Genera un árbol de contenidos estructurados.
Visita www.chekis.es
34

Guía básica de Liferay
4.2.2 Plugin
Loading Mask: Muestra una máscara de Loading que evita la
interacción del usuario con el portal hasta que desaparece.
4.2.3 Utilidades
CSS Forms: Es un framework de CSS que nos permite maquetar los
formularios de forma homogénea mediante una serie de class.
CSS Layouts: Es un framework CSS que permite dar anchos a los
columnas de las Layouts mediante la utilización de una serie de
class(aui-w30, aui-w75,…)
Live Search: Permite filtrar el contenido por los datos introducidos en
la búsqueda.
Nested List: Son listas que permiten ordenar sus elementos mediante
un drag&drop (arrastrar y soltar).
Overlay Manager: Crea una colección de capas superpuestas que
pueden ser manejadas en grupo.
Resize: Permite redimensionar prácticamente cualquier elementos de
la página.
Sortable: Permite ordenar elementos mediante drag&drop.
SWF Writer Utility: Es una utilidad que nos permite renderizar archivos
SWF(flash) en una página.
4.2.4 Ejemplo de uso
Vamos a ver un ejemplo útil de uso como es la generación de ventana
modales o Dialogs:
Para generar un bocadillo nos valdremos de la librería "aui-dialog" de
ALLOY que nos ofrece las funciones necesarias para generarlo todo. Las
opciones de configuración de la ventana son numerosas pero nosotros
vamos a abordar unas cuantas en el ejemplo y explicar más adelante para
qué sirve cada una, las principales.
AUI().ready('aui-dialog', function(A) {
var instance = new A.Dialog({
bodyContent: 'Dialog body',
centered: true,
constrain2view: true,
destroyOnClose: true,
draggable: true,
height: 250,
resizable: false,
Visita www.chekis.es
35

Guía básica de Liferay
stack: true,
title: 'Dialog title',
width: 500,
modal:true,
cssClass: 'clasePrueba',
id: 'identificadorDialog',
buttons: [
{
text: 'Alerta1',
handler: function() {
alert('alerta1');
}
},
{
text: 'Alerta2',
handler: function() {
alert('alerta2');
}
}
]
}).render();
});
A continuación se muestra una tabla con todas las options utilizadas y su
explicación:
Option Descripción Tipo
bodyContent:
Es el contenido del dialog. Puede contener tanto
texto plano, como código, como portlets.
string
centered:
Establece si queremos que el dialog salga centrado
en la pantalla.
true/false
constrain2view:
Comprime el dialog para que solo se vea la región
visible del portlet.
Destruye el dialog cuando lo cerramos. En caso de
true/false
destroyOnClose: no destruirlo, quedaría creado en el código pero
oculto. Admite valores true o false.
true/false
draggable:
Establece si queremos que podamos arrastrar el
bocadillo o no. Admite valores true o false.
true/false
height: La altura del bocadillo.
Permite redimensionar el bocadillo creado
int
resizable:
mediante un pequeño icono que sale en una
esquina. Admite valores true o false.
true/false
title: Establece el título del bocadillo. Necesita un string. string
Visita www.chekis.es
36

Guía básica de Liferay
width: El ancho del bocata.
Si se pone a true, hace que al mostrar el dialog se
int
modal:
muestre un overlay oscuro por detrás de él que
deshabilita todo lo que hay por detrás de él.
Admite valores true o false.
Permite añadir botones al dialog estableciendo
true/false
buttons:
simplemente el titulo del botón y una acción a
llevar a cabo tras clicarlo. Podemos ver su modo de
uso en el ejemplo.
-
close:
Muestra el icono de cerrar el bocadillo. Admite
valores true o false.
true/false
cssClass: Añade una clase al dialog. Necesita un string. string
id: Añade un id al dialog. Necesita un string. string
4.3 Crea tu propio plugin
Al igual que con otros frameworks como jQuery o YUI3, ALLOY nos permite generar
nuestros propios plugins para luego utilizarlos de una forma muy simple y rápida.
Su creación es muy similar a la de un plugin en YUI 3. Todos los plugins deben seguir la
misma estructura básica y a partir de ella ampliar el código para que haga lo que
nosotros queramos.
La estructura básica es la siguiente:
AUI().add('basic-plugin', function(A) {
A.namespace('MyPlugins').PluginEjemplo =
A.Base.create("PluginEjemplo", A.Plugin.Base, [], {
_handle : null,
//constructor
initializer : function() {
this._handle = this.get("host");
var tgt = this.get("host");
var param1 = this.get("parametro1"),
param2 = this.get("parametro2"),
param3 = this.get("parametro3");
/*Tu código***/
},
//clean up on destruction
destructor : function() {
this._handle.detach();
this._handle = null;
}
},
{
NS : "bp",
ATTRS : {
parametro1 : { value : "valor de parametro1 por
defecto" },
parametro2 : { value : "valor de parametro2 por
defecto" },
parametro3 : { value : "valor de parametro3 por
defecto" }
Visita www.chekis.es
37

Guía básica de Liferay
}
});
}, "0.1", { requires : [ "base", "plugin", "node" ] });
Como veis, el uso del código anterior se reduce a declarar una serie de parámetros que
serán los que se le puedan introducir al plugin y luego simplemente se crea el código
personalizado del plugin.
Una vez creado el plugin podremos utilizarlo de la siguiente manera:
A.use("node", "basic-plugin", function(A) {
A.all("#elemento").plug(A.MyPlugins.PluginEjemplo, {
parametro1 : 'valor1',
parametro2 : 'valor2'
});
});
Donde ‘#elemento’ es le ID del bloque al que afecta el plugin y sobre el que se construye.
Visita www.chekis.es
38

Guía básica de Liferay
Visita www.chekis.es
39