Liferay themestraining lr6.2-es_v1.0

Liferay Themes
Training
(2014)
Basado en las versiones
Liferay 6.2 CE/EE

Temario
• Introducción a Liferay.
• Introducción a Temas de
Apariencia (Liferay Themes).
• Instalando y configurando Liferay's
Plugins SDK.
• Interfaz de usuario de Liferay.
• Introducción a Plugins.
Día 1
Introducción

Temario
• Templates Principales y Estructura
de Carpetas.
• Extendiendo Liferay Themes
adecuadamente.
• Construyendo un Theme en Liferay.
• Creando un Theme desde cero.
Día 2
Anatomía de
un Theme

Temario
• Modificando la cabecera (Header).
• Personalizando el menú de
Navegación principal.
• Aplicando estilos a las cajas de los
Portlets.
• Modificando el pie (Footer).
• Personalizando Hojas de Estilos.
Día 3
Desarrollo
de Themes

Temario
• Creando Esquemas de Color (Color
Schemes) adicionales.
• Layout Templates.
• Empaquetando los Themes para su
distribución.
Día 4
Desarrollo
de Themes
(2)

Temario
• Introducción a Velocity.
• Usando Velocity para Acceder a
Variables.
• Internacionalización de mensajes
(i18n) en el Theme.
• Embebiendo Portlets en el Theme.
• Embebiendo Portlets en el Layout
Template.
• Diseño para Contenidos Web y
Portlets.
Día 4
Themes
Avanzados

Temario
• Diseño Responsivo
(Mobile/Tablets/Escritorio).
• Cómo incluir jQuery y otras librerías
Javascript en los Themes.
• Resumen.
• Buenas Prácticas.
• Como optimizar el rendimiento.
• Uso de Maven para construir
Themes.
Día 5
Themes
Avanzados
(2)

Introducción
Introducción a Liferay
• Liferay Portal es uno de los frameworks de portales más
maduros y de mayor auge en el mercado a nivel mundial.
• Liferay Portal es de código abierto (Open Source) y
totalmente personalizable.
• Se basa en estándares J2EE. Portlets JSR 168/286
• Es un producto “server-agnóstico”, multiplataforma y
diseñado para integrarse dentro del entorno empresarial.

Introducción
• Incorpora un CMS muy completo, Versionado, Workflows,
etc.
• Set de Portlets. Wiki, Foros, Blogs, etc.
• Alta disponibilidad y tolerancia a fallos.
• Templates de Sitios Web.
• Escalabilidad.
• Y mucho más!

Introducción
• Plataforma Web
• Gadgets, Portlets, Páginas, Temas, elementos de navegación y Sitios Web.
• Sistema WCM
• Repositorio de Documentos, Contenidos Web, Workflows de aprobación, Versionado.
• Plataforma de Colaboración
• Colaboración de Equipos, Organización, Social.
• Plataforma de Integración
• Integración de diferentes herramientas de Empresa, Sitios, bajo una misma UI.
• Plataforma de Aplicaciones Sociales
• Herramientas Sociales integradas, Blogs, Foros, Wikis, Calendarios, Tareas, etc.

Introducción
Introducción a Temas de Apariencia (Liferay Themes)
• Liferay incluye el concepto de Temas (Themes) a partir de
la versión 3.5 para permitir a los usuarios cambiar el Look &
Feel de sus portales.
• Estos están formados por estructura de directorios
concreta.
• Los Themes permiten el concepto de herencia para
facilitar su reutilización y reducir el tiempo de desarrollo.
• Pueden contener plantillas, CSS, Imágenes, Javascript,
etc.
• Los Temas (Themes) son plugins de Liferay.

Introducción
Introducción a Temas de Apariencia (Liferay Themes)
• Pueden ser aplicados a Sitios Web y Páginas.
• Pueden dar estilos también a Portlets, Layout Templates y
Contenidos Web.
• Esquemas de Color (Color Schemes), son variantes de
color de un mismo Theme.
• Los Themes permiten configuraciones propias.
• Themes de base, _unstyled, _styled, classic,
control_panel, o cualquier theme propio!

Introducción
Instalando y configurando Liferay's Plugins SDK.
• Herramienta Plugins SDK.
• Apache Ant / Línea de comandos.
• Liferay Developer Studio (Desarrollo Liferay EE).
• Liferay IDE (Extensión de Eclipse).
• Descargas:
http://www.liferay.com/es/downloads/liferay-projects/liferay-ide

Introducción
Interfaz de usuario de Liferay
Portlets
Dockbar
Navigation Menu

Introducción
Introducción a Plugins
• La manera recomendada para extender Liferay, es
mediante la construcción de plugins.
• Los tipos de plugins pueden ser, Portlets, Themes, Layout
Templates, Hooks, Ext, Web.
• Las herramientas más habituales para construir estos
ficheros WAR es ANT (Plugins SDK) o Maven de Apache.
• Una vez construidos, éstos se empaquetan como ficheros
WAR para ser desplegados en Liferay.

Introducción
Introducción a Plugins
• El proceso de despliegue es el siguiente:
Plugins
(.war files)
Auto Deploy
Directory
Liferay Portal
+
Application Server
Auto Deploy Hot Deploy

Anatomía de un Theme
Templates Principales y Estructura de Carpetas.
• Un theme define los estilos de todos los portlets y
contenidos de una página, por tanto éste controla el modo
en que se ve.
• Desde el punto de vista del desarrollo, un theme se
compone de un conjunto de ficheros CSS, imágenes,
Javascript y plantillas de Velocity, JSP o Freemarker.
• Cada theme se compone a partir de una serie de carpetas
específicas.

Templates Principales y Estructura de Carpetas.
• Estructura de Carpetas de un Theme.
Carpeta para los ficheros CSS
Carpeta para las Imágenes
Carpeta para los ficheros Javascript
Carpeta para los Templates
Carpeta para los ficheros de
Configuración
Carpeta de Trabajo!

Extendiendo Liferay Themes adecuadamente.
• Habitualmente en los proyectos construiremos nuestro
tema a partir de un theme de base…
_unstyled
_styled
classic
control_panel
Custom
Theme
My new
Theme
Built-in Liferay Themes

Construyendo un Theme en Liferay.
• Para construir un theme en Liferay es necesario primero
diseñar el tema desde el punto de vista de Diseño Web.
• Para ello es preciso identificar aquellos elementos que
formarán parte de nuestro theme y cuáles no.
• Se deben definir convenciones de nombres para dar
estilos a portlets y componentes creados por el equipo de
desarrollo.
• La maquetación inicial puede existir o no, dependiendo
del nivel de experiencia del diseñador/maquetador a la hora
de construir el theme.

• Partes principales de un theme…
Header
Body
Footer

• Partes principales de un theme…
Layout Template

Creando un Theme desde cero.
• Paso 1. Crear un theme base utilizando una de las
siguientes herramientas:
• Liferay IDE
• Liferay Developer Studio (EE - Enterprise Edition)
• Plugins SDK - Línea de comandos.
• Paso 2. Crear las siguientes carpetas:
• [my-theme]/docroot/_diffs/css/
• [my-theme]/docroot/_diffs/images/
• [my-theme]/docroot/_diffs/templates/

• Paso 3. Crear el fichero [my-
theme]/docroot/_diffs/css/custom.css
• Paso 4. Crear/Copiar el fichero [my-
theme]/docroot/_diffs/templates/portal_normal.vm
• Paso 5. Desplegar el Theme y comprobar que funciona
correctamente antes de continuar.
• Paso 6. Agregar las imágenes favicon.ico,
screenshot.png y thumbnail.png en la carpeta /images.
• Paso 7. Realizar las modificaciones necesarias para llegar
al theme deseado a nivel HTML, CSS, imágenes, scripts…

• Plantillas importantes a tener en cuenta:
• /templates/init_custom.vm
• Utilizado para inicializar variables, servicios, etc, que
serán utilizados en el theme.
• /templates/navigation.vm
• Define el menú horizontal principal de navegación del
Site.
• /templates/portal_normal.vm
• Plantilla principal del Sitio.

• /templates/portal_pop_up.vm
• Plantilla principal del Sitio utilizada en el modo popup.
• /templates/portlet.vm
• Plantilla utilizada para las cajas de los Portlets.
• /css/custom.css
• Fichero CSS principal desde el cual se construirá la
estructura necesaria para dar estilos al portal.
• CSS importante a tener en cuenta:

• /js/main.js
• Fichero JS principal donde se inyectan algunos
comportamientos de elementos como el navigation o
breadcrumb. También podemos agregar aquí Javasctipt
personalizado.
• Javascipt importante a tener en cuenta:

• Tecnologías utilizadas por Liferay para UI.
• AlloyUI
• Es un Framework Javascript de desarrollo de UI
construido sobre la librería YUI3 de Yahoo. AlloyUI utiliza
también el Framework Javascript creado por Twitter
Bootstrap (HTML/CSS), para simplificar el desarrollo de
UI en aplicaciones Web.
• http://alloyui.com/
• http://getbootstrap.com/

• HTML5
• AlloyUI se basa en la estructura de HTML5. Esta
estructura sólo se basa en un único <!doctype>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>Body of the document</body>
</html>

• HTML5
• Introduce nuevos elementos con sentido semántico
como <nav>, <footer> en lugar de <div>,<span>, y
otros nuevos elementos multimedia como <audio> y
<video>.
• Ha sido diseñado para cumplir con las exigencias de los
Sitios Web modernos de una manera estandarizada.
• http://www.w3.org/community/webed/wiki/HTML

• Style – CSS3
• La última versión del estándar de CSS, es compatible
con sus predecesores, e introduce nuevos módulo de
mejoras como: Selectores, Backgrounds y Borders, Text
Effects, Animations, Multiple Column Layout, etc…
div {
border:2px solid;
border-radius:25px;
}
• http://www.w3.org/community/webed/wiki/CSS

• Ficheros de configuración /docroot/WEB-INF/
• liferay-look-and-feel.xml – Define el id/nombre/versión
del theme, su configuración y esquemas de color.
<theme id=”tiger” name=”Tiger”>
<settings>
<setting key="portlet-setup-show-borders-default"
value="false"/>
</settings>
</theme>

• Ficheros de configuración /docroot/WEB-INF/
• liferay-plugin-package.properties – Define información
del plugin, versiones soportadas, licencia, autor, etc.
name=Training1
module-group-id=liferay
module-incremental-version=1
page-url=http://www.liferay.com
…
author=Liferay, Inc.
licenses=LGPL
liferay-versions=6.2.0+
resources-importer-developer-mode-enabled=true

Desarrollo de Themes
Modificando la cabecera (Header).
• Analizando el fichero portal_normal.vm
Body
Wrapper
Header
Content
Footer
$site_name
$theme.include($content_include)
#dockbar()
#language ("powered-by")
Macros
Variables
Util Objects
Macro Languages

Modificando la cabecera (Header).
• Modificando la cabecera (Header).
<header id="banner" role="banner”>
...
</header>
• Los cambios realizados dentro del “header” serán
reflejados en la cabecera el theme.
• Mantener los ids, classes y roles principales, es
fundamental para no perder funcionalidad.

Personalizando el menú de Navegación principal.
• Copiar/Editar el fichero [my-
theme]/docroot/_diffs/templates/navigation.vm
• Cada ítem $nav_item, corresponde a cada una de las
opciones de menú de navegación principal.
#foreach ($nav_item in $nav_items)
...
#end
• A través de $nav_item, se puede acceder a los diferentes
atributos y configuraciones de cada página, ejemplo:
$nav_item.icon(), $nav_item.getName(), $nav_item.getURL().

Personalizando el menú de Navegación principal.
• A través de $nav_item.hasChildren(), se accede a las
páginas hijas del ítem en cuestión.
• Cada ítem $nav_child, es igual a un $nav_item, es decir,
posee sus mismos atributos, configuraciones, etc.
#foreach ($nav_child in $nav_item.getChildren())
...
#end
• A través de $nav_child, se puede acceder a los
diferentes atributos y configuraciones de cada página,
ejemplo: $nav_child.getName(), $nav_child.getURL().

Aplicando estilos a las cajas de los Portlets.
• Copiar/Editar el fichero [my-
theme]/docroot/_diffs/templates/portlet.vm
• Básicamente en este fichero se puede modificar las cajas
de los portlets. Esta se estructura en cabecera, y cuerpo del
portlet.
$portlet_title
$theme.portletIconOptions()
$portlet_display.writeContent($writer)
• Hay que tener en cuenta a la hora de hacer cambios, que
este fichero afecta a todos los portlets.

Modificando el pie (Footer).
• Modificando el pie (Footer).
<footer id="footer" role="contentinfo">
...
</footer>
• Los cambios realizados dentro del “footer” serán
reflejados en el pie del theme.
• Para contenidos del pie más complejos como menús, etc,
se puede extraer el Footer a un fichero independiente.

Personalizando Hojas de Estilos.
• Como hemos visto el custom.css es el fichero donde, a
partir del él, comenzaremos la personalización de las hojas
de estilos. Este es el último fichero CSS incluido en la
herencia de themes, con el fin de permitir “sobrescribir”
cualquier estilo que se necesite cambiar.
@import url(base.css);
@import url(application.css);
@import url(layout.css);
@import url(dockbar.css);
@import url(navigation.css);
@import url(portlet.css);
@import url(extras.css);
@import url(custom.css);
main.css

• La técnica más utilizada para realizar un theme, es utilizar
la característica de herencia, y aplicar pequeños cambios
hasta llevar el Diseño Web a cumplir los requisitos
deseados.
• Liferay 6.2 viene integrado con Compass, el cual es un
Open Source CSS Authoring Framework, que utiliza el
lenguaje Sass para permitir la creación de potentes hojas
de estilos. El concepto base es el pre-procesamiento de los
ficheros CSS.

• Si abrimos por ejemplo el fichero [my-
theme]/docroot/css/base.css, veremos que la primera línea
es:
• @import "compass”;
• Esta directiva proporciona el acceso al uso de Compass y
sus características ya integradas en los Themes de Liferay.

• Un mixin es una función CSS que puede tener o no
parámetros, y da como salida una definición de estilos. Un
mixin se declara utilizando el comando @mixin y es
llamado utilizando el comando @include.
@mixin custom-field-focus {
background: #CECE none;
border-color: #FF0;
}
input, textarea {
&.focus {
@include custom-field-focus;
}
}

• En el ejemplo anterior se define una función llamada
custom-field-focus que se aplica cada vez que se le
asigna a un elemento input o textarea el class focus,
cambiando su color de borde y background.
• Compass utiliza el lenguaje SASS, y este último tiene dos
sintaxis diferentes, Scss (extensión .scss) y Sass (extensión
.sass). La sintaxis más comúnmente utilizada es Scss ya
que Sass se basa en indentaciones de las líneas en lugar
de llaves {}, siendo más antigua y menos utilizada.
• http://compass-style.org/
• http://sass-lang.com/

• Utilizando imágenes desde CSS
• Para referenciar imágenes desde el CSS, la mejor manera
es hacerlo con un path relativo utilizando “../images”, por
ejemplo:
.box img {
background-image: url(../images/box_bg.png);
}

• Utilizando imágenes desde Templates
• Para referenciar imágenes desde templates, la mejor
alternativa es utilizar el siguiente formato a través de la
variable de Velocity $images_folder:
<img src=”$images_folder/my_image.png” />

Desarrollo de Themes (2)
Themes Avanzados

Creando Esquemas de Color (Color Schemes) adicionales.
• Los esquemas de color (Color Schemes), se definen en el
fichero docroot/WEB-INF/liferay-look-and-feel.xml.
<theme id=”good-day" name=”Good Day">
<settings>
<setting key="my-setting" value="my-value" />
</settings>
<color-scheme id="01" name="Day">
<css-class>day</css-class>
<color-scheme-images-path>
${images-path}/color_schemes/${css-class}
</color-scheme-images-path>
</color-scheme>
<color-scheme id="02" name="Night">
<css-class>night</css-class>
</color-scheme>
</theme>

Creando Esquemas de Color (Color Schemes) adicionales.
• Crear las siguientes carpetas y ficheros:
• [my-theme]/docroot/_diffs/css/color_schemes/day.css
• [my-theme]/docroot/_diffs/css/color_schemes/night.css
• [my-theme]/docroot/_diffs/images/color_schemes/day
• [my-theme]/docroot/_diffs/images/color_schemes/night
Nota: Es posible especificar un screenshot.png y thumbnail.png para cada
esquema de color, colocando los ficheros en la carpeta de imágenes day/night.
• Agregar a [my-theme]/docroot/_diffs/css/custom.css
@import url(color_schemes/day.css);
@import url(color_schemes/night.css);

Configuraciones en Themes.
• Es posible tener configuraciones personalizadas en el
theme, éstas se definen en el fichero docroot/WEB-
INF/liferay-look-and-feel.xml.
<theme id=”my-design" name=”My Design">
<settings>
<setting key="my-setting" value="my-value" />
</settings>
</theme>
a
$theme.getSetting("my-setting")
• Utilización en el theme:

Layout Templates.
• Los Layout Templates son un tipo de plugin.
• Estos definen las diferentes columnas y filas utilizadas
para subdividir el Body donde se organizan los portlets.
Built-in Liferay’s
Layout Templates

Layout Templates.
• Al igual que los themes los layout templates también
tienen su propia estructura de carpetas y ficheros.
columns-1-4-1-layouttpl/
docroot/
META-INF/
WEB-INF/
liferay-layout-templates.xml
liferay-plugin-package.properties
columns_1_4_1.png
columns_1_4_1.tpl
columns_1_4_1.wap.tpl
build.xml

Layout Templates.
• Ficheros del Layout Template:
• [project-name].tpl: Genera el HTML de la estructura del
template.
• [project-name].wap.tpl: Variante del template para
dispositivos móviles. WAP (Wireless Application
Protocol).
• [project-name].png: Thumbnail representando la
disposición del layout template.

Layout Templates.
• Ficheros de configuración del Layout Template:
• liferay-layout-templates.xml: Especifica el id/nombre
del layout template, y la ubicación de sus ficheros TPL y
PNG.
• liferay-plugin-package.properties: Describe el
proyecto que contiene el plugin, al igual que en el resto
de plugins, esta información es utilizada por el proceso
de auto-despliegue en caliente de Liferay.

Layout Templates.
• Los layout templates se construyen a partir de DIVs.
<div class="columns-2" id="main-content" role="main">
<div class="portlet-layout row-fluid">
<div class="portlet-column portlet-column-first span6" id="column-1">
$processor.processColumn("column-1", "portlet-column-content
portlet-column-content-first")
</div>
<div class="portlet-column portlet-column-last span6" id="column-2">
$processor.processColumn("column-2", "portlet-column-content
portlet-column-content-last")
</div>
</div>
</div>

Layout Templates.
• En el <div> principal se deben aplicar una serie de
atributos requeridos por Liferay: class="columns-2” (con el
nombre del proyecto del Layout Template). También el id=“
main-content” y el role=“main” deben ser aplicados a
este <div> principal.
• Dentro del <div> principal, hay que crear <div>s para cada
fila del layout template. Se deben aplicar las clases portlet-
layout y row-fluid CSS a estos <div>s: <div
class="portlet-layout row-fluid">.

Layout Templates.
• A su vez dentro de cada fila <div>, se deben especificar
<div>s para una o más columnas. Cada <div> de columna
debe tener la clase portlet-column. Si una columna es la
primera, última, o simplemente una columna en la fila, se
debe especificar otra clase CSS: portlet-column-first,
portlet-column-last, o portlet-column-only.
• Los nuevos themes de Liferay 6.2, utilizan un fork de
Twitter Bootstrap llamado Alloy Bootstrap que afecta a
los layout templates. Los layout templates utilizan el sistema
de grid de 12 columnas: http://getbootstrap.com/css/#grid

Layout Templates.
• Para cada <div> de columna, se debe especificar una
clase CSS llamada span[width] donde width es el
numerador de porción respeto a los 12 bloques, que
representa el ancho de la columna.

Layout Templates.
• A continuación, para cada columna <div>, hay que
especificar un ID único. Ejemplo: id="column-1",
id="column-2", etc..
• Por último, dentro de cada columna <div>, la directiva de
Velocity que será responsable de agregar los portlets que
han sido configurados en cada columna:
$processor.processColumn("column-1", "portlet-column-
content portlet-column-content-first")

Empaquetando los Themes para su distribución.
• Los themes al igual que otros plugins se empaquetan y
distribuyen como ficheros .war
• El empaquetado se puede generar a partir del Plugins
SDK ya sea desde el IDE o desde la línea de comandos
utilizando ANT o MAVEN.
• - ant clean deploy.
• - mvn clean install.

Empaquetando los Themes para su distribución.
• Desde Liferay IDE ejecutar los targets clean y deploy:

Themes Avanzados
Introducción a Velocity.
• Apache Velocity es un motor de templates basado en
Java, que provee un lenguaje de templates para referenciar
objetos definidos en el código Java. Es un proyecto open
source dirigido por Apache Software Foundation.
• http://velocity.apache.org/
• Liferay utiliza este motor de templates para renderizar los
themes, layout templates, plantillas de contenidos, etc.
• Liferay define una serie de variables disponibles en los
templates para ser utilizados por los desarrolladores.

Themes Avanzados
Usando Velocity para Acceder a Variables.
• Algunas variables disponibles para Themes.
$theme_display
$portlet_display
$theme_timestamp
$theme_settings
$css_class
$layout
$page_group
$liferay_toggle_controls
$liferay_dockbar_pinned
$css_folder
$company_logo
$company_logo_height
$company_logo_width
$company_url
$user_id
$is_default_user
$user_first_name
$user_middle_name
$user_last_name
$user_name
Etc….
$images_folder
$javascript_folder
$templates_folder
$full_css_path
$full_templates_path
$css_main_file
$js_main_file
$company_id
$company_name
• Se pueden ver todas las variables disponibles en el
fichero
[APP_SERVER_PORTAL_DIR]/html/themes/_unstyled/temp
lates/init.vm

Themes Avanzados
Usando Velocity para Acceder a Variables.
• Variables disponibles para Layout Templates:

Themes Avanzados
Internacionalización de mensajes (i18n) en el Theme.
• Utilizamos mensajes internacionalizados para mostrar
texto en diferentes idiomas de manera dinámica.
• Estos textos se deben definir en ficheros de idioma
cargados en el contexto del portal.
• Utilizando la macro #language es posible acceder a las
claves (Keys) definidas en los ficheros de idioma.
• Generalmente se utilizan plugins de tipo Hook para incluir
nuevos mensajes en los diferentes idiomas.
• Por ejemplo: #language (”hello-world”)

Themes Avanzados
Embebiendo Portlets en el Theme.
• Es posible embeber portlets directamente en el theme de
manera programática ya sean instanciables o no-
instanciables.
• Colocando la siguiente línea en nuestro template,
estamos colocando el portlet de búsqueda no-instanciable
en el theme de manera programática:
• $theme.runtime("77”)

Themes Avanzados
Embebiendo Portlets en el Theme.
• Para colocar un portlet instanciable hay que especificar el
nombre de instancia completo. Este nombre de instancia se
puede obtener mirando el código fuente de la página por
ejemplo: INSTANCE_5anm6NtLp0kZ
• Con la siguiente línea se coloca una instancia concreta
del portlet Navigation
• $theme.runtime("71_INSTANCE_5anm6NtLp0kZ")

Themes Avanzados
Embebiendo Portlets en el Layout Template.
• Es posible embeber portlets directamente en el layout
template de manera programática ya sean instanciables o
no-instanciables, similar como para los themes.
<div class="columns_1_4_1" id="main-content" role="main">
<div class="portlet-layout row-fluid">
<div class="portlet-column portlet-column-only" id="column-1">
$processor.processPortlet(
"my-hello-world-portlet_WAR_myhelloworldportlet")
$processor.processColumn("column-1",
"portlet-column-content portlet-column-content-only")
</div>
</div>
.....
</div>

Themes Avanzados
Diseño para Contenidos Web y Portlets.
• Para dar diseño y estilos a Contenidos Web y Portlets
vamos a utilizar básicamente las mismas técnicas de CSS
explicadas hasta ahora.
• Para el caso de los contenidos Web, es posible dar estilos
en el propio contenido mediante el uso de la etiqueta
<style>, o bien mediante el propio Theme, destinando
estilos a este fin.
• Por lo general se utiliza un elemento <div> principal que
encierra, o bien el contenido Web, o bien el portlet.
• Para el caso de portlets, podemos dar estilos dentro del
propio portlet, en el theme, e incluso en la propia instancia
vía panel de administración (Look & Feel).

Themes Avanzados (2)
Diseño Responsivo (Mobile/Tablets/Escritorio).
• Liferay proporciona herramientas para realizar Diseños
Web Responsivos, tanto a nivel de Themes, como también
de Layout Templates o Contenidos Web. Incluso podemos
realizar multi-sites para diferentes dispositivos utilizando la
característica de Reglas de Familias de Dispositivos.
• AlloyUI permite la detección por Javascript del tamaño de
pantalla del dispositivo (Smartphones/Tables/Desktop), y la
utilización de esta información en los ficheros CSS de
nuestro Theme.
• Por ejemplo: iPad en landscape o Desktop cuya pantalla
es >= 960 pixeles de ancho.

• Un iPad en portrait cuya pantalla es <= 720 pixeles de
ancho.
• Para poder aplicar estilos de acuerdo al tipo de pantalla,
es necesario realizar una serie de pasos.
• Un teléfono móvil en portrait (480 px), o en landscape
(320 px).

• Paso 1. Incluir en el portal_normal.vm de nuestro theme,
el siguiente META.
…
<head>
<title>$the_title - $company_name</title>
<meta content="target-densitydpi=160dpi, width=device-width,
minimum-scale=1.0, maximum-scale=1.0" name="viewport" />
$theme.include($top_head_include)
</head>
…

• Paso 2. Agregar la siguiente invocación para habilitar los
aui-viewport. Esta llamada también se puede realizar desde
el fichero [my-theme]/docroot/_diffs/js/main.js
…
<script type="text/javascript">
AUI().use('aui-viewport');
</script>
$theme.include($body_bottom_include)
$theme.include($bottom_include)
</body>
</html>
…

• Paso 3. Agregar estilos personalizados para los diferentes
tipos de pantalla en el fichero [my-
theme]/docroot/_diffs/css/custom.css
.view-lt480 #navigation li {
display: block;
float: none;
}
.view-480 #navigation li {
display: block;
float: none;
}…

• Estos tipos de estilos se pueden aplicar para las el resto
de resoluciones de pantalla si se desea que sea
completamente responsivo:
• .view-gt320
• .view-320
• .view-lt320
• .view-gt480
• .view-480
• .view-lt480
• .view-gt720
• .view-720
• .view-lt720
• .view-gt960
• .view-960
• .view-lt960

• Con Liferay 6.2 y la inclusión de Alloy Bootstrap,
podemos utilizar en nuestros themes unas funciones (mixin)
ya disponibles llamadas respond-to, las cuales permiten de
una manera mucho más sencilla y elegante aplicar estilos a
diferentes tipos de dispositivos, como se muestra en el
siguiente ejemplo:
@include respond-to(phone) {
body { background: red; }
input { width: 100%; }
}

/* will only style phone displays smaller than 768px */
@include respond-to(phone) {
body { background: red; }
}
/* will only style phone and tablet displays smaller than 980px */
@include respond-to(phone, tablet) {
body { background: blue; }
}
/* will only style tablet and desktop displays greater than 768px */
@include respond-to(tablet, desktop) {
body { background: green; }
}

Cómo incluir jQuery y otras librerías Javascript en los Themes.
• Si quisiéramos incluir jQuery u otra librería Javascript a
nuestro theme, basta con colocar la librería en la carpeta js
de nuestro theme, por ejemplo: [my-
theme]/docroot/_diffs/js/jquery.js o custom-script.js, y
luego incluirlo en el template principal [my-
theme]/docroot/_diffs/templates/portal_normal.vm
...
<head>
#js("$javascript_folder/jquery.js")
#js("$javascript_folder/custom-script.js")
…

Resumen.
• Un Theme es un tipo de plugin que define como se verán
los Sitios Webs o páginas que lo utilicen.
• Es posible realizar diseños responsivos para soportar
diferentes tipos de tamaño de pantallas de dispositivos.
• Se empaquetan en ficheros WAR para su distribución e
instalación dentro de Liferay Portal.
• Los themes se componen básicamente de HTML, CSS,
Imágenes, Templates y Javascript y permiten tener
diferentes esquemas de color y configuraciones.
• Su construcción más adecuada es mediante la herencia
de otros themes de base, que permitan la reutilización, y
acorten los tiempos de desarrollo.

Buenas Prácticas.
• Definir junto a los programadores una serie de reglas de
nombres para los estilos, utilizando el concepto de <div>
contenedor con el id del portlet como clase principal de
cada vista.
• Evitar el uso de estilos fuera de las hojas de estilo (CSS).
• Crear a partir del custom.css una estructura de ficheros
importados. [liferay-css]_override.css, [id-portlet].css
con el objetivo de mejorar la organización de los estilos y su
mantenimiento.
• Si se parte de una maqueta HTML estática para construir
el theme, comprobar primero que ésta funciona en los
diferentes navegadores requeridos.

Como optimizar el rendimiento.
• Liferay utiliza opciones para desarrollo que por defecto
estarán activas desde el IDE a través del fichero portal-
developer.properties, y éstas son cargadas a través del
fichero portal-ide.properties. Estas propiedades
desactivan las compresiones y cacheo de CSS, JS, e
Imágenes.
Para un mayor rendimiento recordar activarlas en el entorno
de preproducción para asegurarse de que todo funciona
según lo esperado. theme.css.fast.load=true,
theme.images.fast.load=true, javascript.fast.load=true

Como optimizar el rendimiento.
• Se recomienda controlar el peso de las páginas para
evitar tiempos demasiado grandes de carga. Una buena
herramienta para visualizar estos tiempos desde el
navegador, es la extensión de Firefox Firebug.

Uso de Maven para construir Themes.
• Apache Maven es una herramienta muy completa para
gestión de despliegues, dependencias, documentación etc.
• Desde el lanzamiento de Liferay 6.2, la herramienta
Liferay IDE trae soporte para Maven!
• Desde línea de comandos se cuenta con una serie de
arquetipos que permiten crear la estructura de un theme, o
cualquier otro tipo de plugin con un simple comando.
mvn archetype:generate -DarchetypeArtifactId=liferay-theme-archetype -
DarchetypeGroupId=com.liferay.maven.archetypes -
DarchetypeVersion=6.2.0-ga1 -DartifactId=lrexperts-theme -
DgroupId=com.lrexperts.liferay -Dversion=1.0.0-SNAPSHOT

Liferay themestraining lr6.2-es_v1.0

Más contenido relacionado

La actualidad más candente (16)

Similar a Liferay themestraining lr6.2-es_v1.0 (20)

Último (20)

Liferay themestraining lr6.2-es_v1.0