Learn Flex 3.0

In the real world, all the messages should be pushed to our application by some kind of messaging
program. Another possibility is to have the gas station front end poll the data at some specified
interval by some kind of a server-side program that can be written in JSP, ASP, PHP, or whatever else
can bake an HTTPResponse. In coming chapters of this book, you’ll learn about various ways to
communicate with remote programs. But at this point, for simplicity’s sake, we’ll emulate a realtime
data feed by using a random-number generator and a timer that will add items to our msgList
collection at specified time intervals. Since the data collection will be constantly receiving new
data, the output window should reflect this by adding new rows to the data grid.
If the speed of your data feed is crucial, don’t pass the data as XML, and consider using ArrayCollection
for storing data instead of XMLListCollection.
Here’s the final code for the application:
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
backgroundColor=”#e0e0FF” applicationComplete=”init()”>
<mx:XML id=”msgTypes” source=”MessageTypes.xml” />
<mx:XML id=”activities” source=”GSactivity.xml” />
<mx:XMLListCollection id=”msgList” source=”{activities.message}” />
<mx:Canvas x=”10″ y=”10″ width=”100%” height=”100%”>
<mx:HBox x=”10″ y=”20″ width=”100%” height=”30″>
<mx:CheckBox id=”cbx93″ label=”93″ selected=”true” click=”refreshData()”/>
<mx:CheckBox id=”cbx89″ label=”89″ selected=”true” click=”refreshData()”/>
<mx:CheckBox id=”cbx87″ label=”87″ selected=”true” click=”refreshData()”/>
<mx:Label text=”Msg.Type” />
<mx:ComboBox id=”cbMsgTypes” width=”117″ dataProvider=”{messageType}”>
<mx:change>refreshData()</mx:change>
</mx:ComboBox>
</mx:HBox>
CHAPTER 4
RIA WITH ADOBE FLEX AND JAVA 135
<mx:VBox x=”10″ y=”64″ height=”100%” width=”100%”>
<mx:Label text=”Activity” width=”100%” fontSize=”15″/>
<mx:DataGrid id=”messageBook” dataProvider=”{msgList}” width=”100%”
height=”100%” change=”getAction()”>
<mx:columns>
<mx:DataGridColumn headerText=”Message Type” dataField=”@msgType”/>
<mx:DataGridColumn headerText=”Transaction ID” dataField=”transID”/>
<mx:DataGridColumn headerText=”Octane” dataField=”octane”/>
<mx:DataGridColumn headerText=”Price per gal.” dataField=”price”/>
<mx:DataGridColumn headerText=”Amount(gal.)” dataField=”gallons”/>
<mx:DataGridColumn headerText=”Paid” labelFunction=”paid”/>
<mx:DataGridColumn headerText=”Paid by” dataField=”paidby”/>
</mx:columns>
</mx:DataGrid>
<mx:Label text=”Required actions” fontSize=”15″ />
<mx:TextArea id=”txtAction” width=”100%”/>
</mx:VBox>
</mx:Canvas>
<!–Defining USD formatting –>
<mx:CurrencyFormatter id=”usdFormatter” precision=”2″
currencySymbol=”$” useThousandsSeparator=”false” alignSymbol=”left” />
<!– Gallons Amount formating with 2 digits after dec.point –>
<mx:NumberFormatter id=”numberFormatter” precision=”2″/>
<mx:Script>
<![CDATA[
//Message type combo data
[Bindable]
private var messageType: Array = [”all”,”sale”, “spill”, “purchase”];
import mx.collections.*;
private var sortMessages:Sort;
[Bindable]
private var grandTotalSale:Number=0;
private function init():void {
Learning Flex Through Applications
136 RIA WITH ADOBE FLEX AND JAVA
// assign the filter function
msgList.filterFunction=filterMessages;
// perform filtering
refreshData();
// emulating message feed in specified intervals
var myTimer:Timer = new Timer(5000, 0); // every 5 sec
myTimer.addEventListener(”timer”, addMessage);
myTimer.start();
}
private function filterMessages(item:Object):Boolean{
// filter by message types
if (cbMsgTypes.selectedLabel !=”all” &&
item.@msgType!=cbMsgTypes.selectedLabel ){
return false;
}
// Check every checkbox and the combobox and
// 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;
}
private function paid(item:Object, column:DataGridColumn):String {
// calculate total gain/loss. Label function is not
// the best place for calculations as it’s being called
// on each change of the underlying collection
var total:Number=Number(item.gallons)* Number(item.price);
if (item.@msgType!=”sale”){
total*=-1;
}
return “”+usdFormatter.format(total); //USD formatting
}
private function getAction():void {
CHAPTER 4
RIA WITH ADOBE FLEX AND JAVA 137
txtAction.text=msgTypes.message.(@type==messageBook.selectedItem.@msgType).
actions;
}
private function refreshData():void{
msgList.refresh();
txtAction.text=”";
}
private function addMessage(event:TimerEvent):void{
// create and add one message with randomly-generated
// values to the collection
var newNode:XML = new XML();
var transID:String=Math.round(Math.random()*5000).toString();
var octanes: Array = [”87″, “89″, “93″ ];
var octaneIndex:Number=Math.round(Math.random()*2);
var octane:String=octanes[octaneIndex];
var prices: Array = [2.49, 2.69, 2.99 ];
var price:Number=prices[octaneIndex];
var msgTypes: Array = [”sale”, “purchase”, “spill”];
var msgType:String=msgTypes[Math.round(Math.random()*2)];
var payTypes: Array = [”MC”, “Visa”, “Cash” ];
var payType:String=msgType==”sale”?payTypes[Math.round(Math.random()*2)]:”";
var gals:String=(numberFormatter.format(Math.random()*50).toString());
newNode=<message msgType={msgType}>
<transID>{transID}</transID>
<octane>{octane}</octane>
<price>{price}</price>
<gallons>{gals}</gallons>
<paidby>{payType}</paidby>
</message>;
// adding new messages always on top
activities.insertChildBefore( activities.message[0], newNode);
}
]]>
</mx:Script>
</mx:Application>