XML or (Extensible Markup Language) is definitely a friend of mines. I personally use it in my development for a lot of different things. Hard coded, dynamically generated...I just can't say enough about my buddy. What we'll be working on today will serve you well in your endeavors, I promise. Here's the final product:



Now, let's do some building!

Before we get into the Flash side we would need to build our XML list of states. Even though I've done it for you already (see download), this is how we'd code it from scratch:

[code]<?xml version="1.0" encoding="iso-8859-1"?>
<items>
<item id="1" lbl="AL" />
<item id="2" lbl="AR" />
<item id="3" lbl="AK" />
<item id="4" lbl="AZ" />
<item id="5" lbl="CA" />
</items>[/code]

Basic XML stuff here. We're going to take advantage of the "attributes" properties of our child nodes because, as you'll see, they make traversing XML trees a lot easier in Flash.

Now in our Flash file, which I named "states.fla", we'll start off adding (2) layers, "actions" and "combBox"




Next, hit Ctrl+F7 or go to Windows->Components to bring up the Components Panel. Make sure the "comboBox" layer is selected and drag a comboBox onto the stage.




And don't forget to give it an instance name. I chose "cmbState"




That's it for the stage. Now we can move on to the Actionscript...

Select your "actions" layer and open your actions panel. First thing we need to do is declare all the variables that we'll need in our code. Remember when I mentioned improving efficiency? Well, code organization definitely goes a long way to that end. Anyways, these are the variables we'll be using:

[as]//create all the variables you'll need
var i:Number;
var nodes:Array = new Array();
var states:Array = new Array();
var stateDP:Array = new Array();
[/as]

If you'll notice, the above code makes use of strict data-typing which basically means what it says. Take the variable i for example. Since I strict data-typed it to a number I can only assign numbers to it. This not only improves efficiency but it's also good programming practice.

Next, let's connect to our XML file we made earlier and call the function addStates once the file is successfully loaded

[as]
//setup your XML connection
var sXML:XML = new XML();
sXML.ignoreWhite = true;
sXML.onLoad = addStates;
sXML.load("states.xml");
[/as]

Now we'll fill all those arrays that we declared earlier with the help of our other good friend, the for..next loop.

[as]
//let the fun begin
function addStates(){
    //use the "nodes" array to refer to the xml kiddies
    nodes = this.firstChild.childNodes;
    for (i=0; i<nodes.length; i++){
        //loop through "nodes" and add each "lbl" attribute to the "states" array
        states.push(nodes[i].attributes.lbl);
        //now fill the comboBox's data provider with the contents of the "states" array
        stateDP.addItem({label:states[i], data:states[i]});
    }
}
[/as]

Don't get me wrong. You could accomplish this without using all the arrays that I did and just constantly refer to the XML nodes directly but this approach is neater or easier to read which I think is also I criteria in improving efficiency.

Last, but not least, we'll populate our comboBox on the stage with our list of states.

[as]
//bind the comboBox to its data provider
cmbState.dataProvider = stateDP;
[/as]

And there you have it. Now, all you have to do is setup XML files and customize the look of your component. Try throwing 3 or 4 combos on the stage, each pulling data from different XML files. Starting to look like an application, don't you think? Enjoy!

Hasan
hasan at marxmedia dot net