Flex es un framework de presentacion basado en Flash para construir aplicaciones RIA creado por la Empresa Adobe. Las aplicaciones creadas con Flex son aplicaciones Flash (.swf) como cualquiera de las que se encuentran hoy en día en Internet y que la mayoría de los browsers son capaces de ejecutar utilizando el plugin de Flash (instalado en el 98% de las PCs).

A diferencia del tradicional software de creación de animaciones Flash, orientado a la animación y al diseño, Flex es un framework de desarrollo orientado a la programación, sin líneas de tiempo y herramientas de dibujo, sino más bien enfocado a la programación (cosa que los programadores, en general, están más acostumbrados a hacer.) 

Comentaremos brevemente cómo dar los primeros pasos con este Framework.

Flex Builder 3

El Framework de Flex es gratuito, lo que signaifica que cualquiera puede bajarse el sdk de Internet y crear sus propias aplicaciones utilizando un editor de textos. Adobe también provee un IDE basado en Eclipse llamado Flex Builder. Con este IDE el desarrollo de las aplicaciones Flex se potencia ya que provee una interfaz WYSIWYG para la creación de las pantallas y permite hacer drag and drop de los componentes que se quieran utilizar en la aplicación utilizando una paleta de componentes:

A diferencia del framework en sí, el IDE Flex Builder es comercial y se puede probar por 60 días.

Instalación

Para instalar Flex Builder necesitaremos:

• JDK instalado.

• Eclipse JEE con WTP

• Plugin de Flex Builder para eclipse (La versión en plugin es más completa que la versión de Flex Builder embebido en eclipse que se baja de la web de Adobe). 

• BlazeDS : requerido si vamos a necesitar acceder a objetos JAVA en un servidor remoto. 

• Un web container, como Apache Tomcat.

Una vez instalados todos los componentes, podremos utilizar el framework de desarrollo flex+eclipse+tomcat para crear aplicaciones RIA.

Creando una aplicación en Flex

Para crear el primer proyecto Flex, se debe abrir el Eclipse Flex Builder y a continuación:

• File → New → Flex Project

• Elegir un nombre y una ubicación para el proyecto.

• Para crear una aplicación sencilla sin acceso a datos en el servidor, destildar la opción “use remote object access service” y continuar.

• Seleccionar el “Target runtime” Apache Tomcat v 6.0. Si no hay configurados Target runtimes, deben crearse con la opción New → Tomcat v 6.0 Server → En la opcion Server Runtime Environment debe seleccionarse uno o crear uno con la opción Add y luego seleccionando el directorio de instalación de apache Tomcat y los demás valores por default.

• Aceptar el resto de las opciones por defecto y finalizar.

Se abrirá la aplicación por default llamada main.mxml, en modo de diseño, donde se podrán arrastrar los componentes de la paleta para crear las aplicaciones.En este momento se pueden probar los componentes que vienen por defecto en el SDK:

• menús

• formularios con gran variedad de componentes visuales,

• graficos (charts),

• distintos tipos de navegadores (tabs, acordeones, stacks),

• componentes de acceso a servicios remotos, etc.

Se puede ver el código fuente que se va generando a medida que se arrastran los componentes en la vista "source" de la aplicación. Los componentes también se pueden agregar usando el editor del código, que tiene capacidades para autocompletar clases, atributos, etc.

Luego de probar los componentes que ofrece Flex, se puede ejecutar la aplicación desde un browser. Si por ejemplo el proyecto se llama Demo1 debe realizarse lo siguiente:

• Clic derecho sobre el nombre del proyecto → Run As → Run on Server. Si no ha sido seleccionado aún elegir Tomcat como se ha instaldo. Se inicia el server y la aplicación se deploya.

• Luego en el browser acceder a la direccion http://localhost:8080/Demo1/main.html (reemplazar el puerto con el correspondiente a la configuracion del tomcat)

Ejemplo de código

Un ejemplo sencillo de uso de los componentes se puede ver con el siguiente codigo fuente (main.mxml):

 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute" width="628" height="317">
 
    <mx:Script>
        import mx.controls.Alert;
 
        private function mostrarOk():void {
            Alert.show("Hola " + nombre.text + " " + apellido.text);
        }
    </mx:Script>
 
    <mx:Form x="33.5" y="25" width="566" height="283">
        <mx:FormHeading label="Datos Personales" />
 
        <mx:FormItem label="Nombre">
            <mx:TextInput id="nombre" />
        </mx:FormItem>
 
        <mx:FormItem label="Apellido">
            <mx:TextInput id="apellido" />
        </mx:FormItem>
 
        <mx:FormItem label="Fecha de Nacimiento">
            <mx:DateField />
        </mx:FormItem>
 
        <mx:RadioButtonGroup id="radiogroupSexo" />
 
        <mx:FormItem label="Sexo">
            <mx:HBox width="204" height="27">
                <mx:Spacer width="5" />
                <mx:RadioButton label="Femenino"
                    groupName="radiogroupSexo" />
 
                <mx:RadioButton label="Masculino"
                    groupName="radiogroupSexo" />
            </mx:HBox>
        </mx:FormItem>
 
        <mx:FormItem label="Estado Civil">
            <mx:ComboBox>
                <mx:ArrayCollection>
                    <mx:String>Soltero</mx:String>
                    <mx:String>Casado</mx:String>
                </mx:ArrayCollection>
            </mx:ComboBox>
        </mx:FormItem>
        <mx:FormItem width="341">
            <mx:HBox>
                <mx:Spacer width="104" height="1" />
 
                <mx:Button label="Aceptar" width="85"
                click="mostrarOk()" />
            </mx:HBox>
        </mx:FormItem>
    </mx:Form>
</mx:Application>