Accessibility

Table of Contents

  1. Introduction
  2. Create a new wrapper file
  3. Retrieve session data from URL variables
  4. Compile and upload your application
  5. Edit the application settings
  6. Remove the application API key and secret

Deploy your first Flex application on Facebook

Create a new wrapper file

Time to complete: 4 minutes

The current wrapper page for the application (YourLastNameHelloUser.html) is an HTML page that was generated automatically by Flex Builder. It contains the code to check for the correct version of Flash Player needed to run your application.

When you make your application accessible on the Facebook website, your wrapper page will need some additional functionality. When your application is accessed from a web page on the Facebook server instead of directly on your own web server, the application does not need to include code to have the user manually log into the application; the user will already be logged into Facebook and the Facebook server will send to your application a collection of GET URL variables containing info about the user session. The wrapper page for the application on your server must pass these variables to the SWF file; this is how your application will get Facebook session data now instead of using the FacebookUtilSession.login() method as you did when it was a desktop application in the first tutorial.

In order to keep the wrapper page server-agnostic, you will use an HTML page that uses JavaScript to parse the URL variables and pass them to the SWF file. The wrapper page must also contain the JavaScript Flash Player detection code. You will use the open-source SWFObject used by many Flash Platform developers. You can learn more about SWFObject from documents on the Google Code repository and the article, Detecting Flash Player versions and embedding SWF files with SWFObject 2.

  1. Return to your LastNameHelloUser project in Flex Builder.

    Note: This is the project you created in Create your first Facebook application with Flex. If you did not complete that tutorial, you can import the starter project: Download project files, select File > Import > Flex Project, and then browse to the downloaded archive file. This is the Flex project for an external Facebook Flex website application. To start this tutorial, you must also sign up with Facebook (if you are not already), follow the steps to add the Facebook Developer application and register the application, change the name of the project and application to reference your last name instead of mine, and then change the code inside the init() function to use the API key and secret your application was assigned in the Facebook Developer application.

  2. Run the application and make sure it works as it did at the end of the tutorial, Create your first Facebook application with Flex; make sure you can log into Facebook and then see your user name displayed.
  3. Download the new HTML wrapper page for the application.

  4. Unpack the ZIP file and place the two files it contains, index.htm and swfobject.js, in the src directory of your project with your MXML file (see Figure 1).

    Figure 1. Adding the new wrapper page files for your application.

  5. Right-click the HTML page and select Open With > Text Editor.

  6. Change the line of code referencing the embedded SWF file on line 25, so that it uses the name of your SWF file, for example, StallonsHelloUser.swf.

    swfobject.embedSWF("StallonsHelloUser.swf",
"flashContent", "100%", "100%",
"9.0.0", "expressInstall.swf", flashVars);
  7. Look at the files in the bin-debug folder. You should see both the old and the new wrapper files.
  8. In Flex Builder, select Project > Properties.

  9. Select Flex Compiler from the list of items on the left, and then clear the check box for Generate HTML wrapper file (see Figure 2).

    Unchecking the option to automatically generate a wrapper file.

    Figure 2. Unchecking the option to automatically generate a wrapper file.

  10. Click OK.
  11. In the Overwriting Files dialog box, click OK.
  12. Select Project > Clean. This will delete the files in the bin-debug folder and recreate them based on your new project settings.
  13. In the Clean dialog box, click OK.
  14. Look again at the files in the bin-debug folder. You should see your SWF file and the new index.htm and swfobject.js files but none of the other files.
  15. Run the application. The SWF file should open in whatever application is set as the default application for your operating system to view SWF files. Because you are no longer using the automatically generated wrapper, you need to manually specify what file to browse when you run the application so you don't browse to the SWF file directly as you did here.
  16. Select Run > Run > Other.
  17. In the Create, manage, and run configurations dialog box, make sure the project and application file are correctly selected and then clear the Use defaults check box (see Figure 3).

  18. Change the Debug, Profile, and Run paths to point to your index.htm file (see Figure 3), for example, /facebook apps/YourLastNameHelloUser/bin-debug/index.htm.

    Editing the Flex Builder run configuration for the application.

    Figure 3. Editing the Flex Builder run configuration for the application.

  19. Click the Run button. Your application should work as before, but it is still using the manual login mechanism required in external website applications. Because it is not yet embedded on Facebook, no URL variables are yet passed to the index page and then on to the Flash application.
Page 2 of 6
Previous Page
Next Page