How to populate a ComboBox from an XML file with Flash CS3

[Flep]

Did it ever happened to you to have to view a list of data in which every datum must be selectionable and show in turn a list?
Well, the comboBox component would do the trick :)
In this example, I insert in a ComboBox all the football's teams of 'serie A' and selecting one of them, the belonging list of players to that team is viewed in a List component.
To populate these 2 components, I take the data from an external XML file and I use a bidimensional Array with Actionscript 3.0.

Let's see how...

I create a FLA and saved it as 'combo.fla'.
I drag on stage:
- a ComboBox component named 'squadre_cb'
- a List component named 'giocatori_list'
I create a dynamic text field named 'num_txt'.

I create a Document Class, an AS file saved as 'conbo.as', implemented the following way:

package
{
	import flash.display.MovieClip;
	import flash.text.TextField;
	import fl.controls.ComboBox;
	import fl.data.DataProvider;
	import flash.events.Event;
	
	public class Combo extends MovieClip
	{
		private var loading_xml:LoadingXML;
		
		public static var squadre_array:Array;
		public static var giocatori_array:Array;
		
		public function Combo()
		{
			init();
			loadXML();
		}
		
		private function init():void
		{
			squadre_array=new Array();
			giocatori_array=new Array();
			
			squadre_cb.move(30,30);
			squadre_cb.width=100;
			
			giocatori_list.move(180,squadre_cb.y);
		}
		
		private function loadXML():void
		{
			loading_xml=new LoadingXML(this);
		}
		
		public function initCombo():void
		{
			for(var i:int=0;i < squadre_array.length;i++)
			{
				squadre_cb.addItem({label:squadre_array[i],data:i.toString()});
			}
			squadre_cb.addEventListener(Event.CHANGE,selezione);
			initList(0);
		}
		
		private function selezione(event:Event):void 
		{
			initList(squadre_cb.selectedItem.data);
		}
		
		private function initList(n:int):void
		{
			var dp:DataProvider=new DataProvider();
			var rows:int=giocatori_array[n].length;
			giocatori_list.rowCount=rows;
			for(var i:int;i < rows;i++)
			{
				dp.addItem({label:giocatori_array[n][i]});
			}
			giocatori_list.dataProvider=dp;
			num_txt.text='numero giocatori: '+rows.toString();
		}
	}
}

I create a class which will load the XML file, an AS file saved as 'LoadingXML.as':

package
{
	import flash.display.MovieClip;
	import flash.display.Loader;
	import flash.events.Event;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.xml.*;
	
	public class LoadingXML extends XMLDocument
	{
		private var my_root:MovieClip;
		
		public function LoadingXML(m:MovieClip)
		{
			my_root=m;
			this.loadXML();
		}
		private function loadXML():void
		{
			var loader:URLLoader=new URLLoader();
			loader.addEventListener(Event.COMPLETE,completeHandler);
			
			var request:URLRequest=new URLRequest('squadre.xml');
			try 
			{
				loader.load(request);
			} 
			catch(error:Error) 
			{
				trace('Impossibile caricare il documento.');
			}
		}
		private function completeHandler(event:Event):void
		{
			var loader:URLLoader=URLLoader(event.target);
			var result:XML=new XML(loader.data);
			var myXML:XMLDocument=new XMLDocument();
			myXML.ignoreWhite=true;
			myXML.parseXML(result.toXMLString());
			var node:XMLNode=myXML.firstChild;
			var n:int=int(node.childNodes.length);
			for(var i:int=0;i < n;i++)
			{
				Combo.squadre_array.push(node.childNodes[i].attributes['nome']);
				var giocatori:String=node.childNodes[i].firstChild.nodeValue;
				var array:Array=new Array();
				array=giocatori.split(',');
				Combo.giocatori_array.push(array);
			}
			my_root.initCombo();
		}
	}
}

Click here to view the XML file.

This is the result:

Let's analise the code of the Combo class:
I declare the needed variables
PS: the 2 arrays are statics so that I can call them from the loadingXML class (once the XML file is completely loaded) the following way: Combo.squadre_array e Combo.giocatori_array
private var loading_xml:LoadingXML;
public static var squadre_array:Array;
public static var giocatori_array:Array;

using the init method, I initialize both arrays and I position my objects on stage
squadre_array=new Array();
giocatori_array=new Array();
squadre_cb.move(30,30);
squadre_cb.width=100;
giocatori_list.move(180,squadre_cb.y);

I call the loadXml method in which I create an instance of the LoadingXML class, passing it 'this', which is nothing else then the _root used in Actionscript 2.0
loading_xml=new LoadingXML(this);

Let's analise now what's going on in the LoadingXML class:
I declare a MovieClip variable named 'my_root'
private var my_root:MovieClip;
Once the XML file is loaded, I start a cycle which has the number of XML's childs as a maximum length
var n:int=int(node.childNodes.length);
for(var i:int=0;i < n;i++)
into which I call Combo.squadre_array (I do not have to create an instance of the Combo class in this class to call this array as it has a static property). I take the value of the attribute 'nome' from the XML file's node 'squadra'
Combo.squadre_array.push(node.childNodes[i].attributes['nome']);
I create a String variable named 'giocatori' and I assign to it the value of the XML file's node 'squadra'
var giocatori:String=node.childNodes[i].firstChild.nodeValue;
I create a new Array named 'my_array'
var array:Array=new Array();
now, I have a string of all the player's names separated by a comma inside the variable 'giocatori'. I use the Split method with the comma as a delimiter to convert the string into an array
array=giocatori.split(',');
Let's pay attention! I insert into Combo.giocatori_array (obviously with the index equal to the cycle's iteration of the moment) my new array 'my_array'. So, the Combo.giocatori_array becomes a bidimensional array as each index does not contain a single value but another Array
Combo.giocatori_array.push(array);

Now that we have populated the Combo class Arrays, I call a method of the same Combo class named initCombo. This method is not static, which means that I must call the method from the instance of the Combo class... In this case, the declared variable 'my_root'
my_root.initCombo();

Into the initCombo method of the Combo class:
I populate the ComboBox using the ComboBox class method 'addItem'
for(var i:int=0;i < squadre_array.length;i++)
{
squadre_cb.addItem({label:squadre_array[i],data:i.toString()});
}
I add a listener to the ComboBox so that each time a new choice is made, the method 'selezione' is called passing the ID of the choosen item
squadre_cb.addEventListener(Event.CHANGE,selezione );
the method 'selezione':
I create a Dataprovider variable
var dp:DataProvider=new DataProvider();
I create a numerical variable and I assign to it, as a value, the Array's length placed at the index (passed from the selected ID's item of the ComboBox) of the Array 'giocatori_array'
var rows:int=giocatori_array[n].length;
I tell the List component the number of rows
giocatori_list.rowCount=rows;
I start a cycle and I populate the DataProvider using its method additem
for(var i:int;i < rows;i++)
{
dp.addItem({label:giocatori_array[n][i]});
}
I pass to the DataProvider's properties of the List component the variable dataProvider
giocatori_list.dataProvider=dp;
I pass to the text field the maximum number of players for the team which would be the value of the variable 'rows'
num_txt.text='numero giocatori: '+rows.toString();
Source files:

[cooljackD]

hi all,

how do you dynamically attach a combo box

i'm have lots of head ache trying to work with components in Flash cs 3
so i wanted to know how you would implement that using a document class
because just adding components on the root timeline and using it afterward just by using the instance name is not really a good approach, since you intend afterward to preload the whole application, doesm't it cause rather a big problem to just add bunch of component and then just use it. like adobe wants us too.

so if you know the solution, that would be great to know it.

[Flep]

Drag a component in the library.
Import the component class.
And:

var my_combo:ComboBox=new ComboBox();
addChild(my_combo);

[cooljackD]

ok so simple, but the linkage of the comboBox you have to export it to the firstframe, othewise nothing will appear ?

when you export all the mcs needed on the first frame this causes any preloader that i tried to make on the same first frame not to appear cause all the components are exported to the first frame unless you tell it not too.

i tried modifying the publish settings and tried to change the ref frame from 1 to 2
but still

there are other problems

that will arise i think

so what do you think would be the best way to use the combo box without it interfering with the frame 1 weight issue ?

thanks for the answers.

[Flep]

when you export all the mcs needed on the first frame this causes any preloader that i tried to make on the same first frame not to appear cause all the components are exported to the first frame unless you tell it not too.

Best way is to load the SWF that contains the componets into a main.swf

[cooljackD]

thanks for the quick answer.

so i did as you told, but now i'm facing another problem,

where should i declare the :
import fl.controls.ComboBox;
import fl.data.DataProvider;

it doesn't seem to detect the refered combo component in the loaded movieclip

How to refer to a Combo component placed in library of a loaded SWF?

thanks for answering to my annoying questions

[Flep]

Hi

Do not confuse the main.swf with loaded.swf .
Write your code and all your application inside of loaded.swf .
When you have finished and all is ok, load loaded.swf into main.swf then.

[cooljackD]

Thanks, i'm not confused anymore.

[samy4movies]

Hi Flep,
I have a form created with AS 2.0 and MX flash, but I am using CS3 now.
My question is how can I modify the script I have, to display the picture from the comboBox list. This comboBox is fill in from an XML file, that has the names and e-mails to be selected to send to.
Can you help me in fix it?
Here is the script I have, I also have the fla file and code.as files that has some interaction with the script.
----

txtStatus.embededFonts = true;
txtStatus.text = _parent.messageCombo;
mask.height = 0;
var emails.XML = new XML();
    emails.ignoreWhite = true;
    emails.onLoad = makeCombo;
    emails.load("emails.xml");
function makeCombo():Void {
    var r:XMLNode = emails.firstChild;
    var c:Number = r.childNodes.length;
        for (var i:Number = 0; i < c; i++) {
            var u:MovieClip = buttons.attachMovie("_item, "_item" + i, i);
            u._x = 0;
            u._y = 0 + i * 16;
            u.id = i;
            u.txtEmail.txt = r.childNodes[i].firstChild.NodeValue;
            u.onRealease = function():Void {
                bgCombo.colorTo(_parent.colorOut, _parent.bgVelocity, _parent,bgAnimation);
                txtStatus.efecto(r.childNodes[this.id].firstChild.nodeValue);
                mask.height = 0;
                _global.emailVar = r.childNodes[this.id].attributes.dir;
                trace(_global.emailVar)
            };
            u.onRollOver = function():Void {
                this.bgU.colorTo(_parent.colorOverCombo, _parent.bgVelocity, _parent.bgAnimation);
            };
            u.onRollOut = function():Void {
                this.bgU.colorTo(_parent.colorOutCombo, _parent.bgVelocity, _parent.bgAnimation);
            };
        }
};
btn_open.onRealease = function():Void {
    mask.height = buttons.height;
};
btn_open.onRollOver = function():Void {
    this.bg.colorTo(_parent.colorOverComboBtn, _parent.bgVelocity, _parent.bgAnimation);
};
btn_open.onRollOut = function():Void {
    this.bg.colorTo(_parent.colorOutComboBtn, _parent.bgVelocity, _parent.bgAnimation);
};

[Hugo]

Hello all
I’m new in the flash, I did download the zip and if I run the fla as test movie (Ctrl+Enter) it is no problem, but when I try to run the swf file then the combo just flashing from top to the bottom. My question is: what I do wrong, what is setting?? Thank you
Hugo