I have been following Ray Camden's series of posts on a Flex project he is working on.  During this project, he discovered that sometimes functionality you might expect does not exist (Though, in his example, the functionality he was looking for does exist).  I ran into a issue like this with <mx:ComboBox> on a recent project.

Let's say you have a form that allows you to update information about widgets, and one piece of information is the type of widget.  The type of widget is chosen from a comboBox, however, the value stored in the database is different than what you see in the combo box (think of an HTML select box - often we display a nice user friendly label, but store the 'value' which is some kind of an ID). There is no native method (at least not that I could find), that allows you to set the selected item based on the value of that item.  I could, however, loop over the data or dataprovider for the combo box and compare the value to that data and set the selectedIndex accordingly, however, this seemed...ugly, and could cause issues should I need to use this over and over.  The solution was actually quite simple, custom components.

Flex allows you to build custom components, based on native Flex containers or controls, that can each contain their methods, or even overwrite native methods.  I decided to build a custom component with the logic necessary to select an item based on the value.

Before we begin, create a new Flex project.  For this demo, you can just leave all the default values.

One of the first things I do when starting a Flex project is to add a 'components' directory to my Flex project.  You can name this anything you want, I prefer 'components'. 

To create a new component, right click on the 'components' folder and choose 'New --> MXML Component'. Give the component a name with a .mxml file extension.  In this demo, we will name it 'customComboBox.mxml'.  In the 'Based On:' form field, select 'ComboBox', and then click 'Finish'.

Congratulations, you just created a custom Flex component!

In order to use you component, you first need to add a namespace the <mx:Application> tag. You need to add xmlns:comp="components.*". Assuming you did n ot make any changes acfter creating the Flex project, your main application page should look like this:

To use our custom component, simply add the following between the opening and closing <mx:application> tags:

Now if you run the application, you will see an empty combo box on the page.  Before we get into modifying the component, let's add some data that can be used to populate the combo box.

Here we created an variable as an Array with an item that have a label and data (Think of labels as what is in between <option></option> tags, and think of data as the value attribute of the <option> tag.  We then set the dataProvider for our custom combo box to this variable.  If you view the application now, you will see that our combo box now has data associated with it.

We can now modify our custom component to give us the custom functionality we desire.  Open up '/components/customComboBox.mxml' if it is not already open and add the following code between the opening and closing <mx:ComboBox> tags.

Let's break down this code.  First, we are creating a public function named selectedItemByValue.  it needs to be public so that you can call this method from outside of the component.  This method takes one argument, which in this case must be an integer.  Nothing is returned from the method.

Next, we loop over the dataprovider and check to see if the value passed in equals the 'data' property of our dataprovider, if it does, we set the selectedcIndex of the comboBox to the current iteration of our loop.  If it doesn't match, we set the selectedindex to 0.  Id the value passed in does not match any items in the dataprovider, the forst item in the dataprovider will be shown.

If you compile and view the application, you will see nothing changes in what we can see.  Now we need to trigger the new method we just created.  For this demo, we will create 3 buttons and each button, when clicked, will change the comboBox to show the item with the matching 'data' property.

Add this code to your main application file after our custom comboBox.

You can see here that all we are doing is calling the selectedItemByValue() method of our custom combo box and passing in different values depending on which button is clicked.

Save and compile your application and then view it.  You will see that as you click each button, the appropriate item displays in the combo box.

You may want to keep this custom component in a place where you can easily copy it into other applciations.  I find that I use it frequently.