Learn Flex 3.0

We took care of the basic functionality of the data grid control. Since the turnover rate at gas stations
is pretty high, let’s add some help to new employees by populating the Required Actions text
area based on the selected message type. This is a typical master-detail relationships task, where
the data grid with messages is “the master” and the text box shows the details.
We’ll start by creating an actions.xml file where we store the recommended actions for each message
type.
<MessageTypes>
<message type=”sale”>
<description>Sale of gasoline products</description>
<actions>Sale is good news. No action required
</actions>
</message>
<message type=”purchase”>
<description>Purchase of gasoline products from suppliers</description>
<actions>If the gas station owner is not on premises, please call him at 212-
123-4567. Otherwise no actions is required
</actions>
</message>
<message type=”spill”>
<description>Spill of gasoline products on the ground</description>
<actions> Get a bucket of sand and cover the mess. Expect to receive smaller
pay check this week.
</actions>
</message>
</MessageTypes>
Listing 4.36 MessageTypes.xml
To read and parse this file into an XML object, we just have to write one line (thanks to
E4X):
<mx:XML id=”msgTypes” source=”MessageTypes.xml” />
The next step is to specify that a selection of a different row in the data grid should call the function
that finds and displays the appropriate message from MessageTypes.xml. And again, E4X makes
this job a breeze:
private function getAction():void {
txtAction.text=
msgTypes.message.(@type==messageBook.selectedItem.@msgType).actions;
}
CHAPTER 4
RIA WITH ADOBE FLEX AND JAVA 133
The expression
msgTypes.message.(@type==messageBook.selectedItem.@msgType )
means select the XML <message> element that has an attribute type that is the same as in the
selected row in the @msgType column in the data grid. When this XML element is identified, we
assign its <actions> value to the txtAction text area.
As we said earlier, changing the selected row in the data grid should initiate the getAction() function
call. Let’s modify the declaration of the data grid and add the change event processing:
<mx:DataGrid id=”messageBook” dataProvider=”{msgList}” width=”100%”
height=”100%” change=”getAction()”>
Compile and run this program, select a row in the data grid, and the action text box will be populated:
Figure 4.13 Populating the required actions field
Learning Flex Through Applications
134 RIA WITH ADOBE FLEX AND JAVA
We’re almost there. Why almost? Because if the user starts filtering the data by octane or a message
type, the action text field won’t be cleaned. To fix this, let’s create a refreshData() function that will
not only refresh the XMLListCollection, but also clean the text field:
private function refreshData():void{
msgList.refresh();
txtAction.text=”";
}
Don’t forget to replace all calls to msgList.refresh() with refreshData().