Building Facebook
Application with Flex
Sung Wu
Aaron Tong
2008/1/23
Agenda

High-level view of building Facebook application
using Flex.
 Advantage & limitation
 How to create a simple Facebook app in Flex





Introduction to fbas
Web session
Desktop session
Canvas, profile box, and tab
Q&A
Architecture: Traditional Apps
3) Call API
FB
server
2) Send request & session_key
4) Response with page content
1) Go to canvas
6) Return page
Broswer
Your
server
Architecture: Flex Apps
3) Call API
FB
server
1) Go to canvas
2) pass session key & session secret
Broswer
Flex swf
Why Using Flex for Facebook App
 Develop
in desktop mode before deploy.
Reduce turn-around time
 Reduce server load
 integrated development environment.

Integrated Debugger: better than Firebug.
 Easily

built rich interface
Built-in UI components and effects.
Limitation
 Cannot
send Request/Invite
 Need to popup new browser window for
sending invitation
 Flash is not auto-played on profile and tab
page. (user has to click on it)
 OpenSocial containers provide REST API
only after v0.8
 Loading time may be longer
Actionscript API for Facebook
 Facebook
official API: PHP
 Other languages have to use 3rd-party API
 Facebook API is REST-styled http API
 Several 3rd-party open-source Flex API
exists
facebook-actionscript-api
 http://code.google.com/p/facebook-
actionscript-api/
 Created by Jason Christ
(http://pbking.com/blog/)
 3 types of usage modes
fbas



http://code.google.com/p/fbas/
Works on both Facebook & Bebo
Extension to Jason Christ’s facebookactionscript-api to provide support for new
methods eg.




feed.xxxxxx
new feed API
datastore API
Compatible to facebook-actionscript-api

Code written for facebook-actionscript-api should be
able to port to fbas transparently.
facebook-actionscript-api & fbas
 Two
are compatible
 fbas is just extension to facebookactionscript-api with more API methods
and a few fixes. Same usage.
 fbas can support Bebo as well as
Facebook
Desktop Session & Widget Session
 Facebook-actionscript-api
has desktop
mode and widget mode


Desktop session – desktop app
Widget session – web app
 Desktop

AIR apps or development
 Widget

session
session
Deployment
Example1: Desktop Session
fBook = new Facebook();
fBook.addEventListener(Event.COMPLETE,
onFacebookReady);
//start up a desktop instance
fBook.startDesktopSession(“api_key", “secret_key");
Example: Desktop Session for
Bebo (fbas only)
fBook = new Facebook();
fBook.addEventListener(Event.COMPLETE,
onFacebookReady);
//start up a desktop instance
fBook.inBebo();
fBook.startDesktopSession(“api_key", “secret_key");
Example2: Widget Session
<fb:swf
swfsrc=“http://new.brandedhome.com/examp
le.swf’ height=”100%” width=”100%”>
fBook = new Facebook();
fBook.addEventListener(Event.COMPLETE,
onFacebookReady);
//start up a desktop instance
var flashVars:Object = Application.application.parameters;
fBook.startWidgetSession(falshVars, “api_key", “secret_key")
Example: Widget Session for Bebo
(fbas only)
 Exactly
same thing. No change.
 fbas startWidgetSession() will
transparently handles it

fbas startWidgetSession() will look at
fb_sig_network parameter in <fb:swf>
• fb_sig_network=Facebook
• fb_sig_network=Bebo

Transparent to API user
Example: set profile FBML
// do the start desktop session or start widget session as shown
before
fbook.profile.setFBML(“your fbml
content”, userid);
Example: get friends id
…..
fbook.friends.getFriends(onGetFriends);
…..
//////////////////////////////////////////////////////////////////////////////////////////////
private function onGetFriends(e:Event):void {
var d:GetFriendsDelegate = e.target as GetFriendsDelegate;
var users:String = "";
if (d.success) {
for each (var user:FacebookUser in d.friends) {
users += user.uid + ",";
}
}
Alert.show("friends=\n" + users);
}
Resources
 Fbas:
http://code.google.com/p/fbas
 Facebook-actionscript-api:
http://code.google.com/p/facebookactionscript-api
End
 Sung
Wu
 [email protected]
 Would like to meet other
Facebook/OpenSocial/Flex developers
 Disclaimer:
 Facebook
trademark belong to Facebook
 Flex trademark of Adobe
Q&A
Back up slides
Facebook-actionscript-api
Setup
 Dependency:
corelib.swc, flexunit.swc
 Drop-in swc file or
 Create a project with the source code.
Known Issues with Facebookactionscript-api
V0.9.1
 V0.9.1
is the latest released version as of
2008/4/23.
 The following issues appears in v0.9.1, but
is fixed already in the checked-in code, so
it will be available on next version
 Friends.getAppUsers() does not work
 Profile.getFBML() will throw exception if
there is no content in profileFBML
Descargar

Building Facebook Application with Flex for Beginners