Welcome!

Victor Rasputnis

Subscribe to Victor Rasputnis: eMailAlertsEmail Alerts
Get Victor Rasputnis via: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


Article

The Value-Aware ComboBox

Extending a standard Flex ComboBox by adding a missing property to it

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>


More Stories By Victor Rasputnis

Dr. Victor Rasputnis is a Managing Principal of Farata Systems. He's responsible for providing architectural design, implementation management and mentoring to companies migrating to XML Internet technologies. He holds a PhD in computer science from the Moscow Institute of Robotics. You can reach him at vrasputnis@faratasystems.com

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.