The Stock Quote Component...

Posted At : January 23, 2007 8:48 PM | Posted By : Kevin Schmidt
Related Categories: FlexInABoxStock

The first component of FlexInABoxStock is a very simple one.

You enter stock symbols, it fills in a data grid with the symbol, it's current value and the change. It also refreshes these values once they are entered by polling the server for new data every five seconds.

You can see an example here.

I'm going to highlight a few things that I think are of importance here.

First, how does it get the data once you enter the symbol? It's using ColdFusion via FlashRemoting and the tag.

<mx:RemoteObject
      id="objFlexInABloxStock"
      destination="ColdFusion"
      source="flexInABoxStock.com.flexInABox.flexInABoxStock">
         <mx:method name="getQuotes" result="rGetQuotes(event)"/>
</mx:RemoteObject>

This tag gives our object an id, objFlexInABoxStock, that we use to reference in ActionScript and it also establishes ColdFusion as the destination. The source attribute points to where the ColdFusion component, flexInABoxStock.cfc, is located. The tag establishes one method for the object, getQuotes, and specifies that an ActionScript function rGetQuotes be called when the object returns.

Next, is the setInterval() function in ActionScript.

private function getQuotes():void{
objFlexInABloxStock.getQuotes(aCurrentSymbols);
if(!intervalSet){
setInterval(getQuotes, 5000);
intervalSet = true;
}
}

This is what sets up the polling, causing the getQuotes() function to execute every five seconds. It takes the function name you want run and the interval, in milliseconds, that it should run.

Finally, the labelfunction attribute of the bears mention.

<mx:DataGridColumn headerText="Quote" labelFunction="quoteFormat"/>

It's calling an ActionScript function quoteFormat.

private function quoteFormat(item:Object,column:DataGridColumn):String{
return currency.format(item.QUOTE);
}

This function takes the value returned and in turn calls upon our currency formatter to format the display of the actual quote.

<mx:CurrencyFormatter id="currency" precision="2" rounding="nearest" currencySymbol="$" />

I'm sure you may have additional questions, as this example assumes you already have some basic Flex knowledge, so feel to email me or ask questions in the comments, and I'll do my best to answer.

As I continue with this, I'll be updating this component as well as others with new features. Also, if you have suggestions for features you'd like to see added, feel free to speak up.

You can download the source for this application.

FlexInABoxStock.zip