Guia Basica 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

2

Visita www.chekis.es

Í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


3


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


4


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.


5


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


6


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:


7


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.


8


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.


9


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\


10


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:


11


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.


12


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.


13


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".


14


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.


15


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.


16


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:


17


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.


18


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


19


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.


20


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.


21


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".


22


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.


23


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.


24


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: MiHook-

hook/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.


25


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:

<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 añadir entre las etiquetas lo siguiente:

<hook><custom-jsp-dir>/WEB-INF</custom-jsp-dir>


26


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.


27


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


28


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


29


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”.


30


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.


31


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:


32


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:

<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


33


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.


34


En la siguiente dirección http://www.liferay.com/community/liferay-

projects/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.


35


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.

<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,


36


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 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. true/false

destroyOnClose: Destruye el dialog cuando lo cerramos. En caso de

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. int

resizable: Permite redimensionar el bocadillo creado

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


37


width: El ancho del bocata. int

modal:

Si se pone a true, hace que al mostrar el dialog se

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.

true/false

buttons:

Permite añadir botones al dialog estableciendo

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" }


38


} }); }, "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.


39


Guia Basica de Liferay

Documents

Transcript of Guia Basica de Liferay