Actualización de los ComboBox

Para este ejercicio utilizaremos un XML como fuente de datos externa y con ella poblaremos la información de dos Combo Box utilizando el HTTPService. Pero primero veamos el XML que utilizaremos.

<?xml version="1.0" encoding="utf-8"?>
<carrera>
   <curso periodo="Ciclo I">
      <materia>Estadística I</materia>
      <materia>Filosofía de la Calidad</materia>
      <materia>Física I</materia>
      <materia>Matemática I</materia>
      <materia>Psicología Social</materia>
   </curso>
   <curso periodo="Ciclo II">
      <materia>Estadística II</materia>
      <materia>Física II</materia>
      <materia>Matemática II</materia>
      <materia>Programación I</materia>
      <materia>Tecnología de la Información I</materia>
   </curso>
   <curso periodo="Ciclo III">
      <materia>Análisis de Sistemas I</materia>
      <materia>Base de Datos I</materia>
      <materia>Programación II</materia>
      <materia>Sistemas Operativos</materia>
      <materia>Tecnología de la Información II</materia>
   </curso>
   <curso periodo="Ciclo IV">
      <materia>Análisis de Sistemas II</materia>
      <materia>Base de Datos II</materia>
      <materia>Programación III</materia>
      <materia>Diseño Web</materia>
      <materia>Tecnología de la Información III</materia>
   </curso>
</carrera>

Primero declararemos la etiqueta HTTPService dentro del MXML, como necesitamos identificar esta etiqueta entonces utilizaremos la propiedad id, a la vez le especificaremos el nombre del archivo de XML e indicaremos el tipo de formato estándar e4x.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

   <mx:HTTPService id="cargaXML" url="recursos/materias.xml" resultFormat="e4x"/>

Dentro de la etiqueta Application mandamos a llamar un CreationComplete para solicitar los datos del XML utilizando el método send de HTTPService.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="cargaXML.send()">

Luego declaramos el primer ComboBox, este será nombrado como cboCiclo y el dataProvider poblara la información que entregue el HTTPService cargaXML. Recuerda que la propiedad lastResult solo puede ser utilizada cuando usamos un HTTPService y con la ayuda del formato e4x señalamos la etiqueta que vamos a utilizar –en este caso la etiqueta curso–.

<mx:ComboBox id="cboCiclo" x="10" y="10" dataProvider="{cargaXML.lastResult.curso}" labelField="@periodo" change="changeCboMateria(event)" prompt="Elija un periodo..."/>

Con el  método labelField extraemos el valor de la propiedad periodo del XML y a la vez usamos el evento Change que se activará al momento que el usuario hace clic sobre algún elemento del ComboBox. Para efectos de estética utilizamos la propiedad prompt para que el ComboBox nos imprima por primera vez la leyenda “Elija un periodo…”.

Necesitamos incluir el código ActionScript para que nos de la funcionalidad de actualización y para ello utilizaremos la etiqueta Script que puede ir por debajo de la etiqueta de apertura Application. Dentro de ella vamos a declarar una variable Bindable actualizaCboMateria del tipo XMLList, y declaramos la función changeCboMateria. La función a ejecutarse asigna a la variable actualizaCboMateria el nuevo contenido que poblara al segundo ComboBox cboMateria, esto a través de la propiedad selectedItem. Este contenido asignado será utilizado dentro del dataProvider del segundo ComboBox.

<mx:Script>
   <![CDATA[
      [Bindable]
      private var actualizaCboMateria:XMLList;

      private function changeCboMateria(e:Event):void {
         cboMateria.visible = true;
         cboMateria.includeInLayout = true;
         actualizaCboMateria = cboCiclo.selectedItem.materia;
      }
   ]]>
</mx:Script>

En el código anterior, las propiedades visible e includeInLayout es para hacer la solicitud de imprimir en pantalla el ComboBox cboMateria, esto es para darle una mejor interactividad al ejercicio. Veamos el segundo ComboBox:

<pre><mx:ComboBox id="cboMateria" x="10" y="40" dataProvider="{actualizaCboMateria}" visible="false" includeInLayout="false"/></pre>

Con esto, al seleccionarse un elemento del primer ComboBox este actualizará de forma automática el segundo ComboBox. Recuerde que el Documento XML tiene que estar bien formado. Veamos como quedo el código final:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="cargaXML.send()">

   <mx:Script>
      <![CDATA[
         [Bindable]
         private var actualizaCboMateria:XMLList;

         private function changeCboMateria(e:Event):void {
            cboMateria.visible = true;
            cboMateria.includeInLayout = true;
            actualizaCboMateria = cboCiclo.selectedItem.materia;
         }
      ]]>
   </mx:Script>

   <mx:HTTPService id="cargaXML" url="recursos/materias.xml" resultFormat="e4x"/>

   <mx:ComboBox id="cboCiclo" x="10" y="10" dataProvider="{cargaXML.lastResult.curso}" labelField="@periodo" change="changeCboMateria(event)" prompt="Elija un periodo..."/>

   <mx:ComboBox id="cboMateria" x="10" y="40" dataProvider="{actualizaCboMateria}" visible="false" includeInLayout="false"/>

</mx:Application>

Hola, espero te haya gustado y te sea util la información que hayas encontrado, esperamos que sigas aprendiendo y te invito a que revises todo el blog. Mientras agilizare el proceso de edición de información dentro del blog para que puedas encontrar diversos temas referentes a Flex Builder 3 y ActionScript 3.0.

Apoya al proyecto rias4u ingresando aquí!!! =D