Tema en Liferay

1.
Entorno
Este tutorial est escrito usando el siguiente entorno:
Hardware: Porttil 2,4 Ghz Intel Core2 Duo P8600 Sistema Operativo: Windows 7 Profesional x64 SP1 Instalada la versin de Liferay Portal 6.0.6 (versin Integrada en Tomcat 6) Eclipse Indigo (Revisar tutorial de Alex para su instalacin) LiferayIDE Instalado y configurado en Eclipse (Revisar tutorial de Rubn) Versin de java SDK 6 instalada en el sistema Plugin de Eclipse de editor de Velocity Veloeclise (Opcional)
2. Introduccin
En este tutorial veremos la estructura de un tema en Liferay 6.
3. Crear nuevo proyecto Liferay

Despus de descargar e instalar el Liferay IDE, creamos un nuevo proyecto de Liferay siguiendo los siguientes pasos:
Una vez creado aadiremos nuestro servidor:
Y aadimos nuestro tema creado:
Ahora ya estamos preparados para trabajar con el tema.
4. Identificacin de componentes
Revisando el proyecto:
Identificamos las carpetas siguientes:

_diffs: Es el directorio donde trabajaremos normalmente para aadir nuestros diseos (css,js) o imagenes css: Es donde se ubicarn todos los estilos del tema images: Es donde se ubicarn todas las imagenes del tema js: Es donde se ubicarn los script javascript del tema templates: Es donde se ubicarn las plantillas velocity del tema WEB-INF/liferay-look-and-feel.xml: Es donde se define el identificador del tema en Liferay y la versin WEB-INF/liferay-plugin-package.properties: Es donde se definen las caracteristicas del paquete
5. Plantillas Velocity
Ahora revisamos para que vale cada plantilla comenzando por portal_normal.vm, ya que es la plantilla que define el esqueleto de nuestro portal:
Parseando el fichero de inicializacin de la plantilla: El cdigo #parse ($init) procesa la inicializacin del archivo $ {PORTAL_ROOT_HOME}/html/themes/_unstyled/templates/init.vm. Esta accin inicializa las variables y propiedades necesitadas por los temas y los portlets que usen este tema. CSS y JavaScript includes: El cdigo $theme.include($top_head_include) es el encargado de usar el css y js adecuados para el dispositivo cliente: $ {PORTAL_ROOT_HOME}/html/common/themes/top_head.jsp para navegadores normales o $ {PORTAL_ROOT_HOME}/wap/common/themes/top_head.jsp para navegadores moviles. La sentencia $theme.include($bottom_include) incluye el pie de pgina llamando a los componentes $ {PORTAL_ROOT_HOME}/html/common/themes/bottom.jsp o $ {PORTAL_ROOT_HOME}/wap/common/themes/bottom.jsp. Entre los tags </body> y </html> se suelen ejecutar los script js que puedan realizar operaciones despues de la carga de la pgina, como pueden ser Google analitics o similares. Barra de herramientas: El siguiente cdigo:
1 #if($is_signed_in) 2 #dockbar()
3 #end
Muestra la barra de herramientas en funcin de nuestro perfil de usuario:
Cabecera: El siguiente cdigo:

01 <header id="banner" role="banner"> 02 <hgroup id="heading">
03 04 <h1 class="company-title"> <a class="logo" href="$company_url" title="#language("go-to") $company_name"> <span>$company_name</span> </a> </h1>
05 06
07 08
09 10 <h2 class="community-title"> <a href="$community_default_url" title="#language("go-to") $community_name">
11 12 </a>
<span>$community_name</span>
13 14 </h2> <h3 class="page-title"> <span>$the_title</span> </h3> </hgroup> ...
15 16
17 18
19 </header>
Muestra la parte relacionada con la compaia o la comunidad del portal en el que estamos navegando. Mens: El siguiente cdigo:
1 <header id="banner" role="banner"> 2 ...
3 #if ($has_navigation) #parse ("$full_templates_path/navigation.vm") #end 4 5
6 </header>
Muestra el men contextual:
basado en la plantilla:
Rastro de Migas: El cdigo siguiente muestra el restro de migas:

1 <nav class="site-breadcrumbs" id="breadcrumbs"> 2 <h1> <span>#language("breadcrumbs")</span> </h1> #breadcrumbs()
3 4
6 </nav>
Portlet: el siguiente codigo muestra el contenido de los portlet, y su marco:

1 #if ($selectable)
$theme.include($content_include)
3 #else
$portletDisplay.recycle()
$portletDisplay.setTitle($the_title) $theme.wrapPortlet("portlet.vm", $content_include)
6 7 #end
Pie de pgina: El siguiente cdigo muestra el pie de pgina

1 <footer id="footer" role="contentinfo"> 2 <p class="powered-by"> #language("powered-by") <a href="http://www.autentia.com" rel="external">Autentia</a> </p>
3 4
5 </footer>
La plantilla portal_pop_up.vm muestra los popups de liferay:
La plantilla portlet.vm muestra el contenido de un portlet y su marco, para cada una de las vistas del portlet (VIEW, EDIT, HELP):
6. Customizando el JavaScript y CSS

Es recomendable no sobrescribir los archivos que vienen por defecto, sino usar el directorio "/docroot/_diffs" y replicar los subdirectorios "css" y "js" aadiendo nuestros estilos y/o script.
7. Empaquetado
El IDE de eclipse nos realiza la tarea de deploy directamente en el servidor Tomcat, pero si queremos llevarlo a otro servidor, tan solo deberemos comprimir el contenido del directorio "docroot" en un archivo WAR y podriamos desplegarlo en otro servidor.

Tema en Liferay

Cargado por

Copyright:

Formatos disponibles

Tema en Liferay

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tema en Liferay

Cargado por

Copyright:

Formatos disponibles

1.

3. Crear nuevo proyecto Liferay

Una vez creado aadiremos nuestro servidor:

Y aadimos nuestro tema creado:

Ahora ya estamos preparados para trabajar con el tema.

Identificamos las carpetas siguientes:

Muestra la barra de herramientas en funcin de nuestro perfil de usuario:

Cabecera: El siguiente cdigo:

09 10 <h2 class="community-title"> <a href="$community_default_url" title="#language("go-to") $community_name">

13 14 </h2> <h3 class="page-title"> <span>$the_title</span> </h3> </hgroup> ...

3 #if ($has_navigation) #parse ("$full_templates_path/navigation.vm") #end 4 5

Muestra el men contextual:

Rastro de Migas: El cdigo siguiente muestra el restro de migas:

Portlet: el siguiente codigo muestra el contenido de los portlet, y su marco:

$portletDisplay.setTitle($the_title) $theme.wrapPortlet("portlet.vm", $content_include)

Pie de pgina: El siguiente cdigo muestra el pie de pgina

La plantilla portal_pop_up.vm muestra los popups de liferay:

6. Customizando el JavaScript y CSS

También podría gustarte

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.