Es una práctica habitual, al comenzar a utilizar un nuevo lenguaje de programación, crear un sencillo programa [1] Hola Mundo que nos muestre como escribir y ejecutar un pequeño número de sentencias. Pensando en todos aquellos que se aproximen a [2] Flex 2, he creido conveniente hacer un tutorial simple que muestre como crear un Hola Mundo en Flex 2 en unos pocos pasos claros y concisos.

El código como podeis comprobar, es muy sencillo:

Al compilar, el resultado obtenido es el siguiente:

(Flash Player 9 Requerido)

Veamos que pasos tenemos que hacer para compilar este pequeño ejemplo y luego compliquemoslo un poco añadiendo algo más...Flex, como podría ser una funcionalidad Drag'n Drop...

Hola Mundo Simple

El ejemplo es realmente sencillo y con solo seis pasos podreis tener compilado vuestro SWF. He intentado hacerlo lo más simple posible usando el SDK de Flex 2, para más información podeis visitar el siguiente [6] enlace. Relamente lo más fácil sería utilizar [7] Flex Builder 2, el IDE de Flex 2, pero esto lo dejaremos para otro momento.

1. Crea un fichero vacio llamado "HolaMundo.mxml" en la ruta que prefieras y copia el código anterior en el. Yo lo crearé en "c:\" para simplificar el ejemplo. Nota: El ejemplo lo haré desde Windows, pero el SDK es multiplataforma.
2. Descarga el [8] SDK de Flex 2. Recuerda que este SDK es gratis y que debes de tener Java instalado.
3. Descomprímelo en la carpeta que creas conveniente. Yo voy a usar "c:\flex_sdk_2"
4. Abre una ventana de comandos y cambiate al directorio bin de tu instalación. En mi caso "c:\flex_sdk_2\bin"
5. Ejecuta el compilador mxmlc.exe pasandole como parametro el fichero creado en el paso uno. En mi caso la sentencia sería: "mxmlc c:\HolaMundo.mxml"
6. Ya está. En unos segundos tendrás un fichero creado en "c:\" llamado HolaMundo.swf que puedes usar en tu browser favorito.

Hola Mundo (con Drag'n drop)

Vayamos ahora con un ejemplo algo más complejo, los pasos a seguir son similares a los del apartado anterior. Solo tendreis que crear un fichero de texto .mxml con un nombre diferente y compilarlo. Yo lo he llamado "HolaMundo_dnd.mxml". El código es el siguiente:

Y el resultado es el swf que viene a continuación:

(Flash Player 9 Requerido)

Ahora arrastrando la etiqueta "Hola Mundo" sobre la caja de texto podreis añadir el texto "Hola Mundo" a dicha caja de texto y además aparecerá un dialogo de alerta con ese mismo texto.

En este segundo ejemplo estamos usando el evento mouseDown para iniciar el arrastre del Label con el texto "Hola Mundo". Para ser capaz de recibir lo que estamos arrastrando, el TextInput debe definir un evento dragEnter. Por último, el TextInput también debe tener definido el evento dragDrop, donde le indicamos las acciones ha realizar siempre y cuando lo que arrastremos cumpla un formato predefinido(en nuestro caso "labelFormat"). Notad que labelProxy es una simple ayuda visual de cara a ver el texto que estamos arrastrando.

Conclusiones

Como podreis comprobar, Flex 2 es un framework que nos hace la vida más fácil a la vez que aumenta las posibilidades y herramientas a la hora de crear a la vez que simplifica mucho la programación gracias a una combinación inteligente de XML(mxml) con AS3.

Una consideración a tener en cuenta son los tamaños de los SWFs creados (115 y 138 ks respectivamente). Estos tamaños se deben a que estamos incluyendo el framework de Flex 2 en dicho SWF el cual nos aporta montones de controles, contenedores y funcionalidades listas para usar.

Apartir de aquí espero que os sea más sencillo empezar a explorar la inmensa cantidad de posibilidades que ofrece Flex 2.