brupp.com

This is small article which will detail out steps for creating a feed reader in flex. I know there are lot of feed readers in this world and I am not intended to leave a mark in that space. This article is actually a precursor to my next article which will be about “Cairngorm” framework in which I will take this as an example and base it on Cairngorm framework. So you will be able to compare which lies where in framework and why? If you want me to notify you when the next article is released either subscribe to the feed or leave your comment.

Before you read further, please download the source from here .

The essentials for creating the feed reader as you can see in code are:
a)  HTTPService object (non visual) – To make an HTTP request to the feed url. Note that the resultFormat is set to “e4x” and the result of this request will call “onResult(event)” method.

b) DataGrid - The result will get populated in this. Note that the dataProvider is bound to the _xlFeed in which the result will be populated.

c) TextArea - To show the content of the feed article when DataGrid row is selected.

The flow:

1) On creationComplete the HTTPService is invoked with send().
2) On receiving the result the _xlFeed value is set to the list of”item” nodes of the feed xml.
3) As a result the DataGrid shows the result in coloumns as title and published date (you can add more columns, DataGridColumn in the DataGrid)
4) Clicking on an item in DataGrid, extracts the “description” from that item (onItemClick method)
5) On double clicking the item, another node “link” is accessed from the feed and new webpage is launched (onItemDoubleClick method)

Play with other node values and get creative. Extend the application e.g. add feed urls at runtime etc. “Debug” run the application with breakpoint to observe feed structure. Most importantly you should have “namespace“s defined for rss and atom (depend on feed type)  other wise the application won’t work. If this article did any help to you then please spread the word and share this.

The article will help you create your first Facebook external website application using Flex. Assuming you have Facebook account; go to http://www.facebook.com/developers/createapp.php and create a new application. This is what you will see:

Note down the API Key and Secret, you will need these later. There are number of edit options that you can play around with. However for this article you now need to go to “Advanced” tab and select “Application Type” to “Desktop”. Why so? because that would make your application easier to test and debug at time of development.

Create a new project using Flex Builder. Now you need Actionscript 3.0 client library for Facebook Platform API. Get it from here: http://code.google.com/p/facebook-actionscript-api/ . Deploy it in your project either the “swc” in lib folder or the source “com” folder in “src”.

The stage is now set. For sake of example I am taking a simple application which will show up user’s Facebook friends in a Datagrid. Now in order to access your profile information, the app first need to connect with user’s Facebook account. So either at launch of your app you need to do that or have a button to take user to that.

Before you go any further please download the fb_app.mxml.

Lets get into how the code flow:

1- Clicking on “Click to login…” button, a facebook session needs to be created for this app.

session = new FacebookSessionUtil(API_KEY , SECRET_KEY , this.loaderInfo);
session.addEventListener(FacebookEvent.CONNECT, onConnect);
fbook = session.facebook;
session.login();

2- Now the user will be taken to login page (new window) of his/her account to allow the app to access the user’s data.

3- Once the app is “Allowed ” user has to go back to the app page. Here’s a catch how the app will know that user has allowed and session is valid.

4- When user clicks “Show My Friends…” list session validation is done:

session.validateLogin();

5- Only when the validation is done FacebookEvent.CONNECT is fired.

6- Now you can play with the user’s data in whatever clever way you can. To access any data now the flow is to make a call.

var call:FacebookCall = fbook.post(new GetFriends(null, fbook.uid));
call.addEventListener(FacebookEvent.COMPLETE, onGetFriends);

post method accepts a facebook command. Check out  com.facebook.commands.* for various commands to retrieving album, friends etc.

7- The response will be of type “FacebookData”.

8- Every facebook user has a unique “uid” and thats the key to get the data.

Your first facebook app is up and running.

If you liked this post, please spread the word. Share and cheer!!!.

If you need more information on above post drop a comment.