Martín Bove Blog! | Otro blog de tecnología…

TAG | Ejemplo

mar/10

2

Layouts en 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.

Get Adobe Flash player

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

         

La nueva habilidad de Adobe Air 2 de resolver DNS, puede ayudar en gran a mejorar las operaciones relacionadas con el manejo de redes en nuestras aplicaciones, si a esto le sumamos el manejo de Sockte´s, que es otra de las innovaciones en la versión 2 de Adobe AIR, se puede ver claramente como despunta un potencial interesante en lo que respecta al desarrollo de aplicaciones que hagan uso de los recursos de red, como por ejemplo serian aplicaciones del estilo per2per o inclusive aplicaciones de telefonía Ip.

Veamos un poco más en profundidad que puede hacer Adobe Air con respecto a los DNS.

Para dar soporte a la resolución de DNS, Adobe a integrado una nueva clase llamada:  DNSResolver, que se encuentra en el paquete “flash.net.dns”. Esta clase, resuelve DNS ejecutando un DNS Query estándar, y devolviéndonos una respuesta de los registros en lo que habitualmente se conoce como DNS Records.

Hay muchas clases de DNS Records, pero aquí les detallo cuales son los que Adobe Air 2, va a manejar.

  • A: Los registros A son los que mapean una dirección IPv4 con un hostname. Este registro contiene:  “hostname”, “TTL (Time To Live)” y la dirección “IPv4″.
  • AAAA: Los registros AAA son los que mapean una dirección IPv6 con un hostname. Este registro contiene: “hostname”, “TTL” y la dirección “IPv6″.
  • MX: Los registros MX mapean una lista de servidores de mail con un nombre de domino. Este registro contiene: “hostname”, “TTL”, “exchange server” y preferencias.
  • PTR: Los registros PTR mapean un hostname  con una dirección Ip, en esencia es lo que se conoce como “reverse DNSLookup” . Este registro contiene: “hostname”, “TTL”, y un puntero hacia el host.
  • SRV: Los registros SRV mapean una lista de servicios con un hostname. Este registro contiene: “hostname”, “TTL”, “priority”, “weight”, “port”, y “target domain”

La sintaxis para usar la clase sería la siguiente:

public function DNSResolverExample()
{
//Create the resolver object
var resolver:DNSResolver = new DNSResolver();
resolver.addEventListener( DNSResolverEvent.LOOKUP, lookupComplete );
resolver.addEventListener( ErrorEvent.ERROR, lookupError );

//Look up records
resolver.lookup( "example.com.", ARecord );
resolver.lookup( "example.com", AAAARecord );
resolver.lookup( "example.com", MXRecord );
resolver.lookup( "208.77.188.166", PTRRecord );
resolver.lookup( "_sip._tcp.example.com.", SRVRecord );
}

Para probar un poco esta nueva funcionalidad he realizado esta pequeña aplicación, que aquí pueden ver y más abajo descargar.
nota: Es necesario para compilar está aplicación el SDK de Adobe AIR2 instalado en nuestro entrono de desarrollo, en este post hay un tutorial de como instalarlo.
AIR 2 Ejemplo de uso de DNS

Aquí se puede descargar la aplicación de ejemplo como sus fuentes.
AIR2 Ejemplo DNS

               

Viejos Posts >>