martes, 24 de noviembre de 2009

ActionScript 3: Clase para crear un ComboBox con datos de un XML

Pues eso: Si tenés un combo box en tu biblioteca de flash y un .xml donde están sus datos puedes cargarlos dinámicamente utilizando una pequeña clase en actionscript.

Entonces:
1) Generá un archivo .fla que se llame "Ejemplo_combo_xml.fla".
1a) Poné en la biblioteca un ComboBox
1b) Definí la clase del documento como "Ejemplo_combo_xml" (en propiedades: Clase del documento: nombre de la clase)

2) Armá un archivo .xml llamado "Ejemplo_combo_xml.xml" que contiene la información para el combo de éste modo:

3) Generas un archivo llamado "Ejemplo_combo_xml.as" y acá empieza lo bueno. Este es el código que debemos escribir para crear la clase:

package{
import flash.display.*; //importo todos los displays
import flash.events.*; //eventos de movie
import flash.net.*; // clases para cargar xml
import fl.controls.ComboBox; //el combo esta previamente cargado en la biblioteca
//CLASE
public class Ejemplo_combo_xml extends MovieClip{
//CONSTRUCTOR - No me gusta poner cosas allí. Si es necesario iran variables.
public function Ejemplo_combo_xml(){
miNuevoCombo(); //llamo a la funcion mi combo
}
//FUNCION QUE CREA LOS COMBOS
function miNuevoCombo():void{
var miCombo:ComboBox = new ComboBox();
miCombo.width = 150; //ancho que quiero que tenga el combo
addChild(miCombo);
llenarCombo(miCombo);//Llamo a la funcion que va a cargar los datos en los combos
//FUNCION PARA LEER EL COMBOBOX CUANDO HAGA CLICK
miCombo.addEventListener(Event.CHANGE, cambiarCombo);
function cambiarCombo(evt:Event){
if(miCombo.value!="seleccionar"){
trace(miCombo.value);
}
}
}
//FUNCION PARA LLENAR LOS COMBOS CON EL XML DE PAIS
function llenarCombo(miCombo):void{ //RE
miCombo.addItem({label:"Seleccionar",data:"seleccionar"});
var generalXML:XML; //creo una variable tipo XML que contendrá el contenido del archivo .xml
var cargador:URLLoader=new URLLoader();//cargador del xml funciona/no funciona
cargador.addEventListener(Event.COMPLETE, cargarXML); // si todo bien con el XML llamo a la funcion que carga los datos en la variable XML
cargador.addEventListener(IOErrorEvent.IO_ERROR, errorCargarXML); //si todo mal con el XML te lo aviso
cargador.load(new URLRequest("Ejemplo_combo_xml.xml"));
//FUNCION QUE CARGA LOS DATOS DEL ARCHIVO .XML EN LA VARIABLE XML
function cargarXML(evt:Event):void {
generalXML=new XML(evt.target.data);
cargador.removeEventListener(Event.COMPLETE, cargarXML);
cargador.removeEventListener(IOErrorEvent.IO_ERROR, errorCargarXML);

for(var i:int=0;i<generalxml.children().length();i++){
miCombo.addItem( { label:generalXML.children()[i].attribute("nombre"), data:generalXML.children()[i].attribute("valor") } );
}
}
//FUNCION QUE AVISA SI HUBO UN PROBLEMA CON EL XML
function errorCargarXML(evt:IOErrorEvent):void {
trace("Error en la carga");
}
}
}
}

Si quieres el archivo fuente de este ejemplo dejame un comentario con tu mail y te lo mando.
Saludos!

7 comentarios:

Unknown dijo...

Que tal Chabat, esta muy bueno el ejemplo, solo que me marca un error en la parte de:
for(var i:int=0;i miCombo.addItem( { label:generalXML.children()[i].attribute("nombre"), data:generalXML.children()[i].attribute("valor") } );
}

te agradeceria si me mandas el codigo fuente, mi correo es miguelitoflak@gmail.com.
Gracias-------

Chabat dijo...

Hola Miguel, Gracias por interesarte en mi artículo.

El codigo ya esta corregido. El problema aparentemente fué que Blogger no se lleva bien con algunos carácteres compartidos con código html (< >).
Corregido y probado.

Luego contame como te fué. Saludos.

Unknown dijo...

Gracias Chabat por todo, me funciono perfectamente y me resolviste un gran problema.
Saludos y que estes muy bien.

Anónimo dijo...

Hola, buen ejemplo. por favor, me regalas el fuente a varsan61@hotmail.com. Gracias

Chabat dijo...

Hola. Gracias por ver el artículo. La verdad es que la fuente no la tengo. Pero si seguis los pasos del post funciona perfecto.
Cualquier iconveniente avisame.
Saludos!

Elkin C dijo...

Hola. Muy buen ejemplo. Ademas que el manejo de clases facilita el desarrollo. Me podrias enviar tu ejemplo. Gracias.

Chabat dijo...

hola, gracias por visitar mi blog. Como dije antes, la fuente no la tengo porque el ejemplo lo hice para el post. Pero si seguis los pasos funciona ok. Saludos y cualquier duda que tengas avisame!

El portal que comparte sus ingresos