Hola Flex!

Este ejemplo muestra como cargar video a Brightcove usando la Media Write API en una aplicación Flex.

Incluye elementos del cliente y del servidor:

• En el lado del cliente, VideoUploader.mxml es un aplicacion Flex que ofrece al usuario una interfaz (UI) para navegar hacia y seleccionar un archivo para subir, muestra el progreso del proceso de carga, y llama al script proxy en el servidor. A su vez, lee el video Id si la llamada a la Media API es correcta, o un mensaje de error en el caso que la carga falle.
• En el lado del servidor, use un script proxy, en este caso una pagina JSP (Uploader.jsp) que recibe la multipart/form-data del cliente Flex, incluyendo el nombre del video, y un la descripción corta y larga, y si anuncios están permitidos o no. Este JSP desglosa la petición y es el que al final llama  create_video Media API.  Los resultados de la API, incluyendo el id del video recién cargado, se envían al cliente de Flex.

La aplicación Flex hace uso de las clase  FileReference para manejar todo lo relacionado a seleccionar el archivo de video, y pasarlo junto con los atributos del video a la pagina JSP.  Si no están familiarizados con esta clase, es posible que quieran leer primero la ayuda de Flex. Antes de usar este ejemplo, asegúrense de tener todos los componentes estén instalados. Todos los archivos que necesitan están incluidos en FlexVideoUploaderExample.zip:

1. Flex app. Extraigan  VideoUploader.zip e importenlo en Flex Builder. Opción Import > Existing Project Into Workspace > Select archive file > VideoUploader.zip. VideoUploader.mxml contiene la aplicación principal.
2. UploaderVideo.jsp. Extraigan uploader.war y copienlo a un servidor web que soporte Java. En Tomcat por ejemplo, solo necesitan copiar el archivo war bajo el directorio  webapps y es automáticamente reconocido.  Despues de eso, deben tener un proyecto web llamado uploader. Revisen los archivos en el proyecto. La pagina JSP se llama  UploaderVideo.jsp. Este JSP usa ClientHTTPRequest para manipular el multipart/form-data enviado a la Media API. El JSP también necesita los JARs Apache Commons commons-io y commons-fileupload , también incluidos en el archivo war. No necesitan cambiar la utileria ClientHTTPRequest ,  a menos que quieran usar otra utileria HTTP que pueda manipular el envio multiparte. Tambien antes de ejecutar este ejemplo, asegurense de añadir su propio token de escritura de la Media API en UploaderVideo.jsp.  Busquen por la variable WRITE_API_TOKEN y asignen su token ahi. Si no cuentan con un token, por favor contacten al servicio al cliente de Brightcove ( en Ingles)

La aplicación Flex

Sin han usado FileReference antes, notaran que este ejemplo basicamente usa los tres pasos principales para cargar un archivo a un servidor:

1. Navegar hacia y seleccionar un archivo.
2. Llamar a un script en el servidor después de que el usuario ha seleccionado un archivo, y
3. Manejar el resultado de la carga.

Navegando hacia el archivo

Esta acción es empezada cuando el usuario presiona el botón 'Upload' en la forma  uploadForm de la aplicación. La información acerca del video tiene que ser llenada. Noten que dado que solo queremos subir archivos de video, un filtro (FileFilter) con las extensiones comunes para video es usado. Este es también el lugar donde se ponen los metodos que procesan los eventos cuando el archivo es seleccionado (Event.SELECT) y cuando la carga se completa (DataEvent.UPLOAD_COMPLETE_DATA

 /**
   * Abre un mensaje de dialogo para que el usuario seleccione un archivo de vídeo

   * y agrega los métodos para procesar errores y cuando el video ha sido cargado al servidor

   */
    private function fileBrowse():void {
        fileRef = new FileReference();
        fileRef.addEventListener(Event.SELECT,selectHandler);
        fileRef.addEventListener(Event.COMPLETE,onComplete);
        // Procesar cuando el archivo de video ha sido cargado.
        fileRef.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA ,onUploadCompleteData);
        fileRef.addEventListener(IOErrorEvent.IO_ERROR,onError);            

        var videoFilter:FileFilter =
            new FileFilter ("Video (*.flv,*.mov,*.avi,*.mp4,*.wmv,*.mpeg)",
                                     "*.flv;*.mov;*.avi;*.mp4;*.wmv;*.mpeg");
        // Queremos subir solo archivos de video
        fileRef.browse([videoFilter]);
    }

Llamando al JSP despues de que el usuario ha seleccionado un archivo.

Usamos el método fileReference.upload() para llamar al JSP  y enviamos los meta datos del vídeo desde la forma (nombre, descripción, soporta anuncios , etc) como parametros. El JSP es donde en verdad se hace la llamada al metodo create_video de la Media API. Aqui seria donde agregarian mas meta datos como tags, cue points o ids de referencia.

private function selectHandler(event:Event): void {
 // Contruye una URL para llamar al script proxy en el servidor
 var request:URLRequest = new URLRequest(UPLOAD_VIDEO_URL);
 fileName.text = FileReference(event.target).name;

 // Enviar los atributos del video entrados por el usuario. La API de video
 // create_video soporta varios parametros. En este ejemplo son limitados a
 // shortDescription, longDescription, adEnabled, y name.
 // Cada atributo de 'createVideoParams'
 // debe pertenecer a uno de create_video
 // Para una lista completa de los atributos de create_video ver:
 // http://docs.brightcove.com/en/media/#Video_Write

 var createVideoParams:URLVariables = new URLVariables();
 createVideoParams.name=videoName.text;
 createVideoParams.shortDescription=shortDescription.text;
 createVideoParams.longDescription =longDescription.text;
 // Los videos que se cargan a Brightcove soportan anuncios de entrada
 // este ejemplo muestra como subir videos que no permitan anuncios, usando un

// parametro de create_video
 createVideoParams.adEnabled = adEnabledCheckBox.selected?"AD_SUPPORTED":"FREE";

 var parametersObject:Object = new Object();
 request.method = URLRequestMethod.POST;
 request.data = createVideoParams;
 fileRef.upload(request);
 fileUploadProgressBar.visible= true;
}

Procesando el resultado de la transferencia del archivo de vídeo

En onUploadCompleteData, verificamos que la llamada a  create_video en el JSP haya sido exitosa y el vídeo haya sido agregado. Si la llamada falla, un mensaje de error es regresado.  Si reciben un vídeo id, significa que el archivo ha sido agregado al sistema y esta siendo procesado. Pueden verificar el resultado de la transferencia usando la API  get_upload_status de la Media API o en el Media Module.

    /**
     * Se llama cuando UploadVideo.jsp termina de procesar la carga.
     * Si la llamada es exitosa, se puede leer el video id
     * de contenido de JSONResponse.result
     * Si falla, el mensaje de error con los detalles
     * puede leerse de JSONResponse.error.message
     */
    private function onUploadCompleteData(event:DataEvent):void {
     trace("onUploadCompleteData");
     var JSONResponse:Object = (JSON.decode(event.data));

        if(JSONResponse.error != null && JSONResponse.error != ""){
            videoResult.text = "Error : " + JSONResponse.error.message;
         }else {
            // Una llamada exitosa regresa el siguiente contenido JSON
            // {"result": 34414648001, "error";: null, "id": null}
            // Obtener el video id de la propiedad  'result'
            videoResult.text = " Video ID : " + JSONResponse.result;
        }
    }

El lado del Servidor

Entre el paso 2 y 3, la pagina JSP es llamada. El JSP analiza la información enviada por fileReference.upload() y prepara la llamada al método create_video. Este JSP es otra version del java servlet usado en un ejemplo previo "Java Example: Video Uploader", el cual usa HTML en vez de Flex. Una buena explicación del código puede encontrarse ahí. Una diferencia sin embargo, es la adición del parámetro 'anuncios' al subir los videos, para permitir o no anuncios de entrada, y es aqui donde se pueden agregar otros parametros que corresponden al video.  Así mismo, usando un script del lado del servidor protege su token de escritura para API.

Que sigue

Aunque este ejemplo demuestra la idea básica de usar Flex para subir vídeos a su cuenta en el sistema de Brightcove, puede ser expandido para incluir mas funcionalidad. Aquí un par de ideas que ustedes pueden implementar :

• Agregar suporte para subir vídeos usando etiquetas para su clasificacion (tags).
• Cambiar este ejemplo a una aplicación de Adobe AIR donde se pueda navegar al vídeo y verlo antes de subirlo.
• Agregar suporte para cue points.
• Obtener el estado de la carga del vídeo al sistema Brightcove. Tip: Llamar el método get_upload_status de la Media API

Espero escuchar pronto de lo que han desarrollado!

It was great to see everyone at Flex Camp Boston last Friday! As promised, here are the slides and source code from my presentation about Building Mashups with Flex. You will need to get your own APi keys for the NYT, Google, Ribbit APIs before you try it out

Source Code Download

 Este pregunta fue la primera en el foro que cree la semana pasada, y es una excelente pregunta tanto para empezar tanto para empezar el foro y para demostrar el uso de componentes en Flex.La pregunta original cuestiona sobre como insertar un ApplicationControlBar en el encabezado del Panel, pero mi respuesta aquí explicara algo más genérico, como insertar cualquier componente en tal cabecera. 

 Para los que no son tan familiares con el Panel en Flex, este tiene un encabezado, el titleBar, el cual tiene propiedades para poner el titulo del panel (title) y su status (status). Pero hay ocaciones que queremeos agregar mas opciones a tal encabezado. Pero como hacerlo? Cual es la mejor manera de agregar tales elementos?

 Tenemos que resolver dos problemas en este caso, primero como insertar tales componentes en el encabezado y segundo, como hacer que el Panel responda a la interacción con esos componentes.  En este ejemplo, para demostrar el primer caso agregare un componente al encabezado el cual contiene un solo botón, el cual dispara un evento, y para el segundo agregare lógica en el panel para escuchar por tales eventos y modificar el Panel, en este caso maximizar y minimizar dicho Panel. Como veran el manejo de eventos en Flex es muy necesario para desarrollar componentes. Si necesitan un repaso, pueden ver la ayuda de Flex o esta entrada que al respecto escribi el otro dia.

 Primeramente enlistare los pasos que seguí:  

•  

  1. Cree un componente – ActionBar.mxml - que contiene un botón y que dispara los eventos maximizarPanel y minimizarPanel.  Como verán en el código, este componente es completamente independiente y puede ser usado con cualquier propósito. Es más, el nombre de los eventos podría ser más genérico, pero he decidido dejarles los nombres que tienen por motivos didácticos. Puede ver que tiene una variable (maximizado) para mostrar ‘-‘ o ‘+’ como un indicativo visual de su propósito, es decir, maximizar (+) o minimzar (-) el Panel.

  2. Cree un componente que extiende el Panel -  PanelBar.mxml. Este componente es que el sobre todo nos interesa, ya que aquí esta el codigo que nos muestra primero como adicionar (ActionBar.mxml al titleBar del Panel ( usando createChildren y layoutChrome) , y segundo como responder a eventos disparados en ActionBar.mxml dentro de PanelBar.mxml ( usando addEventListener)

  3. Cree una aplicación solo para demostrar el ejemplo : PanelComponentApp.mxml

 Pero detengámonos un poco más en las funciones createChildren y layoutChrome usadas en este caso.  Si ya las han usado o están familiarizados con programación orientada a objetos los calificadores override protected no les serán extraños, pero si no es así, bueno piensen que lo que estan dicendole al Panel es algo como, “ hey Panel! Quiero que ejecutes esas funciones tal como ya sabes (lo cual indicamos llamando super.createChildren()), pero además quiero que ejecutes esto otro...”, es nuestro caso adicionar ActionBar.mxml al titleBar y posicionar ActionBar en layoutChrome. Como menciono en los comentarios, layoutChrome es llamado cada vez que se re-dibuja o actualiza el titleBar, lo cual lo hace el lugar perfecto para posicionar nuestro componente ActionBar. Podríamos haber usado UpdateDisplayList, sin embargo este es llamado cada vez que cualquier cosa cambia en el Panel, por ejemplo si adicionáramos contenido dinámicamente al Panel. Usando layoutChrome, el cual es solo usado para el titleBar y borders del Panel, nos ahorramos varias llamadas innecesarias.  Pero no olvidemos que esto ultimo es solo cierto para el Panel. Si están usando addChild en cualquier otro componente, seguramente tendrían que usar UpdateDisplayList para posicionarlo. Al mismo tiempo si el autoLayout del Panel es puesto a false o true, el layoutChrome es llamado en ambos casos. 

Asi pues es tiempo que les muestre el codigo o no? El propósito es meramente didáctico, y les queda de tarea tomar el concepto y crear sus propios componentes. Por ejemplo, en una versión completa, ActionBar seguramente puede usar customEvents para hacer el código mas genérico, y tal vez los botones puedes usar skins para mejorar su apariencia, y estos seguro que muchas mas.

Cuales ideas se les ocurren a ustedes?
 

--- ActionBar.mxml-----------------------------------------------------------------------

[Bindable(event="maximizarPanel")][Bindable(event="minimizarPanel")]

[Bindable] public var maximizado : Boolean = true;

if( maximizado )

dispatchEvent(new Event("minimizarPanel"));maximizado = false;

maximizado = true;dispatchEvent(new Event("maximizarPanel"));

<mx:Button label="{maximizado?'-':'+'}" width="50" click="resizePanel(event)"/>

<mx:Text text=" Contenido del Panel"/></mx:Panel> --- PanelComponentApp.mxml-----------------------------------------------------------------------

<local:PanelBar width="300" height="300" title="Mi Panel" status="Normal"/>

Compilado usando Flex Builder 3

Este es un caso común cuando se quieren adicionar columnas dinamicamente a un datagrid. El caso de uso, puede que se tienen que agregar columnas a un datagrid de acuerdo a alguna selección del usuario. El código principal de cómo hacerlo este en la función agregarDataGridColumn de este ejemplo. Lo demás son componentes auxiliares para mostrar el ejemplo. En este caso, se presentan solo dos columnas por default en el datagrid de cinco disponibles. Las tres restantes pueden agregarse dinámicamente presionando un botón. Hasta donde puede llevarse este ejemplo? Bueno se me ocurren algunas ideas.

Por ejemplo:

- En vez de botones se pueden mostrar las columnas restantes en una lista. Y tal vez agregarlas con Drag&Drop?
- Validar que no se agregue la columna mas de dos veces.
- Adicionar itemRenderers dinámicamente.

Que otras ideas se les ocurren?

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal"

import mx.controls.dataGridClasses.DataGridColumn;

var dgColumna:DataGridColumn = new DataGridColumn(dataField);var columnas:Array = dataGrid.columns;

<mx:DataGrid id="dataGrid"

400" rowCount="6">

 Como resultado de una pregunta que recibi, escribi este pequeño ejemplo de como llamar un WebService usando puro ActionScript.  Es un ejemplo basico, pero creo que cumple su cometido. Noten que el secreto, es que a diferencia del mxml tag, que maneja esto por nosotros, hay que cargar el WSDL antes de poder hacer llamadas a cualquiera de sus metodos.

  Espero que los comentarios tambien sean de utilidad:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal"

import mx.rpc.Fault;

import mx.rpc.events.ResultEvent;

import mx.rpc.soap.WebService;

private var webService : WebService = new WebService();

webService.wsdl = "http://www.webservicex.net/WeatherForecast.asmx?WSDL";

webService.GetWeatherByZipCode("02111");

textArea.text += "La temperature maxima para hoy en " + event.result.PlaceName + " , "+ event.result.StateCode + " es : " + event.result.Details[0].MaxTemperatureC + "C";

private function onWebServiceFault(event:FaultEvent):void {

var message:String = "An error occurred. The details are as follows\ncode: " + fault.faultCode;

trace("Web Service Error :" + message);

 Hace unos dias escuche de Todd Yard sobre como la propiedad cacheAsBitmap podria ser usada para conseguir algunos de los efectos que solo se logran si se usan embebed fonts, por ejemplo aplicar alpha a un texto.

 El uso de cacheAsBitmap en definicion no es complicado, ya que como programadores solo tenemos que ponerlo a true para indicarle al Flash Player que cree y conserve un bitmap de cualquier DisplayObject en memoria y use este para no re-dibujar tal DisplayObject. Con esto el Flash Player puede ofrecer mejor rendimiento. Regularmente cacheAsBitmap es usado en Display Objects que muestran contenido estático.

 Aunque aun sigo experimentando con esta propiedad, pude verla en acción al ver como aplicar alpha a un texto dentro de un Panel y al mismo titulo del panel sin usar embebed fonts. De acuerdo a mis pruebas no basta con poner la propiedad igual a true para forzar que una copia de un Text  sea guardado como bitmap en memoria por el Flash Player. De hecho parece ser ignorado. Sin embargo, esta propiedad es forzada a ser igual a true cuando se aplican filters al Text. Como en realidad no queremos afectar la apariencia del Text con un filtro, podermos  aplicar un filter ‘vacio’, por ejemplo un Blur(0,0), que no afecte al Display Object pero que pone el cacheAsBitmap=true.

   Pueden ver los resultados de mis pruebas aquí:

                   http://labs.holaflex.com/cacheasbitmap/PanelconAlpha.html       ( Pueden ver el codigo, mouse right click/ view source )

  Pueden ver como alpha del titulo del Panel cambia junto a la del panel mismo. Para este ejemplo cree un componente donde sobrescribí el metodo UpdateDisplayList para tener accesso al texto interno que representa el titulo del Panel. A su vez hay un texto dentro del Panel que también cambia a como se cambia el alpha del Panel, y un segundo que no cambia. Este ultimo para mostrar como se comportaría un texto sino se forzara el cacheAsBitmap a ser true.

   No he encontrado documentación que claramente especifique este uso, pero seguiré experimentando para ver mas se puede lograr. Por lo pronto les dejo el ejemplo para que pueden hacer sus propios hallazgos.

 Como ya he discutido antes, los componentes en el Flex SDK tienen propiedades, métodos y eventos que nos permiten manipular su apariencia y comportamiento. Por ejemplo, el siguiente mxml declara un botón con una leyenda y que ejecuta cierta función al clic.

   <mx:Button id="miboton" label="Presiona me" click="ejecutaFuncion()"/>

  Cada uno de los componentes en el Flex SDK tiene propiedades y métodos, tanto públicos, privados y protegidos. Esto es por su naturaleza Orientada a Objetos. Teniendo esto en consideración es posible modificar propiedades y métodos predefinidos sobrescribiendo (overriding) su definición. Para saber el alcance ( public, private o protected) de cada propiedad o método, y si son propios o heredados, recurrimos a la documentación de Flex (http://livedocs.adobe.com/flex/2/langref/). Ahí podemos ver las propiedades y su alcance.

   A como los componentes son mas sofisticados, encontramos que sus propiedades pueden provenir de un antecesor o están de otros componentes que son usados como parte de ellos, por ejemplo un Label dentro un Button.  Aun así, regularmente encontramos como cambiar cierta propiedad mirando la ayuda. Pero que pasa cuando esas propiedades no están disponibles? Por ejemplo, tomemos el dateChooser, el cual muestra en esencia un calendario. 
 

 Internamente el dateChooser esta haciendo uso de otros componentes Flex, y regularmente podemos hacer referencia a ellos para cambiarlos.  Por ejemplo los meses que por default están en Ingles pueden ser cambiados a Español como ya mostré en otra entrada. Sin embargo, digamos que queremos desaparecer los botones de avance y regreso de los meses. Tal vez queremos mostrar un mes en específico a la vez, y no queremos que el usuario tenga la opción de avanzar o regresar en meses.
Bueno curiosamente no existe una función o propiedad pública, privada o protegida que nos permita hacer referencia a tales botones. 
 Pero es claro que estos son dos buttons y que fueron declarados en algún lugar. Donde?. Bueno tomando una mirada a la clase original (DateChooser.as) se puede ver que si están declarados ambos botones: backMonthButton y fwdMonthButton.

 /**

mx_internal var fwdMonthButton:Button;

/**

Entonces si están como variables en DateChooser, pero no como public, private o protected, sino como mx_internal. Esta declaración, mx_internal, es diseñada para declarar variables de las cuales se pensó no son necesarias para el programador. Aunque en el caso del DateChooser y estos botones, yo diría que deberían estar disponibles y así pudiéramos hacerlos invisible con algo como:  

miDateChooser.backMonthButton.visible=false;

  Pero si hay una manera de accesarlos, usando el mismo mx_internal, podemos hacer referencia a dichas propiedades.

Esta seria una clase que extiende el DateChooser pero que esconde los botones de avance y regreso del mes usando mx_internal.

//DateChooserNoMonthButtons.as bajo fólder skins
package skins

import mx.controls.DateChooser;import mx.core.mx_internal;

          public class DateChooserNoMonthButtons extends DateChooser

                                         super.updateDisplayList(unscaledWidth, unscaledHeight);

                                        this.mx_internal::backMonthButton.visible=false;

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:calendario="skins.*">

Con un resultado como este:

Por default cuando datos son asignados al dataProvider de un combo box, este busca por dos atributos dentro los elementos de datos: el label y data. Lo contenido en el atributo label es lo que finalmente es desplegado en la lista, y data es accesible via selectedItem.data. Sin embargo, la mayoría de las veces nuestras fuentes de datos no tienen la información etiquetada de esa forma. Digamos por ejemplo que queremos mostrar la lista de Mascotas contenidas en el siguiente XML:

private var misMascotas : XML = <WSResult>   <Resultado>       <Mascotas>          <Id>001</Id>                                               <Nombre>Gato</Nombre>   

      </Mascotas>

      <Mascotas> 

          <Id>002</Id> 

          <Nombre>Perro</Nombre> 

      </Mascotas>  

 </Resultado>    

</WSResult> 

En este caso se nos presentan tres cuestiones a solucionar, no tenemos label o data como parte de los atributos en nuestro XML y los datos en los que estamos interesados ( <Mascotas> ) esta en un subnivel en nuestro XML. Entonces como hacemos que el combo box despliegue los nombres de las mascotas en el combo box?  Bueno para eso que el combo box cuenta con dos opciones para que manipular que atributo o atributos usar para lo que se despliega en esta lista. Estas son labelField y labelFunction. El primero simplemente le indica al combo box cual el nombre del atributo a usar en vez de label. En este ejemplo ya que queremos mostrar el nombre de la mascota, el cual es el atributo Nombre en el XML, este seria labelField=”Nombre”.  Por supuesto esto es valido si usamos la notación punto para acceder al nivel de XML que nos interesa, en este caso <Mascotas>. En sintaxis de AS3 esto seria: misMascotas.Resultado.Mascotas

En otras instancias es necesario desplegar en el combo box una combinación o concatenación de varios de los atributos. Por ejemplo, tal vez queremos desplegar el Id y Nombre de nuestras mascotas concatenado. Para esto puede ser usada el atributo labelFunction, el cual permite ejecutar una función que puede acceder a los atributos de los datos en el dataProvider y regresar dicha concatenación o combinación.

Un ejemplo completo de todo lo anterior es la siguiente aplicación. La cual muestra como usar un subnivel del XML como dataProvider para el combo box y el uso de labelField y labelFuncion.

import mx.controls.Alert;import mx.events.ListEvent;

private var misMascotas : XML =

mx.controls.Alert.show("Hello I'm "+ myCombo.selectedItem.Id+" "+ myCombo.selectedItem.Nombre, "Mensaje");

private function getIDName(oItem : Object): String

return oItem.Id + " " + oItem.Nombre;

<mx:ComboBox id="myCombo" x="10" y="50" labelField="Nombre" dataProvider="{misMascotas.Resultado.Mascotas}"

Como explique en una entrada anterior, el framework Flex es sinónimo de una colección de clases escritas enteramente en ActionScript, e incluye controles, contenedores, y gestores diseñados para la simplificar la construcción de aplicaciones sofisticadas para el Internet o RIA por su nombre en inglés ( Rich Internet Applications). A estos controles, contenedores o gestores, se les puede cambiar sus propiedades para obtener un comportamiento o apariencia especifica. De hecho en lo que probablemente mas se tarda alguien que esta aprendiendo Flex es en aprender la cantidad masiva de propiedades y métodos disponibles en todos los componentes y como usarlos. Por si solos los componentes Flex no crean una aplicación, es decir tienen que comunicarse unos con otros para responder a la interacción con el usuario y así representar una aplicación. El ingrediente que permite tal comunicación son los eventos o Events. Cada componente además de propiedades o métodos también tiene eventos predefinidos. Por ejemplo un botón (Button) tiene un evento click que se dispara cuando el usuario pulsa el botón en pantalla. A su vez, podemos crear nuestros propios eventos usando ActionScript, lo cual es común cuando queremos que dos o más componentes se comuniquen y necesitan intercambiar datos. El entendimiento de cómo funcionan y como usar eventos en Flex es una importante base para diseñar aplicaciones con una buena arquitectura. Principalmente para el re-uso de componentes. Aunque Flex permite hacer referencia a propiedades públicas de otros componentes dentro de otro componente, esta práctica no es buena por que este tipo de componentes no pueden ser extraídos para su uso en otra aplicación. A su vez entender como funcionan los eventos nos permite entender el comportamiento asíncrono de Flex con lo que a llamadas a data services se refiere (WebServices, Remote Object, http etc). Como todo en Flex, los eventos están basados en clases de ActionScript. En este caso, cada evento tiene un flujo con ciertos actores. Lo siguiente es una descripción simplificada de tales actores y su función:

1. Dispatcher: El objeto que es manipulado por el usuario y que dispara el evento. No olvidemos de que además de que los eventos son disparados automáticamente como respuesta a una acción del usuario también podemos dispararlos manualmente con ActionScript. ( Ver el uso de dispatchEvent en el ejemplo)
2. Event object : Este es un objeto creado de acuerdo al tipo de acción generada y es el elemento que toma información del dispatcher para compartirla con otros componentes. Por ejemplo, el clic de un botón dispara un evento cuyo tipo es MouseEvent, el cual tiene asociado un event object con información sobre tal evento, este podría contener un objeto con propiedades indicando las coordenadas X y Y donde el usuario hizo clic, así como una referencia al dispatcher.
3. Listeners: Objetos que escuchan y responden a dichos eventos, es decir, son los objetos que están registrados para tomar una acción cuando cierto evento es disparado en algún otro objeto.

La secuencia es sencilla: a) un objeto dispara un evento, b) el cual es representado como un tipo de object event y que entonces esta disponible para los listeners de tal tipo de evento, c) los listeners ejecutan una acción como respuesta al evento, donde pueden o no usar datos enviados por el dispatcher.Nótese que pueden ser más de unos los objetos listeners que respondan a cierto evento.

Veamos un ejemplo en MXML de lo anterior, que es la manera mas usada de responder a un evento en el mismo componente:

<mx:Script>

        <![CDATA[

            import flash.events.MouseEvent;

            private function manejadorClick ( event:MouseEvent ):void

            {

                trace( "Hola Mundo!");

            }

        ]]>

    </mx:Script>      

   <mx:Button id="miBoton" label="Presioname!" click=" manejadorClick(event);" />

En este ejemplo, se define un manejador para el evento click de un botón.  Cuando el usuario hace clic en el, el manejador para el evento

despliega el mensaje ‘Hola Mundo!’ en la consola a través de la función trace.Como también ya he mencionado antes, MXML es una vía corta que nos salva de teclear mucho del código ActionScript. En este caso, aunque no lo veamos declarado en AS, el Listener es la aplicación o componente que contenga al botón, el botón es el dispatcher y el event object es del tipo MouseEvent. Internamente este MXML hace uso de las clases de ActionScript para declarar el event object,  disparar el evento y declarar el objeto que escuche por dicho evento. Para verlo mas claramente veamos el mismo ejemplo pero ahora usando ActionScript.

<?xml version="1.0" encoding="utf-8"?>

<mx:Application 

    xmlns:mx="http://www.adobe.com/2006/mxml"      

    horizontalAlign="center" verticalAlign="middle" 

    width="300" height="200"

    creationComplete="manejadorCreationComplete (event);"> 

    <mx:Script>

        <![CDATA[

            import flash.events.MouseEvent;

            import mx.events.FlexEvent;

            private function manejadorCreationComplete (event:FlexEvent):void

            {

                // Escucha por el evento click event en el botón.

                miBoton.addEventListener (MouseEvent.CLICK, manejadorClick);

            }        

            private function manejadorClick ( event:Event ):void

            {

              miEtiqueta.text = "Hola Mundo!";

            }     

        ]]>

    </mx:Script>             

    <mx:Panel title="Mi aplicacion" horizontalAlign="center"

        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"    >

        <mx:Label id="miEtiqueta" width="180" fontWeight="bold" fontSize="24"/>

        <mx:Button id="miBoton" label="Presioname!" />

    </mx:Panel>

</mx:Application>

Esta vez hemos registrado el manejador para el evento usando la función addEventListener. Esto quiere decir que las siguientes dos líneas de código hacen lo mismo: miBoton.addEventListener (MouseEvent.CLICK, manejadorClick); Es lo mismo que click="manejadorClick(event);" dentro de

        <mx:Button id="miBoton" click="manejadorClick(event);" />         

El conocimiento del papel que juegan los Eventos en Flex es muy importante para el desarrollo de componentes. Lo presentado aquí es la idea

básica del manejo de eventos, pero aun hay más, como su propagación, sus fases, y su programación adecuada para el manejo de memoria. Pero eso lo dejaremos para más adelante.

Saludos desde Boston, una ciudad llena de Eventos!

Este es un breve ejemplo de como usar el comboBox, detectar cuando se ha cambiado de seleccion y usar un switch statement para inicializar una variable de acuerdo al valor seleccionado. Tambien muestra como usar dataBinding para llenar el comboBox usando un ArrayCollection.

import mx.controls.Alert;

import mx.collections.ArrayCollection;

[Bindable]private var myPets : ArrayCollection;

myPets = new ArrayCollection();

var oItem : Object;

oItem = new Object();oItem.name = 'dog';

oItem = new Object();oItem.name = 'cat';

oItem = new Object();oItem.name = 'fish';

var miSonido : String;

switch ( myCombo.selectedItem.name )

case 'dog':

break; case 'cat':

break; case 'fish':

break;

mx.controls.Alert.show("Hello I'm a " + myCombo.selectedItem.name + " "+miSonido, "Mensaje");

<mx:ComboBox id="myCombo" creationComplete="createDP()" labelField="name" change="getPetName(event)"/>