Wednesday, April 6, 2005 Macromedia Flex ComboBox Tutorial

Combination Boxes, or ComboBoxes, as the controls are named, are very useful to make a selection from a list of multiple items. You can easily clear up a form and display only the information you are looking for by tying the display to the selection of a ComboBox.

The ComboBox is very easy to set up, and its events are simple to react to. The following tutorial will walk you through using a ComboBox to select a phase, filling a second ComboBox with a list of tasks based on that phase. Then by selecting the task, populate a DataGrid control with the selected task information.

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

Step 1: Design

The design of the page is simple, two combo boxes and a datagrid. For a clean and ordered layout with labels, a Grid is useful.

Step 2: Combo Boxes

Start a basic MXML application file, add a grid with 2 labels and two ComboBoxes. Then add a DataGrid.

projtasks.mxml 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
   <mx:Grid>
      <mx:GridRow>
         <mx:GridItem>
            <mx:Label text="Phase" />
         </mx:GridItem>
         <mx:GridItem>
            <mx:Label text="Task" />
         </mx:GridItem>
      </mx:GridRow>
      <mx:GridRow>
         <mx:GridItem>
            <mx:ComboBox id="cboPhase">
            </mx:ComboBox>
         </mx:GridItem>
         <mx:GridItem>
            <mx:ComboBox id="cboTask" width="200" />
         </mx:GridItem>
      </mx:GridRow>
   </mx:Grid>
   <mx:DataGrid id="dgTasks" rowCount="2" editable="true">
      <mx:columns>
         <mx:Array>
            <mx:DataGridColumn headerText="" columnName="task" width="180" editable="false"/>
            <mx:DataGridColumn headerText="Original Cost" columnName="taskOrigCost" width="85"/>
            <mx:DataGridColumn headerText="Revised Cost" columnName="taskRevCost" width="85"/>
            <mx:DataGridColumn headerText="Original Start" columnName="taskOrigStart" width="85"/>
            <mx:DataGridColumn headerText="Original End" columnName="taskOrigEnd" width="85"/>
            <mx:DataGridColumn headerText="Revised Start" columnName="taskRevStart" width="85"/>
            <mx:DataGridColumn headerText="Revised End" columnName="taskRevEnd" width="85"/>
            <mx:DataGridColumn headerText="Actual Completion" columnName="taskComplete" width="100"/>
         </mx:Array>
      </mx:columns>
   </mx:DataGrid>
</mx:Application>

Step 3: Sample Data

Now we set our dataProvider for the first ComboBox to allow the user to select the project phase. The first object in our dataProvider array is the selected item, so for a blank combo box we have to add a blank object.

projtasks.mxml 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
   <mx:Grid>
      <mx:GridRow>
         <mx:GridItem>
            <mx:Label text="Phase" />
         </mx:GridItem>
         <mx:GridItem>
            <mx:Label text="Task" />
         </mx:GridItem>
      </mx:GridRow>
      <mx:GridRow>
         <mx:GridItem>
            <mx:ComboBox id="cboPhase">
               <mx:dataProvider>
                  <mx:Array>
                     <mx:String></mx:String>
                     <mx:String>Design</mx:String>
                     <mx:String>Right of Way</mx:String>
                     <mx:String>Construction</mx:String>
                   </mx:Array>
               </mx:dataProvider>
            </mx:ComboBox>
         </mx:GridItem>
         <mx:GridItem>
            <mx:ComboBox id="cboTask" width="200" />
         </mx:GridItem>
      </mx:GridRow>
   </mx:Grid>
   <mx:DataGrid id="dgTasks" rowCount="2" editable="true">
      <mx:columns>
         <mx:Array>
            <mx:DataGridColumn headerText="" columnName="task" width="180" editable="false"/>
            <mx:DataGridColumn headerText="Original Cost" columnName="taskOrigCost" width="85"/>
            <mx:DataGridColumn headerText="Revised Cost" columnName="taskRevCost" width="85"/>
            <mx:DataGridColumn headerText="Original Start" columnName="taskOrigStart" width="85"/>
            <mx:DataGridColumn headerText="Original End" columnName="taskOrigEnd" width="85"/>
            <mx:DataGridColumn headerText="Revised Start" columnName="taskRevStart" width="85"/>
            <mx:DataGridColumn headerText="Revised End" columnName="taskRevEnd" width="85"/>
            <mx:DataGridColumn headerText="Actual Completion" columnName="taskComplete" width="100"/>
         </mx:Array>
      </mx:columns>
   </mx:DataGrid>
</mx:Application>

Next