Friday, December 17, 2004 Macromedia Flex Custom Control Tutorial

Working on projects for the city, I've had to develop quite a few things from scratch. Part of our move into Flex was a demonstration to show how well it works and how quickly we can convert existing technologies. Currently we use ColdFusion to create our web sites, allowing access to Department of Transportation data, so converting the existing pages into Flex is the first step of our site redesign.

It's not hard to take a control and make it work as you want it too, but it is also quite easy to create your own control to both save coding and facilitate code reuse. Here is a simple example of how I took an existing combo box and refactored it.

Each code example has been tested as is and works. If you find an error, please let me know.

Step 1: Design

The existing site has two basic combo boxes: one to select the month, which determines actual or fiscal year, and one to select the year, from 1980 to present.

The easiest way to incorporate these combo boxes is to simply add two combo boxes and set their dataProvide to the listed information.

Step 2: Combo Boxes

Start a basic MXML application file and add two comboBoxes.

streetmileage.mxml 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
   <mx:ComboBox>
   </mx:ComboBox>
   <mx:ComboBox>
   </mx:ComboBox>
</mx:Application>

Step 3: Sample Data

Now we set our dataProvider for each combo box to display selected information. The first object in our dataProvider array is the selected item, so for a blank combo box we have to add a blank object.

Since our month combo box needs to display the month and date, but the ColdFusion web service needs only the date, we can set a data member to our object array and send the data not the label.

streetmileage.mxml 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
   <mx:ComboBox>
      <mx:dataProvider>
         <mx:Array>
            <mx:Object label="" data="" />
            <mx:Object label="January 1" data="January" />
            <mx:Object label="July 1" data="July" />
         </mx:Array>
      </mx:dataProvider>
   </mx:ComboBox>
   <mx:ComboBox>
      <mx:dataProvider>
         <mx:Array>
            <mx:Object label="" />
            <mx:Object label="1980" />
            <mx:Object label="1981" />
            <mx:Object label="1982" />
            <mx:Object label="1983" />
            <mx:Object label="1984" />
            <mx:Object label="1985" />
            <mx:Object label="1986" />
            <mx:Object label="1987" />
            <mx:Object label="1988" />
            <mx:Object label="1989" />
            <mx:Object label="1990" />
            <mx:Object label="1991" />
            <mx:Object label="1992" />
            <mx:Object label="1993" />
            <mx:Object label="1994" />
            <mx:Object label="1995" />
            <mx:Object label="1996" />
            <mx:Object label="1997" />
            <mx:Object label="1998" />
            <mx:Object label="1999" />
            <mx:Object label="2000" />
            <mx:Object label="2001" />
            <mx:Object label="2002" />
            <mx:Object label="2003" />
            <mx:Object label="2004" />
         </mx:Array>
      </mx:dataProvider>
   </mx:ComboBox>
</mx:Application>

Next