This section covers the installation of the components required to develop a Facebook application with Flex. First, you will install the open source Flex SDK and set up the required environment variables to simplify compiling your applications. Next, you will create an application on Facebook and configure the Facebook application settings for your sample application. Finally, you will see how a Flex application should be structured and where you need to put the Facebook PHP Client library and Facebook ActionScript API files.
This tutorial assumes you are using the Microsoft® Windows® operating system. There should be minimal differences between the procedures outlined here and those that are required to follow this tutorial if you are using Mac OS X or Linux®. To install the open source Flex SDK, you will need to download the SDK from the Adobe Web site (see Prerequisites for a link). Click on Open Source Flex SDK for the latest stable build. If you want to install the debugger version of the Adobe Flash Player and the Adobe AIR runtime, feel free to download the Adobe Flex SDK, but be aware that parts of this package are not under an open source license (see Figure 3).
Figure 3. Flex 3 SDK Downloads page
The latest version at the time of writing weighed in at 23MB in size. When the download is complete, open the .zip file and extract its contents to C:\flex. Before continuing, make sure that the Java Runtime Environment (JRE) Version 1.4 or higher is installed on your computer and that the java_home/bin directory is in your system's Path environment variable. This can be found by right-clicking My Computer and selecting Properties from the Context Menu. Now click on the Advanced tab and click the Environment variables button (see Figure 4).
Figure 4. Windows Environment Variables properties
Select the Path row under the System variables section of this screen and click Edit (see Figure 5).
Figure 5. Edit Path System Variable window
Make sure that the path to the bin directory of your JRE installation is somewhere in the Variable value text box. Also, add a semicolon to the end of this line, and after the semicolon enter C:\flex\bin. This allows you to run the Flex compiler in any directory without having to specify the explicit path to the compiler.
Believe it or not, that's all there is to installing the Flex SDK. To verify that the installation was successful, navigate to C:\flex\samples\explorer and double-click the build batch file. This will compile a sample application that allows you to explore the many different UI components available in the Flex SDK. The compilation process may take several minutes and should look something like Figure 6. When the process is complete the DOS window will close automatically.
Figure 6. Compiling the explorer sample application
When the compilation process is complete, open the C:\flex\samples\explorer\explorer.swf file to view the application. Please note that you will need to have Adobe Flash Player 9 or later installed for the application to work. This same requirement holds for all of the applications created in this tutorial. Figure 7 shows the Explorer application in action.
Figure 7. Explorer sample Flex application
To create a Facebook application you will need to have a Facebook account. If you don't have one, you can register for free. You will also need to add the "Developer" application to your Facebook profile. To do this, go to the Facebook Developer Application and click Allow to let the Developer application access your profile. On the Developer application page click the Set up New Application button. This will take you to the New Application form. On this page, ensure that the Optional Fields section is pulled down.
Figure 8. Part of the Facebook New Application form
In Figure 8 above you can see part of the application form. Don't be daunted by the length; there are only a few settings you need to change:
- Application Name. This is the name of your application. I have called mine fbFlexBook, but you can call yours whatever you like. While you're at it, be sure to check the check box indicating that you have read and agree to the terms of the Facebook Platform.
- Callback URL. This is the URL where Facebook will look for the content of your Facebook application. This URL must point to a location on a Web server with PHP installed in order to follow this tutorial. The URL I have entered is for sample purposes only and will not work—you must replace this with your own value. Don't worry if there are no files in the location right now; you will be creating PHP files later in this tutorial that you will need to upload to this location for the application to work.
- Canvas Page URL. This is the URL on Facebook where you want your application to be found. It's usually best to give it a URL similar to the application name. This must be unique so, again, you cannot use the value I have supplied here. Be sure to leave the Use FBML option beneath this selected.
- Can your application be added on Facebook? You must select "Yes" here or your application will not be able to add a profile box to users' profiles (including your own).
- Who can add your application to their Facebook account? Be sure to select the check box next to Users here or your application will not be able to add a profile box to users' profiles (including your own).
- Default FBML. Enter something like "Testing the profile box" in here. The sample application will handle the content of the profile box later.
- Default Profile Box column. Select Narrow here, as your sample application is simply a list of photo albums and does not need to be wide. Only narrow profile boxes can be added to the new Facebook profile's Wall tab. Wide profile boxes can only be added to the Boxes tab.
- Developer Mode. Ensure that this check box is checked so that only you can use the application. If this is not checked, anyone can add your application to their Facebook profile.
You can optionally fill out some of the other fields if you wish, but this is not required for the sake of your sample application. You can always change these values later on via the Edit Settings link on the My Applications page. Click Submit to create the Facebook application, which will generate an API key and Shared Secret and bring you to the "My Applications" page for your Facebook application, which should look like Figure 9 (the API key and Shared Secret have been blurred for security purposes).
Figure 9. Facebook My Applications Page for fbFlexBook
That is all there is to creating a Facebook application. Right now the application doesn't do anything and will return an error if you try to navigate to it. We will return to this application when developing your sample application later in this tutorial, at which point you will be developing some neat functionality.
To follow the sample application at the end of this tutorial you need to download the latest version of the Facebook PHP Client Library. Facebook has recently undergone some major changes in terms of how its profile works. As a result, some major changes have been made to the Facebook PHP Client library, so be sure to get the latest version from Prerequisites. If you can log in to your Web server via SSH, you can issue the commands shown in Listing 1 to easily download and extract the tarball directly on the server.
Listing 1. Download and extract the Facebook PHP Client library
wget 'http://svn.facebook.com/svnroot/platform/clients/packages/facebook-platform.tar.gz' tar -xzvf facebook-platform.tar.gz
Alternatively you can download the library from the link shown in Listing 1 above and extract it using an archiving utility that supports .tar.gz files, such as 7-Zip.
In the sample application your slideshow will be retrieving photos from Facebook and will need to access the Facebook API to do so. We will use the Facebook ActionScript API to make our lives easier. Be sure to download the latest source version of this library. Extract the .zip file to a convenient location since you will be copying the "com" folder into your sample application later in this tutorial.
Now that you have downloaded and configured all of the different components required for this tutorial, you'll next create a basic Flex application to get started.