Archive for October, 2011

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:

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 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 & Look up info in developer documentation

  1. Follow the the instructions in Update your status on & 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 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] 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:
  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!


Are you using Adobe’s ActionScript code examples?

Hey there ActionScript developers! As you may or may not know, we provide a lot of code examples in the ActionScript docs. However, these examples come in a variety of shapes and sizes, which sometimes makes it hard to get your bearings. So if you were having trouble running/using examples in the ActionScript 3.0 Developer’s Guide, we have revamped the How to use ActionScript Examples page. Please visit this page and let us know what you think, either by leaving a “Was this helpful?” rating or by posting a comment.

For more detail, see Erick Vera’s post on Tumblr.


PS: We have a lot of great ActionScript usage documentation but Page View reports indicate that it is an underutilized resource. So this is just a heads-up that I’ll be blogging about ActionScript content in the coming weeks.

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!


Facebook & Flex News

For the last couple weeks, I’ve been working with the ActionScript-Facebook API to get a better understanding of creating a RIA (or Rich Internet Application) on the Facebook platform. So in case you missed it, I’d like to give folks a friendly reminder that on October 1, Facebook and Adobe released the latest ActionScript 3 SDK for Facebook Platform (version 1.8). This update integrates the latest OAuth 2.0. You can download the latest SDK here and learn more about OAuth 2.0 here.

With this new development, we’ve updated the Facebook sample files with several bug fixes, improvements (including readme files with installation and configuration instructions), and upgraded login to OAuth 2.0 standards. If you haven’t tried these sample files, they are very useful resources for learning more about creating your Facebook-integrated application. I’m currently working on a mobile Facebook example and hope to blog about it in the next few weeks, so stay tuned!