Flash MX dependable comboBox tutorial -- by Peter Elst
What is a dependable comboBox I hear you asking? Well its basically just a comboBox whose values are determined by the selected value of its parent comboBox. That may sound a bit confusing but you'll immediately get the picture when you see it in action.
If you ever tried to do dependable comboBoxes in HTML/JavaScript you know that it can be a real pain. Doing it in Flash MX is not difficult at all, with only a few lines of code required you can have it working in no time.
Let's start! The first thing we'll do is drag two instances of the comboBox component on stage. You can find the comboBox component in the components panel (window > components) when you choose "Flash UI Components".
Next you select one of the two comboBox instances and give it the instancename "main_cb" in the property inspector. After you've done that, select the other comboBox and give that the instancename "sub_mc".
For this example we'll be filling the main comboBox with some categories: "Cars", "Food" and "Drink". To do this, select the main comboBox and in the Component Parameters panel double-click on "Labels" to add these values.
The "Data" component parameter will be used to determine where Flash is going to get the values for the "sub_mc" comboBox. We'll set those values to "carArray","foodArray" and "drinkArray".
The changeHandler parameter determines what function is called when the selected value of the "main_cb" comboBox has changed. We'll set this to "setSubCombo".
What we do next is set the values for the "sub_cb" comboBox for each of the values we added to the "main_cb" comboBox. Make sure that the names you use for the arrays is the same as those we provided in the Data parameter:
carArray = new Array("Chrysler","Porche","Mazda","Toyota");
foodArray = new Array("Hamburger","Hotdog","Pizza");
drinkArray = new Array("Water","Beer","Wine","Martini");
The code above should be put on the first frame of the main timeline.
The "setSubCombo" changeHandler that we just set for the "main_cb" comboBox refers to the following code that we're going to put on the first frame of the main timeline after the arrays that we've set there:
function setSubCombo() {
sub_cb.removeAllItems();
var subArray = eval(main_cb.getSelectedItem().data);
for(var i=0; i<subArray.length; i++) {
sub_cb.addItem(subArray[i]);
}
}
What that code does is first of all remove any items left in the "sub_cb" comboBox. After that it looks at the data value of the selected item in the "main_cb" comboBox and evaluates that value. What that means is that it evaluates that string as a variable, in this case we'll be using arrays that contain the items for the "sub_mc" comboBox. When that is done the function loops through the array and for each element in the array adds a new item to the "sub_cb" comboBox.
Finally, we'll select the "main_cb" comboBox and in the component parameters add the label "Choose a category" above all the other labels and add a empty value above the other values in the data component parameter. This will make sure that if the first category is chosen it will trigger the setSubCombo function to fill the "sub_cb" comboBox.
If you test the movie and choose a value from the main comboBox you will see that the sub comboBox fills with the values that were specified in the array. Now wasn't that easy?
You can reach Peter by email.
Download the source file here.
|
