Webmaster Tools: Flash Builder and Facebook Communication

Flash Builder and Facebook Communication:

The Flex application you are going to build will display a logged in Facebook user information let’s say name, photo, and the users friends name list, and will use Flash Builder to create user interface to communicate with Facebook.

As these articles is second part of the if you would like then you can get first part information from here.

Create a Flex project in Flash Builder.
1) In Flash Builder create a new project and give project name. Here I am using “FacebookDetails” as project name.

2) Now, select Finish option and go to Design mode and from Components panel, drag out a Lable and put it on Design area. Now set the its id as loginLbl and set text property WelCome in the Properties View.

Let’s drag out a Button and put in on Design area and set its id to loginBtn and label to Login. Now if you run the application then it’s looks as below.

For our application will have to create two states, a login state which show a Label and login Button, and a logout state which display a Label, a logout Button and a DataGrid components. Lets switch to Design mode.

2) In State view first rename the State 1 to login, and click the New State button and enter state name as logout and choose OK.

In the logout states as we described above we needs a Label, logout Button and DataGrid to show users friends name list. So the logout states look like

Click the source button. Your code should look like as shown below:

Now we move towards main part of our application. To communicate with Facebook we need to use ActionScript 3 Library for Facebook Platform. So first you have to download the classes and use the classes for the application.

1) You can get the ActionScript 3 Client Library for Facebook Platform from here.

Download it and put the SWC file in libs folder of the application.

Create Facebook session

To start communication with Facebook, we will have to create a session that authorizes the application with Facebook for specific user.

2) First add Script block where we define application variables and functions. Define some variables as below and it will import related classes.

3) Now lets move towards functionality of the application. Add click property of loginBtn and select Generate Click Handler from the Code Assist pop-up. And create instances of FacebookSessionUtil, Facebook, also register event listeners and call the session login method as shown below.

You have to specify you API_KEY and SECRET keys as it, you can retrieve your application API key and application secret from the Facebook Developer application (in Facebook click the Developer application link, and then click the link My Applications, then click on your application ).

I would like share one thing here this is an sample application so we can pass the API Key and SECRET keys hard code or we can retrieve it dynamically but the SWF can decompiled and any one can access your application data. So I think it would be good idea if these key will retrieve using Flash Remoting or web service call from your application or use Facebook Connect to login.

If you run the application and click login button then it will open Facebook login page in another browser window.

You will have to login by your Facebook id. Then it will redirect you to the page shown below.

During the Facebook login process user will have to wait for some time and the process delay will be handling by FacebookEvent.WAITING_FOR_LOGIN handler, as shown below.

And the alert CLOSE event will just validate Facebook login as below.

After successful connection with Facebook the FacebookEvent.CONNECT will managed by onFacebookConnect() method as described below. Now we are connected with Facebook so we call Facebook methods using post() to get required data from Server. In the API there is one command class for each of the corresponding calls in the Facebook. Like to get more information about the user, use the GetInfo() command with appropriate arguments. And the call will managed by FacebookEvent.COMPLETE.

Also we want to get the user’s friends list so will also have to call GetFriends() commands, you can observe it in above code. And you will get friends id and based on that id will have to get other details by GetInfo() call.

protected function onGetFriendsList(event:FacebookEvent):void

{

var _friendsUid:Array = new Array();

var users:FacebookUserCollection = (event.data as GetFriendsData).friends;

for(var i:int; i < users.length; i++){

_friendsUid.push((users.getItemAt(i) as FacebookUser).uid);

}

var friendsDetailsCall:FacebookCall = _facebook.post(new GetInfo(_friendsUid,[GetInfoFieldValues.ALL_VALUES]));

friendsDetailsCall.addEventListener(FacebookEvent.COMPLETE, onFriendsGetInfo);

}

And the friends details we get the names and by push those names in DataGrid component as described below.