Getting Started with Flex 2 > Lessons > Retrieve and Display Data > Insert a HTTPService component

Insert a HTTPService component

For the blog reader in this lesson, you retrieve posts from Matt Chotin's blog at http://www.adobe.com/go/mchotinblog on a news aggregator website. Matt is a product manager on the Flex team and writes about Flex in his blog.

You can use the HTTPService component to access the blog's XML feed and retrieve information about recent posts. The component lets you send an HTTP GET or POST request, and then retrieve the data returned in the response.

1. In Source mode, enter the following <mx:HTTPService> tag immediately after the opening <mx:Application> tag:

   <mx:HTTPService 
       id="feedRequest" 
       url="http://weblogs.macromedia.com/mchotin/index.xml"
       useProxy="false"/>
   

   The url property specifies the location of the requested file, in this case the RSS 2.0 feed of Matt Chotin's blog. As of this writing, the URL was still valid, but you should check to make sure it hasn't changed. You should use the latest RSS 2.0 URL listed on the right side of the blog at http://www.adobe.com/go/mchotinblog.

   NOTE

   If you want, you can also use the following alias in the component: http://www.adobe.com/go/flex_blogfeed.

   The useProxy property specifies that you don't want to use a proxy on a server. The domain where Matt's blog is located has a crossdomain.xml setup, so Flash Player can access the remote data sources on this server, including RSS feeds. For more information, see Review your access to remote data sources.

   The next step is to prompt the application to send a request to the specified URL. You decide to send the request automatically whenever the application starts, as follows.

2. In the <mx:Application> tag, add the following creationComplete property (in bold):

   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="feedRequest.send()">
   

   When your application is finished starting up, the HTTPService component's send() method is called. The method makes an HTTP GET or POST request to the specified URL, and an HTTP response is returned. In this case, the RSS feed returns XML data.

   Next, you want to check if the application is retrieving the RSS feed successfully. You can do this by binding data to the Label control, as follows.

3. In the <mx:Panel> tag, replace the value of the title property ("Blog Reader") with the following binding expression (in bold):

   title="{feedRequest.lastResult.rss.channel.title}"
   

   This expression binds the title field to the Panel control. The expression reflects the structure of the XML. When XML is returned to a HTTPService component, the component parses it into an ActionScript object named lastResult. The structure of the lastResult object mirrors the structure of the XML document. To check the XML structure, download the RSS feed's XML file (at http://www.adobe.com/go/flex_blogfeed) and open it in Internet Explorer.

   
   
   

   The general structure of the XML is as follows:

   <rss>
       <channel>
           <title>
           other child nodes of <channel>
           <item>
               <title>
               other child nodes of <item>
           </item>
           ...
   

   Some nodes have child nodes containing data, including the "title" child node of the channel node. The lastResult object of the HTTPService component (feedRequest.lastResult) reflects this structure:

   feedRequest.lastResult.rss.channel.title
   

   Your code should look like the following example:

   <?xml version="1.0" encoding="utf-8"?>
   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
       creationComplete="feedRequest.send()" layout="absolute">
   
       <mx:HTTPService 
           id="feedRequest" 
           url="http://weblogs.macromedia.com/mchotin/index.xml" 
           useProxy="false" />
   
       <mx:Panel x="10" y="10" width="475" height="400" title="{feedRequest.lastResult.rss.channel.title}">
   
           <mx:DataGrid id="dgPosts" x="20" y="20" width="400">
               <mx:columns>
                   <mx:DataGridColumn headerText="Column 1" dataField="col1"/>
                   <mx:DataGridColumn headerText="Column 2" dataField="col2"/>
                   <mx:DataGridColumn headerText="Column 3" dataField="col3"/>
               </mx:columns>
           </mx:DataGrid>
   
           <mx:TextArea x="20" y="175" width="400"/>
           <mx:LinkButton x="20" y="225" label="Read Full Post"/>
       </mx:Panel>
       
   </mx:Application>
   

4. Save the file, wait until Flex Builder finishes compiling the application, and then click the Run button in the toolbar to test the application.

   A browser opens and runs the application. The blog's title, Matt Chotin, should appear as the title of the Panel control, indicating that the application successfully retrieved data from the RSS feed.

   NOTE

   There may be a delay of a few seconds before the title appears while the application is contacting the server.

Flex 2.01