Advertisement
  1. Code
  2. Flash
Code

Creating a Feed Reader Widget with Adobe Flex 3

by
Difficulty:IntermediateLength:LongLanguages:

In this tutorial you'll learn how to create your own Flex feed reader application. In this case, the final result will be a simple feed reader which can be used in your blog or site to display your favorite feeds.

Pre-Requirements

To complete this tutorial you'll need some things:

  • A copy of Flex Builder 3.x, you can download a trial for free from the Adobe site.
  • The opensource library as3syndicationlib (I won't re-invent the wheel by creating one syndication lib!) which can be downloaded here.
  • Images I've used in the project. You can download them here.
  • The XMLUtil.as class to validate XML Structure, available from corelib Package.
  • Some free time!

Step 1: Create a New Project

Well, this is probably something that you already know how to do, but just to remind you and ensure we're working on the same page:

Begin by running Flex Builder then create a new project (Menu File > New > Flex Project). Make sure you enter the same properties in the dialog as shown here:

Creating a new Project

Just enter as the Project name: WFlexibleFeed. All the rest remains like it is! Press the "finish" button! Your project is created!

Step 2: Setting up Required Libs

Open the downloaded xmlsyndication-.85.zip lib from the provided download source, browse the archive xmlsyndicationlib/bin/ and extract the xmlsyndication.swc into the libs folder of your flex project. It should result in the following structure:

Project Libs Path

This library file will be automatically loaded because it's in the libs folder. You don't need to do anything else to load this library, you just need to import its classes before use. (Note, if you do not have the bin-release folder don't get worried, this is not important for now!).

Step 3: Defining Project Details

In this step, you'll setup some folders that we'll use along with our project. The first one is a folder "assets" in the project root (src folder). To create it just right-click on the src folder, then go to (New > Folder) and name it "assets".

Repeat the same actions for a "com" folder.

When this is done, extract the images provided in the images.zip file to the assets folder (you can select them and drag them to the assets folder in flex builder). You should now have the following structure in the flex navigator project:

Project Libs Path

Step 4: Creating a Simple Layout

This "Simple layout" can be whatever you want, it just needs to contain a datagrid, a textinput with feed address, a button to load and another to refresh. To get my layout:

Project Libs Path

you'll need to insert the following code into WFlexibleFeed.mxml within the <mx:Application> tags:

As you can see, I've already made some modifications into some components arguments, like giving a DP variable to dataGrid dataProvider, putting the feed addresse... well.. you can see for yourself. These are the main project components, we'll use a little of CSS code (yes, Flex supports css) to make it more beautiful.

Step 5: Creating a Stylesheet

This process is very simple. Copy my css code here to make it similar. If you want some other colors, just try the Flex 3 style explorer and create your own css styles.

Copy this css into your application, right after the <mx:Application> tag:

This will produce a better widget look and feel, right?

Step 6: Create the Feed Handler

Yes, even with the xmlsyndication lib you'll need to code a class to handle the parser output, or you'll get nothing to work. So, you'll need to create a new Action Script Class, just go to menu File > New > Action Script Class and enter the settings as seen in the image below. We'll also need a class (from corelib) to validate the XML format. Just download the class here and put it in your "com" folder.

Project Libs Path

This will create a new folder "feed" in the "com" folder and a "FeedParser.as" file too. The Action Script editor will now open.

Step 7: Code the Parser Class

Just copy this code into the FeedParser.as Class:

Save your file now!

Step 8: Understanding the Feed Parser

Easy, just read the comments in the code and you'll be able to understand it. If you don't want to, you just need to know what we'll write to use it:

Well, this is a simplified version of how to work with our class. We'll see it in use... keep following the tutorial..

Step 9: Take a Break

This is a relaxing step, maybe that was too much code at once, let me explain the workflow:

We have a syndicationlib responsible for reading the feed and putting the contents into an objects class. Our FeedParser class' main purpose is to prepare, call and handle the output from the syndication class.

Then there's our main application, which will call the FeedParser class and wait for the DataReady event to load the feed items into the datagrid dataprovider.

Step 10: Code First Load Function

This is the function that will make our feed reader work. We'll code an init() function which will be called on the creationComplete event of our application.

Write necessary imports:

Our initial function:

Step 11: Code the Event Handlers

Lets code the 3 necessary event handlers.

The error handler:

The success handler:

Now we have our feed items in the DP arrayCollection, ready to use into the dataGrid. I also want to have a self-refresh mechanism (so the feed entries updates are outputted to datagrid), we'll create it now.

Step 12: Coding a Self-Update Mechanism

The process is very easy, we'll need a timer to execute a new call to get feed contents, so...

Declare the timer next to our var parser:

Write loadAutoUpdate(); on the dataHandler function on bottom:

and let's code the update function:

Finally, we need the onTime function to handle time events every 10 minutes:

As people can change the feedURI field, we save it into a currentFeed variable until a new feed data is parsed.

Step 13: Understanding the Self-Update Mechanism

The workflow is simple. When the init() function is called, the feedParser is loaded.

In this function we reset the DP (data provider), setup the security policies (to avoid some domain access errors) and load the feed:

Finally, the feed is parsed and the DP is populated with feed items:

and we load the update mechanism that will be loaded every 10 minutes (~600 seconds / 600 000 miliseconds):

That will call the onTime function every 10 minutes and recall the init function to reload the feed.

The main system is coded, now we just need to add some more actions.

Step 14: Code Button Actions

In this step we'll need to code the functions to change to a new feed and refresh the current one.

The refresh function in quite simple:

and the change feed function:

Step 15: Load the Things Up and Test Them

We need to load the whole process on the creationComplete event of the application, just add to your mx:application tag:

Try to run the application now! It's working, right? We'll now improve the application interaction..

Step 16: Understanding the DP Elements

The data provider DP is a copy from the FeedParser.FEED_DATA array collection, so we need to add the FEED_DATA structure into the FeedParser.as class:

In here we can see each item contains one title, link, desc(ription) and author(s) elements. This will be useful if you want to display that information on the datagrid, though for the moment we only want to display the title (using dataField):

If we need to display the desc or link, we just need to provide the field desc as dataField parameter in a new column.

Step 17: Load the Item Webpage

Of course, this is very useful! We just need to enable the double-click into the dataGrid by writing the following into the mx:Table tag:

and the loadURL() function:

Quite easy, so we've almost finished the feedReader, time to review the code.

Step 18: Review the Code

Time to compare your code with mine

WFlexibleFeed.xmml

It's almost equal right?

Step 19: Prepare the Application for Web

Many people will grab the generated WFlexibleFeed.swf from the bin-debug folder and put it in the final production environment, but this is a mistake!

First, use the framework (near 200kb) as RSL (Runtime Shared Library). That will then be downloaded just once to the user's machine, next time it will not be loaded (therefore decreasing loading time). To do this, goto Project > Properties > Flex Build Path > Library Path and click on Framework Linkage. Change it from "Merged into code" to "Runtime shared library (RSL)" then click OK. The framework will now be exported as a separated file.

Framework linkage

We're ready to export the application.

Step 20: Export Release Build

Every application should be exported as a release build (that's why project path contains the bin-release folder). You just need to click on the Export Release Build Button, shown yellow here:

Export Release Build

The whole project will be exported to the "bin-release" folder. These are the contents to be placed on your site or blog!

Step 21: Play With It

You now have time to play with the final result, change some css details, make another kind of feed switcher, there are many things you can improve it. You can even take it to desktop using Adobe AIR. Get inspired! One very nice application for this feedReader is to put your own feed URL, disable text edition, disable the change and refresh buttons and distribute to other sites as a widget to read your blog entries...

Conclusion

In this tutorial you've learned how to parse, handle and display feed entries into a DataGrid inside Flash. You've learned a little about the cool xmlsyndication lib and also dicovered some tricks to improve your projects. Browse the code, download the source files and have fun!

Note: use the menu File > Import > Flex Project archive to import the source files; they are ready to use!

I hope you liked this tutorial, thanks for reading!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.