Temas de apariencia configurables y controles avanzados en Liferay 6.1

por

Aunque en la versión 6.0 de Liferay ay existía este tipo de controles, en la nueva versión 6.1 han sido mejorados y ampliados para dar mayor versatilidad a los temas de apariencia.

En un artículo anterior veíamos como podíamos generar Esquemas de color a partir del look-and-feel.xml, en esta ocasión vamos a utilizar el mismo ficheor pero lo usaremos para añadir una serie de opciones de configuración que permitirán modificar el comportamiento del tema de apariencia desde el propio panel de control.

Vamos a ver un ejemplo rápido de lo que podemos hacer:

Ejemplo de setting

Como podéis ver, nos permite configurar, por ejemplo, si queremos que los portlets muestren por defecto los border o no. Además nos permite crear nuestras propias reglas y configurarlas desde el panel de control.

Para hacer todo esto debemos de crear el archivo look-and-feel.xml dentro de la carpeta WEB-INF de nuestro tema de apariencia.

Una vez creado añadimos lo siguiente:

	<?xml version="1.0"?>
	 <!DOCTYPE
		look-and-feel PUBLIC
		"-//Liferay//DTD Look and Feel 6.1.0//EN"
		"http://www.liferay.com/dtd/liferay-look-and-feel_6_1_0.dtd">

	<look-and-feel>
		<compatibility>
			<version>6.1.0+</version>
		</compatibility>
		<theme id="hotel" name="Hotel Theme" >
			<settings>
			</settings>
		</theme>
	</look-and-feel>

Dentro de las etiquetas <settings> añadiremos nuestras reglas. Por ejemplo:

	<settings>
		<setting configurable="true" key="show-breadcrumb" type="checkbox" value="true" />
	 </settings> 

Existen 3 atributos opcionales a configurar:

  • configurable: Establece si la configuración es estática o configurable.
  • type: Tipo de campo si es configurable.
  • options: En caso de que el type="select" serán las diferentes options del select.

Nuestro archivo look-and-feel.xml quedaría de la siguietne forma:

	<?xml version="1.0"?>
	<!DOCTYPE look-and-feel PUBLIC "-//Liferay//DTD Look and Feel 6.1.0//EN" "http://www.liferay.com/dtd/liferay-look-and-feel_6_1_0.dtd">

	<look-and-feel>
		<compatibility>
			<version>6.1.0+</version>
		</compatibility>
		<company-limit>
			<company-includes />
			<company-excludes />
		</company-limit>
		<theme id="classic" name="Classic">
			<settings>
				<setting configurable="true" key="portlet-setup-show-borders-default" type="checkbox" value="true" />
			</settings>
		</theme>
	</look-and-feel>	

Una vez creadas estas configuraciones debemos de usarlas en nuestros archivos VM para filtrar los elementos según la configuración.

Para usarlo debemos hacer lo siguiente(../diffs/templates/portal_normal.vm):

	#set ($show_breadcrumb = $theme_display.getThemeSetting('show-breadcrumb'))

	#if ($show_breadcrumb == 'true')
		<nav class="site-breadcrumbs" id="breadcrumbs">
			<h1>
				<span>#language("breadcrumbs")</span>
			</h1>
			#breadcrumbs()
		</nav>
	#end

En el ejemplo anterior añadimos las migas de pan si y sólo si la setting show-breadcrumb esta a true.

De la misma forma que hemos añadido una setting para configurar manualmente si queremos que se muestre las migas de pan o no, podríamos añadir la setting que quisiesemos para configurar lo que necesitemos según nuestro caso. Por ejemplo, añadir o no librerías javascript, portlets incrustados en el theme, o lo que nosotros queramos.

COMENTARIOS

DEJA TU COMENTARIO