Tutorial de Flex Builder 2

Este tutorial pretende ser una guía básica para novatos en Flex, en el que veremos paso a paso cómo publicar una película lo más sencilla posible en ambos formatos.

El primer paso será tener instalado el programa Flex Builder 2. Podemos descargarnos una versión de prueba desde la web de Adobe. Utilizaremos Flex Builder para publicar películas tanto de Flex como de Apollo.

• Descargar una versión de prueba de Flex Builder 2*

 

Interfaz de Adobe Flex Builder 2.0.1

Crear una película nueva en Flex

Para empezar a crear una aplicación de Flex deberemos crear un proyecto nuevo.

• FILE > NEW > Flex Project

Proyecto nuevo

Como tipo de acceso a datos de la aplicación seleccionaremos "Basic". Daremos al botón "Next" e introduciremos el nombre para el proyecto, para este ejemplo utilizaremos el nombre "DEMO". Finalizaremos el proceso clicando en "Finish".

Tipo de aplicación

Una vez creado la carpeta del proyecto veremos que esta aparece en el panel "Navigator", y que automáticamente se ha creado el archivo "DEMO.mxml" y las carpetas "bin" y "html-template".

Panel Navigator

El archivo "DEMO.mxml" es nuestro archivo Flex.

Archivo "DEMO.mxml"

Igual que en programas como Dreamweaver, podemos intercambiar entre una vista de diseño a una vista del código. Si pulsamos en "Source" veremos el código actual consta de la etiqueta XML y de la etiqueta de aplicación Flex (<mx:Application></mx:Application>)

Código de la aplicación

Empezaremos a modificar la aplicación dándole unas medidas a la película Teniendo la vista de diseño activa y teniendo el fondo de la película seleccionado, introduciremos en el submenú "Layout" del panel "Flex Properties" un alto y ancho de película de 150 píxeles.

Modificar proporciones de la película

Si visualizamos ahora el código de la película veremos que estos valores se han introducido como parámetros de la etiqueta de la aplicación Flex (<mx:Application>)

Código de la película

Nota: Una vez tengamos más práctica programando en Flex veremos que estas propiedades de los componentes se pueden asignar a través de un archivo CSS externo en lugar de escribirlas como propiedades de las etiquetas.

Añadir componentes a la película Flex

Flex Builder dispone de un panel "Components" en el cual encontramos una lista de componentes que podemos utilizar en nuestra película. Para nuestro ejemplo el primer componente que utilizaremos será un botón simple.

Componente Botón

Arrastraremos el componente al lienzo de la película, utilizaremos el submenú "Layout" del panel "Flex Properties" para darle la posición correcta. Lo colocaremos a 10 píxeles del fondo y de derecha e izquierda.

Propiedades del botón

En el submenú "Common" le asignaremos un nombre de instancia (ID), y le introduciremos el texto que queramos que muestre el botón. Le colocaremos el texto "Push Me".

Propiedades del botón

Si miramos ahora el código de la película veremos que este componente botón se ha añadido como una nueva etiqueta (<mx:Button>) dentro de la etiqueta de la aplicación <mx:Application>.

Código de la película

El siguiente componente a introducir en nuestra película será en componente "Label". A este componente le daremosun ancho del 100% y lo centraremos tanto horizontal como verticalmente.

Propiedades del campo de texto

Le introduciremos las propiedades de texto: Arial, Bold, 18 puntos.

Y para acabar le asignaremos el nombre de instancia "texto", y haremos que sea un texto vacío.

Propiedades del campo de texto

Ejecutar acciones ActionScript 3

Una vez añadidos los componentes vamos a ver como ejecutar acciones en la película.

Seleccionaremos el componente botón, y en el campo "On click" introduciremos el nombre de la función de ActionScript que queremos ejecutar cuando este botón sea pulsado.

La función que queremos ejecutar se llamará "pushme"

Acciones para el botón

Nota: Hemos de añadir los paréntesis finales, no sólo el nombre de la función.
Ej: "pushme()" no "pushme".

Ahora vamos a crear esta función de actionscript dentro de nuestra película. Abriremos la vista "Source".

Las acciones de actionscript en las aplicaciones Flex se escriben en una etiqueta (<mx:Script>) dentro de la etiqueta de la película (<mx:Application>) justo antes de las etiquetas de los componentes. Y a su vez a de ir incluida dentro de un nodo CDATA.

Código actionscript en Flex

Aquí escribiremos la función "pushme()".

La función que crearemos será una función muy simple que únicamente añadirá el texto "Oh Yeah!" al componente de campo de texto "texto".

Función pushme();

Compilar la película Flex

Para compilar la película y visualizar el resultado clicaremos en el botón "Run" situado en el ToolBar.

Compilar aplicación

Una vez publicada la aplicación Flex veremos que en a carpeta "bin" situada dentro de la carpeta en la que grabamos nuestro proyecto encontramos tanto el archivo HTML como el archivo SWF de nuestra aplicación Flex.

Archivos publicados

Si quieres ampliar más información acerca de Flex puedes acceder a los siguientes tutoriales y contenidos adicionales:

• Acceder a bases de datos MySQL con Flex 2
• Creación de componentes para Flex 2
• Tips y trucos de Flex

En la siguiente parte del tutorial. Aplicaciones de escritorio con Adobe Apollo, aprenderás a crear programas con Flex 2 que funcionen como programas independientes del navegador, para Windows (.exe), Mac y Linux.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo