Creating a Facebook photo album with Adobe Flex

VIEW THE DEMO

DOWNLOAD THE SOURCE CODE

You need to create an API and secret key for each Facebook application you develop. This can be done in the Developer Facebook application here. Click the Set Up New Application link.

Type in a name for your application, agree to the Facebook Terms, and click Save Changes.

You will then be taken to a page where you can see the secret and api key.

You need to change the application type to desktop. If you don't do this you end up getting error code 100: Invalid Parameter error messages when you try to log in.

Click the Advanced tab and set the Application Type to Desktop. Then click Save Changes.

Download the facbook-actionscript-api from here. For Flex you will need the Facebook_library_with_AIRConnect_vx.x_flex.swc file.

Create a new Flex project. Add the Facebook_library_with_AIRConnect_vx.x_flex.swc file to the Flex Build Path.

Add the following attribute to the MXML Application element.

applicationComplete="appComplete()"

This sets the appComplete function to be called when the Flex application has initialised.

Add the following List element to the Application element.

<mx:List id="albumsDataGrid" dataProvider="{facebookPhotoAlbums}" itemClick="showSelectedAlbum()" bottom="10" top="10" left="10" width="150">

<mx:itemRenderer>

<mx:Component>

<mx:Label text="{data.name}" />

</mx:Component>

</mx:itemRenderer>

</mx:List>

This creates a list that will display the items in the facebookPhotoAlbums collection. We set the showSelectedAlbum function to be called when an item is clicked.

The itemRenderer element defines a custom component that will render the items from the data provider. In this case we simply want to display the name property as a Label.

Add the following TileList element to the Application element.

<mx:TileList id="photosList" dataProvider="{facebookPhotos}" right="10" bottom="10" left="168" top="10">

<mx:itemRenderer>

<mx:Component>

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="150" height="150">

<mx:Image scaleContent="true" source="{data.src}" horizontalCenter="0" verticalCenter="0"/>

</mx:Canvas>

</mx:Component>

</mx:itemRenderer>

</mx:TileList>

This creates a TileList that will display the contents of the facebookPhotos collection. Again we use the itemRenderer element to define a custom component to display the tiles. Here we have defined a picture to be centered within a 150x150 Canvas.