Flash Catalyst

Update - Junio 1 2009
Para bajar el beta de Catalyst pueden hacerlo desde aquí. Mas info aquí
Se encuentra en versiones para windows y mac.

A pocas semanas de una presentacion mas oficial de Flash Catalyst (previamente conocido como Thermo) tuve la oportunidad de asistir a una presentacion sobre el tema en el Grupo de Usuarios de Adobe en Atlanta. Fue una excelente oportunidad para ver la herramienta, hacer preguntas y ver la respuesta de los disenadores y programadores acerca de la herramienta, quienes a final de cuenta son quienes van a utilizarla.
Para quienes aun no saben que es, Flash Catalyst es una herramienta ideada por Adobe para el diseno de aplicaciones RIA, donde se le ofrece a los disenadores la oportunidad de verse involucrados en el desarrollo de la aplicacion de una manera mas sencilla y directa. Actualmente un disenador puede entregarle a los programadores una guia de estilos, imagenes cortadas, skins, etc y es responsabilidad del desarrollador en Flex la de poner esos elementos dentro de la aplicacion, sabiendo de antemano que por regla de dedo para la mayoria de desarrolladores si una imagen quedo en el pixel 253 y el disenador la queria en el 250, es lo mismo; sin embargo los disenadores sufren al ver tales alteraciones a su diseno y se viene la lucha por que quede todo igual como se muestra en el diseno original.
Este tipo de escenario en Flex, se ve muy repetido y de ahi la necesidad de crear una aplicacion que le permitiria al disenador ingresar al flujo de trabajo de la aplicacion. Catalyst permitiria al disenador importar sus disenos desde un PSD o archivo de Ilustrador o Fireworks o incluso crear ciertos elementos basicos desde su IDE, a partir de ahi podra convertir sus disenos en ciertos componentes de Flex con unos cuantos clicks, por ejemplo... podemos tener una caja de colores y el disenador con un par de clicks, lo puede convertir en un boton de Flex y la herramienta por si misma generaria el codigo MXML necesario para eso, que sera provisto posteriormente al programador. Se podran tambien crear estados (que esto cambiara con el Flex 4 de la manera en que se maneja actualmente), animaciones, etc y todo a unos cuantos cliks de distancia.
Programador y disenador podran hacer cambios a los archivos MXML desde Flex Builder u otra herramienta y se supone que Catalyst sera lo suficientemente inteligente para reconocer esos cambios y procesarlos recreando asi los cambios en los archivos sin tener que hacer todo de nuevo, mejorando muchisimo el flujo e interaccion de diseno-programacion.

Status Actual:

• Catalyst funciona unicamente con el Suite CS4.
  
• Funciona unicamente con Flex 4 (que esta en etapa de prueba igualmente)
  
• Funciona actualmente solo en Mac OSX
  
• Se encuentra en una fase muy temprana de desarrollo y se espera sacar un release por ahi de finales del 2009.

Ventajas:

En mi opinion Catalyst podra:

• Mejorar flujo y comunicacion entre disenadores y programadores.
• Mejorar los procesos de desarrollo en empresas que utilicen ambos grupos.
• Creacion de Prototipos (esto es lo que mas me gusta). Ya los disenadores e incluso personas de UX podrian crear prototipos funcionales sin necesidad de utilizar un programador o usar muy poco de ellos.

Este servidor tiene una copia de Catalyst con la que estara jugando en los proximos dias, mientras vaya encontrando cosas interesantes las pondre por aqui...
Saludos

El Modelo Alfabetico

¿Quieres ser hombre completo,
hombre a prueba de alfabeto?
Se amable, activo, aseado,
bondadoso y bienhablado,
Claro, mas cauto en confianzas,
sordo a chismes. parco en chanzas,
libre en digna dependencia
del deber y la conciencia;
Experto en algo especial,
franco, fiel, firme, formal,
Grato, generoso, humano,
buen hijo, esposo y hermano,
ejemplo a la ingenua infancia;
Justo, jovial sin jactancia;
gentil en serios hechizos,
no en modas, polkas y rizos;
Leal a la Ley, laborioso,
modesto, no malicioso,
natural, noble en tu modo;
con orden y objeto en todo;
Paciente y perseverante
( Primer prenda del triunfante);
Patriota puro y pacifico;
puntual, no en parla prolífico
ni Quijote o Quejumbroso.
Se realmente religioso
sin superstición salvaje,
Sobrio en juicio, en boca, en traje;
Servicial muy tolerante
Útil, veraz, vigilante,
Valiente, no vengativo,
ni un Yoista repulsivo.
se exacto como un reloj
nunca zángano, ni Zafio;
se otro Washington, si hay dos;
y haz que diga tu epitafio:
Honro a Padres, Patria y Dios.

Rafael Pombo

Smartfox Server - Servidor Juegos para Flash

Como muchos de los hits de este blog vienen de un blog dedicado a la creacion de juegos en Flash y Flex y como tengo un poco(muy poco) de experiencia en esa area sobre todo tratando con servidores para juegos o para chat, he decidido subir un pequeno codigo que crea una muy simple aplicacion en Flex que se encarga de conectarse a un servidor de juegos que se llama SmartFoxServer que es uno de los varios servidores de juegos para flash. Este esta basado en Java lo cual permite que el servidor corra en Linux, Windows o Mac OS sin ningun problema. La documentacion y ejemplos es bastante buena, aparte de un buen soporte del vendedor.
Este ejemplo funciona con la licencia gratuita del Smartfox Pro, que es para 20 usuarios concurrentes. Es una simple comunicacion de chat(envio de mensajes) entre varios usarios, conectados a un cuarto, aunque puede crecer utilizando variables de usuario, variables de cuarto ambas excelentes para la creacion de MMOs o Juegos masivos donde los usuarios ven como se mueven los otros usuarios en tiempo real... creacion de cuartos dinamicos, etc, etc, etc.
El servidor es muy completo, lo unico es que su escalabilidad no es tan sencilla aunque ahora se brinda una solucion con Terracota, una utilidad que nos permite tener varias maquinas virtuales en varios servidores, como si fuera una sola.

Codigo adjunto, la clase que maneja la interaccion es: SmartfoxInteraction.as, el servidor de SFS debe estar corriendo antes de ejecutar la aplicacion.
Saludos

Costa Rica Java User Group

Que bueno fue poder haber asistido a la reunion del Grupo de Usuarios de Java de Costa Rica hoy en la Ulatina... aparte de que fuera una excelente oportunidad para conocer a otros desarrolladores en otras areas, fue excelente poder ver la exposicion de Ben Galbraith y de Dion Almaer.
Estos dos son de los mejores expositores que he visto en mi vida. Una claridad... tanto en los slides usados como en los ejemplos como en la interaccion entre ambos, el conocimiento que tienen... sin palabras!!! En cuanto al contenido de la presentacion bastante claro, empezando por una EXCELENTE introduccion a la necesidad de crear mejores experiencias de interactividad al usuario y como una interfaz no solo bonita, sino que cumpla con el objetivo del usuario puede marcar la diferencia (mostraron bastantes ejemplos). Ademas, fue impresionante ver el desarrollo que ha tenido AJAX y lo que esta pronto por salir... pude ver cosas que pense nunca poder ver en un browser sin correr una maquina virtual como el Flash Player o Java Virtual Machine. Igual... no cambio a Flex... aunque lo que vi fue bastante impresionante y esto ayuda a que todo se ponga mejor y haya mas competencias para brindar mejores experiencias a los usuarios.
Felicidades a Maricel la organizadora del grupo y su grupo de ayudantes... iniciativas de este tipo y otras que ya hay, son las que ocupamos para poder crecer como pais en conocimiento y tecnologia...
Por cierto, en la rifa del final me gane un excelente libro... Yaaayyy!!!

Pruebas - Integracion de Aplicaciones

Aunque nuestros desarrolladores de lado del servidor prueben su codigo, y nosotros probemos nuestro codigo (con flex unit, mercury, flexmonkey o lo que queramos usar) el proceso de integracion entre cliente y servidor es necesario probarlo con ambos capas interactuando juntas (no solo por aparte) y de manera continua y automatizada para comprobar cualquier cambio o problema que se pueda encontrar.

Con Flex el problema es que nuestros llamados son asincronimos y no tenemos idea cuando vamos a recibir la informacion de vuelta. Esto hace que nuestros tests usando FlexUnit (la principal unidad de pruebas para flex) pasen efectivamente aunque la respuesta del servidor no sea correcta (esto por la naturaleza sincronica del flexunit) ya que el assert no se ejecuta hasta que se regrese el llamado del servidor y la unica forma de arreglar esto es usando un pequeno hack con un Timer, que la verdad hace el diseno de pruebas complicado, tedioso y dificil de mantener.

En cambio utilizando la unidad de pruebas llamada Fluint tenemos una orientacion completa a llamados asincronimos. La naturaleza de la unidad es esa y falicita las pruebas no solo de llamadas remotas, sino tambien de creacion de componentes, integracion de componentes, etc. Su documentacion aunque no es la mejor es bastante buena y el codigo es abierto. Tiene ademas un Runner de las pruebas que es ejecutable en AIR,  y genera reportes en archivos XML intepretables por parte de alguna herramienta que utilicemos para el continuous integration, como Cruise Control o Hudson. 

En general Fluint cumple mas alla de mis expectativas ya que su soporte asyncronimo es perfecto para todo lo que ocupamos probar, a diferencia de lo que hacer FlexUnit. Mas adelante quisiera exponer un poco con herramientas de automatizacion de pruebas como Mercury o Flex Monkey que parece ser una excelente opcion open source para esto.

Todo esto como buenas practicas que desarrolladores de Flex deberiamos de tener en nuestro repertorio... Son cosas MUY importantes y que crearan un desarrollo mas fluido y tranquilo. 

Aqui un pequeno y muy BASICO ejemplo para probar llamadas remotas:

/**
* Prueba, invocamos al metodo login de nuestro servicio con
* los parametros 'username y 'password'
* y se crea un responder de tipo TestRespoder que provee Fluint para
* poder saber quien recibira que en nuestro llamado
*/
public function testLoginService():void
{
   var responder:IResponder = asyncResponder(
                new TestResponder( handleResult, handleFault ) , 3000 );
   var token:AsyncToken = remote.getOperation('login').send("username",
                                                            "password");
   token.addResponder(responder);
}

/**
* Handle del result de la llamada. Hacemos el Assert.
*/
private function handleResult( data:Object, passThroughData:Object ):void
{
   trace(data);
       assertNotNull(data);
}

/**
* Handle del fault de la llamada. Inmediatamente despachamos un
* Fail del test.
*/
private function handleFault(  info:Object, passThroughData:Object ):void
{
       fail("Received fault from Server: " + info);
}

Integracion de Aplicaciones con Flex

Recientemente me solicitaron dar un training para desarrolladores de Flex para Java. Mi proposito era primordialmente presentar la herramienta de Flex a nuestros desarrolladores (que son bastantes) y a la vez enfocarme en la necesidad de estandarizar el proceso de la creacion de aplicaciones que utilicen ambas tecnologias.

Mi transfondo tecnico viene de Java y hace cuestion de dos anos le agregue a mi carrera el Flex. Fue una desicion dificil y confusa por la falta de conocimiento de dicha tecnologia, pero al final creo que tome la desicion correcta. Java y Flex es una mezcla excelente para la creacion de aplicaciones y tener un conocimiento en ambas tecnologias me ha podido dar una valor agregado para ofrecer.

Creo que en esto de aplicaciones con Flex y Java hay mucha tela que cortar. He hablado previamente de tecnicas como el remoting, llamadas asincronimas y otras cosas que nos permiten comunicarnos con el servidor para interactuar en nuestra aplicacion, sin embargo el sentido de este post va mas orientado al proceso y trabajo que tiene que haber para unir a estos dos juntos...
Flex como front end provee muchas ventajas que otras herramientas no pueden proveer en un 100%, empezando por que el virtual machine donde corre (Flash Player) esta instalado en mas de un 95% de las computadoras del mundo. Java, un lenguaje maduro, activo, con una comunidad de desarrolladores de mucha experiencia y que va rejuveneciendose poco a poco es una excelente desicion para construir aplicaciones transaccionales. La ventaja con Flex es que no solamente tiene que trabajar con Java, el puede trabajar con .Net, Ruby, PHP, etc... lo cual permite que la escogencia del servidor de aplicacion sea mas flexible.

Pero como dije.. este post no va en lo tecnico, que es mejor?, cual es mas rapido?, etc... este post va mas orientado al proceso de integracion entre Flex y una aplicacion de servidor, escrita en el lenguaje que usted quiera. Parte de mis conocimientos tecnicos hablare mas sobre java.
He podido trabajar en varias aplicaciones de tamano considerable en las que se usa Flex y una aplicacion en el servidor (Java en cada caso y ayude en una con PHP). En todos los casos noto lo mismo:

La integracion es la etapa mas dificil de todo.

Una incorrecta integracion hace que todo el desarrollo sea mucho mas lento. Podemos desarrollar nuestra aplicacion Flex en un dia y la aplicacion en el servidor en un dia tambien... y la integracion de algo sencillo puede tomar 2 dias mas...
Aqui una lista de razones por las que pienso esto pasa:

• Falta de comunicacion entre los equipos de desarrollo. No se mantienen reuniones entre los equipos donde se definan que servicios, metodos, parametros y tipos de retorno se van a maneja o cambios que se hayan realizado. Esto hace que sea todo una caja negra, que se trate de integrar algo y se pasen parametros equivocados, que se llamen a metodos incorrectos, que se esperen valores distintos. 

• Relacionado con lo anterior... no existe documentacion de los servicios expuestos por la aplicacion para ser accesados desde el front end. Si existiera una documentacion detallando descripcion, nombre del metodo, parametros, tipo de retorno, etc. que pueda ser accesado por todos los desarrolladores, en un solo lugar (wiki, etc.) facilitaria muchisimo la comunicacion y el desarrollo no se veria tan parado al hacer la integracion.
  
• No existen por lo general pruebas de integracion. Podemos crear JUnits para probar nuestros metodos en Java, podemos crear Flex Units para probar metodos en Flex, pero por lo general no existe un mecanismo para probar la integracion. Por que es necesario probar esto? Bueno.. aunque nuestros JUnits salgan correctamente, debemos recordar que en el medio (entre Flex y nuestro back end) hay una capa de comunicacion en lo que pueden pasar muchisimas cosas, desde tipos de datos no reconocidos, nombres incorrectos de metodos hasta problemas con el servidor, que debemos ser capaces de probar. Mi propuesta inicial es hacer Flex Units con soporte para operaciones asincronimas que sean ejecutadas desde la maquina del developer del Back End y se encarguen de llamar los metodos remotos. Si algo falla en esos tests units a la hora de interactuar con los servicios o metodos provistos por nuestro back end, podran ser revisados y corregidos por parte de nuestros desarrolladores. Los programadores en Flex mientras tanto, pueden continuar con otras tareas sin tener que esperar a que cada vez que algo falle, sean arreglados.
  

Otra herramienta que he visto y me parece muy interesante es el uso de Mercury Pro, que viene con el Flex Builder y te permite crear pruebas de aplicaciones a modo de macros o robot, donde se graba una interaccion con una aplicacion y se graba toda la secuencia para probar que siempre de el mismo resultado. Igualmente si Flex Unit no te es funcional, puedes crear tu propia unidad de pruebas, talvez demore mas tiempo pero te dara mayor tranquilidad.

Otros pensamientos relacionados:

• Quien lleva la batuta a la hora de escoger que metodos o servicios se van a exponer en una aplicacion al front end? Sera tarea solo del back end o tarea del front end? Estoy convencido que es una tarea de ambos equipos y que la comunicacion tiene que ser clave y en doble via. Front End provee una perspectiva de lo que necesita ser ingresado por el usuario para funcionar, pero back end provee una vision completa de todo lo que ocurre en un sistema y no solo en una pantalla. Nada peor que una aplicacion disenada enteramente por pantallas.. de ahi mi consejo de establecer estos servicios y metodo de forma conjunta.

• Aunque de pereza y duplique el trabajo, es NECESARIO el uso de DTO's o Value Objects para comunicar informacion del back end al front end, sobre todo si se usa Remoting. Esto es necesario para evitar problemas con sesiones, enumeraciones y otras cosas que no esten aceptadas por Flex y que vayan a ser recibidas incorrectamete ademas nos permite obtener abstracciones mas exactas a lo que necesitemos.
  

Espero poder ahondar en otros temas relacionados a esto en un futuro...

Flex Tag Cloud Component Version 0.1 - English Below...

Trabajando en un proyecto personal en AIR, encontre la necesidad de usar un componente de tipo Tag Cloud Lo primero que hice fue buscar por un componente hecho en Google, pero no pude encontrar nada asi que decididi empezar a disenar el mio. El resultado esta arriba.
El componente es rellenado con un Array de Tags. Un Tag es un objeto con tres propiedades: tagId,description y count; el primero un identificador unico y numerico del tag en caso que se necesite, el segundo la descripcion o texto del tag y el ultimo la cantidad de repeticiones de un tag, que indicaran el tamano del tag en el componente. Cuando se presiona un tag se despacha un evento tipo TagCloudEvent con la informacion del tag.
Aun no esta completo, se necesita trabajar en estilos y poner el codigo disponible en alguna forma, por ahora se puede bajar un SWC con el componente y el ejemplo.

Ejemplo
Componente


While working a personal project in AIR I ran into the need of using a simple sort of "Tag Cloud" component. I decided to "googled" out for a component already created but I wasn't able to find anything so decided to sit and create my own component.. it's not perfect and still needs a lot of work (specially with styles) but is functional...
The Component is filled with an array of Tag objects. A Tag object contains a numerical Id, a description and a count with the amount of appearances of the tag which is used to decide the size of it in the cloud. When a Tag is clicked a TagCloudEvent is dispatched with the information of the tag so that you can use that information to search or do what ever you need...
As I said there's still a lot of work needed to be done and will release it's code later, for now you can download the swc component and the example of how to use it.

Example
Component