What I love about Adobe Flex is that it is a framework in addition to a pretty impressive library of off-the-shelf controls, which can fit the bill for many of the Rich Internet Applications. Flex enables you to create new and extend existing components with a simplicity and elegance hardly ever offered by other GUI development systems. In this article I'll show you how to start extending a standard ComboBox component, which is a combination of edit field, button and a dropdown list. We will be customizing the API and adding some new functionality, making our ComboBox a bit handier than a standard one.

A typical task, while working with a standard ComboBox, is to programmatically select a specific value. Suppose our ComboBox is populated with array of states:

    private var usStates:Array=[
       {label:"New York", data:"NY"},
       {label:"Colorado", data:"CO"},
       {label:"Texas", data:"TX"}
    ];
    . . . . . . . .
    <mx:ComboBox id="cbx_states" dataProvider="{usStates}"/>

To programmatically select Texas (to the visible portion of the ComboBox), you can write the following index-fetching loop, comparing val against the label of each element of dataProvider:

var val:String;

val = 'Texas' ;
for (var i: int = 0; i < cbx.dataProdider.length; i++) {
    if ( val == cbx_states.dataProvider[i].label) {
       cbx_states.selectedIndex = i;
       break;
    }
}

Alternatively, you could look up the data of dataProvider's elements :

var val:String;

val = 'TX' ;
for (var i: int = 0; i < cbx.dataProdider.length; i++) {
    if ( val == cbx.dataProvider[i].data) {
       cbx_states.selectedIndex = i;
       break;
    }
}

Either way these index-fetching loops will clutter the application code instead of simple cbx_states.value='Texas'.

But wait, there is a value property: if a selected object has something in the data property, value refers to data, otherwise value refers to the label:

    mx.control.Alert.show(cbx_states.value); // displays 'NY'

Alas, value is a read-only property. It is still helpful as it shields us from selectedItem/ selectedIndex. What we miss is another half and in the following sections we will turn value into a read-write property. That will forever absolve us from index-fetching loops to modify the ComboBox selection.

The simplest way to do this is by extending the original ComboBox so that derived class provides a special setter for the value property. The setter attempts to match the value with either data or label properties of the dataProvider. Once a match is found, it modifies the selectedIndex which should cause the ComboBox to select the matching object:

<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Script>
<![CDATA[
   public function set value(val:Object) : void {
     if ( val != null ) {
       for (var i : int = 0; i < dataProvider.length; i++) {
         if ( val == dataProvider[i].data || val == dataProvider[i].label) {
           selectedIndex = i;
           return;
     } } }
     selectedIndex = -1;
   }
]]>
</mx:Script>
</mx:ComboBox>

If the ComboBox.mxml is located under the com/theriabook/controls, its test application can look as in Listing 3 below.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*"
xmlns:lib="com.theriabook.controls.*">
   <mx:ArrayCollection id="comboData" >
     <mx:Array>
       <mx:Object label="New York" data="NY"/>
       <mx:Object label="Connecticut" data="CT"/>
       <mx:Object label="Illinois" data="IL"/>
     </mx:Array>
   </mx:ArrayCollection>
   <mx:Label text="Current bound value is '{cbx_1.value}' " />
   <lib:ComboBox id="cbx_1" value="IL" width="150" dataProvider="{comboData}"/>
</mx:Application>