Create a mobile Facebook Flex application in Flash Builder 4.5 (Part 1)

Over the last few weeks, I’ve been working on mobile Facebook apps with ActionScript and Flex to create tutorials that help developers understand the workflow and data structure of the Facebook platform. In the next couple weeks, I’ll be posting several posts discussing different aspects of the Facebook/ActionScript/Flex/mobile platforms as well as a few new and exciting Facebook apps!

For my first project, I took one of the Adobe Developer Center articles (Create your first Flex and Facebook application) and ported it to a mobile application. The workflow and structure is relatively the same between mobile and desktop, although there are several changes that I will call out as they occur throughout this tutorial.

This tutorial follows a slightly modified set of instructions, so please be aware of the subtle differences and explanations. For this mobile tutorial, I’ll be breaking up the original tutorial into two parts: part 1 will cover the login/logout functionality and part 2 will cover displaying user data and understanding the Facebook data structure. I strongly recommend that you first  run through the desktop tutorial before pursuing this tutorial, as I make frequent reference to the original tutorial. This tutorial also expects you to be familiar with the Facebook SDK, Flash Builder, and Flex. You can download the completed project tutorial FacebookUserStatusAirMobile.

Register an application with Facebook

Sign up with Facebook & Create a new Facebook application 

  1.  Follow the entire sections of Sign up with Facebook and Create a new Facebook application if you haven’t done so already. The workflow and instructions in the original are identical to this tutorial.

Create a simple Flex mobile application

Create a Flash Builder project

Create your mobile project and project settings.

  1. Open Flash Builder.
  2. Select File > New > Flex Mobile Project.
  3. In the Create a Flex Mobile Air project dialog box, enter FacebookUserAirMobile as the project name.
  4. In the mobile settings, select your application template to be blank. Let the rest of the settings default and click Finish.  

Add a login button and create login and logout states

  1. Follow the Add a login button and Create login and logout states instructions specified in the original tutorial. Note: When in Design view, be sure to specify the mobile device type (for example HTC Evo or Apple iPad) so you can lay out components that match the mobile device’s real estate

Add Facebook login and logout

To communicate with Facebook you use classes  in the Adobe ActionScript SDK for Facebook Platform.

Add the Adobe ActionScript 3 SDK for Facebook Platform to your project

The first step is to download the Adobe ActionScript 3 SDK for Facebook to make its classes available to your project.

  1. Navigate to the Google repository for the Adobe ActionScript 3 SDK for Facebook Platform.
  2. Go to the Downloads tab and download the GraphAPI_Mobile_1_8.swc file and save the file to your computer.
  3. Drag this SWC file and drop it in the libs folder of the Package Explorer for your FacebookUserStatusAirMobile Flex project.

Initialize the application

With any Facebook & Flex application you make, the first step is to make calls to Facebook to create a session that authorizes this instance of your application with Facebook for a specific user. You will use the init() and login() methods of the FacebookMobile class.

  1. Return to FacebookUserStatusAirMobile.mxml and switch to Source Mode.
  2. First, notice the Application tag versus the WindowedApplication tag you did in the desktop tutorial even though they use the Application tag.
  3. Register to listen for the Application’s creationComplete event and generate an event handler using the Content Assist.
  4. Inside the function, call the static init() method of the FacebookMobile class. Force code-hinting to appear by pressing Ctrl+Spacebar and select FacebookMobile from the pop-up menu so that the import is written for you and the compiler can locate the class.
  5. The init() method checks to see if there is a shared object for this application and if there is retrieves it. If it does not exist, it creates it.
  6. You will notice in the code-hinting and the FacebookMobile documentation for the init() method that it has two required arguments. You must pass an application ID and a callback function.
  7. Follow the rest of Initialize the application section in the original tutorial starting at step 8. Add your application ID and create your callback function.

Add login functionality

The first time a user accesses the application, a shared object and an access token do not exist and they will need to login to Facebook. To accomplish this, you use the FacebookMobile login() method, which displays the Facebook login page.

Note: As of SDK verion 1.8, there is no support for Single-Sign-On (SSO), so mobile login will appear as a web login.

  1. Proceed to follow steps 1 and 2 of Add login functionality section in the original tutorial to create your login functionality.
  2. After you have modified your login button and created your login() function. Go to the SDK documentation and review the login() method.
    There is a significant difference between the parameters of the mobile and desktop login. Mobile login requires your callback function, stageRef, extendedPermissions, and StageWebView. Note:The documentation describes the permissions and StageWebView as optional parameters, however this is incorrect and these are in fact required in order for Flash Builder to compile correctly.
  3. Create your permissions array by setting a public variable array to store your application’s set of permissions of Facebook data. For this project, below your set of import statements, write:
    public var permissions:Array = ["user_birthday", "read_stream", "publish_stream"]
    For any application you develop for Facebook, you will be required to specify the permissions you need in order to access particular data. This data can include your own profile or your friend’s information (for example birthday, name, status, etc.). Because Facebook is so insulated from the Internet, it’s important to scope and think about what type of data access you might need. You can read more about user and friend permissions here.
  4. Create a StageWebView since it is one of the parameters required in FacebookMobile.login(). Within your login() function, write:
    var facebookWebView:StageWebView = new StageWebView()
    The StageWebView lets you display HTML content within our AIR Facebook application, in this case, our login function. Because there is no native login support or Single-Sign-On (SSO) functionality, logging into Facebook through this mobile app requires a web login. You can read more about StageWebView in Sunil Bhaskaran’s article and you can read more about Single Sign-On on the Facebook Developer site.
  5. On the next line, we define our StageWebView through a viewPort. Using the following code:
    facebookWebView.viewPort = new Rectangle (0,0, stage.width, stage.height-100)
  6. Finally on the next line, we add the actual FacebookMobile API login function:
    FacebookMobile.login(onLogin, this.stage, permissions, facebookWebView)
    The onLogin method is a callback that the original tutorial had you write.Your code should look something like this:
  7. Try running your application by going to Run > Run Configurations. Be sure to have your project selected, your Target platform (Android, Blackberry or iOS) and the device you want to emulate (or your actual device). If this is your first time running this app, click on the Login button  and you should see a Facebook login window that asks you to enter Facebook account information. Upon successfully logging in, you might encounter a runtime error, which is normal because we haven’t written any code for the callback function. Your login screen should look something like this:

Look at the data returned from Facebook

You can use these instructions to look through variables and analyze the data structure of the returned Facebook data.

  1. Follow all the steps of Look at the data returned from Facebook from the original tutorial.Learning and understanding Facebook’s data structure is especially important, and using the debugger tool can be really useful. Another very useful tool for understanding the Facebook data structure is the Graph API Explorer.

Add logout functionality

  1. Add logout functionality. Remember to code the FacebookMobile.logout() method and not FacebookDesktop.logout().

We will end this tutorial here. My apologies for leaving you in a cliff hanger, but I will continue this tutorial and finish it in next week’s post. Or better yet, I encourage you to explore and try coding the rest of the original tutorial in a mobile environment.

UPDATE: Part 2 has been posted, please check it out here!

Justin