Carlos León Villamayor

Consultor tecnológico de desarrollo de proyectos informáticos.

Ingeniero Técnico en Informática (cursando grado superior)

Ver todos los tutoriales del autor

Fecha de publicación del tutorial: 2011-08-05

Tutorial visitado 12.021 veces Descargar en PDF


Creando un tema en Liferay 6.0.6

0. Índice de contenidos.

1. Entorno

Este tutorial está escrito usando el siguiente entorno:

  • Hardware: Portátil 2,4 Ghz Intel Core2 Duo P8600
  • Sistema Operativo: Windows 7 Profesional x64 SP1
  • Instalada la versión de Liferay Portal 6.0.6 (versión Integrada en Tomcat 6)
  • Eclipse Indigo (Revisar tutorial de Alex para su instalación)
  • LiferayIDE Instalado y configurado en Eclipse (Revisar tutorial de Rubén)
  • Versión de java SDK 6 instalada en el sistema
  • Plugin de Eclipse de editor de Velocity Veloeclise (Opcional)

2. Introducción

En este tutorial veremos la estructura de un tema en Liferay 6.

3. Crear nuevo proyecto Liferay

Después de descargar e instalar el Liferay IDE, creamos un nuevo proyecto de Liferay siguiendo los siguientes pasos:

Menu proyecto

Proyecto

Una vez creado añadiremos nuestro servidor:

Menu servidor

Configuración Servidor

Y añadimos nuestro tema creado:

Añadir Recurso

Ahora ya estamos preparados para trabajar con el tema.

4. Identificación de componentes

Revisando el proyecto:

Menu servidor

Identificamos las carpetas siguientes:

  • _diffs: Es el directorio donde trabajaremos normalmente para añadir nuestros diseños (css,js) o imagenes
  • css: Es donde se ubicarán todos los estilos del tema
  • images: Es donde se ubicarán todas las imagenes del tema
  • js: Es donde se ubicarán los script javascript del tema
  • templates: Es donde se ubicarán las plantillas velocity del tema
  • WEB-INF/liferay-look-and-feel.xml: Es donde se define el identificador del tema en Liferay y la versión
  • 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:

portal_normal.vm
  • Parseando el fichero de inicialización de la plantilla: El código #parse ($init) procesa la inicialización del archivo ${PORTAL_ROOT_HOME}/html/themes/_unstyled/templates/init.vm. Esta acción inicializa las variables y propiedades necesitadas por los temas y los portlets que usen este tema.
  • CSS y JavaScript includes: El código $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 página 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 página, como pueden ser Google analitics o similares.
  • Barra de herramientas: El siguiente código:
    	  #if($is_signed_in) 
    		#dockbar()
    	  #end
    	
    Muestra la barra de herramientas en función de nuestro perfil de usuario:
    Barra de herramientas
  • Cabecera: El siguiente código:
    	<header id="banner" role="banner">
    		<hgroup id="heading">
    			<h1 class="company-title">
    				<a class="logo" href="$company_url" title="#language("go-to") $company_name">
    					<span>$company_name</span>
    				</a>
    			</h1>
    
    			<h2 class="community-title">
    				<a href="$community_default_url" title="#language("go-to") $community_name">
    					<span>$community_name</span>
    				</a>
    			</h2>
    			<h3 class="page-title">
    				<span>$the_title</span>
    			</h3>
    		</hgroup>
    		...
    	</header>
      
    Muestra la parte relacionada con la compañia o la comunidad del portal en el que estamos navegando.
  • Menús: El siguiente código:
    	<header id="banner" role="banner">
    	...
    		#if ($has_navigation)
    			#parse ("$full_templates_path/navigation.vm")
    		#end
    	</header>
    	
    Muestra el menú contextual:
    Menu
    basado en la plantilla:
    navigation.vm
  • Rastro de Migas: El código siguiente muestra el restro de migas:
    		<nav class="site-breadcrumbs" id="breadcrumbs">
    			<h1>
    				<span>#language("breadcrumbs")</span>
    			</h1>
    			#breadcrumbs()
    		</nav>
    	
    Rastro de migas
  • Portlet: el siguiente codigo muestra el contenido de los portlet, y su marco:
    		#if ($selectable)
    			$theme.include($content_include)
    		#else
    			$portletDisplay.recycle()
    			$portletDisplay.setTitle($the_title)
    			$theme.wrapPortlet("portlet.vm", $content_include)
    		#end
    	
  • Pie de página: El siguiente código muestra el pie de página
    	
    		<footer id="footer" role="contentinfo">
    			<p class="powered-by">
    				#language("powered-by") <a href="http://www.autentia.com" rel="external">Autentia</a>
    			</p>
    		</footer>
    	

La plantilla portal_pop_up.vm muestra los popups de liferay:

portal_pop_up.vm

La plantilla portlet.vm muestra el contenido de un portlet y su marco, para cada una de las vistas del portlet (VIEW, EDIT, HELP):

portlet.vm

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" añadiendo 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.

8. Conclusiones

Ahora que conocemos la estructura de los temas, tan solo tenemos que adaptar las plantillas, estilos y javascript que hemos visto a nuestras necesidades/requerimientos de una forma sencilla.

Cualquier duda o sugerencia podeis comentarlo.

Saludos.

A continuación puedes evaluarlo:

Regístrate para evaluarlo

Por favor, vota +1 o compártelo si te pareció interesante

Share |
Anímate y coméntanos lo que pienses sobre este TUTORIAL:

Fecha publicación: 2011-09-09-20:08:23

Autor: anamilagro

necesito crear un div en la parte de inicio del menu de bienvenida, estaba modificando el portal_normal.vm para que cuando haga click en el boton de bienvenida salga un div flotante. estaba usando ligthbox de jquery pero no me funciona
como puedo crear un div, no un popup desde el portal_normal_vm usando jquery con toda su configuracion :S