Uno de los servicios mas comunes que utiliza una conexión encriptado son los proveedores de correo usando IMAP.

Para este ejemplo vamos a conectarnos al servidor IMAP de Gmail y obtener el numero de mensajes nuevos y mensajes en total que existen en nuestra cuenta.

Para fines prácticos de este ejemplo necesitamos:

• Una cuenta de Gmail, con IMAP habilitado
• FlashBuilder
• Adobe AIR 2.0

Lo primero es crear una interfaz sencilla en donde se pueda insertar el nombre de usuario, la contraseña, campos de output y un boton para iniciar el proceso.

	<s:Label x="10" y="17" text="Gmail username:"/>
	<s:Label x="10" y="45" text="Gmail password:"/>
	<s:TextInput y="10" id="username_txt" change="_username = username_txt.text" right="10" left="120"/>
	<s:TextInput y="40" id="password_txt" change="_password = password_txt.text" displayAsPassword="true" right="10" left="120"/>
	<s:Button y="70" label="Tell me!!" click="start()" right="10"/>
	<s:Label x="10" y="100" width="280" id="result_txt"/>
	<s:TextArea id="out_txt" editable="false" right="10" bottom="10" top="130" left="10"/>

El resultado de esto se ve de esta forma:

Despues de tener nuestra interfaz vamos a declarar todas la variables y constantes que vamos a necesitar:

			/******************************************************************
			 *	Datos de la cuenta (Gmail IMAP)
			 * ***************************************************************/

			private static const INCOMING_SERVER:String = "imap.gmail.com";
			private static const PORT:int = 993;
			private var _username:String = "";
			private var _password:String = "";

			/******************************************************************
			 * Socket && Stuff
			 * ***************************************************************/ 

			private var _server:Socket;
			private var _buffer:ByteArray;
			private var _action:String;
			private var _totalMessages:String;
			private var _newMessages:String;

			/******************************************************************
			 * Respuestas del servidor (para filtar el contenido)
			 * http://tools.ietf.org/html/draft-gahrns-imap-namespace-00
			 * ****************************************************************/

			private static const CONNECT:String = "*";
			private static const LOGIN:String = "A002";
			private static const STATUS:String = "A006";
			private static const CRLF:String = "\r\n";
			private var _regSearch:RegExp = RegExp("\\"+_action+"\\r\\n");

Aqui hay un par de cosas que debo resaltar:

			private var _buffer:ByteArray;

En esta variable almacenaremos las respuestas que nos envié el servidor.

			private var _regSearch:RegExp = RegExp("\\"+_action+"\\r\\n");

Con esta expresion regular verificaremos si el mensaje que recibimos del servidor es util para nosotros.

			private static const CONNECT:String = "*";
			private static const LOGIN:String = "A002";
			private static const STATUS:String = "A006";

Estas constantes son los identificadores de los mensajes que se mandan desde y hacia el servidor para saber mas de estos identificadores recomiendo esta lectura http://tools.ietf.org/html/draft-gahrns-imap-namespace-00

Ahora nos queda inicializar nuestro socket y crear los eventos que usaremos para comunicarnos con el servidor

				_server = new SecureSocket();
				_server.addEventListener(Event.CONNECT, onConnect);
				_server.addEventListener(Event.CLOSE, onClose);
				_server.addEventListener(ProgressEvent.SOCKET_DATA, onData);
				_server.addEventListener(IOErrorEvent.IO_ERROR, onIOError);

El único cambio con respecto a trabajar con Sockets sin encriptar es el constructor de la clase en lugar de usar

				_server = new Socket();

Ahora debemos utilizar

				_server = new SecureSocket();

Así de simple; Bien, hemos seteado los listeners para CONNECT, SOCKET_DATA, CLOSE y IO_ERROR vamos a concentranos solamente en SOCKET_DATA que es el evento que se dispara al momento de recibir un mensaje del servidor.

			private function onData(e:ProgressEvent):void
			{
				out_txt.text += "Data " + e+"\n";
				var socket:Socket = e.target as Socket;
				var bufferString:String;
				socket.readBytes(_buffer, _buffer.length, socket.bytesAvailable);
				bufferString = _buffer.toString();
				out_txt.text += "SERVER: " + _buffer.toString()+"\n";
				if (  bufferString.search( _regSearch ) )
				{
					out_txt.text += "Es una respuesta valida parsea\n";
					parseResponse();
				}
				cursorManager.removeBusyCursor()
			}

En esta función recibimos el evento y tomamos el contenido del mensaje mediante el método readBytes y lo almacenamos en la variable _buffer

				socket.readBytes(_buffer, _buffer.length, socket.bytesAvailable);

Verificamos que el mensaje corresponda a nuestra petición, en este caso solo usamos 3 peticiones CONNECT, LOGIN, STATUS y si el mensaje es correcto parseamos el contenido.

El primer mensaje que recibimos del servidor es el de conexión

SERVER: * OK Gimap ready for requests from 189.216.40.184 14if7528374pzk.62

Una vez que estemos conectados mandamos nuestras credenciales para que el servidor nos autentique y cambiamos el mensaje a LOGIN indicando que estamos esperando el mensaje de respuesta de la solicitud de logueo.

				if ( _action == CONNECT )
				{
					out_txt.text += "Es es tag de conexion manda login\n";
					_server.writeUTFBytes(LOGIN + " LOGIN " + _username + " " + _password + CRLF);
					_action = LOGIN;
					_server.flush();
					return;
				}

Se envia el mensaje y de inmediato recibimos la respuesta del servidor, en caso de login correcto:

A002 OK tmeister@gmail.com authenticated (Success)

Si es incorrecto:

A002 NO [ALERT] Invalid credentials (Failure)

Con esto es muy fácil saber el resultado de la operación, usemos indexOf para saber si la palabra “OK” existe

				if ( _action == LOGIN )
				{
					out_txt.text += "Es la respuesta del login\n";
					if( bufferString.indexOf("OK") != -1 )
					{
						out_txt.text += "El login es correcto, estamos autenticados - Pedir correos sin leer\n";
						_action = STATUS;
						_server.writeUTFBytes(STATUS + " STATUS inbox (MESSAGES UNSEEN)" + CRLF);
						_server.flush();
					}else
					{
						out_txt.text += "Ooops!! Las credenciales no son validas.\n";
						Alert.show("Ooops!! Las credenciales no son validas.", "Error");
						_server.close();
					}
					return;
				}

Excelente estamos autenticados, Ahora que? solo nos falta pedir el estatus de la cuenta pidiendo los mensajes totales y los mensajes nuevos de la carpeta Inbox

						_server.writeUTFBytes(STATUS + " STATUS inbox (MESSAGES UNSEEN)" + CRLF);

El ultimo paso es recibir el mensaje del servidor con la información que pedimos y parsearla, al ser texto solo tenemos que usar indexOf y substring para acceder a lo que nos interesa

STATUS “inbox” (MESSAGES 61298 UNSEEN 5)

				if( _action == STATUS )
				{
					out_txt.text += "Es la respuesta del Status " + bufferString+"\n";
					var startSub:int = bufferString.indexOf("(");
					var endSub:int = bufferString.indexOf(")");
					var message:String = bufferString.substring(startSub+1, endSub);
					var slides:Array = message.split(" ");
					var count:int = 0;
					for each( var slide:String in slides )
					{
						switch( slide )
						{
							case "MESSAGES":
								_totalMessages = slides[count + 1];
								break;
							case "UNSEEN":
								_newMessages = slides[count + 1];
								break;
						}
						count++;
					}
					result_txt.text = _newMessages + " mensajes nuevos, de " + _totalMessages + " en total";
					out_txt.text += _totalMessages;
					out_txt.text += _newMessages;
					_action = null;
					_server.close();
				}
			}

Sin duda, lo mas complejo al momento de trabajar con Sockets es saber utilizar e implementar el protocolo de comunicación pero esa ya es otra historia.

Por ultimo les dejo el código completo

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
					   xmlns:s="library://ns.adobe.com/flex/spark"
					   xmlns:mx="library://ns.adobe.com/flex/halo"
					   creationComplete="init(event)"
					    width="300" height="250">
	<fx:Script>
		<![CDATA[
			import flash.events.Event;
			import flash.events.IOErrorEvent;
			import flash.events.MouseEvent;
			import flash.events.ProgressEvent;
			import flash.net.SecureSocket;
			import flash.net.Socket;
			import flash.utils.ByteArray;

			import mx.controls.Alert;
			import mx.events.FlexEvent;

			private static const INCOMING_SERVER:String = "imap.gmail.com";
			private static const PORT:int = 993;
			private var _username:String = "";
			private var _password:String = "";

			private var _server:Socket;
			private var _buffer:ByteArray;
			private var _action:String;
			private var _totalMessages:String;
			private var _newMessages:String;

			private static const CONNECT:String = "*";
			private static const LOGIN:String = "A002";
			private static const STATUS:String = "A006";
			private static const CRLF:String = "\r\n";
			private var _regSearch:RegExp = RegExp("\\"+_action+"\\r\\n");

			protected function init(event:FlexEvent):void
			{

				_server = new SecureSocket();
				_server.addEventListener(Event.CONNECT, onConnect);
				_server.addEventListener(Event.CLOSE, onClose);
				_server.addEventListener(ProgressEvent.SOCKET_DATA, onData);
				_server.addEventListener(IOErrorEvent.IO_ERROR, onIOError);

				_buffer = new ByteArray()
			}
			private function onConnect(e:Event):void
			{
				out_txt.text += "Conexion establecida " + e.toString()+"\n";
			}
			private function onClose(e:Event):void
			{
				out_txt.text += "Conexion cerrada " + e+"\n";
			}
			private function onData(e:ProgressEvent):void
			{
				out_txt.text += "Data " + e+"\n";
				var socket:Socket = e.target as Socket;
				var bufferString:String;
				socket.readBytes(_buffer, _buffer.length, socket.bytesAvailable);
				bufferString = _buffer.toString();
				out_txt.text += "SERVER: " + _buffer.toString()+"\n";
				if (  bufferString.search( _regSearch ) )
				{
					out_txt.text += "Es una respuesta valida parsea\n";
					parseResponse();
				}
				cursorManager.removeBusyCursor()
			}
			private function onIOError(e:IOErrorEvent):void
			{
				out_txt.text += "IOError " + e+"\n";
			}

			private function parseResponse():void
			{
				var bufferString:String = _buffer.toString();
				_buffer.clear();
				if ( _action == CONNECT )
				{
					out_txt.text += "Es es tag de conexion manda login\n";
					_server.writeUTFBytes(LOGIN + " LOGIN " + _username + " " + _password + CRLF);
					_action = LOGIN;
					_server.flush();
					return;
				}
				if ( _action == LOGIN )
				{
					out_txt.text += "Es la respuesta del login\n";
					if( bufferString.indexOf("OK") != -1 )
					{
						out_txt.text += "El login es correcto, estamos autenticados - Pedir correos sin leer\n";
						_action = STATUS;
						_server.writeUTFBytes(STATUS + " STATUS inbox (MESSAGES UNSEEN)" + CRLF);
						_server.flush();
					}else
					{
						out_txt.text += "Ooops!! Las credenciales no son validas.\n";
						Alert.show("Ooops!! Las credenciales no son validas.", "Error");
						_server.close();
					}
					return;
				}
				if( _action == STATUS )
				{
					out_txt.text += "Es la respuesta del Status " + bufferString+"\n";
					var startSub:int = bufferString.indexOf("(");
					var endSub:int = bufferString.indexOf(")");
					var message:String = bufferString.substring(startSub+1, endSub);
					var slides:Array = message.split(" ");
					var count:int = 0;
					for each( var slide:String in slides )
					{
						switch( slide )
						{
							case "MESSAGES":
								_totalMessages = slides[count + 1];
								break;
							case "UNSEEN":
								_newMessages = slides[count + 1];
								break;
						}
						count++;
					}
					result_txt.text = _newMessages + " mensajes nuevos, de " + _totalMessages + " en total";
					out_txt.text += _totalMessages;
					out_txt.text += _newMessages;
					_action = null;
					_server.close();
				}
			}

			private function start():void
			{
				out_txt.text = "iniciando Conexion\n";
				if( _server != null && _server.connected )
				{
					_server.close();
				}
				if( _username.length && _password.length )
				{
					_action = CONNECT;
					_server.connect(INCOMING_SERVER, PORT);
					cursorManager.setBusyCursor();
				}else
				{
					Alert.show("Escribe tus credenciales..", "Error");
				}
			}

		]]>
	</fx:Script>
	<s:Label x="10" y="17" text="Gmail username:"/>
	<s:Label x="10" y="45" text="Gmail password:"/>
	<s:TextInput y="10" id="username_txt" change="_username = username_txt.text" right="10" left="120"/>
	<s:TextInput y="40" id="password_txt" change="_password = password_txt.text" displayAsPassword="true" right="10" left="120"/>
	<s:Button y="70" label="Tell me!!" click="start()" right="10"/>
	<s:Label x="10" y="100" width="280" id="result_txt"/>
	<s:TextArea id="out_txt" editable="false" right="10" bottom="10" top="130" left="10"/>
</s:WindowedApplication>

Descarga

Espero les sea de ayuda y nos estamos leyendo.

• MVC frameworks and Dependency Injection
• Testing frameworks and code coverage
• Building and Continue Integration
• Flash 3D Engines
• Server side libraries/frameworks for Flex

El texto introductorio dice:

“Some say that if a technology has a lot of frameworks, then it is a sign of maturity. You might argue with that, but still I think it is interesting to know what are the available frameworks in the Flex/Flash world.”

La información completa y links la pueden encontrar en el blog de Mihai Corlan

Enjoy!

Link : Flex Frameworks

El día de ayer en la agencia en donde soy socio (AureaCode) no rechazaron un presupuesto para desarrollar un sitio para una compañía multinacional de mucho éxito (Fabricantes de Tenis ), El trabajo constaba de copiar literalmente el sitio oficial de EEUU. Este sitio consta de, entre lo obvio:

• Una tienda en linea, (Administrador, y Front-end)
• Rastreo de pedido
• Pasarela de pago integrada
• Creación de crear tu propio tenis
• Localización de revendedores cercanos mediante CP
• Administrador de Noticias, Eventos
• Integración de Blog
• Todo lo anterior en Full-Flash

Bien, Yo soy el encargado de estimar tiempos de esfuerzo y desarrollo, con esta información llegue a la conclusión de que el proyecto podría ser acabado en 60 días con el esfuerzo de 1 diseñador y 2 programadores, tratando de ajustar a lo menos para no inflar el precio final.

Esto dio como resultado un aproximado de 1440 horas de trabajo, a un coste de US$25 por hora.

Aquí lo que me hizo ruido, no fue que no aceptaran el presupuesto, sino como, diciéndonos que estábamos “Fuerisisisisima” del presupuesto literalmente.

Esto me hizo preguntar cuanto tenían de presupuesto, o cuanto les habían cotizado las demás “Agencias“.

El siguiente punto fue, que el día de hoy mediante un tweet veo los precios promedio que ofrecen las compañías americanas, entre US$60 y $US75 por hora.

Entonces, somos o nos hacemos.

¿Solo por que estamos un poco mas al sur debemos regalar nuestro trabajo?

¿En verdad en México esta tan mal pagado el desarrollo web?

Quiero hacer una encuesta rápida para ver, de una manera no muy científica , como anda en promedio, el costo de desarrollo por hora en LatinoAmerica. Así que por favor tómense un momento para responder, se los agradeceré.

Saludos!

Bien, este proyecto se quedo en la versión 2.3, si mal no recuerdo, de WordPress.

Ahora desde la lista de correo de desarrollo me entero que se ha creado un fork de AWI haciendo una actualización a WordPress 2.7 además de que se agregaron nuevos métodos.

El Fork fue creado por Dale Sattler  que en su blog nos cuenta de todos los cambios.

Así que ya saben si quieren hacer interfaces en Flash-Flex para WordPress esto es lo que están buscando

Saludos

Leyendo mis feeds me entero que ha nacido una nueva Organización/Comunidad Mexicana enfocada al emprendimiento web, Tequila Valley.

Sin duda este tipo de proyectos son necesarios y sobre todo útiles para todas aquellas personas que tienen una idea pero no saben cómo iniciar a cómo desarrollarla.

Todos aquellos que alguna vez emprendimos un proyecto sabemos que la idea es solo la base de nuestro proyecto, la forma en cómo ejecutemos dicha idea es lo que asegurara o no el éxito del mismo. Es aquí en donde este tipo de comunidades son realmente valiosas, ya que dentro de ellas obtendrás consejos, tips, asesoramiento de personas que han pasado por lo mismo que tu, recuerda el dicho, “Nadie escarmienta en cabeza ajena”, hombre pero es bueno que te digan por donde ir de vez en cuando ¿no?

En lo personal, en México conozco Cafe de Altura , pero el punto que no me convence mucho es que las reuniones son físicas. No hay un foro o algo así que lo apoye (Al menos no he encontrado alguno, perdón si no busque buen), al contrario de Tequila Valley en donde desde un inicio encontramos una lista de correo y un foro.

Tequila Valley según sus creadores

¿Qué es Tequila Valley?

Corto y rapidito, con ayuda de varios, he aquí las tres reglas del club:

1. ES UNA AGRUPACIÓN MEXICANA

Neta, güey. Tequila Valley existe para fomentar nuestra nacionalidad como fuerte de desarrollo. Ojo que esto no quiere decir que tienes que estar pisoteando territorio azteca para poder hacer parte, sino que eres parte del club de mexicanos. Así estés en Tlalpán, Ushuaia, Washington o en el DF.

2. NO HAY JEFE, PRESIDENTE, DUEÑO, NI ACCIONISTAS (en serio, no insistan)

Tequila Valley es de todos. Para reunir un evento Tequila Valley no requieres permiso, autorización, visto bueno o carta apostillada del padre Benito, el de la iglesia de la esquina. De hecho, como otras organizaciones de este estilo lo dicen, es sólo un “estado mental”.

3. NO HAY REGLAS ESCRITAS EN PIEDRA

No, no las hay. De hecho, todo está abierto a discusión. Los invitamos a ser parte del grupo Google formativo de Tequila Valley, en donde a diario nos golpeamos la cabeza con temas banales como qué tipo de fuente usar o si el logotipo obedece las leyes de distribución áurea o no.

Fuente : Maestros del Web
Link del Proyecto: Tequila Valley

Una solución simple es crear una clase singleton, en la cual, podemos almacenar no solo el stage principal, sino cualquier otro valor que necesitemos en varias clases. Algo así como _global de AS2, lo recuerdan?
Aquí la clase

[as]
package net.tmeister.utils
{
public dynamic class Global
{
private static var global : Global

public static function getInstance() : Global
{
if ( global == null )
{
global = new Global( arguments.callee );
}
return global;
}

public function Global( caller : Function = null )
{
if ( caller != Global.getInstance )
{
throw new Error (“Global is a singleton class, use getInstance() instead”);
}
if ( Global.global != null )
{
throw new Error( “Only one Global instance should be instantiated” );
}
}
}
}
[/as]

Y su modo de uso.

[as]
package
{
import flash.display.MovieClip;
import net.tmeister.utils.Global
public class Main extends MovieClip
{
private var global:Global;

public function Main()
{
global = Global.getInstance();
global.stage = stage
trace(‘global.stage’ + global.stage)
global.algunOtroValor = new MovieClip()
trace(‘global.algunOtroValor ‘ + global.algunOtroValor)
}
}
}
[/as]

Simple.

• Efectos 3D Nativos
• Filtros y efectos personalizados
• Soporte de texto avanzado
• Generación de sonido dinámico
• Nuevo API de dibujo
• Aceleración por hardware
• Nuevo DataType Vector
• Streaming dinámico

Y más más…. Ahora solo falta esperar el release de FLASH CS4

La información completa la pueden encontrar en la página oficial del FlashPlayer

Main help portal
http://help.adobe.com/en_US/Flash/10.0_Welcome/

New features
http://help.adobe.com/en_US/…html

Programming ActionScript 3.0
http://help.adobe.com/…./

ActionScript 3.0 Language and Components Reference
http://help.adobe.com/en_US/AS3LCR/Flash_10.0/index.html

Extending Adobe Flash Professional CS4
http://help.adobe.com/…/index.html

Con esto, sin duda, ya tenemos para entretenernos un bien tiempo.

Hace un buen rato que no posteo, pero aquí estoy de vuelta con algo sencillo.
TiledBackground es una clase simple la cual toma una imagen externa (jpg, gif, png) y la repite tantas veces quepa en el navegador tal y como lo hiciéramos en CSS

Además de que tiene un par de parámetros, se puede sobreponer un gradiente radial para hacer un efecto sobre el fondo. Los colores y alphas del gradiente se pueden configurar.

TiledBackground
[as]
package net.tmeister.utils.background
{

import flash.display.BitmapData;
import flash.display.Loader;
import flash.display.Sprite;
import flash.display.Stage;
import flash.events.Event;
import flash.geom.Matrix;
import flash.net.URLRequest;
import flash.display.StageScaleMode;
import flash.display.StageAlign;
import flash.display.GradientType;

public class TiledBackground extends Sprite
{
private var _pattern:String;
private var _container:Sprite;
private var _image:Loader;
private var _stage:Stage;
private var _gradient:Boolean = true;
private var _gProperties:Object = {};

public function TiledBackground(stage:Stage)
{
_stage = stage
_stage.scaleMode = StageScaleMode.NO_SCALE;
_stage.align = StageAlign.TOP_LEFT;
_stage.addEventListener(Event.RESIZE, resize);
}
public function set pattern (urlPattern:String):void
{
_pattern = urlPattern;
loadPattern();
}
public function get pattern():String
{
return _pattern;
}
public function set radialGradient(value:Boolean):void
{
_gradient = value;
}
public function get radialGradient():Boolean
{
return _gradient;
}
public function set gradientProperties(properties:Object):void
{
_gProperties = properties;
}
public function get gradientProperties():Object
{
return _gProperties;
}
private function loadPattern():void
{
var patternLoader:Loader = new Loader();
var patternUrl:URLRequest = new URLRequest(_pattern);
patternLoader.load(patternUrl);
patternLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onPatternLoaded);
}
private function onPatternLoaded(e:Event):void
{
_image = e.target.loader;
createBackground();
createRadialGradient()
}
private function createBackground():void
{
if (_container != null)
{
removeChild(_container);
_container = null;
}
var bitmap:BitmapData = new BitmapData (_image.width, _image.height);
bitmap.draw(_image)
_container = new Sprite();
_container.graphics.beginBitmapFill(bitmap);
_container.graphics.drawRect(0,0, _stage.stageWidth , _stage.stageHeight);
_container.graphics.endFill();
addChild(_container);
}

private function createRadialGradient():void
{
if (! _gradient )
{
return;
}
var matrix:Matrix = new Matrix();
var gType:String = GradientType.RADIAL;
matrix.createGradientBox(_stage.stageWidth,_stage.stageHeight,0,0,0);
var gColors:Array = [(_gProperties.insideColor) ? _gProperties.insideColor : 0xffffff, (_gProperties.outsideColor) ? _gProperties.outsideColor : 0xffffff];
var gAlphas:Array = [(_gProperties.insideColorAlpha) ? _gProperties.insideColorAlpha : .15 ,(_gProperties.outsideColorAlpha) ? _gProperties.outsideColorAlpha : 0];
var gRatio:Array = [0,255];
var bound:Sprite = new Sprite();
bound.graphics.beginGradientFill(gType,gColors,gAlphas,gRatio,matrix);
bound.graphics.drawRect(0,0,_stage.stageWidth,_stage.stageHeight);
addChild(bound);
}
private function resize(e:Event):void
{
createBackground();
createRadialGradient()
}
}
}
[/as]
Uso:

[as]
package
{
import flash.display.Sprite;
import net.tmeister.utils.background.TiledBackground

public class sampleTiled extends Sprite
{
public function sampleTiled()
{
var background:TiledBackground = new TiledBackground(stage);
background.pattern = “bg1.gif”
background.gradientProperties = {insideColor:0xffffff, outsideColor:0xffffff, insideColorAlpha:.05, outsideColorAlpha:0}
addChild(background)
}
}
}
[/as]

Aquí el ejemplo y como siempre los archivos fuente están disponibles.

Saludos!!

getAllChilds

Regresa todos los hijos contenidos en el “target”

getChildsByType

Regresa solo los hijos que sean de un tipo específico, por ejemplo solo MovieClips, o solo Botones.

DisplayObjectUtils

[as]
package net.tmeister.utils
{
/**
* @author Enrique Chavez aka Tmeister
*/
import flash.display.DisplayObject;
public class DisplayObjectUtils
{
/**
*
* @param target
* @return Array
*/
public static function getAllChilds(target:*):Array
{
var listTmp:Array = []
for (var a = 0; a < target.numChildren; a++ )
{
listTmp.push (target.getChildAt(a) )
}
return listTmp
}
/**
*
* @param target
* @param type
* @return
*/
public static function getChildsByType(target:*, type:*):Array
{
var listTmp:Array = []
for (var a = 0; a < target.numChildren; a++ )
{
if (target.getChildAt(a) is type)
{
listTmp.push (target.getChildAt(a) )
}
}
return listTmp
}
}
}
[/as]

Su uso es el siguiente:

Primero creamos unos Movieclips y unos botones para tener algo que buscar.

[as]
import net.tmeister.utils.DisplayObjectUtils;
import fl.controls.Button

createMovieClips()
createButtons()
getChilds()

function createButtons()
{
for(var a:Number = 0; a<2; a++)
{
var tmp:Button = new Button();
tmp.x = Math.random()*400
tmp.y = Math.random()*400
tmp.label = “buton”+a
addChild(tmp)
}
}
function createMovieClips()
{
for(var a:Number = 0; a<5; a++)
{
var tmp:MovieClip = new MovieClip();
tmp.graphics.beginFill(0x2a2a2a, .5)
tmp.graphics.drawRect(Math.random()*500, Math.random()*300, Math.random()*100, Math.random()*100);
tmp.graphics.endFill();
tmp.name = “mc”+a;
addChild(tmp)
}
}
function getChilds()
{
trace(“All Childs: ” + DisplayObjectUtils.getAllChilds(this) )
trace(“=====================================================================================”)
trace(“Movieclips: ” + DisplayObjectUtils.getChildsByType(this, MovieClip))
trace(“=====================================================================================”)
trace(“Buttons: ” + DisplayObjectUtils.getChildsByType(this, Button))

}

[/as]

AS3 cuenta con su Math.round pero esta función lo único que hace es redondear el numero al entero más cercano. Pero qué pasa si quiero redondear un número en múltiplos de 5 por ejemplo.

Para ello escribí esta sencilla clase que lo permite.

[as]
package net.tmeister.utils
{
/**
*
* Advanced Round Class
* @version 0.1
* @author Enrique Chavez aka Tmeister
*
*/
public class MathUtils
{
/**
*
* Rounds a Number to the nearest multiple
* @param number Number to Round
* @param precision multiple to be rounded
* @return A number round
*
*/
public static function roundToNear(number:Number, precision:Number)
{
return Math.round( number / precision) * precision;
}
/**
*
* Rounds a Number up to the nearest multiple
* @param number Number to Round
* @param precision multiple to be rounded
* @return A number Up round
*
*/
public static function roundToUpNear(number:Number, precision:Number)
{
return Math.ceil( number / precision) * precision;
}
/**
*
* Rounds a Number down to the nearest multiple
* @param number number Number to Round
* @param precision multiple to be rounded
* @return A number down round
*
*/
public static function roundToDownNear(number:Number, precision:Number)
{
return Math.floor( number / precision) * precision;
}
}
}
[/as]

Modo de uso es tan simple como esto.

[as]
import net.tmeister.utils.MathUtils;

const number:Number = 38
const precision:Number = 5

trace(MathUtils.roundToNear(number, precision)) // 40
trace(MathUtils.roundToUpNear(number, precision)) // 40
trace(MathUtils.roundToDownNear(number, precision)) // 35
[/as]

Enjoy

Voy a tratar hacer una definición de los ValueObjects sin ser muy técnico. de ahora en adelante al usar VO me estaré refiriendo a los ValueObjects. Los puntos mas importantes de los VO son:

1. Los VO son contenedores de información representada por una clase individual.
2. Los VO son serializables, es decir, pueden ser enviados entre un servidor y un cliente mantenido sus propiedades.

Imaginemos que vamos a hacer un listado de mensajes para un guestbook, pero no sabemos quien, que o como nos van a proveer la información, lo único sabemos son los atributos que contendrá cada mensaje, estos son:

• idUnique
• author
• url
• content

Los mensajes siempre contendrán estas propiedades vengan de donde vengan.

Según el punto 1 esta información es representada por una clase individual entonces como nuestro cliente será hecho el FLEX creamos nuestro clase en AS3 la cual representara nuestros VO en el cliente.

[as]

package com.klr20mg.pureMVC.guestbook.model.vo
{
[RemoteClass(alias="MessagesVO")]
[Bindable]
public class MessagesVO
{
public var idUnique:String;
public var author:String;
public var url:String;
public var content:String;
public function MessagesVO(author:String=null, url:String=null, content:String=null)
{
this.idUnique = “”
this.author = author;
this.url = url;
this.content = content;
}
}
}

[/as]

Hay 2 formas comunes de “poblar” los VO mediante el constructor, como en este ejemplo o mediante getters y setters, yo prefiero la primera.

Ahora vamos crear un VO a partir de la clase anterior

[as]

package com.klr20mg.pureMVC.guestbook
{
import com.klr20mg.pureMVC.guestbook.model.vo.MessagesVO
public class someClass
{
public function someClass()
{
var miVO:MessagesVO = new MessagesVO(“Tmeister”, “http://tmeister.net”, “Este es un mensaje de prueba”);
trace(miVO)
}
}
}

[/as]

Con esto hemos creado un VO de acuerdo a la primera clase.

Los VO son “compatibles” entre el cliente y el servidor según el punto numero 2, y al usar AMFPHP, WebOrb entre otros podemos enviar arrays de VO’s entre el server y el cliente sin ningún problema, pero entonces debemos de crear nuestros VO’s en el servidor en este caso usando PHP para poder “mapear” esta información.

<?php
class MessagesVO
{
    public $idUnique;
    public $author;
    public $url;
    public $content; 

    public function MessagesVO()
    {
    }
    public function mapObject($data)
    {
        $this->idUnique = $data["idUnique"];
        $this->author = $data["author"];
        $this->url = $data["url"];
        $this->content = $data["content"];
    }
}
?>

Como pueden ver es el mismo concepto encapsular la información en una clase.

Con esto, repito, no importa si la información viene de archivos de texto, de un webservice, de una base de datos, siempre podremos almacenar, consultar y modificar la información mediante nuestros VO’s.

Espero que con esto quede claro que son y para que usan los ValueObjects

Saludos

PureMVC es un framework open source que implementa el modelo MVC para crear aplicaciones usando ActionScript 3 bajo Flash CS3 y Flex, creado originalmente por Cliff Hall .

Dentro de los planes de desarrollo podemos encontrar que se intenta implementar este framework en diversos lenguajes de programación, tales como:

• ActionScript 2
• ColdFusion
• CSharp
• Java
• Perl
• PHP
• Python
• Ruby

Al implementar el patrón MVC (Modelo-Control-Vista) podemos separar los datos de la aplicación, las vistas (Interfaz de usuario) y la lógica de control en tres “componentes”, para poder reutilizar código y sobre todo hacer nuestras aplicaciones escalabres y mantenibles.

PureMVC separa estos 3 componentes en 3 “actores” dentro del framework:

• Proxies
• Mediators
• Commands

En donde:

Los datos, remotos o locales son manejados por los Proxies.
Las vistas o interfaz de usuario, son manejados por los Mediators.
La lógica de la aplicación es manejada por los Commands los cuales pueden interactuar con los Proxies, los Mediators y pueden activar o ejecutar otros Commands.

Existe un cuarto elemento en PureMVC llamado Facade el cual provee una interfaz simple de comunicación para que los 3 actores principales puedan comunicarse entre sí. Además de que PureMVC implementa un esquema de notificaciones (Eventos) mediante los cuales se puede activar/ejecutar una o varias acciones.

La Práctica Hello PureMVC

Wow. Tanto para solo un Hello World? No siempre trabajar con frameworks significa menos código, además la potencia de estos frameworks se nota al trabajar en aplicaciones medianas-grandes, yo recomiendo usarlo y ustedes mismos verán las ventajas.

En fin espero les sea útil, además de decir que este es el primer video-tutorial de Klr20mg, que piensan al respecto, seguimos con los tutos escritos o seguimos con video?

Enjoy

Enlaces:

PureMVC Home, Download PureMVC

Download Sources

El cambio fue debido en mucha medida para poder contar de las bondades de php5, Ruby on Rails, entre otras cosas. Con PHP5 ahora podre probar finalmente weborb junto con Flex o con el alpha de Flash 9.

Ahora los dominios de tmeister.net y de klr20mg.com están hospedados en mediatemple.

PD. Todos los archivos de ejemplo, flas y zips fueron migrados (según yo) bien. pero si encuentran algún problema con los links por favor no duden en avisarme.

Nos estamos viendo..

Para nosotros como desarrolladores no es nada del otro mundo poder cambiar los valores de un XML pero esto cambia cuando el cliente final sera el encargado de modificar dicho archivo. Cuando decimos XML se quedan con cara de ‘ehhh? Y eso con que se come’, repito si el cliente no quiere pagar por una interfaz de administración y quiere poder cambiar algunos valores de la aplicación lo mejor es que se le de un archivo de configuración en texto plano.

Ustedes pensaran que para ello podemos usar loadVars con las variables declaradas, el problema, de nuevo desde el punto de vista del cliente final es complicado ya que este debe tener un formato y ademas de que no podemos poner comentarios en el.

Jugando por ahí con Python me encontré con el modulo Config que carga y parsea un archivo de configuración estándar. A que me refiero con archivo de configuración estándar?

El típico archivo que utilizan los programas en linux, por ejemplo apache. Si nunca han visto este tipo de archivos así es como se ve.

###########################################
### This is a sample of a Config file config.txt
### Author: Enrique Chavez aka Tmeister
### Site: http:www.klr20mg.com
### Date: Oct, 14 2006
###########################################

###########################################
### The images path
###########################################

pathImages path/to/folder/

###########################################
### The gallery’s name
###########################################

GalleryName this is my test gallery

###########################################
### Your Firstname
###########################################

firstname = Enrique

###########################################
###Your Lastname
###########################################

lastname Chavez

###########################################
###Your Nick =)
###########################################

nick Tmeister

# End File

Bueno, He creado una sencilla clase que se encarga de parsear este tipo de archivos pudiendo acceder a los valores de las variables de una forma simple.

Tomando como ejemplo el archivo de configuración anterior, lo único que tenemos que hacer en nuestra clase o Fla es algo así..

[as]
import org.utils.Config
import mx.utils.Delegate
class myApp extends MovieClip
{
private var config : Config;
function myApp ()
{
}
function onLoad ()
{
config = new Config (“config.txt”);
config.addEventListener (“fault”, Delegate.create (this, onFault));
config.addEventListener (“complete”, Delegate.create (this, onComplete));
}
private function onComplete (obj : Object)
{
trace (config.read (“pathImages”))
for (var i in config.list)
{
trace (‘key: ‘ + i + ‘, value: ‘ + config.list [i]);
}
}
private function onFault (obj : Object)
{
for (var i in obj) trace (‘key: ‘ + i + ‘, value: ‘ + obj [i]);
}
}
[/as]

Con esto obtenemos algo así:

path/to/folder/
key: nick, value: Tmeister
key: lastname, value: Chavez
key: firstname, value: Enrique
key: GalleryName, value: this is my test gallery
key: pathImages, value: path/to/folder/

Como pueden ver al instaciar la clase se le pasa como parámetro el path del archivo de configuración. Esta clase cuenta con 2 dispatchs, fault y complete los nombres son mas que descriptivos cierto?
Por ultimo hay 2 métodos

read que regresa el valor de la variable que se pasa como parámetro y
list que regresa un objeto con todas las variables del archivo de configuración

Por ultimo la clase Config

[as]
import mx.events.EventDispatcher;
import mx.utils.Delegate
[Event("complete")]
[Event("fault")]
class org.utils.Config
{
private var cfgFile : String
private var cfg_lv : LoadVars
public var addEventListener : Function
private var dispatchEvent : Function;
private var token : Object
public var configList : Object
public function Config (getFile : String)
{
EventDispatcher.initialize (this);
cfgFile = getFile;
loadConfig ();
}
private function loadConfig ()
{
cfg_lv = new LoadVars ();
cfg_lv.load (cfgFile);
cfg_lv.onLoad = Delegate.create (this, parseCfg);
}
private function parseCfg (ok)
{
if ( ! ok)
{
dispatchEvent (
{
type : “fault”, msg : “Cant load file ” + cfgFile
});
return
}
var data : String = unescape (cfg_lv.toString ())
data = data.split (“=&onLoad=[type Function]“).join (“”)
data = data.split (“&onLoad=[type Function]“).join (“”)
var lines : Array = data.split (“\n”)
var count : Number = 0;
token = {
};
configList = {
}
while (lines [count])
{
var actualLine = lines [count ++]
var firstCharacter : String = escape (actualLine.substr (0, 1));
if (firstCharacter != “%23″ && firstCharacter != “%0D” && firstCharacter != ” “)
{
var finalLine = actualLine.split (“\r”).join (“”)
var values : Array = finalLine.split (” “);
var finalValue : String = “”;
for (var i : Number = 1; i < values.length; i ++)
{
finalValue += values [i] + " ";
}
finalValue = finalValue.substr (0, - 1)
token [values [0]] = finalValue
configList [values [0]] = finalValue
}
}
dispatchEvent (
{
type : "complete"
});
}
public function read (variable : String) : String
{
return token [variable]
}
public function get list () : Object
{
return configList;
}
}
[/as]

Los archivos Fuente. http://klr20mg.com/archivos/config.zip

Estoy totalmente convencido que la mejor manera para manejar nuestras configuraciones en Flash sigue y seguirá siendo un archivo XML, pero para aquellos necesiten un archivo de texto plano que sirva como archivo de configuración simple con comentarios para los clientes necios jeje esta clase puede ser de utilidad.

Saludos!!