Learn Flex 3.0

Flex collection classes implement the Ilist and ICollectionView interfaces that let you add, remove,
and update items in a collection. These interfaces also have methods for dispatching events when
the data in the underlying collection change. This becomes handy when you use a collection as a
data provider of one of the list-based controls - just add a new element to such collection and the
data in these controls automatically reflect the change.
Using collections (see the mx.collections package) as data providers is well described at http://
www.adobe.com/devnet/flex/quickstart/using_data_providers/. We’ll just show you one of the
ways to deal with collections in our gas station application.
Basically we’ll add a middleman between the XML object and the data grid. Now the data grid’s
provider will become an XMLListCollection (built on top of XML activities):
<mx:XML id=”activities” source=”GSactivity.xml” />
<mx:XMLListCollection id=”msgList” source=”{activities.message}” />
<mx:DataGrid id=”messageBook” dataProvider=”{msgList}”>
Just recompile and run the application again - it will display the same window as in Figure 4.11.
Filtering
The next step is to allow the user to filter the data by octane (the checkboxes) or message type (the
combo box). We’ll add an init() function that will be called on the applicationComplete event, when
all the objects are constructed to assign the filterMessages() filter function to the collection to do
the filtering:
msgList.filterFunction=filterMessages;
The actual filtering will happen when we call the refresh()function on the collection.
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
backgroundColor=”#e0e0FF” applicationComplete=”init()”>
// some code is omitted here
private function init():void {
// assign the filter function
msgList.filterFunction=filterMessages;
// perform filtering
msgList.refresh();
}
private function filterMessages(item:Object):Boolean{
// Check every checkbox and the combobox and
CHAPTER 4
RIA WITH ADOBE FLEX AND JAVA 131
// populate the datagrid with rows that match
// selected criteria
if (item.octane==”87″ && this.cbx87.selected)
return true;
if (item.octane==”89″ && this.cbx89.selected)
return true;
if (item.octane==”93″ && this.cbx93.selected)
return true;
return false;
}
If you need to remove the filter, just set the filterFunction property to null.
Run the application after making these changes and you’ll see an empty table on the screen. When
the creation of the application was complete, Flash VM called the init method, which assigned the
filter function to our XMLListCollection, and called refresh(), which applied this filter to each XML
node of our collection. Since none of the checkboxes was selected, the filterMessages function correctly
returned false to each node leaving the data grid empty. To fix this, let’s make a slight change
in the checkboxes so they’ll be checked off during creation.
<mx:CheckBox id=”cbx93″ label=”93″ selected=”true”/>
<mx:CheckBox id=”cbx89″ label=”89″ selected=”true”/>
<mx:CheckBox id=”cbx87″ label=”87″ selected=”true”/>
Now the program will show all the rows again. Try to uncheck the boxes - nothing happens because
the application doesn’t know that it needs to reapply the filter function to the msgList again. This is
an easy fix - let’s refresh the msgList on each click on the checkbox:
<mx:CheckBox id=”cbx93″ label=”93″ selected=”true” click=”msgList.refresh()”/>
<mx:CheckBox id=”cbx89″ label=”89″ selected=”true” click=”msgList.refresh()”/>
<mx:CheckBox id=”cbx87″ label=”87″ selected=”true” click=”msgList.refresh()”/>
The filtering by octane number works fine. Adding the code snippet below to the beginning of the
filterMessages() function will engage the filtering by message type according to the combo box
selection:
if (cbMsgTypes.selectedLabel !=”all” &&
item.@msgType!=cbMsgTypes.selectedLabel ){
return false;
}