Llenar un Combo Box en Flex

Un ejemplo muy común en la mayoría de las páginas web, es que en los formularios cuando estamos registrándonos y ya sea en la fecha de nacimiento o para seleccionar el estado donde vivimos nos aparezca un Combo Box lleno con los posibles valores a elegir, otro de los usos, recién diseñe una aplicación para una empresa que se dedica a dar cursos de capacitación de diferentes aéreas, ellos querían que desde una página aparte de la de su web principal pudieran dar de alta cursos clasificados en diferentes categorías para ello querían que existiera un combo el cual se cargara con las categorías dadas de alta en su misma base de datos. Para fines de ejemplo la aplicación que les comento me quedo más o menos así:



Realizar este tipo de validaciones es muy útil dado que te aseguras que los usuarios elijan solo una de las posibles opciones disponibles.



Además en este ejemplo para darle un poco de más valor tomaremos en cuenta que hay algunos valores los cuales son demasiado largos y si dejamos que nuestro Combo Box se ajuste automáticamente y si encontrara un valor muy largo podría ocasionar que nuestra vista se viera realmente mal, la solución: darle un tamaño fijo al combo y mostrar los valores largos con tooltips, es una práctica muy usada y muy elegante además.

Bueno dejemos de hablar y vamos al ejemplo:

1.- Lo primero que vamos a hacer es crear un nuevo proyecto y lo nombramos LlenarComboBox

2.- Ahora vamos a crear el HTTPServices que sera el encargado de llamar al script PHP que nos devolvera el archivo xml que contendra las categorias con una estructura similar a la siguiente:



Creamos el servicio:

   
          url="http://www.genteestrategica.com.mx/
     paginaFlex/categorias.php" 
     showBusyCursor="true" 
     useProxy="false"  
     result="datosCombo=llenarCombo.lastResult.node.fila"/>

3.-Ahora creamos el codigo AS3 necesario para nuestra aplicacion:

     
   //import´s necesarios
   import mx.collections.ArrayCollection;
   import mx.controls.List;
   
   //Declaramos la variable que se
   //llenara con los datos traidos 
   //del HTTPService.
   [Bindable] 
    public var datosCombo:ArrayCollection;
   //Esta variable nos servira para
   //activar los tooltips
   [Bindable]
            public var tooltips:ClassFactory; 
   
   //La funcion init la vamos a ejecutar
   //en el creationcomplete de la aplicación
   public function init():void
   {
    //lanzamos el HTTPService
    llenarCombo.send();
    //instanciamos la variable
    //para los tooltips
           tooltips = new ClassFactory(List);
           //creamos una nueva variable que
           //nos servira para indicarle al 
           //ClassFactory cual va a ser el
           //nodo del xml que se va a mostrar
           //como tooltip
       var propiedades:Object = { 
         showDataTips: true, 
         dataTipField: "curso"
         }
         //asignamos.
          tooltips.properties = propiedades;
   }
  ]]>
 

4.-Por ultimo ya solo nos faltaria crear el Combo Box al cual le vamos a cargar esos datos y lo aremos de la siguiente manera:

     dataProvider="{llenarCombo.lastResult.node.fila}" 
     labelField="curso" 
     dropdownFactory="{tooltips}" 
     width="160">

Aquí podemos destacar: el dataProvider, es de donde obtendrá los datos nuestro combo en este caso le estamos indicando que los datos los va a obtener de HTTPService llamado llenarCombo, labelField es el nodo del xml que se va a mostrar en nuestro combo, dropdownFactory indica que queremos activar los tooltips y width es el tamaño de nuestro combobox.

Por último solo me resta ejecutar y mostrarles que efectivamente funciona:



Espero les sea de utilidad este tutorial ya que me dio mucho gusto hacerlo y mas compartillo con ustedes espero sus comentarios y sugerencias, cualquier duda pueden hacerla aquí directamente o en los foros de mi página principal http://foro.aprendiendoflex.com/ donde pronto pasare este tuto a video tutorial.