Implement a Facebook photo album using the Flex SDK Skill Level: Intermediate Joe Lennon ([email protected]) Software Developer Core International 18 Nov 2008 Adobe® has released the free, open source Flex SDK framework to enable developers to create Rich Internet Applications (RIAs). The Flex framework provides you with a method of creating cross-browser, cross-platform Web applications that is quick and simple. Flex applications run in the Flash player, which is installed on the majority of Internet-connected computers, but Flex also provides you with an object-oriented user interface framework similar to Java™ Swing. In this tutorial, develop a Facebook application in Adobe Flex that displays a slideshow of a user's Facebook photo albums. The Facebook application will contain a profile box listing all of the user's photo albums, each a link to a Flex slideshow of that album. The Flex application will use the Facebook REST API to fetch the photos of the selected Facebook album and dynamically generate the slideshow. Section 1. Before you start This tutorial is for Web developers who are looking to create interactive Facebook applications using the free Adobe Flex SDK. Although not required, a basic knowledge of PHP, HTML, and Web application development would be of great benefit to readers. No prior experience with Flex development or Facebook development is required. About this tutorial This tutorial provides you with a foundation in developing Facebook applications Implement a Facebook photo album using the Flex SDK © Copyright IBM Corporation 1994, 2008. All rights reserved. Page 1 of 49 developerWorks® ibm.com/developerWorks using the Adobe Flex SDK and the Facebook development platform. You'll first be introduced to the concepts of Adobe Flex, in particular MXML and ActionScript. Then we'll look at Facebook applications and the tools available to developers, such as FBML (Facebook Markup Language), FQL (Facebook Query Language), and the REST API. Next, we'll set up the development environment by installing the Flex SDK, and I'll explain the structure of a Flex application and show you how to create a Facebook application. We then create a basic Flex application, which lays the foundation for the sample application that follows, a Facebook slideshow application. Prerequisites You'll need the following tools to follow along with this tutorial: • The latest stable build of the Flex 3 SDK. • An account on Facebook with the Developer application added. • A Web server with PHP 5 or later installed. • Facebook PHP Client Library. • Facebook ActionScript API. The latest version is V0.9.1. • Adobe Flash Player Version 9 or later. Section 2. Introduction to Adobe Flex I'll start by introducing Adobe Flex and looking at the different options for developing Flex applications, in particular, the free Adobe Flex SDK. We can then look at the technologies used to create a Flex application: MXML and ActionScript. What is Flex? Adobe Flex is a framework that allows you to create powerful Flash applications using traditional application development techniques. Flex includes a rich component library that allows you to easily create stunning Rich Internet Applications (RIAs). These applications can be developed using the open source Flex SDK and a basic text editor, such as Notepad. Adobe has a commercial IDE available called Flex Builder, which is based on the Eclipse platform. In this tutorial, however, we will simply be using the free Flex SDK. Implement a Facebook photo album using the Flex SDK Page 2 of 49 © Copyright IBM Corporation 1994, 2008. All rights reserved. ibm.com/developerWorks developerWorks® What is the Flex SDK? The Flex SDK is an open source framework that can be used to develop Flash applications using a standards-based language that should be easy to learn for developers of all disciplines. The Flex SDK is available in two forms: the open source Flex 3 SDK and the Adobe Flex 3 SDK. Both are available free of charge, but differ in terms of the license. The open source Flex 3 SDK contains everything you need to develop Flex applications and is entirely licensed under Version 1.1 of the Mozilla Public License (MPL). The Adobe Flex 3 SDK contains everything in the open source Flex 3 SDK, as well as additional components such as the Adobe AIR runtime and the debugger version of the Adobe Flash Player. These additional components are licensed under the Adobe Flex SDK license. This tutorial only covers the open source Flex 3 SDK. Whichever version you choose to download should not impact your ability to follow along with the sample applications. If you wish to install the debugger version of the Adobe Flash player, you will find a link to more information about doing so in the Resources section. MXML and ActionScript MXML is an XML-based user interface markup language that is mainly used to layout a Flex application and to add rich components to it, much like Swing in the Java language. MXML is also used to create data sources and to bind the user interface components to these sources. One of the greatest advantages of MXML is that it allows the developer to create animations, states, transitions, and styles very simply, resulting in reduced UI development time and greater productivity on the development of the application functionality itself. A very useful feature of MXML is its extensible nature, allowing developers to easily create reusable components. ActionScript is a scripting language based on ECMAScript, with syntax similar to that of JavaScript, which should make it relatively simple for Web developers to learn. ActionScript was traditionally used to control Flash animations, but nowadays is used in the creation of full-blown procedural and object-oriented applications. In terms of Flex, ActionScript allows you to provide an application with interactivity, and you will be using it extensively in the sample application later in this tutorial. MXML files are created with the extension .mxml and can include ActionScript in a CDATA section within <mx:Script> tags. Alternatively, ActionScript code can be stored in an external file, with the extension .as. MXML and ActionScript code is compiled into Flash bytecode, resulting in a .swf file. This file can then be included in HTML files or AIR applications and deployed to the Web or to the desktop. Implement a Facebook photo album using the Flex SDK © Copyright IBM Corporation 1994, 2008. All rights reserved. Page 3 of 49 developerWorks® ibm.com/developerWorks Section 3. Introduction to Facebook applications Now let's examine the concept of a Facebook application and the tools that allow you to create these applications and to retrieve data from Facebook. What is a Facebook application? Facebook is a social networking site that was launched in 2004. At the time of this writing, Facebook has over 36 million users and, according to Alexa, is the fifth-most visited Web site on the Internet. Facebook allows users to create a profile of themselves with personal information, photos, and so on. It also allows users to communicate with each other using the "Wall", present on every Facebook user's profile. In 2007, Facebook launched the Facebook Platform, which included a set of tools that would allow developers to create custom applications that interact with Facebook data and that users can add to their profile. At present, over 33,000 Facebook applications are available, including popular applications such as iLike and Scrabble. Profile boxes and canvas pages As mentioned, in this tutorial you will create a sample application that resides on a Facebook user's profile. To do this, you will create what is known as a profile box. Profile boxes in Facebook can be added to the Wall or to the Boxes tab of a user's profile and are generally the starting point for a Facebook application. An example of a profile box is the Friends box, highlighted in Figure 1 below. Figure 1. Facebook profile box Implement a Facebook photo album using the Flex SDK Page 4 of 49 © Copyright IBM Corporation 1994, 2008. All rights reserved. ibm.com/developerWorks developerWorks® A canvas page is a dedicated page for a Facebook application, giving it enough space to present more information than can fit into a profile box. A Facebook application can have an unlimited number of canvas pages. Typically users will navigate to a canvas page by clicking on a link in a profile box. Figure 2 shows an example of a Facebook application (in this instance, the Twitter application) in a canvas page. Figure 2. Facebook canvas page Implement a Facebook photo album using the Flex SDK © Copyright IBM Corporation 1994, 2008. All rights reserved. Page 5 of 49 developerWorks® ibm.com/developerWorks FBML, FQL, and the Facebook API To build a Facebook application, developers leverage the power of the Facebook Platform's tools, including Facebook Markup Language (FBML), Facebook Query Language (FQL), and the Facebook API. The sample application in this tutorial will use all three of these concepts. FBML is basically a modified version of HTML, with some new Facebook-only tags added and some tags modified or removed as required. FBML can be used on both profile boxes (using the profile.setFBML API method) and canvas pages. FBML contains many tags that make it simple to include Facebook features and data in your application. Facebook-specific tags in FBML have the prefix "fb". For example <fb:name> can be used to output the name of a Facebook user. FQL is a query language that allows you to access Facebook data in much the same way as SQL (Structured Query Language) is used to access data in a relational database such as MySQL.