1 / 23

Building Facebook Application with Flex

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

gita
Download Presentation

Building Facebook Application with Flex

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Building Facebook Application with Flex Sung Wu Aaron Tong 2008/1/23

  2. 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

  3. Architecture: Traditional Apps 3) Call API FB server Your server 2) Send request & session_key 4) Response with page content • Go to canvas 6) Return page Broswer

  4. Architecture: Flex Apps FB server 3) Call API • Go to canvas 2) pass session key & session secret Broswer Flex swf

  5. 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.

  6. 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

  7. 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

  8. facebook-actionscript-api • http://code.google.com/p/facebook-actionscript-api/ • Created by Jason Christ (http://pbking.com/blog/) • 3 types of usage modes

  9. fbas • http://code.google.com/p/fbas/ • Works on both Facebook & Bebo • Extension to Jason Christ’s facebook-actionscript-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.

  10. facebook-actionscript-api & fbas • Two are compatible • fbas is just extension to facebook-actionscript-api with more API methods and a few fixes. Same usage. • fbas can support Bebo as well as Facebook

  11. Desktop Session & Widget Session • Facebook-actionscript-api has desktop mode and widget mode • Desktop session – desktop app • Widget session – web app • Desktop session • AIR apps or development • Widget session • Deployment

  12. Example1: Desktop Session fBook = new Facebook(); fBook.addEventListener(Event.COMPLETE, onFacebookReady); //start up a desktop instance fBook.startDesktopSession(“api_key", “secret_key");

  13. 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");

  14. Example2: Widget Session <fb:swf swfsrc=“http://new.brandedhome.com/example.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");

  15. 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

  16. Example: set profile FBML // do the start desktop session or start widget session as shown before fbook.profile.setFBML(“your fbml content”, userid);

  17. Example: get friends id ….. fbook.friends.getFriends(onGetFriends); ….. ////////////////////////////////////////////////////////////////////////////////////////////// privatefunction onGetFriends(e:Event):void { var d:GetFriendsDelegate = e.target as GetFriendsDelegate; var users:String = ""; if (d.success) { foreach (var user:FacebookUser in d.friends) { users += user.uid + ","; } } Alert.show("friends=\n" + users); }

  18. Resources • Fbas: http://code.google.com/p/fbas • Facebook-actionscript-api: http://code.google.com/p/facebook-actionscript-api

  19. End • Sung Wu • sjcity@gmail.com • Would like to meet other Facebook/OpenSocial/Flex developers • Disclaimer: • Facebook trademark belong to Facebook • Flex trademark of Adobe

  20. Q&A

  21. Back up slides

  22. Facebook-actionscript-apiSetup • Dependency: corelib.swc, flexunit.swc • Drop-in swc file or • Create a project with the source code.

  23. Known Issues with Facebook-actionscript-apiV0.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

More Related