Wednesday, April 6, 2005
Macromedia Flex ComboBox Tutorial (cont.)
Step 4: Interactivity
Now that our first ComboBox has data available to be selected, we want it to react on the event of selection. This event
is the change event.
On the change event we will call the loadTasks function to set the dataProvider for the second ComboBox.
The loadTasks function uses the selectedIndex property of the cboPhase ComboBox and creates an
array based on the selected index. We must have a default case for our switch, so the array exists no matter which
option is selected. Then we use unshift to add a blank option to the beginning of our array to so no
task is automatically selected. Set the dataProvider to our new array and we're done.
projtasks.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
<mx:Script>
<![CDATA[
function loadTasks() {
switch (cboPhase.selectedIndex) {
case 1: var taskArray:Array = new Array("Consultant Select/Neg","Study + Review/Admin",
"Design Contract", "Review/Admin Des Contract", "In-house Design",
"Update Old Plans (>5 years)", "Assessment Diagrams", "Bid/I.D. Process");
break;
case 2: var taskArray:Array = new Array("Authority to Acquire", "Land Purchases/Offers/Clear",
"RE Costs - Appraise/Neg/Demo", "Additional Court Awards");
break;
case 3: var taskArray:Array = new Array("Equipment","Construction Contract, as Bid",
"Contingency/C.O.s", "Inspection/Administration", "As-Builts");
break;
default: var taskArray:Array = new Array();
}
taskArray.unshift("");
cboTask.dataProvider = taskArray;
}
]]>
</mx:Script>
<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" change="loadTasks();">
<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>
Step 5: Final Functionality
Now our second ComboBox is loaded dynamically based on the first, we move to loading our DataGrid based on the selection from
the second ComboBox. First we set the change event to call the loadGrid function for our second ComboBox.
The loadGrid function has to also create an array, but an array of Objects. Then we set the dataProvider
of our DataGrid to the array.
projtasks.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
<mx:Script>
<![CDATA[
function loadTasks() {
switch (cboPhase.selectedIndex) {
case 1: var taskArray:Array = new Array("Consultant Select/Neg","Study + Review/Admin",
"Design Contract", "Review/Admin Des Contract", "In-house Design",
"Update Old Plans (>5 years)", "Assessment Diagrams", "Bid/I.D. Process");
break;
case 2: var taskArray:Array = new Array("Authority to Acquire", "Land Purchases/Offers/Clear",
"RE Costs - Appraise/Neg/Demo", "Additional Court Awards");
break;
case 3: var taskArray:Array = new Array("Equipment","Construction Contract, as Bid",
"Contingency/C.O.s", "Inspection/Administration", "As-Builts");
break;
default: var taskArray:Array = new Array();
}
taskArray.unshift("");
cboTask.dataProvider = taskArray;
}
function loadGrid() {
}
]]>
</mx:Script>
<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" change="loadTasks();">
<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" change="loadGrid();"/>
</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>
