El día de ayer fue el elegido para  lanzar la versión final de Flex 4 SDK así como también de la nueva herramienta de desarrollo integrada Flash Builder 4 que viene a remplazar el anterior Flex Builder.

Será cuestión de que empecemos a experimentar con las nuevas herramientas, y saquemos nuestras propias conclusiones sobre el desarrollo que ha tenido la plataforma con esta nueva entrega.

Algo interesante para añadir en este punto es que simultáneamente al lanzamiento de las herramientas de desarrollo, se ha actualizado uno de los sitios de referencia que tiene la comunidad flex como es “flex.org“. Este movimiento seguramente intenta sumarle ímpetu a la promoción de las nuevas herramientas.

Flash Builder 4   flex.org   Flex4   Lanzamiento Flex 4

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