Yahoo! News Application

Let us write another application, we will call it the Yahoo! News Application. This application shows a list of current news items from Yahoo that has been classified as “most emailed“.

Yahoo! provides this list in the form of a RSS feed. The RSS feed for the same is: http://rss.news.yahoo.com/rss/mostemailed.

Let us first look at the application when it is all ready so that we can understand what we are trying to build.

The snapshot is shown below:

The application is simple. It has a button called Fetch News, which when clicked will connect to the internet, access the RSS Feed and display the new items. It shows the news items by using a DataGrid component that can show rows of data, which can comprise several columns. In our case, each row is one news item and we are currently displaying only one column —title of the news item.

Let us build this application now. To start off, we will create another application which we shall call YahooNews. You do not need to create another project and can stay within the MyFirstFB4App project and create a new MXML application by going to the main menu and selecting File ? New ? MXML Application. This will bring up a dialog window as shown below. Give the Filename as YahooNews and select the Layout as spark.layouts.VerticalLayout (This will arrange all your components vertically at the main application canvas level).

Finally, click on the Finish button.

This will generate the same boilerplate code that we saw earlier. Go to the Design View and then from the Components tab, first drag and drop a Button from the Controls tree node. The properties of the button are shown below:

Create a click handler for the button as shown below:

Go back to the Design view and drop a DataGrid control from the Components tab as shown below. Note that the DataGrid component is present in the Data Controls tree node. The DataGrid component is like a table and visually it can display rows of data where each row can comprise one of more columns.

The Design view is shown below. By default the DataGrid shows 3 sample columns and we need to restrict that to just one column in which we wish to show the title. We wish to name the column header as “News Title”.

You can modify the DataGrid properties by selecting the DataGrid control and viewing the Properties Tab. First let us set the ID to dgNews.

Then set the width and height of this control to 100% respectively. This means that it will occupy the whole application screen even if you resize it.

You can view the current columns and modify (add/delete/edit) them by clicking on the Configure Columns button in the Properties Tab. That will bring up the current columns as you can see below:

We need only one column, so to delete Column 2 and Column 3, simply select the item and click on the Delete button. Additionally, select Column 1 and change the following two properties:

1. Bind to field: This is the attribute of the row object. For example we are going to assign a list of news items that is a collection of news items to the DataGrid. Each row is a news item object and each item object consists of several attributes like title, pubDate, category, and others as per the RSS definition. So in this case we are interested in only the title attribute or property.
2. Header Text: This is the text that is shown in the header column for the DataGrid. We will call it News Title.

Click on OK to commit the changes.

The final step will be for us to implement the code in our handler which we auto generated when the Fetch News button is clicked. Switch over the Source view to take a look at the current code generated for you.

Let us go through the code:

1. Take a look at the Fetch News button code shown below:

   <s:Button id="btnFetchYahooNews" label="Fetch News!"
             click="btnFetchYahooNews_clickHandler(event)"/>

   protected function
   btnFetchYahooNews_clickHandler(event:MouseEvent):void
   {
       // TODO Auto-generated method stub
   }

   • Invoke the RSS Feed: http://rss.news.yahoo.com/rss/mostemailed.
   • Retrieve the result and assign the RSS News Items to the DataGrid.

This code is straightforward and it means that when the button is clicked the method btnFetchYahooNews_clickHandler will be invoked.

Since we auto-generated the click handler, it currently looks like this:

We need to now implement the code to do the following:

2. To do that, we will need to use the HTTPService from the mx namespace in the Flex framework. The HTTPService is a non-visual component and hence it is defined under a <fx:Declaration> tag as given below:

   <fx:Declarations>
   	<mx:HTTPService id="YahooNewsService"
                      url="http://rss.news.yahoo.com/rss/mostemailed"
                      method="GET"
   	           result="YahooNewsService_resultHandler(event)"
   	           fault="YahooNewsService_faultHandler(event)"/>
   </fx:Declarations>

The <fx:Declarations> tag is created under the <mx:Application> main tag. We first have an id attribute that is a unique name for the service. Then the url attribute that points to the RSS Feed. We are using the GET method for the HTTP operation. Finally, two critical events are handled. One of them is the result event which is invoked when the HTTP Request has been successful and a response is returned. The other is a fault event which is invoked when the HTTP Request could not be completed and there was an error.

3. Let us look at the complete code now where we hook up invoking of the Fetch News button to the HTTP Service and then binding the result of the HTTP Response to the DataGrid.

   <?xml version="1.0" encoding="utf-8"?>
   <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/halo"
    minWidth="1024" minHeight="768">
   
    <fx:Declarations>
    <mx:HTTPService id="YahooNewsService"
    url="http://rss.news.yahoo.com/rss/mostemailed"
    method="GET"
    result="YahooNewsService_resultHandler(event)"
    fault="YahooNewsService_faultHandler(event)"/>
    </fx:Declarations>
   
    <fx:Script>
    <![CDATA[
    import mx.rpc.events.FaultEvent;
    import mx.rpc.events.ResultEvent;
   
    import mx.controls.Alert;
   
    //This handler is invoked when FetchNews button is clicked
    protected function
    btnFetchYahooNews_clickHandler(event:MouseEvent):void
    {
    //Send the HTTP Request by invoking the send() method
    YahooNewsService.send();
    }
   
    //When the HTTP Response is received
    //bind the result to the DataGrid's dataprovider            
    protected function
    YahooNewsService_resultHandler(event:ResultEvent):void
    {
    dgNews.dataProvider = event.result.rss.channel.item;
    }
   
    protected function
    YahooNewsService_faultHandler(event:FaultEvent):void
    {
    Alert.show("Error in fetching Yahoo News.");
    }
   
    ]]>
    </fx:Script>
   
    <s:layout>
    <s:VerticalLayout/>
    </s:layout>
   
    <s:Button id="btnFetchYahooNews" label="Fetch News!"
    click="btnFetchYahooNews_clickHandler(event)"/>
   
    <mx:DataGrid width="100%" height="100%" id="dgNews">
    <mx:columns>
    <mx:DataGridColumn dataField="title" headerText="News Title"/>
    </mx:columns>
    </mx:DataGrid>
   
   </s:Application>

Let us go through the key points:

• The btnFetchYahooNews_clickHandler method is invoked when the Fetch News button is clicked. In this method, we send the HTTP Request by invoking the send() method on the HTTPService instance—YahooNewsService.
• As mentioned the result event is fired when the HTTP Response is available. The HTTP response is available in the event parameter that is passed to the result handler. Since it is a standard RSS feed that is available, a collection of items is available under the event.result.rss.channel.item object.
• This is then assigned to the Data Grid. To assign it to the DataGrid, we simply pass it to the dataProvider attribute of the grid. Since we have bound the column to only the title attribute, the DataGrid takes care of the column rendering for us.

To run the application, simply click on the Run icon in the main toolbar. A sample output is shown below:

---

Develop rich internet applications quickly and easily using Adobe Flex 3, ActionScript 3.0 and integrate with a Java backend using BlazeDS 3.2 A step-by-step tutorial for developing web applications using Flex 3, ActionScript 3.0, BlazeDS 3.2, and Java Build efficient and seamless data-rich interactive applications in Flex using a combination of MXML and ActionScript 3.0 Create custom UIs, Components, Events, and Item Renders to develop user friendly applications Build an end-to-end Flex e-commerce application using all major features of Flex covered throughout the book http://www.packtpub.com/flex-3-with-java/book

---

Continue to Flex 101 with Flash Builder 4 – Part 4