chandra shekhar

Over 6 years of experience in Software Development including Analysis, Design and Development of various applications in Flash and Flex environment. Currently, I am associated with one of the India's leading IT company specialized in providing eLearning services, Magic Software Pvt. Ltd (http://www.magicsw.com).
In spare time I blog at http://actionscript.org and at my own weblog brupp.com

View all articles by chandra shekhar

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.