Video Tutorial Hola Mundo Flex

Este tutorial es para todas las sabias personas que han decidido empezar en el mundo de flex, es un video tutorial donde explico como crear la primera aplicacion en flex, con el típico "Hola Mundo".

Para empezar esta aplicacion debemos saber que flex es un lenguaje orientado a eventos, todos los controles (textBox, label, textArea, Botones, etc.) interactuan entre ellos disparando y escuchando eventos, por ejemplo:

Si queremos que cuando el usuario presione un botón se llene un label con un texto, entonces debemos decirle al botón que dispare un evento "click" y que cuando eso ocurra una funcion (tecnicamente llama "Handler") se encargue de realizar la accion de llenar el label con el texto deseado.



Un evento puede ser disparado por cualquier clase que implemente la interfaz IEventDispacher, todos los controles o componentes de flex la implementan, asi que pueden disparar eventos, la "Aplicacion principal" tambien puede disparar eventos, siendo uno de los mas populares y utilizados, el evento "creationComplete".

Un "Handler" puede llamarse por multiples eventos, como se muestra en este tutorial, el handler "init" se ejecuta en el evento "creationComplete" y en el evento "click", asi estos eventos sean disparados por controles diferentes.

Ya hablaremos un poco más de esto en los próximos tutoriales de eventos, asi que no debemos preocuparnos, es mucho mas fácil de lo que parece al principio, y ya van a ver que hasta le agarrarán el gusto a este estilo de programación.

Por ahora aqui les dejo el video tutorial y les coloco el descargable del código fuente de la aplicación, asi como el ejemplo funcionando:



Codigo

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
public function init() : void
{
label1.text = "Hola Mundo";
TextInput1.text = "Hola Mundo";
}

public function limpiar() : void
{
label1.text = "";
TextInput1.text = "";
}
]]>
</mx:Script>

<mx:Label id="label1" x="68" y="35" text="Label"/>
<mx:TextInput id="TextInput1" x="132" y="33"/>
<mx:Button id="Button1" x="215" y="63" label="Imprimir" click="init()"/>
<mx:Button id="Button0" x="130" y="63" label="Limpiar" click="limpiar()"/>

</mx:Application>

Ejemplo