Learn how to build a Flex application that accesses your Facebook photos.

This tutorial continues on the process put forth in the first Facebook tutorial Building Facebook Applications with Flex.

After following the steps laid out in the first tutorial, all you will need to do is add a few lines of code to the MXML file.

This demo application will first load all of your Facebook albums into a DataGrid.  When one of those albums is clicked, the photos in that album will be displayed in another DataGrid.

Note: This tutorial uses the ActionScript 3 Facebook Library.  Thanks to Jason Crist of Terralever for his work on this and providing it to the development community.

Starting with the FacebookExample.mxml file from the first tutorial, there are only a few changes to be made.

First add a new bindable variable that will hold the photos of the chosen album:

[Bindable] private var albumPhotos:Array;

Then add the getPhotos and getPhotosReply functions:

private function getPhotosReply(event:Event):void {
	albumPhotos = event.target.photos;
}
  
private function getPhotos(event:Event):void {
	albumPhotos = new Array();
	facebook.photos_get(null, event.target.selectedItem.aid, null, getPhotosReply);
}

Then add the itemClick property to the DataGrid that holds the photo albums,

<mx:DataGrid  x="9" y="195" dataProvider="{photoAlbums}"  width="180" height="225" itemClick="getPhotos(event)">

This will call the getPhotos function when the user selects a photo album.

Finally add the new DataGrid to hold the photos:

<mx:DataGrid x="197" y="195"  width="75" rowHeight="75" height="225"  dataProvider="{albumPhotos}" headerHeight="0">
	<mx:columns>
		<mx:DataGridColumn  headerText="" dataField="src_small"  itemRenderer="mx.controls.Image"   />

	</mx:columns>
</mx:DataGrid>

After making these changes, run the application and you should have a very basic Flex-based Facebook Photo Browser.

Here is the final code in an MXML file: FacebookPhotoBrowser.mxml (3KB)