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

Gua bsica de Liferay

ndice
$. %&u es Liferay'............................................................................................................ (
$.) ersiones ............................................................................................................................. ( $.( Licencias .............................................................................................................................. ( $.* +ipos de ser,idor ................................................................................................................. * $.* -lugins Liferay ..................................................................................................................... * $.. /LL01................................................................................................................................... *

). 2nstalando un ser,idor Liferay ...................................................................................... . (. -lugins ........................................................................................................................... 3

(.$ +ipos de -lugins ................................................................................................................... 4 3.1.1 Theme ........................................................................................................................... 8 3.1.2 Layout ........................................................................................................................... 8 3.1.3 Portlet ........................................................................................................................... 8 3.1.4 Hook ............................................................................................................................. 8 (.) 2nstala un ser,idor /pac"e /nt ........................................................................................... 5 (.( 2nstala 6a,a 678.................................................................................................................. $9 (.* 2nstala el 27E Liferay en Eclipse ......................................................................................... $$ (.. Crea tu primer plugin ........................................................................................................ $: (.: Crea tu primer +"eme ....................................................................................................... $3 (.3 Crea tu primer Layout ....................................................................................................... $5 (.4 Crea tu primer ;oo# .......................................................................................................... )$ (.5 Crea tu primer -ortlet ....................................................................................................... )4

*. /LL01 .......................................................................................................................... ((
*.$ 7ocumentaci<n ................................................................................................................. (( *.) -lugins, !idgets y utilidades ............................................................................................. (* 4.2.1 Widget ........................................................................................................................ 34 4.2.2 Plugin .......................................................................................................................... 35 4.2.3 Utilidades.................................................................................................................... 35 4.2.4 E em!lo de uso ........................................................................................................... 35 *.( Crea tu propio plugin......................................................................................................... (3

2 isita !!!.c"e#is.es

Gua bsica de Liferay

1. Qu es Liferay?
Liferay es un gestor de contenidos de c<digo abierto escrito en 6a,a que nos permite crear un portal !eb de una forma muy sencilla y rpida y administrar sus contenidos mediante un panel de control muy intuiti,o. =ue creado en el a>o )999 y desde entonces no "a parado de crecer, tanto es as, que cada a>o su cuota de mercado crece sin parar y ya se "a con,ertido en uno de los principales CMS del momento dando soluciones a un gran n?mero de importantes empresas nacionales y multinacionales.

1.2 Versiones
7esde su creaci<n, Liferay "a pasado por numerosas ,ersiones, cada una ms e,olucionada que la anterior. /ctualmente, su ,ersi<n ms reciente es la :.$ pero a?n se siguen utili@ando, y muc"o, las ,ersiones :.9 y ..).A. -or supuesto, desde este libro os ,amos a recomendar siempre que utilicis la ,ersi<n ms actual del producto ya que ser la ms estable y solucionar muc"as de las deficiencias de ,ersiones anteriores.

1.3 Licencias
Liferay se distribuye baBo ) 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 !eb. 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 "abris imaginado es de pago. Como para la mayora de productos de este tipo, las licencias Enterprise son bastante caras y suelen estar s<lo al alcance de proyectos con un presupuesto relati,amente ele,ado.

Qu diferencia hay entre ambas licencias?

La respuesta es simple, la EE es muc"o ms completa y estable que la CE a ni,el de calidad. Si contratas una licencia EE ests adquiriendo un ser,icio 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 podrs solicitar a Liferay que te lo solucione, tendrs que ser t? mismo el que lo arregle o busque una alternati,a. 0b,iamente, Liferay dedica la mayora de sus recursos a solucionar los posibles

3 isita !!!.c"e#is.es

Gua bsica de Liferay

problemas que surBan en las ,ersiones con licencias EE ya que son las que les reportan beneficios.

1.4 Tipos de servidor

/ la "ora de instalar un ser,idor Liferay debemos elegir sobre qu tipo de ser,idor queremos que corra. Liferay se distribuye baBo ,arios tipos de ser,idor. / continuaci<n tenis la lista de ser,idoresC +omcat Geronimo Glassfis" 6Doss 6etty 60n/S E +omcat Fesin Gosotros te recomendamos que utilices un +omcat ya que es la ms fcil de implementar y es el ms eAtendido. Ms adelante ,eremos c<mo se instala un ser,idor de este tipo y lo basaremos en un ser,idor +omcat.

1.4 !u"ins Liferay

En Liferay eAisten * tipos principales de plugins diferentesC +"emes o temas de apariencia Layouts o plantillas de pgina ;oo#s -ortlets Estos plugins permiten a>adir nue,as funcionalidades y ser,icios al portal original meBorando la calidad y aumentando su ,ersatilidad. Ms adelante podris ,er en que consiste cada uno de estos plugins y c<mo podemos crearlos.

1.# $LL%&
/ partir de la ,ersi<n :.9, Liferay incluy< en su portal de forma nati,a este frame!or# Ba,ascript. En ,ersiones anteriores a la :.9 inclua la librera B&uery para dar soporte a todas sus funcionalidades dinmicas. Este nue,o frame!or# fue desarrollado a partir de 1H2 (, un frame!or# desarrollado por la compa>a 1a"oo y que, aunque en Europa no est muy eAtendido su uso, s lo est en EEHH.

4 isita !!!.c"e#is.es

Gua bsica de Liferay

/LL01 da soluciones y funcionalidades para la mayora de c<digo desarrollado para Liferay y, gracias a ser desarrollado a partir de 1H2(, dispone de todas sus funcionalidades originales. Como todo frame!or# tiene sus pros y sus contras, en este caso, a pesar de dar infinidad de funcionalidades adaptadas a las necesidades de Liferay y e,itar la necesidad de cargar otras libreras Ba,ascript "emos de decir que su gran incon,eniente es su escasa documentaci<n. Es cierto que dispone de una /-2 completa donde podis encontrar toda la documentaci<n con las diferentes funcionalidades que ofrece pero carece casi por completo de eBemplos completos de uso a diferencia de otros frame!or#s como B&uery. Es por estos moti,os que "oy en da toda,a no est muy eAtendido su uso a la "ora de desarrollar nue,as funcionalidades para un proyecto y muc"os programadores optan por incluir la librera B&uery o cualquier otra para e,itar impre,istos o problemas. -ersonalmente opino que es un frame!or# muy potente, que ofrece infinidad de posibilidades pero que si no tienes unos conocimientos mediosIaltos no te renta utili@arlo ya que en cuanto te encuentres un problema tardars tiempo en solucionarlo por la escasa documentaci<n, problemas que con frame!or#s como B&uery no pasara ya que si buscas tu problema en Google te saldrn miles de entradas con la soluci<n y con /LL01 eso no pasara. /?n as os animo a adentraros en el mundo de /LL01 ya que os resultar muy interesante y "ar que os esforcis.

2. 'ns(a!ando un servidor Liferay

7ebemos descargar tanto el portal Liferay como el paquete de -lugins desde este enlaceC "ttpCII!!!.liferay.comIesIdo!nloadsIliferayJportalIa,ailableJreleases Hna ,e@ descargado ambos arc"i,os debemos descomprimir el portal en el directorio que queramos, por eBemplo en 7CK quedando de la siguiente manera 7CKLiferay :.$ G/) 7entro de esta carpeta creamos otra carpeta llamada bundles y metemos en ella todo el contenido de LliferayJportalJ:.$.$JceJga)L. Creamos tambin al mismo ni,el que bundles otra carpeta llamada plugins y descomprimimos en ella el otro arc"i,o que "abamos descargado MLliferayJpluginsJsd#J:.$.$LN. Hna ,e@ "ec"o todo esto, ,amos a lan@ar el portal. Gos ,amos a la carpeta bundlesItomcatIbinI y eBecutamos startup.bat. Esto lan@ar una consola en la cual ,eris todos los registros de iniciali@aci<n de Liferay. Hna ,e@ termine de iniciarse se abrir automticamente en ,uestro na,egador predeterminado una pesta>a donde podris ,er el iniciali@ador de Liferay. En caso de no abrirse sola podis acceder mediante la HFL "ttpCIIlocal"ostC4949

isita !!!.c"e#is.es

Gua bsica de Liferay

En esta pantalla podis configurar los datos del portal, del administrador y la base de datos que utili@ar Liferay Mpor defecto ;ypersonicN. +ras finali@ar la configuraci<n tendremos que esperar unos pocos minutos M)J(minN para que configure y una ,e@ termine nos mostrar una pantalla de confirmaci<n.

/ continuaci<n debis establecer una contrase>a para ,uestra cuenta de administradorC

! isita !!!.c"e#is.es

Gua bsica de Liferay

Lo siguiente ser establecer la tpica pregunta secreta y su respuesta para recuperar nuestra contrase>a en caso de que se nos ol,ideC

+ras este ?ltimo paso nos lle,ar directamente a nuestro portal que estar accesible mediante la HFL "ttpCIIlocal"ostC4949

3.

!u"ins
Hn plugin Liferay es una eAtensi<n del mismo que permite ampliar las funcionalidades y ser,icios que ofrece el portal. EAisten * tipos de plugins principales diferentesC +"eme, Layout, ;oo# y -ortlet.

" isita !!!.c"e#is.es

Gua bsica de Liferay

3$% &i'os de (lugins 3$%$% &heme Hn +"eme o +ema de /pariencia es un plugin que permite modificar el estilo o dise>o de un portal !eb o de una pgina concreta. Cada +ema de /pariencia puede disponer de una serie de Esquemas de color que permiten "acer ,ariantes del mismo +ema de /pariencia y mantenerlo todo en un mismo plugin. -or eBemplo, podemos "acer que un +ema de /pariencia tenga ) ,ariantes de tonalidades, una en a@ul y otra en roBo. 3$%$2 )ayout Hna Layout o -lantilla es un plugin que permite definir una disposici<n de pgina diferente para cada pgina. Son sobre ellas sobre las que se colocan los portlets y afectan ?nica y eAclusi,amente al contenido central de la pgina. La cabecera, na,egaci<n principal y footer se definiran directamente en el t"eme. -or eBemplo, podemos tener plantillas de ) columnas al .9O, ( columnas al ((O, $ fila al $99O y ) columnas al .9O, etc. 3$%$3 (ortlet Los -ortlets son el componente principal de programaci<n de Liferay. =uncionan 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 nati,o del portal. -or eBemplo, podemos tener un portlet de /genda, otro de Dlog, otro de FSS, etc. Liferay dispone de numerosos -ortlet nati,os pero nosotros podemos crear tantos como queramos para dar soluci<n a todas nuestras necesidades o modificar los que ya nos ofrece Liferay mediante ;oo#s 3$%$4 *oo+ / diferencia de los portlets, este tipo de plugin permite modificar el c<digo nati,o del portal. Se utili@an, sobretodo, para modificar el c<digo de alg?n portlet nati,o del portal, definir ,ariables de idioma o modificar alguna funcionalidad del portal. EAisten * tipos de "oo#s principalesC ,ustom -S(s. -ermiten modificar el c<digo de uno o ,arios portlets mediante la modificaci<n de sus 6S-s. (ortal 'ro'erties. -ermiten modificar las propiedades del portal o definir nue,as propiedades. # isita !!!.c"e#is.es

Gua bsica de Liferay

Ser0ices. -ermiten modificar los ser,icios del portal directamente o a>adir nue,os. )anguage 'ro'erties. -ermiten declarar nue,as ,ariables de idiomas para facilitar la internacionali@aci<n del portal. Estas ,ariables luego ser usadas en diferentes puntos del portal como, por eBemplo, para traducir alg?n teAto de un +ema de /pariencia o de un -ortlet.

3.2 'ns(a!a un servidor $pac)e $n(

Lo primero que debemos "acer es eAplicar para que instalamos este ser,idor. Gracias a este ser,idor /pac"e /nt podremos reali@ar las compilaciones necesarias para generar los diferentes paquetes P/F que desplegaremos en nuestro portal Liferay. Lo primero ser descargar el ser,idor de la siguiente direcci<n "ttpCIIant.apac"e.orgIbindo!nload.cg -ara instalar el /pac"e /nt no tenemos nada ms que descomprimir el arc"i,o en la carpeta que nosotros queramos. / continuaci<n debemos de a>adir a las ,ariables de entorno las "erramientas /nt para que podamos eBecutar los comandos necesarios, para elloC amos a -anel de ControlJQSistema y SeguridadJQConfiguraci<n a,an@ada del sistema JQ0pciones a,an@adasJQ ariables de entornoMES+/M0S EG P2G70PS 3N /"ora debemos de incluir la ruta de la carpeta bin de nuestro /pac"e /nt, en nuestro caso sera 7CKapac"eJantJ$.4.)KbinK Duscamos la ,ariable -at" en ariables del Sistema y la editamos. /l final del todo a>adimos la ruta de ,uestro /pac"e /nt quedando de la siguiente formaC

/"ora creamos la ,ariable /G+R;0ME y le a>adimos la ruta 7CKapac"eJantJ$.4.)K

/ isita !!!.c"e#is.es

Gua bsica de Liferay

-ara probar que todo funciona abrimos la consola cmdM2nicio y eBecutamos CM7N y escribimos ant J,ersion y deberamos de obtener respuesta.M/cordaros que debemos tener instaladas las 678 de Ba,aN.

3.3 'ns(a!a *ava *+,

-ara instalar las 6a,a 678 debemos descargarnos el paquete desde "ttpCII!!!.oracle.comItec"net!or#IesIBa,aIBa,aseIdo!nloadsIindeA."tml Hna ,e@ descargadas las instalamos y seguimos los pasos que nos ,a mostrando uno por unoMno "ay prdidaN. Hna ,e@ instalado todo debemos de a>adirlas a las ,ariables de entorno de nuestra mquina. amos a -anel de ControlJQSistema y SeguridadJQConfiguraci<n a,an@ada del sistema JQ0pciones a,an@adasJQ ariables de entornoMES+/M0S EG P2G70PS 3N /"ora debemos de incluir la ruta de la carpeta bin de nuestro 6a,a 678, en nuestro caso sera CCK-rogram =ilesK6a,aKBd#$.3.9R$(Kbin Duscamos la ,ariable -at" en ariables del Sistema y la editamos. /l final del todo a>adimos la ruta de ,uestras 6a,a 678 quedando de la siguiente formaC

%1 isita !!!.c"e#is.es

Gua bsica de Liferay

3.4 'ns(a!a e! '+- Liferay en -c!ipse

Liferay nos proporciona una serie de "erramientas para facilitarnos la labor de desarrollo de sus componentesMportlets, "oo#s, t"emes, layoutsN. Gosotros ,amos a ,er c<mo podemos instalar el plugin de Liferay par eclipse paso a paso y como configurarlo adecuadamente para que todo funcione correctamente. /ntes de nada debemos tener instalado en nuestro ordenador el ser,idor de LiferayMen nuestro caso Liferay :.$N y sus plugins correspondientes. Hna ,e@ tengamos todo el ser,idor de Liferay listo empe@aremos con la instalaci<n del plugin de desarrollo. El plugin lo podis encontrar en la siguiente direcci<n de Liferay "ttpCII!!!.liferay.comIdo!nloadsIliferayJproBectsIliferayJide . 0s recomiendo baBar tanto el eclipse como el plugin todo Bunto. En nuestro caso ,amos a instalarnos el eclipse de cero. Como estamos en Pindo!s ,amos a baBarnos el LEclipse 6uno E Liferay 27E ,$.:.$ MPindo!s :*bitsNL que es el que corresponde para Pindo!s 3 A:*. +enis disponibles para LinuA y Mac tambin.

-ara instalar el eclipse que nos "emos baBado s<lo tenemos que descomprimir el fic"ero donde nosotros queramos y una ,e@ descomprimido eBecutamos el fic"ero Leclipse.eAeL . Hna ,e@ dentro de eclipse debemos de mostrar la ,ista de Liferay. -ara ello, arriba a la derec"a se sit?a un cuadrado en forma de tabla que nos abre las perspecti,as. +an solo debemos clicar sobre la de Liferay y en caso de que no est ,isible elegimos 0t"erJ QLiferay.

%% isita !!!.c"e#is.es

Gua bsica de Liferay

Hna ,e@ "ec"o esto, ya estamos preparados para empe@ar a configurar el eclipse con nuestro ser,idor Liferay. /"ora debemos se situarnos en la pesta>a de Ser,erMabaBo a la i@quierdaN. Clic derec"o JQ Ge! JQ Ser,er.

%2 isita !!!.c"e#is.es

Gua bsica de Liferay

En la siguiente ,entana elegimos Liferay 2nc JQ Liferay ,:.$ CE Ser,er.

/"ora debemos de seleccionar la ruta donde est el +omcat de nuestro ser,idor Liferay. En nuestro caso L7CKLiferay :.$ G/)KbundlesKtomcatJ3.9.)3L. El resto lo deBamos por defecto y le damos a L=inis"L.

%3 isita !!!.c"e#is.es

Gua bsica de Liferay

Lo siguiente es instalar el S78 plugins de Liferay. -ara ello ,amos al men? superior y le damos a Pindo!JQ-referencesJQLiferayJQ2nstalled -lugin S78sJQ/dd.

%4 isita !!!.c"e#is.es

Gua bsica de Liferay

/"ora debemos seleccionar la ruta donde tenemos el S78 de Liferay, en nuestro caso L7CKLiferay :.$ G/)KpluginsL. Le damos a 08 y ,emos como se a>ade una nue,a entrada en preferences con el plugin que acabamos de a>adir.

% isita !!!.c"e#is.es

Gua bsica de Liferay

Hna ,e@ "ec"o todo esto ya tenemos nuestro entorno de desarrollo en Eclipse listo para empe@ar a crear nuestros propios componentes Liferay. -odemos controlar el ser,idor desde la ,entana de Ser,ers, compilar y desplegar componentes, etc. -ara comprobar que todo ,a bien ,amos a la pesta>a de ser,ers y le damos al bot<n ,erde en forma de LplayL. Hna ,e@ lan@ado el ser,idorMtarda unos minutosN comprobamos que se lan@a correctamente entrando en "ttpCIIlocal"ostC4949 /s, de esta forma, "emos instalado el plugin de Liferay para Eclipse de una forma muy fcil y sencilla y "emos deBado todo preparado para empe@ar a desarrollar componentes.

3.# .rea (u pri/er p!u"in

Hna ,e@ tengamos instaladas tanto las 6a,a 678 y el ser,idor /pac"e /nt ya podremos empe@ar a crear plugins nue,os. -ara "acerlo es tan fcil como abrir una consola CM7 M2nicio JQ cmdN. Hna ,e@ abierta nos despla@amos "asta la ruta de nuestro ser,idor Liferay y una ,e@ en l accedemos a la carpeta SpluginsT. En nuestra eAplicaci<n ,amos a crear un t"eme pero el proceso es el mismo para cualquier tipo de plugin. Como ,amos a crear un t"eme nos despla@amos a la carpeta SpluginsIt"emesT con la consola CM7 y una ,e@ en esa carpeta eBecutamos el siguiente comandoC %! isita !!!.c"e#is.es

Gua bsica de Liferay

create new Este es mi primer tema de apariencia

7onde Sne!T es el nombre del plugin y SEste es mi primer tema de aparienciaT es la descripci<n del plugin. +ras eBecutar el comando anterior automticamente creara un plugin de tema de apariencia con el nombre ne!Jt"emeMya que estbamos en pluginsIt"emes N. 7e esta forma tan fcil y encilla podremos crear plugins. En las siguientes secciones podris ,er como se crea cada uno de los plugins detallando a fondo cada uno de ellos.

3.0 .rea (u pri/er T)e/e

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 lle,a en su interior * carpetas bsicasC css, templates, images y Ba,ascript.

En la carpeta de css podris encontrar todos los css que se aplican desde nuestro tema al portal. / pesar de que incluye muc"os fic"eros .css os recomiendo que todo cambio css que debis "acer lo realicis sobre custom.css ya que es el ?ltimo css que se incluye a tra,s de main.css, el cual se encarga de incluir todos los fic"eros .css. Luego tenemos la carpeta de templates, y dentro de ella unos cuantos arc"i,os .,m .En ella podemos encontrar el arc"i,o portalJnormal.,m. Este es el arc"i,o que le da forma a nuestra !eb. Se encarga de crear tanto el "ead como el body y sobre ellos cargar todo lo necesario para crearla Mcabecera, pie, na,igation, bloques definidos por nosotros, etcN. El resto de arc"i,os .,m de esta carpeta no son ms que peque>os bloques que meBoran la organi@aci<n y modularidad de la pgina cuyo fin ?ltimo es el de ser cargados desde portalJnormal.,m en la pgina. La tercera carpeta que tenemos es la de images y no creo que necesite eAplicaci<n. Contiene todas las imgenes que se utili@an en los css. %" isita !!!.c"e#is.es

Gua bsica de Liferay

1 por ?ltimo tenemos la carpeta de Ba,ascript que, como su propio nombre indica, tendr todos los arc"i,os Ba,ascript que utilicemos en nuestro tema. Si a>adimos nue,os arc"i,os .6S a esta carpeta deberamos de incluirlos en el "ead declarado en portalJnormal.,m para que se puedan incluir en el tema. amos a pasar a"ora a eAplicar c<mo debemos de crear los temas de apariencia. -ara crear un tema de apariencia abriremos una consola cmd y nos despla@aremos a la carpeta t"emes dentro de los plugins. En nuestro caso 7CKLiferay :.$ G/)KpluginsKt"emes Hna ,e@ en la carpeta t"emes eBecutamos el siguiente comando.
create new "Esto es mi primer tema"

7onde Lne!L es el nombre del tema y LEsto es mi primer temaL es la descripci<n del tema que ,eremos a la "ora de elegir el tema a aplicar en la administraci<n de pginas.

/"ora ya tenemos creado el tema pero est ,aco, por tanto, el siguiente paso ser copiar las carpetas de un tema por defecto que trae Liferay y, a partir de l, nosotros lo personali@aremos a nuestra manera. -ara ello ,"emos elegido el tema classic que est en 7CKLiferay :.$ G/)KbundlesKtomcatJ3.9.)3K!ebappsKF00+K"tmlKt"emesKclassic .Copiaremos las carpetas css, templates, images y Ba,ascript y las pegaremos en la carpeta Rdiffs dentro de nuestro nue,o tema creado. /"ora ya estamos preparados para empe@ar a personali@ar nuestro tema a nuestro gusto pero eso ya ser trabaBo de cada uno. Cuando queramos aplicar los cambios del tema en nuestro portal deberemos "acer lo siguienteC nos despla@aremos como antes, mediante la consola a la ubicaci<n 7CKLiferay :.$ G/)KpluginsKt"emes y eBecutaremos el siguiente comandoC
ant deploy

%# isita !!!.c"e#is.es

Gua bsica de Liferay

Con esto, tendremos ya compilado el tema y listo para usarse en el portal. -ara aplicarlo, como ya se eAplic< antes ,amos a nuestro portal y nos logueamos. Hna ,e@ logueados ,amos al doc#bar y le damos a L/dministrarL JQ -gina JQ /pariencia JQ 7efina un estilo especfico para esta pgina .En este punto ,eremos todos los temas que tenemos disponibles, incluido el que acabamos de compilar recientemente y con darle un simple clic# aplicaremos el tema, as de sencillo. Siempre y cuando estemos trabaBando de manera local. En caso de tener que trabaBar con una mquina remota, deberemos subir el tema a ella una ,e@ compilado y para ello "aremos lo siguienteC ,amos al -anel de controlJQ 2nstalaci<n de pluginsJQ+emas de aparienciaJQ2nstalar ms temas de aparienciaJQSubir y aqu elegimos el !ar correspondiente a nuestro tema. Estos P/F estn en la carpeta 7CKLiferay :.$ G/)KpluginsKdist MG0+/C acordaros de "acer el ant deploy al tema antes de subirloN 1 con esto ya tendramos nuestro tema subido y listo para usarse.

3.1 .rea (u pri/er Layou(

Las plantillas son el elemento que le da forma al contenido central de cada pgina de nuestro portal. -or lo general tendremos numerosas plantillas por cada portal ya que se suelen distribuir de forma diferente en funci<n de cada pginaM) columnas iguales, ( columnas, ) columnas con una ms anc"a que otra, etcN. Las plantillas de Liferay tienen una peculiaridad y es que son ellas las que definen la propiedad de dragUdrop de los portlets sobre ellas. -ara ello, siempre que creemos una nue,a plantilla debemos de acordarnos de a>adir la classVLlfrJcolumnL a cada columna que es la que permite el dragUdrop sobre ellas. -ara crear una nue,a plantilla es igual de simple que con los temas. /brimos una consola cmd y ,amos "asta 7CKLiferay :.$ G/)KpluginsKlayouttpl .Hna ,e@ aqu eBecutamos create miplantilla LMi plantillaL donde SmiplantillaT es el nombre de la plantilla y SMi plantillaT es la descripci<n de la misma que ,eremos desde Liferay a la "ora de aplicarla al portal.

%/ isita !!!.c"e#is.es

Gua bsica de Liferay

Llegados a este punto, ,amos a "acer 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. Gosotros "emos elegido 7CK Liferay :.$ G/)KbundlesKtomcatJ3.9.)3K!ebappsKF00+KlayouttplK)RcolumnRi. Copiamos el contenido de los ( arc"i,os correspondientes a esta plantillaC )RcolumnRi.png,)RcolumnRi.tpl y )RcolumnRi.!ap.tpl en los arc"i,os de la nue,a plantilla. S<lo copiamos el contenido de cada uno.

En )RcolumnRi.png tenemos el t"umb que mostrar Liferay en el panel de administraci<n de plantillas. La estructura de la plantilla estar en )RcolumnRi.tpl. / partir de esta plantilla bsica de Liferay que distribuye las columnas con un anc"o del .9O nosotros ,amos a con,ertirla en una de ) columnas pero con una distribuci<n del *9O :9O. -ara ello tan s<lo debemos de cambiar donde trae auiJ!.9 por auiJ!*9 y auiJ!:9 respecti,amenteMa la columna $ le ponemos el *9 y a la segunda el :9N. 7ependiendo de la ,ersi<n de Liferay que tengis este c<digo ,ariar un poco pero todo el proceso de creaci<n es igualMnosotros estamos usando Liferay :.$N. /"ora tan s<lo deberamos de compilar la plantilla con Sant deployT y tendramos ya la plantilla lista para usarse.

21 isita !!!.c"e#is.es

Gua bsica de Liferay

7el mismo modo que los temas, si trabaBamos en local nos aparecer la plantilla directamente en el 7oc#barJQ/dministrarJQ7isposici<n de la pgina pero si estamos trabaBando remotamente deberemos de subir el !ar al ser,idor y para ello ,amos al -anel de controlJQ2nstalaci<n de pluginsJQ-lugins de plantillas de pginaJQ2nstalar ms plantillaJQSubir y aqu elegimos el !ar de la plantilla que estar en 7CKliferayJportalJ :.9.:KpluginsKdist 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.2 .rea (u pri/er 3oo4

En el caso de los ;oo#s os recomendamos que utilicis el 27E de Liferay para crearlos y programarlos ya que es ms sencillo que crearlos desde cero desde la consola CM7. Lo primero que debemos "acer es descargar el SFC 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. -odemos descargarlo desde el siguiente enlace donde debemos seleccionar L-ortal SourceL. Lo ?ltimo ser importar el c<digo fuente a eclipse y estamos preparados para empe@ar. Hna ,e@ "ec"o todo esto ya estamos listos para empe@ar a desarrollar un "oo#. Como eBemplo a desarrollar ,amos a coger el portlet de blogs y modificar su c<digo mediante un "oo# para que muestre un teAto por eBemplo L=EC;/CL. -ara crear nuestro primer "oo# debemos ir al eclipse, Busto debaBo de searc" podemos ,er un icono cuadrado oscuro de LCreate a ne! Liferay -lugin -royectL.

2% isita !!!.c"e#is.es

Gua bsica de Liferay

Le damos y nos aparece una nue,a ,entana donde seleccionamos el nombre del proyectoMMi;oo#N y ms abaBo seleccionamos como tipo de plugin ;oo#.

22 isita !!!.c"e#is.es

Gua bsica de Liferay

-odemos obser,ar tambin en esta ,entana que podemos seleccionar tanto el plugin S78 a usar como el ser,idor, en nuestro caso, s<lo tendremos uno y no deberemos de modificar nada pero si tu,iramos ms de $ ser,idor nos apareceran a" todos los que tu,iramos.

Hna ,e@ "ec"o todo le damos a L=inis"L. 1a tenemos el "oo# creado pero est ,aco.

23 isita !!!.c"e#is.es

Gua bsica de Liferay

/"ora debemos ir al SFC de Liferay y buscar donde se encuentra el portlet a modificar, en nuestro caso el de blogs. Se encuentra en portalJQportalJ!ebJQdocrootJQ"tmlJQportletJQblogs. -ara "acer el "oo# debemos de copiar el arc"i,o a modificar del portlet, en este caso sera L,ie!RentryRcontent.BspL, y copiarlo en nuestro "oo# pero de la siguiente maneraC 7ebemos de reproducir toda la ruta del arc"i,o a modificar del portlet en nuestro "oo# desde la carpeta ;+ML a partir de IdocrootIPEDJ2G= del "oo#. En nuestro caso, el arc"i,o ,ie!RentryRcontent.Bsp del portlet blogs a modificar esta enC IportalJ!ebIdocrootI"tmlIportletIblogsI,ie!RentryRcontent.Bsp Guestro "oo# quedara de la siguiente forma estructuradoC Mi;oo#J "oo#IdocrootIPEDJ2G=I"tmlIportletIblogsI,ie!RentryRcontent.Bsp. En ,ie!RentryRcontent.Bsp es donde debemos de copiar el c<digo del fic"ero del portlet y es aqu donde modificaremos el c<digo para que el "oo# sobrescriba las funciones del portlet.

24 isita !!!.c"e#is.es

Gua bsica de Liferay

Hna ,e@ creada la estructura del "oo# ,amos a modificar el arc"i,o ,ie!RentryRcontent.Bs del "oo# para mostrar el mensaBe L=EC;/CL para que salga delante de la fec"a de publicaci<n de cada entrada del blog. En nuestro caso, deberamos de buscar el bloque que tiene por class LentryJdateL y a" dentro a>adir una lnea como la siguienteC Wdi,Q=EC;/CWIdi,Q

Como ,emos es muy simple de modificar lo que nosotros queramos. /cordaros siempre de "acerlo sobre la copia de la 6S- sobre el "oo#. -or ?ltimo debemos indicar la ruta a partir de la cual Liferay debe buscar los cambios de nuestro "oo#. Esto se debe "acer sobre el fic"ero liferayJ"oo#.Aml que se encuentra en IMi;oo#J"oo#IdocrootIPEDJ2G=IliferayJ"oo#.Aml /qu dentro debemos de a>adir entre las etiquetas lo siguienteC W"oo#QWcustomJBspJdirQIPEDJ2G=WIcustomJBspJdirQ

2 isita !!!.c"e#is.es

Gua bsica de Liferay

7e esta forma indicamos que la carpeta ;+ML cuelga de PEDJ2G=. Si quisiramos podramos cambiar la estructuraci<n de nuestro "oo# e indicarle aqu donde se "alla la carpeta ;+ML. -ara terminar, s<lo nos queda desplegar el "oo# yendo a la ,entana de /nt en el eclipse que se encuentra abaBo a la derec"a.

2! isita !!!.c"e#is.es

Gua bsica de Liferay

Seleccionamos nuestro "oo#, lo abrimos, buscamos LdeployL y clicamos sobre l.

2" isita !!!.c"e#is.es

Gua bsica de Liferay

Hna ,e@ termine de desplegar tendremos listo nuestro "oo#. +an solo debemos ir al na,egador y abrir LiferayM "ttpCIIlocal"ostC4949 N acordndonos de lan@arlo antes de abrirlo ,ob,iamente, y una ,e@ abierto a>adimos el portlet blogs a cualquier pgina. />adimos una entrada al blog y podremos ,er como se muestra el mensaBe L=EC;/CL Bunto a la fec"a de publicaci<n de cada entrada.

3.5 .rea (u pri/er or(!e(

/l igual que con los ;oo#s, os recomendamos que utilicis el 27E Liferay de Eclipse para crear los portlets ya que nos genera toda la estructura bsica con tan solo unos pocos clic#s. -ara crear nuestro primer -ortlet iremos al Eclipse y clicaremos sobre =ileJQGe!J QLiferay -royect

2# isita !!!.c"e#is.es

Gua bsica de Liferay

En la siguiente pantalla debemos elegir el nombre de nuestro plugin, el ser,idor sobre el que se crear y sus S78. -or ?ltimo debemos seleccionar el tipo de pluginMportletN.

Hna ,e@ rellenemos todos los campos le damos a SGeAtT en la siguiente pantalla debemos marca la casilla SCreate custom portlet classT.

2/ isita !!!.c"e#is.es

Gua bsica de Liferay

Continuamos a la siguiente pantalla y escribimos el nombre que queremos dar a la class CSS de nuestro portlet, en nuestro casoT Mi-rimer-ortletT.

En la siguiente pantalla ,amos a modificar la ruta de las 6S-s para que estn en I"tmlIBsps y adems, ,amos a marca la casilla Edit en -ortlets Modes para que cree esa ,ista. Ms adelante eAplicaremos para qu son cada ,ista del portlet y que representa cada una.

31 isita !!!.c"e#is.es

Gua bsica de Liferay

-or ?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 adems, a qu categora se a>ade. En nuestro caso, deBaremos desmarcada la opci<n de instancias m?ltiples pero marcaremos que se a>ada al panel de control, a la categora SSamplesT.

+ras marca estas casillas, le damos a GeAt y en la siguiente pantalla le daremos a S=inis"T y automticamente se crear el -ortlet. 7ebera de quedarnos una estructura parecida a la siguienteC

3% isita !!!.c"e#is.es

Gua bsica de Liferay

Lo ms importante en lo que debemos fiBarnos es en las 6S-s edit.Bsp y ,ie!.Bsp. ie!.Bsp corresponde a la ,ista p?blica del portlet, la que cualquier persona con los mnimos permisos puede ,er. Edit.Bsp corresponde a la ,ista de preferencias desde la que podremos configurar cualquier parmetro que creemos. -ara nuestro eBemplo de creaci<n de un -ortlet ,amos a modificar ,ie!.Bsp y desplegaremos el -ortlet para saber que todo "a ido bien. En ,ie!.Bsp ,amos a escribir lo siguienteC
<h1>Este es mi primer portlet</h1> <p>Hola mundo. </p>

Hna ,e@ "ec"o guardamos y, al igual que con los +"emes o Layouts, abrimos una consola CM7, nos despla@amos a la ruta del portlet y escribimos el comandoC
ant deploy

Con esto ya tendremos disponible para su uso el portlet por lo que solo nos quedar irnos al na,egador !eb, entrar en nuestro Liferay local, loguearnos y una ,e@ logueados ,amos al 7oc# JQ /dd JQ More

32 isita !!!.c"e#is.es

Gua bsica de Liferay

Duscamos dentro de la categora SSampleT nuestro portlet y lo tiramos en el portal.

7e esta forma podemos crear los portlets de una manera sencilla y en apenas unos minutos. 0tra cosa muy diferente ser programarlos para que "agan eAactamente lo que queramos.

4. $LL%&
En un apartado anterior definamos lo que era /LL01 y cules eran sus pros y , sobretodo, sus contras. En este apartado ,amos a resaltar cuales son las bondades de este frame!or# desarrollado para "acernos la ,ida dentro de Liferay muc"o ms fcil.

4.1 +ocu/en(aci6n
En "ttpCIIalloyui.comIdeployIapiI disponis de toda la informaci<n relacionada con este frame!or# aunque como ya decamos anteriormente no encontraris muc"os eBemplos completos.

33 isita !!!.c"e#is.es

Gua bsica de Liferay

En la siguiente direcci<n "ttpCII!!!.liferay.comIcommunityIliferayJ proBectsIalloyJuiIdemos podris encontrar todos los plugins, !idgets y utilidades adicionales de que dispone el frame!or#

4.2 !u"ins7 8id"e(s y u(i!idades

/LL01 dispone de una serie de !idgets, plugins y utilidades que nos "acen la ,ida ms fcil a la "ora de desarrollar ciertos aspectos de nuestros portales. -or eBemplo, de forma nati,a nos permite generar ,entanas emergente o S7ialogsT, tooltips, autocompletadores, etc. / continuaci<n ,amos a ,er todos los componentes de que dispone y para qu sir,e cada unoC 4.2.1 9id"e( 2utocom'lete. Crea una lista de opciones predefinidas que ira sugiriendo al usuario a medida que ,aya escribiendo en un campo de teAto. Button. -ermite crear botones que meBoran y generali@an el estilo de todo ellos. ,alendar. Crea un calendario que puede ser mostrado de diferentes formas. -or eBemplo al clicar sobre un campo de fec"a o estar siempre mostrado. ,harts. Muestra datos numricos representados mediante un grfico interacti,o. ,olor (ic+er. Genera un selector de color con el que puedes interactuar y posteriormente el selector produce el c<digo ;EX del color elegido. 3ialog. -ermite generar ,entanas modales y a su ,e@ estas pueden cargar lo que le indiquemosMportlets, contenido !eb, teAto plano, c<digo ;+ML, etcN. 4ditable. Crea un editor de contenido en lnea. 5mage Gallery. Crea una galera de imgenes, la cuales, al ser clicadas se muestran en un carrusel de imgenes a pantalla completa. (aginator. -ermite paginar cualquier conBunto de datos. (anel. Es un contenedor con funcionalidad especfica y componentes estructurales con aplicaciones orientadas a interfaces de usuario. 6atings. Crea un componente de puntuaci<n mediante estrellas. &abs. Muestra una serie de pesta>as las cuales se asocian con contenidos concretos. &e7tBo7 )istC Crea una lista de elementos seleccionados a partir de una caBa de teAto. &oolbar. Crea una barra de "erramientas. &oolti's. Muestra informaci<n de ayuda para imgenes, enlaces, ttulos, etc. &ree0ie8. Genera un rbol de contenidos estructurados.

34 isita !!!.c"e#is.es

Gua bsica de Liferay

4.2.2 !u"in )oading 9as+. Muestra una mscara de Loading que e,ita la interacci<n del usuario con el portal "asta que desaparece. 4.2.3 :(i!idades ,SS :orms. Es un frame!or# de CSS que nos permite maquetar los formularios de forma "omognea mediante una serie de class. ,SS )ayouts. Es un frame!or# CSS que permite dar anc"os a los columnas de las Layouts mediante la utili@aci<n de una serie de classMauiJ!(9, auiJ!3.,YN )i0e Search. -ermite filtrar el contenido por los datos introducidos en la b?squeda. ;ested )ist. Son listas que permiten ordenar sus elementos mediante un dragUdrop Marrastrar y soltarN. <0erlay 9anager. Crea una colecci<n de capas superpuestas que pueden ser maneBadas en grupo. 6esize. -ermite redimensionar prcticamente cualquier elementos de la pgina. Sortable. -ermite ordenar elementos mediante dragUdrop. S=: =riter >tility. Es una utilidad que nos permite renderi@ar arc"i,os SP=Mflas"N en una pgina. 4.2.4 -;e/p!o de uso amos a ,er un eBemplo ?til de uso como es la generaci<n de ,entana modales o 7ialogsC -ara generar un bocadillo nos ,aldremos de la librera LauiJdialogL de /LL01 que nos ofrece las funciones necesarias para generarlo todo. Las opciones de configuraci<n de la ,entana son numerosas pero nosotros ,amos a abordar unas cuantas en el eBemplo y eAplicar ms adelante para qu sir,e 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,

3 isita !!!.c"e#is.es

Gua bsica 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(); }); </script>

/ continuaci<n se muestra una tabla con todas las options utili@adas y su eAplicaci<nC

<'tion
body,ontent. centered. constrain20ie8. destroy<n,lose. draggable. height. resizable. title.

3escri'ci?n
Es el contenido del dialog. -uede contener tanto teAto plano, como c<digo, como portlets. Establece si queremos que el dialog salga centrado en la pantalla. Comprime el dialog para que solo se ,ea la regi<n ,isible del portlet. 7estruye el dialog cuando lo cerramos. En caso de no destruirlo, quedara creado en el c<digo pero oculto. /dmite ,alores true o false. Establece si queremos que podamos arrastrar el bocadillo o no. /dmite ,alores true o false. La altura del bocadillo. -ermite redimensionar el bocadillo creado mediante un peque>o icono que sale en una esquina. /dmite ,alores true o false. Establece el ttulo del bocadillo. Gecesita un string.

&i'o
string trueIfalse trueIfalse trueIfalse trueIfalse int trueIfalse string 3!

isita !!!.c"e#is.es

Gua bsica de Liferay

8idth. modal.

buttons.

close. css,lass. id.

El anc"o del bocata. Si se pone a true, "ace que al mostrar el dialog se muestre un o,erlay oscuro por detrs de l que des"abilita todo lo que "ay por detrs de l. /dmite ,alores true o false. -ermite a>adir botones al dialog estableciendo simplemente el titulo del bot<n y una acci<n a lle,ar a cabo tras clicarlo. -odemos ,er su modo de uso en el eBemplo. Muestra el icono de cerrar el bocadillo. /dmite ,alores true o false. />ade una clase al dialog. Gecesita un string. />ade un id al dialog. Gecesita un string.

int trueIfalse

trueIfalse string string

4.3 .rea (u propio p!u"in

/l igual que con otros frame!or#s como B&uery o 1H2(, /LL01 nos permite generar nuestros propios plugins para luego utili@arlos de una forma muy simple y rpida. Su creaci<n es muy similar a la de un plugin en 1H2 (. +odos los plugins deben seguir la misma estructura bsica y a partir de ella ampliar el c<digo para que "aga lo que nosotros queramos. La estructura bsica es la siguienteC
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" }, parametro2 : { value : "valor de parametro2 por defecto" }, parametro3 : { value : "valor de parametro3 por defecto" }

3" isita !!!.c"e#is.es

Gua bsica de Liferay

} }); }, "0.1", { requires : [ "base", "plugin", "node" ] });

Como ,eis, el uso del c<digo 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 c<digo personali@ado del plugin. Hna ,e@ creado el plugin podremos utili@arlo de la siguiente maneraC

A.use("node", "basic-plugin", function(A) { A.all("#elemento").plug(A.MyPlugins.PluginEjemplo, { parametro1 : 'valor1', parametro2 : 'valor2' }); });

7onde Z[elemento\ es le 27 del bloque al que afecta el plugin y sobre el que se construye.

3# isita !!!.c"e#is.es

Gua bsica de Liferay

3/ isita !!!.c"e#is.es