Guia Basica de Liferay

Gua bsica de Liferay
En este curso bsico de Liferay aprenders qu es Liferay, qu

ofrece y, en unos sencillo pasos, aprenders a crear tus propios
plugins para ampliar este fantstico CMS.
Sergio Gonzalez Barrios
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 Documentacin ................................................................................................................. 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
2
Visita www.chekis.es
1. Qu es Liferay?
Liferay es un gestor de contenidos de cdigo abierto escrito en Java que nos permite crear
un portal web de una forma muy sencilla y rpida y administrar sus contenidos mediante
un panel de control muy intuitivo.
Fue creado en el ao 2000 y desde entonces no ha parado de crecer, tanto es as, que cada
ao 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 nmero de importantes empresas
nacionales y multinacionales.
1.2 Versiones
Desde su creacin, Liferay ha pasado por numerosas versiones, cada una ms
evolucionada que la anterior. Actualmente, su versin ms reciente es la 6.1 pero an
se siguen utilizando, y mucho, las versiones 6.0 y 5.2.x.
Por supuesto, desde este libro os vamos a recomendar siempre que utilicis la versin
ms actual del producto ya que ser la ms 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 distribucin 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 habris imaginado es de pago. Como para la
mayora de productos de este tipo, las licencias Enterprise son bastante caras y
suelen estar slo al alcance de proyectos con un presupuesto relativamente elevado.
Qu diferencia hay entre ambas licencias?

La respuesta es simple, la EE es mucho ms completa y estable que la CE a nivel de
calidad. Si contratas una licencia EE ests adquiriendo un servicio de soporte con lo
que tienes la posibilidad, en caso de encontrar algn fallo en el producto o bug, de
solicitar a Liferay que lo arregle o te d una solucin para arreglarlo. Si tu licencia es
CE y encuentras un fallo en el producto no podrs solicitar a Liferay que te lo
solucione, tendrs que ser t mismo el que lo arregle o busque una alternativa.
Obviamente, Liferay dedica la mayora de sus recursos a solucionar los posibles
3
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 continuacin tenis la lista de
servidores:
Tomcat
Geronimo
Glassfish
JBoss
Jetty
JOnAS + Tomcat
Resin
Nosotros te recomendamos que utilices un Tomcat ya que es la ms fcil de
implementar y es el ms extendido.
Ms adelante veremos cmo 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 pgina
Hooks
Portlets
Estos plugins permiten aadir nuevas funcionalidades y servicios al portal original
mejorando la calidad y aumentando su versatilidad. Ms adelante podris ver en que
consiste cada uno de estos plugins y cmo podemos crearlos.
1.5 ALLOY
A partir de la versin 6.0, Liferay incluy en su portal de forma nativa este framework
javascript. En versiones anteriores a la 6.0 inclua la librera jQuery para dar soporte a
todas sus funcionalidades dinmicas.
Este nuevo framework fue desarrollado a partir de YUI 3, un framework desarrollado
por la compaa Yahoo y que, aunque en Europa no est muy extendido su uso, s lo
est en EEUU.
4
ALLOY da soluciones y funcionalidades para la mayora de cdigo 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 libreras javascript hemos de decir que su gran
inconveniente es su escasa documentacin. Es cierto que dispone de una API completa
donde podis encontrar toda la documentacin 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 da todava no est muy extendido su uso a la hora de
desarrollar nuevas funcionalidades para un proyecto y muchos programadores optan
por incluir la librera 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 tardars tiempo en solucionarlo
por la escasa documentacin, problemas que con frameworks como jQuery no pasara
ya que si buscas tu problema en Google te saldrn miles de entradas con la solucin y
con ALLOY eso no pasara.
An as os animo a adentraros en el mundo de ALLOY ya que os resultar muy
interesante y har que os esforcis.
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 tambin al mismo nivel que bundles
otra carpeta llamada plugins y descomprimimos en ella el otro archivo que habamos
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 veris todos los registros de inicializacin de Liferay.
Una vez termine de iniciarse se abrir automticamente en vuestro navegador
predeterminado una pestaa donde podris ver el inicializador de Liferay. En caso de no
abrirse sola podis acceder mediante la URL http://localhost:8080
5
En esta pantalla podis configurar los datos del portal, del administrador y la base de datos
que utilizar Liferay (por defecto Hypersonic).
Tras finalizar la configuracin tendremos que esperar unos pocos minutos (2-3min) para
que configure y una vez termine nos mostrar una pantalla de confirmacin.
A continuacin debis establecer una contrasea para vuestra cuenta de administrador:
6
Lo siguiente ser establecer la tpica pregunta secreta y su respuesta para recuperar

nuestra contrasea 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 extensin 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.
7
3.1 Tipos de Plugins

3.1.1 Theme
Un Theme o Tema de Apariencia es un plugin que permite modificar el estilo o
diseo de un portal web o de una pgina 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 disposicin de
pgina diferente para cada pgina. Son sobre ellas sobre las que se colocan los
portlets y afectan nica y exclusivamente al contenido central de la pgina. La
cabecera, navegacin principal y footer se definiran 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 programacin de Liferay.
Funcionan como mdulos independientes y cada uno tiene una funcionalidad
diferente. Cualquier cdigo creado dentro de un portlet no afectar nunca al
cdigo 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 solucin 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 cdigo
nativo del portal. Se utilizan, sobretodo, para modificar el cdigo de algn
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 cdigo de uno o varios portlets
mediante la modificacin de sus JSPs.
Portal properties: Permiten modificar las propiedades del portal o definir
nuevas propiedades.
8
Services: Permiten modificar los servicios del portal directamente o aadir

nuevos.
Language properties: Permiten declarar nuevas variables de idiomas para
facilitar la internacionalizacin del portal. Estas variables luego ser usadas
en diferentes puntos del portal como, por ejemplo, para traducir algn
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 direccin
http://ant.apache.org/bindownload.cg
Para instalar el Apache Ant no tenemos nada ms que descomprimir el archivo en la
carpeta que nosotros queramos.
A continuacin debemos de aadir 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->Configuracin 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 sera D:\apache-ant-1.8.2\bin\
Buscamos la variable Path en Variables del Sistema y la editamos. Al final del todo
aadimos la ruta de vuestro Apache Ant quedando de la siguiente forma:
Ahora creamos la variable ANT_HOME y le aadimos la ruta D:\apache-ant-1.8.2\
9
Para probar que todo funciona abrimos la consola cmd(Inicio y ejecutamos CMD) y
escribimos ant -version y deberamos 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 prdida).
Una vez instalado todo debemos de aadirlas a las variables de entorno de nuestra
mquina.
Vamos a Panel de Control->Sistema y Seguridad->Configuracin 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 sera C:\Program Files\Java\jdk1.7.0_13\bin
Buscamos la variable Path en Variables del Sistema y la editamos. Al final del todo
aadimos la ruta de vuestras Java JDK quedando de la siguiente forma:
10
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 cmo 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 instalacin del
plugin de desarrollo.
El plugin lo podis encontrar en la siguiente direccin 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. Tenis disponibles para Linux y Mac tambin.
Para instalar el eclipse que nos hemos bajado slo 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 sita 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.
11
Una vez hecho esto, ya estamos preparados para empezar a configurar el eclipse con
nuestro servidor Liferay.
Ahora debemos se situarnos en la pestaa de Server(abajo a la izquierda). Clic derecho
-> New -> Server.
12
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".
13
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.
14
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 aade una nueva
entrada en preferences con el plugin que acabamos de aadir.
15
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 pestaa de servers y le damos al botn
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
fcil 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 fcil 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 explicacin 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:
16
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

descripcin del plugin.
Tras ejecutar el comando anterior automticamente creara un plugin de tema de
apariencia con el nombre new-theme(ya que estbamos en plugins/themes ).
De esta forma tan fcil y encilla podremos crear plugins. En las siguientes secciones
podris 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 bsico sobre el que se sustenta todo el
portal, su estructura y su estilo.
Cada uno de los temas lleva en su interior 4 carpetas bsicas: css, templates, images y
javascript.
En la carpeta de css podris 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 debis hacer lo realicis sobre custom.css ya que es el ltimo css que se incluye
a travs 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 ms que pequeos bloques que
mejoran la organizacin y modularidad de la pgina cuyo fin ltimo es el de ser
cargados desde portal-normal.vm en la pgina.
La tercera carpeta que tenemos es la de images y no creo que necesite explicacin.
Contiene todas las imgenes que se utilizan en los css.
17
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 aadimos nuevos archivos .JS a esta carpeta deberamos de incluirlos en el head
declarado en portal-normal.vm para que se puedan incluir en el tema.
Vamos a pasar ahora a explicar cmo 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 descripcin del
tema que veremos a la hora de elegir el tema a aplicar en la administracin de pginas.
Ahora ya tenemos creado el tema pero est vaco, 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 ubicacin
D:\Liferay 6.1 GA2\plugins\themes y ejecutaremos el siguiente comando:
ant deploy
18
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" -> Pgina ->
Apariencia -> Defina un estilo especfico para esta pgina .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 mquina remota, deberemos subir el tema a ella
una vez compilado y para ello haremos lo siguiente: vamos al Panel de control->
Instalacin de plugins->Temas de apariencia->Instalar ms temas de apariencia->Subir
y aqu elegimos el war correspondiente a nuestro tema.
Estos WAR estn 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 tendramos 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 pgina de
nuestro portal. Por lo general tendremos numerosas plantillas por cada portal ya que
se suelen distribuir de forma diferente en funcin de cada pgina(2 columnas iguales,
3 columnas, 2 columnas con una ms 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 aadir 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 descripcin de la misma que veremos desde Liferay a la
hora de aplicarla al portal.
19
Llegados a este punto, vamos a hacer que nuestra plantilla cumpla con los requisitos
bsicos de Liferay y para ello, como en los temas, copiamos la estructura bsica 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. Slo copiamos el contenido de cada uno.
En 2_column_i.png tenemos el thumb que mostrar Liferay en el panel de

administracin de plantillas.
La estructura de la plantilla estar en 2_column_i.tpl. A partir de esta plantilla bsica
de Liferay que distribuye las columnas con un ancho del 50% nosotros vamos a
convertirla en una de 2 columnas pero con una distribucin del 40% 60%. Para ello tan
slo 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 versin de Liferay que tengis este cdigo variar un poco pero todo el proceso
de creacin es igual(nosotros estamos usando Liferay 6.1).
Ahora tan slo deberamos de compilar la plantilla con ant deploy y tendramos ya la
plantilla lista para usarse.
20
Del mismo modo que los temas, si trabajamos en local nos aparecer la plantilla
directamente en el Dockbar->Administrar->Disposicin de la pgina pero si estamos
trabajando remotamente deberemos de subir el war al servidor y para ello vamos al
Panel de control->Instalacin de plugins->Plugins de plantillas de pgina->Instalar ms
plantilla->Subir y aqu elegimos el war de la plantilla que estar en D:\liferay-portal6.0.6\plugins\dist y listo.
Las plantillas se aplican siempre de forma local, por tanto, deberemos de ir pgina por
pgina aplicando la que corresponda en cada caso.
3.8 Crea tu primer Hook

En el caso de los Hooks os recomendamos que utilicis el IDE de Liferay para crearlos y
programarlos ya que es ms 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 cdigo 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 cdigo 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 cdigo
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".
21
Le damos y nos aparece una nueva ventana donde seleccionamos el nombre del
proyecto(MiHook) y ms abajo seleccionamos como tipo de plugin Hook.
22
Podemos observar tambin en esta ventana que podemos seleccionar tanto el plugin
SDK a usar como el servidor, en nuestro caso, slo tendremos uno y no deberemos de
modificar nada pero si tuviramos ms de 1 servidor nos apareceran ah todos los que
tuviramos.
Una vez hecho todo le damos a "Finish".

Ya tenemos el hook creado pero est vaco.
23
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
sera "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 quedara 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 cdigo del fichero del portlet y
es aqu donde modificaremos el cdigo para que el hook sobrescriba las funciones del
portlet.
24
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 publicacin de cada entrada del blog.
En nuestro caso, deberamos de buscar el bloque que tiene por class "entry-date" y ah
dentro aadir una lnea como la siguiente:
<div>FECHA:</div>
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 aadir entre las etiquetas lo siguiente:
<hook><custom-jsp-dir>/WEB-INF</custom-jsp-dir>
25
De esta forma indicamos que la carpeta HTML cuelga de WEB-INF. Si quisiramos

podramos cambiar la estructuracin de nuestro hook e indicarle aqu donde se halla la
carpeta HTML.
Para terminar, slo nos queda desplegar el hook yendo a la ventana de Ant en el
eclipse que se encuentra abajo a la derecha.
26
Seleccionamos nuestro hook, lo abrimos, buscamos "deploy" y clicamos sobre l.
27
Una vez termine de desplegar tendremos listo nuestro hook. Tan solo debemos ir al
navegador y abrir Liferay( http://localhost:8080 ) acordndonos de lanzarlo antes de
abrirlo ,obviamente, y una vez abierto aadimos el portlet blogs a cualquier pgina.
Aadimos una entrada al blog y podremos ver como se muestra el mensaje "FECHA:"
junto a la fecha de publicacin de cada entrada.
3.9 Crea tu primer Portlet

Al igual que con los Hooks, os recomendamos que utilicis el IDE Liferay de Eclipse para
crear los portlets ya que nos genera toda la estructura bsica con tan solo unos pocos
clicks.
Para crear nuestro primer Portlet iremos al Eclipse y clicaremos sobre File->New>Liferay Proyect
28
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.
29
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 estn en
/html/jsps y adems, vamos a marca la casilla Edit en Portlets Modes para que cree esa
vista. Ms adelante explicaremos para qu son cada vista del portlet y que representa
cada una.
30
Por ltimo, en la pantalla final nos permite seleccionar si queremos que nuestro
portlet tenga mltiples instancias, si queremos que se aada al panel de control y
adems, a qu categora se aade. En nuestro caso, dejaremos desmarcada la opcin
de instancias mltiples pero marcaremos que se aada al panel de control, a la
categora Samples.
Tras marca estas casillas, le damos a Next y en la siguiente pantalla le daremos a

Finish y automticamente se crear el Portlet.
Debera de quedarnos una estructura parecida a la siguiente:
31
Lo ms importante en lo que debemos fijarnos es en las JSPs edit.jsp y view.jsp.

View.jsp corresponde a la vista pblica del portlet, la que cualquier persona con los
mnimos permisos puede ver.
Edit.jsp corresponde a la vista de preferencias desde la que podremos configurar
cualquier parmetro que creemos.
Para nuestro ejemplo de creacin 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:
<h1>Este es mi primer portlet</h1>
<p>Hola mundo. </p>
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
32
Buscamos dentro de la categora 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 definamos lo que era ALLOY y cules 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 ms fcil.
4.1 Documentacin
En http://alloyui.com/deploy/api/ disponis de toda la informacin relacionada
con este framework aunque como ya decamos anteriormente no encontraris
muchos ejemplos completos.
33
En la siguiente direccin http://www.liferay.com/community/liferayprojects/alloy-ui/demos podris 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
ms fcil 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 continuacin 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 numricos representados mediante un grfico
interactivo.
Color Picker: Genera un selector de color con el que puedes interactuar y
posteriormente el selector produce el cdigo 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, cdigo HTML,
etc).
Editable: Crea un editor de contenido en lnea.
Image Gallery: Crea una galera de imgenes, la cuales, al ser clicadas se
muestran en un carrusel de imgenes a pantalla completa.
Paginator: Permite paginar cualquier conjunto de datos.
Panel: Es un contenedor con funcionalidad especfica y componentes
estructurales con aplicaciones orientadas a interfaces de usuario.
Ratings: Crea un componente de puntuacin mediante estrellas.
Tabs: Muestra una serie de pestaas 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 informacin de ayuda para imgenes, enlaces, ttulos,
etc.
Treeview: Genera un rbol de contenidos estructurados.
34
4.2.2 Plugin
Loading Mask: Muestra una mscara de Loading que evita la
interaccin 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 homognea mediante una serie de class.
CSS Layouts: Es un framework CSS que permite dar anchos a los
columnas de las Layouts mediante la utilizacin de una serie de
class(aui-w30, aui-w75,)
Live Search: Permite filtrar el contenido por los datos introducidos en
la bsqueda.
Nested List: Son listas que permiten ordenar sus elementos mediante
un drag&drop (arrastrar y soltar).
Overlay Manager: Crea una coleccin de capas superpuestas que
pueden ser manejadas en grupo.
Resize: Permite redimensionar prcticamente cualquier elementos de
la pgina.
Sortable: Permite ordenar elementos mediante drag&drop.
SWF Writer Utility: Es una utilidad que nos permite renderizar archivos
SWF(flash) en una pgina.
4.2.4 Ejemplo de uso
Vamos a ver un ejemplo til de uso como es la generacin de ventana
modales o Dialogs:
Para generar un bocadillo nos valdremos de la librera "aui-dialog" de
ALLOY que nos ofrece las funciones necesarias para generarlo todo. Las
opciones de configuracin de la ventana son numerosas pero nosotros
vamos a abordar unas cuantas en el ejemplo y explicar ms adelante para
qu sirve cada una, las principales.
<script type=text/javascript>
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,
35
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();
});
</script>
A continuacin se muestra una tabla con todas las options utilizadas y su

explicacin:
Option
bodyContent:
centered:
constrain2view:
destroyOnClose:
draggable:
height:
resizable:
title:
Descripcin
Es el contenido del dialog. Puede contener tanto
texto plano, como cdigo, como portlets.
Establece si queremos que el dialog salga centrado
en la pantalla.
Comprime el dialog para que solo se vea la regin
visible del portlet.
Destruye el dialog cuando lo cerramos. En caso de
no destruirlo, quedara creado en el cdigo pero
oculto. Admite valores true o false.
Establece si queremos que podamos arrastrar el
bocadillo o no. Admite valores true o false.
La altura del bocadillo.
Permite redimensionar el bocadillo creado
mediante un pequeo icono que sale en una
esquina. Admite valores true o false.
Establece el ttulo del bocadillo. Necesita un string.
Tipo
string
true/false
true/false
true/false
true/false
int
true/false
string
36
width:
modal:
buttons:
close:
cssClass:
id:
El ancho del bocata.

Si se pone a true, hace que al mostrar el dialog se
muestre un overlay oscuro por detrs de l que
deshabilita todo lo que hay por detrs de l.
Admite valores true o false.
Permite aadir botones al dialog estableciendo
simplemente el titulo del botn y una accin a
llevar a cabo tras clicarlo. Podemos ver su modo de
uso en el ejemplo.
Muestra el icono de cerrar el bocadillo. Admite
valores true o false.
Aade una clase al dialog. Necesita un string.
Aade un id al dialog. Necesita un string.
int
true/false
true/false
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 rpida.
Su creacin es muy similar a la de un plugin en YUI 3. Todos los plugins deben seguir la
misma estructura bsica y a partir de ella ampliar el cdigo para que haga lo que
nosotros queramos.
La estructura bsica 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 cdigo***/
},
//clean up on destruction
destructor : function() {
this._handle.detach();
this._handle = null;
}
},
{
NS : "bp",
ATTRS : {
parametro1 : { value : "valor de parametro1 por
defecto" },
defecto" },
defecto" }
37
}
});
}, "0.1", { requires : [ "base", "plugin", "node" ] });
Como veis, el uso del cdigo anterior se reduce a declarar una serie de parmetros que
sern los que se le puedan introducir al plugin y luego simplemente se crea el cdigo
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.
38
39

Guia Basica de Liferay

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Guia Basica de Liferay

Uploaded by

Copyright:

Available Formats

Gua bsica de Liferay

En este curso bsico de Liferay aprenders qu es Liferay, qu

Sergio Gonzalez Barrios

Gua bsica de Liferay

2. Instalando un servidor Liferay ...................................................................................... 5

Gua bsica de Liferay

Qu diferencia hay entre ambas licencias?

Gua bsica de Liferay

1.4 Tipos de servidor

1.4 Plugins Liferay

Gua bsica de Liferay

ALLOY da soluciones y funcionalidades para la mayora de cdigo desarrollado para

2. Instalando un servidor Liferay

Gua bsica de Liferay

A continuacin debis establecer una contrasea para vuestra cuenta de administrador:

Gua bsica de Liferay

Lo siguiente ser establecer la tpica pregunta secreta y su respuesta para recuperar

Gua bsica de Liferay

3.1 Tipos de Plugins

Gua bsica de Liferay

Services: Permiten modificar los servicios del portal directamente o aadir

3.2 Instala un servidor Apache Ant

Ahora creamos la variable ANT_HOME y le aadimos la ruta D:\apache-ant-1.8.2\

Gua bsica de Liferay

3.3 Instala Java JDK

Gua bsica de Liferay

3.4 Instala el IDE Liferay en Eclipse

Gua bsica de Liferay

Gua bsica 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

Gua bsica de Liferay

Gua bsica de Liferay

Gua bsica de Liferay

3.5 Crea tu primer plugin

Gua bsica 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

3.6 Crea tu primer Theme

Gua bsica de Liferay

Gua bsica de Liferay

3.7 Crea tu primer Layout

Gua bsica de Liferay

En 2_column_i.png tenemos el thumb que mostrar Liferay en el panel de

Gua bsica de Liferay

3.8 Crea tu primer Hook

Gua bsica de Liferay

Gua bsica de Liferay

Una vez hecho todo le damos a "Finish".

Gua bsica de Liferay

Ahora debemos ir al SRC de Liferay y buscar donde se encuentra el portlet a modificar,

Gua bsica de Liferay

Una vez creada la estructura del hook vamos a modificar el archivo

Como vemos es muy simple de modificar lo que nosotros queramos. Acordaros

Gua bsica de Liferay

De esta forma indicamos que la carpeta HTML cuelga de WEB-INF. Si quisiramos

Gua bsica de Liferay

Seleccionamos nuestro hook, lo abrimos, buscamos "deploy" y clicamos sobre l.

Gua bsica de Liferay

3.9 Crea tu primer Portlet

Gua bsica de Liferay

En la siguiente pantalla debemos elegir el nombre de nuestro plugin, el servidor sobre

Gua bsica de Liferay