Comunidad de diseño web y desarrollo en internet online

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.

 

img

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

img

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".

img

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".

img

Panel Navigator

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

img

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>)

img

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.

img

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>)

img

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.

img

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.

img

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".

img

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>.

img

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.

img

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.

img

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"

img

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.

img

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".

img

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.

img

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.

img

Archivos publicados

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

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

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate