Writing an RSS reader on Flex

Original author: Chris Korhonen, David Hassoun, John Crosby
  • Transfer
Let's try to make a simple application with Flex. However, this will not be the usual Hello World, it will be something more useful.
But before you try to do something using Flex, we will figure out what features appeared in the new version.
  • Using Flex, you can now develop AIR applications that run locally and without starting a web browser
  • Enhanced ability to change skins and Flex styles, now they can be edited using the built-in Flex Builder editor
  • New components have appeared, including for working with data.
  • Development tools now include memory and performance profilers
  • Now you do not need to create several versions of the application for several languages, since localization is done on the fly
  • Improved performance, application speed, reduced memory costs

Now, finally, let's get started developing something with Flex. For work we need Flex SDK or Flex Builder. In principle, you can configure any other development environment to work with the SDK. There is also a plugin for development in Flex for Eclipse.
Our application will be a fairly simple shell for Twitter . It will receive streams of messages from friends via RSS.
Our example will be based on Flex Builder from Adobe, so not everything in the text should be taken literally.

Create a new Flex project


First, as usual, create a new Flex Project (in the File-> New menu, of course). Indicate the name and location of the project, and we will not touch other settings for now. Click Finish.
If you look at the folder structure, you will see these:
  • bin - This is where the compiled version of your application is stored.
  • html-template - here lies the HTML template in which your application will be placed
  • libs - here will be the libraries created in the process
  • src - here, as you can see, is the source code of the application. In this folder we will work.

Application Announcement


In the src folder you will find a file with the name of your project and the extension MXML. If you switch to Source mode, you can see the following code:

layout="absolute">


Let's start creating the interface of our application. From the component panel, drag Label and List to the application.
Label will serve as a regular title, select it and in the Property Inspector panel enter the values ​​you like.
The list will be populated with Twitter posts when the application loads. Make it bigger, and configure it so that it does not stand on the very edge and stretches with the application. Another List you need to assign a name, let it be, for example, "tweets". This can be done by writing id = “tweets” in the component tag.
Assigning a name to a component is necessary in order to subsequently access it from ActionScript code. The name of the component must be unique.
Your MXML code should now look something like this:

layout="absolute">
fontFamily="Arial" fontWeight="bold"
fontSize="15"/>




Data connection


Data from Twitter is conveniently retrieved via an RSS feed. There are several more ways to communicate with the Twitter API, but for now, select this one.
To get to the data from Flex, you will need to use the HTTPService component. It allows you to send HTTP requests and receive data. To connect it, add the following code:
url="https://twitter.com/statuses/friends_timeline/25883.rss" />

As you can see from the code, we also assign id to this component. In the URL parameter, we inform him at what address it will be necessary to take the data. However, before you can see the received data in your application, you will need to do two more things:
  • Ask HTTPService to get data from RSS feed
  • Put received data in List

It is logical to assume that the data you want to receive at the time of loading the application. To do this, make some changes to the application declaration:
layout="absolute"
creationComplete="twitterFeed.send()" >


As you can see, we have set the send () function of the twitterFeed component to the creationComplete application event. Now we need to process the received data and put it in the List.
Before the advent of ActionScript 3.0, processing XML was a torment. Now this problem is being solved with the help of a powerful tool called E4X.
E4X allows you to access an XML document in a simpler way. For example, having here such a document:



value


value



... we can access the property property like this:
parent.child[0].property

Now, in order for the received data to be displayed in the list, we need to inform the list about it. A list as a component can receive information from a data source, which is essentially a collection of objects. To specify the data source for the list, we need this code:
dataProvider="{twitterFeed.lastResult.rss.channel.item}" >


Now when you start the application, you will see that the list is filled with several elements that look like [object Object]. This is data from our RSS feed. They are complex objects, and the list component does not know how to display them.
Each element in the RSS feed has several sub-elements - title, description, date and link. This means that such an item cannot be displayed in the list without our intervention.
One of the solutions to this problem could be the DayaGrid component, which would display these elements in separate columns, but this is not our way.
We will connect the item display handler to the list. It allows you to specify how to display items in the list. The advantage of this approach is that, firstly, the handler will be saved as a separate MXML element, and secondly, that we will have much more opportunities to control the way the elements are displayed.
Using the File-> New menu, create a new MXML component. We will call it Tweet, we will not change the rest of the settings.
Drag a few text fields into the form and indicate what data they will display. To do this, in the text property of the first field, specify {data.pubDate} (curly brackets mean a link to the data), and in the other, {data.title}.
Now we need to connect the handler to the list. To do this, fix the List component in the main form:
dataProvider="{twitterFeed.lastResult.rss.channel.item}"
itemRenderer="Tweet">


Now when you start the application, you will see that the entries from the RSS feed have successfully downloaded and been displayed in your application. Elementary, isn't it?
Thanks fzn7 for the example and source .

Also popular now: