Algo que realmente me ha gustado de las nuevas características de Flex 4 es la separación que propone entre el contenido y la visualización de los componentes, para hacer esto posible Gumbo viene cargado de una batería de herramientas. Una interesante, es la posibilidad de desarrollar layouts personalizados para los distintos componentes.

Pero veamos con un pequeño ejemplo como funciona esto. Para crear nuestros propios layouts es necesario extender la clase “LayoutBase” que se encuentra dentro del paquete “spark.layouts.supportClasses”

En esta clase debemos sobrescribir el método “updateDisplayList” que es el encargado de pintar los elementos en pantalla.
En este ejemplo se muestra una clase “circularlayout” que se encarga de distribuir los elementos en un círculo.

package com.layouts
{
	import mx.core.ILayoutElement;
	import spark.layouts.supportClasses.LayoutBase;

	public class CircularLayout extends LayoutBase
	{
		override public function updateDisplayList(w:Number, h:Number):void
		{
			super.updateDisplayList(w, h);

			if (!target)
				return;

			var layoutElement:ILayoutElement;
			var count:uint = target.numElements;

			var angle : Number = 360/count;
			var radius : Number = Math.min( target.width/2, target.height/2 ) - 25;

			var w2 : Number = target.width/2;
			var h2 : Number = target.height/2;

			for (var i:int = 0; i < count; i++)
			{
				layoutElement = target.getElementAt(i);

				if (!layoutElement || !layoutElement.includeInLayout)
					continue;

				var radAngle : Number = (angle * i) * (Math.PI / 180) ;

				var _x : Number = Math.sin( radAngle );
				var _y : Number = - Math.cos( radAngle );

				layoutElement.setLayoutBoundsPosition( w2 + (_x * radius) - 25, h2 + (_y * radius) - 10 );
			}
		}
	}
}

Como verán es muy fácil crear layouts, solo hay que iterar por la colección de elementos visuales y asignarles una nueva posición basada en nuestro propios requerimientos.

Este es un ejemplo básico, pero con un poco de esfuerzo se pueden construir layouts muy potentes, incluso con características 3D. Pero esto seguramente lo expondré en otro post.
Aquí les dejo la aplicación de ejemplo, que muestra de una manara muy básica lo que les estaba contando.

Como siempre, aquí pueden descargar el código fuente de la aplicacion.
LayoutEjemplo

CircularLayout   Ejemplo   Flex4   LayoutBase   layouts   spark

Comentarios Facebook

Comentarios Wordpress

<< Clima Widget

Swiz Framework (brutalmente simple) >>