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

In last week’s post, I introduced Part 1 of Create a mobile Facebook Flex application in Flash Builder 4.5. Let’s now complete the application by introducing how you retrieve user information, post status updates, and skin buttons. Similar to Part 1, I’ll be referencing the original tutorial throughout this tutorial and only point out differences in programming syntax. I will also explain details of the functions and data structures that are used in this tutorial.

Understanding the Graph API

This tutorial uses the Graph API, so I’ll start by giving an introduction and overview. The Graph API is a social graph that holds all the information within the Facebook platform that is connected within a user account. Through the Graph API, developers can tap into any information that’s available to them (such as profile information, videos, photos, events, pages, notes, etc). Making calls to the Graph API will return a XML-like data structure where array-like syntax can be used to manipulate data (as you will see later in this tutorial).

Here’s an example of a returned API call for a coca cola page:  https://graph.facebook.com/cocacola

As shown in the example, the Graph API returned various raw information about Coca Cola’s Facebook page. For the most part, you can retrieve data from the API call such as id, name, picture, category and everything else that’s available. The Facebook documentation lists many more examples of what Graph API can do.

The best way to really understand Graph API is to see it in action through the Graph API explorer. In the input text box next to the GET button, you will see https://graph.facebook.com/xxxx where the xxxx is a Facebook ID number (most likely your own). When you first log in, the Graph API explorer shows the data structure of the user profile. From here, you can explore your various connections such as activities, albums, events, feed and everything else that is connected within.

Here’s an example of what the Graph API explorer looks like:

The Graph API explorer is a valuable tool for understanding how the Facebook data structure works and how you can make calls to retrieve different types of data. For the purpose of this tutorial, I’ll explain the data structures you will need as you go along.

Get and display Facebook user info

In this section, you’ll lay out components in which you display user profile information.

 Display basic user profile info, Display a user’s profile picture, & Display info that requires extended permissions

  1. Follow the instructions in Display basic user profile info, Display a user’s profile picture, and Display info that requires extended permissions.

As discussed in the original tutorial, permissions is an important topic to be taken with great consideration when developing Facebook applications (with or without Flex). Because its encapsulated nature, Facebook only allows you to see user information with public permission settings (unless set otherwise). While developing your Facebook app, consider what types of data you want to access. You can read the permissions documentation on the Facebook site for more information.

 Get and post Facebook status messages

Pay extra attention to status messages. Reading and posting status messages requires a slightly different and more sophisticated workflow, as the data itself is more dynamic than static data (such as retrieving your name, picture, or birthday date).

Update your status on Facebook.com & Look up info in developer documentation

  1. Follow the the instructions in Update your status on facebook.com & Look up info in developer documentation.
  2. Be sure to remember to put FacebookMobile when coding your login and getImageUrl() calls.

 Get and display user status messages

  1. Continue to follow the instructions in Get and display user status messages.
  2. In step 2, remember to put FacebookMobile when writing your api call.

The api call for FacebookMobile.api("/me/statuses", getStatusHandler) returns a list of status message objects posted by the user’s profile. You can view the actual data structure of your status messages by going to the Graph API explorer and in the input box https://graph.facebook.com/me/statuses. You will see that the returned list of status message objects contains detailed information about each status update, including status IDs, name, user ID, message, updated time, people who have liked your post, etc.

In this particular API function, the result handler getStatusHandler passes the list via a result object that contains the same data structure as returned by the Graph API explorer. As in step 19 in Get and display user status messages, the result Object can be handled like an array and use array-like syntax, such as statusLbl.text=result[0].message. This gets the first item in the array and retrieves the message. You can also retrieve other status information (not included in this tutorial) with calls like result[0].from.name as shown in the example.

 Request permission to post messages

  1. Follow the tutorial in Request permission to post messages. Be sure to continue using FacebookMobile instead of FacebookDesktop for any login or submit calls to the Facebook API.

Pay extra attention to step 12 regarding submitting your posts. You will be sending your status update through the API call by setting the message variable to the text input value at statusInput.text. Also note that you will specify the request type as “POST” (not the default “GET” value). Your FacebookMobile api method call will take the message written in the text input box, pass it into your “/me/feed” and the submitPostHandler will clear the input text box and also update your status. The code will look something like:

FacebookMobile.api("/me/feed", submitPostHandler, {message:statusInput.text}, "post").

Your script code should look something like the following:

Skin the login and logout buttons

You can choose to to follow the original tutorial’s section on Skin the login and logout buttons, which uses design mode. I prefer to manually program the buttons, although both ways will produce the same result.

  1. Go to New > MXML Skin
  2. In package, type “skins”. In Name, type “FBLoginButtonSkin“. In Host component, type “spark.components.Button”.
  3. Click Finish.
  4. Open FBLoginButtonSkin.mxml and go to source view.
  5. Under the <s:states> tags, type "<s:BitmapImage source="@Embed('images/fblogin.gif')"/>.
  6. Save the file.
  7. Go to FacebookUserStatusAirMobile.mxml and switch to source view.
  8. In the loginoutBtn tag, add the following within the opening Button tag:
    skinClass.loggedout="skins.FBLoginButtonSkin"
  9. Repeat steps 1-8 using the name “FBLogoutButtonSkin” and changing the image to “images/fblogout.gif“.
  10. Run your app and you should see your  new login and logout buttons skinned with a Facebook-like button.

The end product of this simple mobile Facebook application should look something like this:

Where to go from here

Continue to develop this app! This will hopefully give you some foundation into some very basic Facebook properties. Continue to look through the Facebook Developer documentation page, check out the Adobe Developer Connection facebook development website, and use the Graph API explorer to get a better understanding of the Facebook data structure.

Also please note that these tutorials are applicable to both smart phone and tablet platforms (Android, iOS, and Blackberry).

Next week, I’ll introduce my next tutorial that will showcase more sophisticated capabilities of developing mobile Flex applications and more thorough coverage of data manipulation with Facebook data. Please stay tuned!

I hope this has been helpful!

Justin