In the spirit of tonight's first NFL game of the season, I decided to put together an example that integrates feeds from NFL.com and brings it directly to your desktop. This is a basic example that demonstrates how to use Flash Builder's data wizards to consume data from a public rss feed as a HTTPService.

First, let's take a look at the data... You can generate custom RSS feeds for either all NFL teams, or for your favorite team at: http://www.nfl.com/rss/rsslanding. The data is very straightforward, and is exactly what you would expect from a RSS feed (XML making up RSS data). In this example, I am consuming the top headlines, available here. If anyone is wondering, I decided to make this an AIR application instead of a Flex application so that I could get around the cross-domain issues.

In Flash Builder (beta from Adobe Labs), the first thing I did was use the data wizards to generate service classes for a http service. Go to the "Data" menu, and select "Connect to HTTP...". The wizard asks you to define operations. I added the operation "getData", and entered the URL for the service.

Once you click "Finish", the service class is generated, and you're almost ready to consume the data. Before you do anything else, you should find the newly created service in the "Data/Serivces" panel, right-click, and click "Configure Return Type". This wizard will go ahead and generate the service return value objects for you. I entered the name "NFLResult", and hit next until it was done.

If you browse the generated source from the new services, you will notice that the "getData" function doesn't call the url exactly as you entered it. Instead, it is expecting you to pass in the searchString value, which gets appended to the URL when invoked. In my generated NFLService class added a getHighlights() function that automatically passes in the "home" value, just for simplicity.

  public function getHighlights() : AsyncToken
  {
     return super.getData( "home" );
   }

In the generated classes, you will notice that you have _Super_NFLService, and also NFLService classes. You shouldn't modify the "_Super" class. If you decide to regenerate your services, any changes to the _Super class will be lost. However, changes to the descendant NFLService class will remain. So always add any custom code to the descendant class.

Now, let's take a look at the application. When the application loads, it automatically requests the latest data from the RSS feed, and displays it in a simple list control. When an item is selected in the list, the html content for the RSS link is displayed on the right-hand side. Here's a screen capture:

Next, let's examine the code that makes it all work. It is surprisingly simple. When the application loads, the applicationCompleteHandler function invokes the service's getHighlights() function, and sets the token of my CallResponder instance. Using a CallResponder allows you to easily bind to the lastResult property, and helps you quickly and easily connect to data. This may not be ideal for MVC style applications, but certainly enables you to get "up and running", and consuming data quickly.

The UI elements used here are a list, which is bound to the CallResponder's last result (note: it is cast as the NFLResult return type, so that I can get code hinting in the IDE), and a HTML control, used to display the content. This example also uses Flex 4 states to easily show/hide components depending on the selected state. By default, the HTML content is hidden, and when an item in the list is selected, the application's currentState is changed (through bindings), so that the HTML content is visible.

The list uses a custom item renderer to show the RSS entry's title, and published date, and uses Flex 4 states to highlight the title color on mouse rollover, and also on selected state. All in all, very straightforward...

 <?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication 
  xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/halo" 
  xmlns:nflservice="services.nflservice.*"
  applicationComplete="applicationCompleteHandler(event)"
  title="NFL Highlights" 
  width="1024"
  height="768"
  currentState="{ highlights.selectedItem == null ? 'default' : 'detail' }">
  
  <fx:Script>
    <![CDATA[
      import services.nflservice.Entry;
      import services.nflservice.NFLResult;
      import mx.events.FlexEvent;

      protected function applicationCompleteHandler(event:FlexEvent):void
      {
         responder.token = service.getHighlights();
       }


      protected function highlights_clickHandler(event:MouseEvent):void
      {
         html.location = Entry( highlights.selectedItem ).link.href.toString();
       }

    ]]>
  </fx:Script>
  
  <fx:Declarations>
    <nflservice:NFLService id="service" />
    <mx:CallResponder id="responder" />
  </fx:Declarations>
  
  <s:states>
    <mx:State name="default" />
    <mx:State name="detail" />
  </s:states>
  
  <s:List 
    id="highlights" 
    dataProvider="{ NFLResult( responder.lastResult ).entry }"
    width="100%" width.detail="200" height="100%"
    click="highlights_clickHandler(event)">
    <s:itemRenderer>
      <fx:Component>
        <s:ItemRenderer height="45" width="100%"
          buttonMode="true" useHandCursor="true"
          baseColor.hovered="#999999">
          
          <s:states>
             <s:State name="normal"/>
             <s:State name="hovered"/>
             <s:State name="selected"/>
          </s:states>     
          
          <fx:Script>
            <![CDATA[
              import services.nflservice.Entry;
            ]]>
          </fx:Script>
          
          <s:SimpleText 
             text="{ Entry( data ).title }" 
             fontWeight="bold" 
             color.hovered="#8888FF" 
             color.selected="#FF0000"/>
          <s:SimpleText 
             text="{ Entry( data ).dc_date }" />
        
          <s:layout>
            <s:VerticalLayout 
               paddingBottom="2" 
               paddingLeft="2" 
               paddingTop="2" 
               paddingRight="2"/>
          </s:layout>
        </s:ItemRenderer>
      </fx:Component>
    </s:itemRenderer>
  </s:List>
  
  <mx:HTML 
    id="html"
    width="100%" height="100%"
    visible.default="false"
    visible.detail="true" 
    includeInLayout.default="false"
    includeInLayout.detail="true" />
  
  <s:layout>
    <s:HorizontalLayout />
  </s:layout>
  
</s:WindowedApplication>

...and that's it. Flash Builder and AIR enable you to quickly and easily connect to data and start building applications.

___________________________________
Andrew Trice
Principal Architect
Cynergy Systems
http://www.cynergysystems.com

Read more from Andrew Trice.