News Reader Component...

One of the things I love about Flex, is how easy it makes it to build components. I've built a simple news reader to add to FlexInABoxStock.

Before I post a whole lot more here I want to make sure that you realize that this application is starting off very simple and is going to grow in complexity and features. I'm going to be adding features and complexity to each of these components as well as developing others. By the end, this will be a full blown dashboard application.

Now, on to the jumping off point for the news reader component. The sample application can be viewed here.

The news reader displays the US markets the RSS feed from Yahoo! The actual feed is processed by ColdFusion and is returned as an array of structures from the CFC. It's then used as an ArrayCollection in Flex.

The application polls the server for the feed every minute, so any updates are processed automatically.

Adding ColdFusion at this point is an extra step, as Flex could do this without the aid of ColdFusion. However, I have other plans down the road for this component and incorporating ColdFusion now will make it easier.

Here's the CFC function used to parse the feed.

<cffunction name="getNewsFeed" access="public" returntype="array" output="false">
      <cfargument name="feedURL" required="yes" type="string">
      
      <cfset var rss = "">
      <cfset var items = "">
      <cfset var aNewsItems = ArrayNew(1)>
      
      <cfhttp method="get" url="#arguments.feedURL#" />
      
      <cfset rss = cfhttp.FileContent>
      <cfset items = XMLSearch(rss, "/rss/channel/item")>
      
      <cfloop from="1" to="#ArrayLen(items)#" index="i">
         <cfset stItem = StructNew()>
         <cfloop from="1" to="#ArrayLen(items[i].XMLChildren)#" index="j">
            <cfset stItem[items[i].XMLChildren[j].XMLName] = items[i].XMLChildren[j].XMLText>
         </cfloop>
         <cfset arrayAppend(aNewsItems, stItem)>
      </cfloop>
   
      <cfreturn aNewsItems>
   </cffunction>

Try it out and let me know what you think. If you've got any questions, just ask.

Added source...

I added the source to the FlexInABoxStock application, so now all you have to do is right-click on the application and you view the source and download the zip file.

Here's the direct link.

Tomorrow I'll be adding a component to do consume the Yahoo! markets feed.

A small upgrade...

Just a small upgrade to FlexInBoxStock tonight. I changed the StockQuote component so that it adds a busy cursor as well as disabling the "Add" button once it's clicked. The cursor shows busy and the button is disabled until the quotes are returned. This doesn't affect the polling, so there is no busy cursor unless new stock symbols are added.

The example is here.

Here's the code that makes it happen.

private function addStockSymbol():void {
         addStockButton.enabled = false;
         CursorManager.setBusyCursor();
         var newSymbols:Array = stockSymbol.text.split(',');
      
      newSymbols.forEach(addToCurrent)
      stockSymbol.text = "";
      getQuotes();
      
      
         }

First, I set the enabled property of the addStockButton to false. The addStockButton is the value of the id attribute in the tag.

Next, I called the setBusyCursor() method of the CursorManager.

The final change was in the rGetQuotes() function.

private function rGetQuotes(event:ResultEvent):void{
            acCurrentSymbols = new ArrayCollection(event.result as Array);
            if(!addStockButton.enabled){
               addStockButton.enabled = true;
               CursorManager.removeBusyCursor();
            }
            
         }

Here, I run an if statement to see if the enabled property of addStockButton is false. If it is, I set the enabled property to true and remove the busy cursor by calling the removeBusyCursor() method.

As always, if you have any questions or feedback, feel free to let me know.

Download the source here: FlexInABoxStock.zip

The Stock Quote Component...

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

Down to business...

Ok, now that I've stopped celebrating the Colts victory and Ed Sullivan's coming humiliation, it's time get down to business.

I've decided that for this blog I'm going to be building Flex Components dealing with the stock market, culminating in a dashboard application. I'm calling it FlexInABoxStock! Of course the back end power will be supplied by ColdFusion.

I will be releasing these components separately and they will be free and open source. The first one of these components will be released later tonight.

Any feedback that you want to offer will be greatly appreciated!

Questions or comments? Feel free to email me at kevin.schmidt[at]flexinabox.com