HOWTO Create a Facebook App using FlexBuilder

June 24th, 2009

So for a couple of weeks, I’ve been messing around w/ building a simple using Facebook. I decided to use the new ActionScript 3 API created by Adobe and Facebook. I wanted to do a little tutorial because some of this information is hard to understand since most of the API has definitions like, ” “.

In this tutorial I will show you how to login to Facebook, retrieve your friends list and populate a TileList with their pictures. Ok, let’s get started.

Step 1: Get an account (If you don’t have a Facebook account, that would be wierd. People in nursing homes have them).

Step 2: Create a developer App (link to directions by Adobe)

Step 3: Set up a Flex Project (link again to Adobe. Stop on step 7)

Step 4: in Design view drop in two Buttons, a Text, ComboBox and TileList components.

Step 5: enter the text into the labels of the buttons as they are in the picture below.

basedesignview

Then the TileList

Step 6: Now to make changes to the TileList we need click on the TileList and look at Flex Properties in the Flex Development View. In the Flex Properties set Column Count to 4 (ignore the row count).

Ok now we have the visuals let’s get to my favorite, coding.

Step 7: We are going to make ids for all componets so we can reference them in the code. The first Button name “loginbutton”, the label name “title”, the combobox name “sortBox”. See below to check your code.

<mx:Button id="loginbutton"
 
label="Click after you log into Facebook"
 
x="10" y="10"/>
 
<mx:Label id="title"
 
text="Hello you" x="10" y="40"/>
 
<mx:Button label="get Friends"
 
x="10" y="66"/>
 
<mx:ComboBox id="sortBox" x="10" y="96"/>
 
<mx:TileList id="friendsList" columnCount="4" width="400" height="400"
 
x="10" y="126">
 
</mx:TileList>

Step 8: we are going to put in all of the imports and variables.

<mx:Script>
 
<![CDATA[
 
]]>
 
</mx:Script>

Wrap this in side of the Script block.

import com.facebook.commands.notifications.SendEmail;
 
import com.facebook.commands.notifications.SendNotification;
 
import mx.utils.StringUtil;
 
import com.facebook.data.FacebookErrorCodes;
 
import mx.controls.Alert;
 
import mx.events.ListEvent;
 
import mx.events.ItemClickEvent;
 
import mx.collections.Sort;
 
import mx.collections.SortField;
 
import com.facebook.data.users.FacebookUserCollection;
 
import mx.collections.ArrayCollection;
 
import mx.controls.List;
 
import com.facebook.data.friends.GetFriendsData;
 
import com.facebook.commands.friends.GetFriends;
 
import com.facebook.data.friends.FriendsData;
 
import com.facebook.data.friends.FriendsCollection;
 
import com.facebook.data.users.GetInfoData;
 
import com.facebook.data.users.FacebookUser;
 
import com.facebook.events.FacebookEvent;
 
import com.facebook.Facebook;
 
import com.facebook.utils.FacebookSessionUtil
 
import com.facebook.net.FacebookCall;
 
import com.facebook.commands.users.GetInfo;
 
import com.facebook.data.users.GetInfoFieldValues;
 
import com.facebook.data.users.FriendsGetData;
 
[Bindable]
private var _friendsCollection:ArrayCollection;
 
private var fbook:Facebook;
 
private var session:FacebookSessionUtil;
 
private var user:FacebookUser;
 
private var sortTypes:Object;
 
private var answerPerson:String;
 
private var answer:String;
 
private var alert:Alert;
 
private var _apiKey:String = "{YOUR APIKEY}";
 
private var _secret:String = "{YOUR SECRET CODE}";
 
private var _friendSearched:String;
private var quizFriendsCollection:ArrayCollection = new ArrayCollection();
[Bindable]
public var sorts:ArrayCollection = new ArrayCollection([{label: "A-Z", data: "last_name"}, {label: "Z-A", data: "last_name"}]);

Step 9: We are going to create an init function to be called on applicationComplete. THis will go out, log you in and create a session.

private function init():void
{
fbook=new Facebook();
session=new FacebookSessionUtil(_apiKey, _secret, stage.loaderInfo);
fbook=session.facebook;
<div><code>session.login();
session.addEventListener(FacebookEvent.CONNECT, onConnect);
}</code></div>

Don’t forget to add an applicationComplete to your Application Tag.

Step 10: we are going to create the response to us connecting to Facebook. It will return our id which we will make another call to get all of our info for our account.

private function onConfirmLogin():void
{
 
this.removeChild(loginbutton);
 
session.validateLogin();
}

//also change this button

&lt;mx:Button id="loginbutton"
 
label="Click after you log into Facebook"
 
click="onConfirmLogin()" x="10" y="10"/&gt;
 
private function onConnect(e:FacebookEvent):void
{
var call:FacebookCall=fbook.post(new GetInfo([fbook.uid], [GetInfoFieldValues.ALL_VALUES]));
call.addEventListener(FacebookEvent.COMPLETE, onGetInfo);
}

This should only return one result. The title text we named will display the account first and last name

private function onGetInfo(e:FacebookEvent):void
 
{
 
for (var i:int=0; i &lt; (e.data as GetInfoData).userCollection.length; i++)
 
{
 
user=(e.data as GetInfoData).userCollection.getItemAt(i) as FacebookUser;
 
title.text="Hello " + user.first_name + " " + user.last_name;
 
}
 
}

Step 10:Let’s get some friends.

//This gives just the ids of your friends
 
private function getFriends():void
 
{
 
var call:FacebookCall=fbook.post(new GetFriends());
 
call.addEventListener(FacebookEvent.COMPLETE, onGetFriends);
 
}
 
private function onGetFriends(evt:FacebookEvent):void
 
{
 
if(evt.error)
 
{
 
alert = Alert.show(evt.error.errorMsg, "Error: " + evt.error.errorCode);
 
return;
 
}
 
var friends:FacebookUserCollection=(evt.data as GetFriendsData).friends;
 
var uids:Array=[];
 
var userFriend:FacebookUser;
 
for (var i:int=0; i &lt; friends.source.length; i++)
 
{
 
userFriend=friends.getItemAt(i) as FacebookUser;
 
uids.push(userFriend.uid);
 
}
 
//get all the info of a friends
 
var call:FacebookCall=fbook.post(new GetInfo(uids, [GetInfoFieldValues.ALL_VALUES]));
 
call.addEventListener(FacebookEvent.COMPLETE, onHandleFriends);
}

Don’t forget to add the getFriends function to the click handler of the Button labeled “get Friends”

private function onHandleFriends(e:FacebookEvent):void
 
{
 
if(e.error)
 
{
 
var alert:Alert = Alert.show(e.error.errorMsg, "Error: " +e.error.errorCode);
 
return;
 
}
 
var data:GetInfoData=e.data as GetInfoData;
 
var friendCollection:FacebookUserCollection=data.userCollection as FacebookUserCollection;
 
createList(friendCollection);
 
}
 
private function createList(data:FacebookUserCollection):void
 
{
 
_friendsCollection=new ArrayCollection();
 
for (var i:int=0; i &lt; data.length; i++)
 
{
 
_friendsCollection.addItem(data.getItemAt(i));
 
}
 
friendsList.dataProvider=_friendsCollection;
 
}
&lt;mx:Button label="get Friends"
 
click="getFriends()" x="10" y="66"/&gt;t;
 
Also we need to put in an itemRender to the TileList (for more info on itemRenders)
 
//This will allow you to show each friend's picture and when you hover over it will tell you there name.
 
&lt;mx:TileList id="friendsList" columnCount="4" rowCount="1" width="400" height="400"
 
labelField="pic_big" allowMultipleSelection="false" x="10" y="126"&gt;
 
&lt;mx:itemRenderer&gt;
 
&lt;mx:Component&gt;
 
&lt;mx:Image source="{data.pic_big}"
 
toolTip="{data.name}"/&gt;
 
&lt;/mx:Component&gt;
 
&lt;/mx:itemRenderer&gt;

Step 11: (Almost there) add functionality to the comboBox.

private function closeHandler(event:Event):void
 
{
 
sort();
 
}
 
private function sort():void
 
{
 
var dataSortField:SortField=new SortField();
 
dataSortField.name= sortBox.selectedItem.data as String;
 
if(sortBox.selectedLabel == "Z-A")
 
{
 
dataSortField.descending = false;
 
}
 
else
 
{
 
dataSortField.descending = true;
 
}
 
var numericDataSort:Sort = new Sort();
 
numericDataSort.fields = [dataSortField];
 
_friendsCollection.sort = numericDataSort;
 
_friendsCollection.refresh();
 
}

//don’t forget to add the event handler for the comboBox

&lt;mx:ComboBox dataProvider="{sorts}" id="sortBox" close="closeHandler(event)" x="10" y="96"/&gt;

And we are done. Here is the code in it’s entirety.

		&lt; ![CDATA[
			import com.facebook.commands.notifications.SendEmail;
			import com.facebook.commands.notifications.SendNotification;
			import mx.utils.StringUtil;
			import com.facebook.data.FacebookErrorCodes;
			import mx.controls.Alert;
			import mx.events.ListEvent;
			import mx.events.ItemClickEvent;
			import mx.collections.Sort;
			import mx.collections.SortField;
			import com.facebook.data.users.FacebookUserCollection;
			import mx.collections.ArrayCollection;
			import mx.controls.List;
			import com.facebook.data.friends.GetFriendsData;
			import com.facebook.commands.friends.GetFriends;
			import com.facebook.data.friends.FriendsData;
			import com.facebook.data.friends.FriendsCollection;
			import com.facebook.data.users.GetInfoData;
			import com.facebook.data.users.FacebookUser;
			import com.facebook.events.FacebookEvent;
			import com.facebook.Facebook;
			import com.facebook.utils.FacebookSessionUtil
			import com.facebook.net.FacebookCall;
			import com.facebook.commands.users.GetInfo;
			import com.facebook.data.users.GetInfoFieldValues;
			import com.facebook.data.users.FriendsGetData;
 
			[Bindable]
			private var _friendsCollection:ArrayCollection;
			private var fbook:Facebook;
			private var session:FacebookSessionUtil;
			private var user:FacebookUser;
			private var sortTypes:Object;
			private var infoType:String = "activities";
			private var answerPerson:String;
			private var answer:String;
			private var alert:Alert;
			private var _apiKey:String = "{YOUR APIKEY}";
			private var _secret:String = "{YOUR SECRET CODE}";
			private var _friendSearched:String;
 
			private var quizFriendsCollection:ArrayCollection = new ArrayCollection();
 
			[Bindable]
			public var sorts:ArrayCollection = new ArrayCollection([{label: "A-Z", data: "last_name"}, {label: "Z-A", data: "last_name"}]);
 
			private function init():void
			{
				fbook=new Facebook();
				session=new FacebookSessionUtil(_apiKey, _secret, stage.loaderInfo);
				fbook=session.facebook;
 
				session.login();
				session.addEventListener(FacebookEvent.CONNECT, onConnect);
			/*
			   sortTypes["ASC"] = {label:"A-Z", type:"last_name"};
			 sortTypes["DESC"] = {label:"Z-A", type:"last_name"}; */
			}
 
			private function onConfirmLogin():void
			{
				this.removeChild(loginbutton);
				session.validateLogin();
			}
 
			private function onConnect(e:FacebookEvent):void
			{
				var call:FacebookCall=fbook.post(new GetInfo([fbook.uid], [GetInfoFieldValues.ALL_VALUES]));
				call.addEventListener(FacebookEvent.COMPLETE, onGetInfo);
			}
 
			private function getFriends():void
			{
				var call:FacebookCall=fbook.post(new GetFriends());
				call.addEventListener(FacebookEvent.COMPLETE, onGetFriends);
			}
 
			private function onGetFriends(evt:FacebookEvent):void
			{
				if(evt.error)
				{
					var errorCode:String;
					switch(evt.error.errorCode)
					{
						case FacebookErrorCodes.API_EC_BAD_IP:
							errorCode = "Bad IP";
						break;
 
						case FacebookErrorCodes.API_EC_DEPRECATED:
							errorCode = "API deprecated";
						break;
 
						case FacebookErrorCodes.API_EC_HOST_API:
							errorCode = "API"
						break;
					}
					alert = Alert.show(evt.error.errorMsg, "Error: " + evt.error.errorCode);
					return;
				}
				var friends:FacebookUserCollection=(evt.data as GetFriendsData).friends;
				var uids:Array=[];
				var userFriend:FacebookUser;
				for (var i:int=0; i &lt; friends.source.length; i++)
				{
					userFriend=friends.getItemAt(i) as FacebookUser;
					uids.push(userFriend.uid);
				}
 
				var call:FacebookCall=fbook.post(new GetInfo(uids, [GetInfoFieldValues.ALL_VALUES]));
				call.addEventListener(FacebookEvent.COMPLETE, onHandleFriends);
				//createList(friends);
			}
 
			private function onHandleFriends(e:FacebookEvent):void
			{
 
				if(e.error)
				{
					var alert:Alert = Alert.show(e.error.errorMsg, "Error: " +e.error.errorCode);
					return;
				}
				var data:GetInfoData=e.data as GetInfoData;
				var friendCollection:FacebookUserCollection=data.userCollection as FacebookUserCollection;
				createList(friendCollection);
				quizMe();
			}
 
			private function onGetInfo(e:FacebookEvent):void
			{
				for (var i:int=0; i &lt; (e.data as GetInfoData).userCollection.length; i++)
				{
					user=(e.data as GetInfoData).userCollection.getItemAt(i) as FacebookUser;
					title.text="Hello " + user.first_name + " " + user.last_name;
				}
 
			}
 
			private function createList(data:FacebookUserCollection):void
			{
				_friendsCollection=new ArrayCollection();
				for (var i:int=0; i &lt; data.length; i++)
				{
					_friendsCollection.addItem(data.getItemAt(i));
				}
				friendsList.dataProvider=_friendsCollection;
			}
 
			private function closeHandler(event:Event):void
			{
				sort();
			}
 
			private function sort():void
			{
				var dataSortField:SortField=new SortField();
				dataSortField.name= sortBox.selectedItem.data as String;
 
				if(sortBox.selectedLabel ==  "Z-A")
				{
					dataSortField.descending = false;
				}
				else
				{
					dataSortField.descending = true;
				}
 
				 var numericDataSort:Sort = new Sort();
                numericDataSort.fields = [dataSortField];
				_friendsCollection.sort = numericDataSort;
                _friendsCollection.refresh();
 
			}
 
		]]&gt;

The next tutorial will be searching for a specific friend and sending them a message.

Here are some links for extra reading.

Item Renderers

Event Handlers

Heck, just read everything in here to get an understanding of Flex if you don’t have one.

Last 5 posts in actionscript

Last 5 posts in as3

Last 5 posts in flash

Last 5 posts in Flex

Last 5 posts in Flex Builder

Entry Filed under: Flex, Flex Builder, actionscript, as3, flash

4 Comments Add your own

  • 1. Will  |  July 3rd, 2009 at 6:27 pm

    I found this tutorial very useful.
    Thank you!

  • 2. nazim  |  July 17th, 2009 at 7:06 am

    fjdkf

  • 3. thehuyvb  |  September 9th, 2009 at 1:24 am

    Thanks so much ^^
    It works.

  • 4. paranoio  |  January 30th, 2010 at 1:20 am

    thank you sooo much :)

Leave a Comment

Required

Required, hidden

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word

Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Trackback this post  |  Subscribe to the comments via RSS Feed