Creating a Digg client with Adobe Flex in 10 steps

VIEW THE DEMO

DOWNLOAD THE SOURCE CODE

Digg is one of the more popular examples of the trend towards social browsing. It provides a database of news and video links, ranked by the community, and is a good way to find some of the gems hidden out there on the web.

The Digg database can be queried via it's API. At the moment there is no facility for submitting links programmatically (although this is said to be in the works), but you can certainly get access to those links already submitted.

Digg does not have an official ActionScript API, but a 3rd party API is available. This tutorial will step you through the process of using this 3rd party API to create a simple Digg news display.

Download and extract the Flash Digg API from here.

Create a new Flex project, and add the Digg API to the Flex Build Path.

Add the following attribute to the Application element.

applicationComplete="appComplete()"

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

Add a new TileList to the Application element.

<mx:TileList

dataProvider="{displayData}"

itemRenderer="TileRenderer"

right="10"

left="10"

top="10"

bottom="10"

columnCount="1"/>

This TileList will be used, in conjunction with the TileRenderer component specified in the itemRenderer attribute, to mimic the look of the story list that is shown on the Digg site. We set the dataProvider attribute to a variable called displayData, which will be defined in later steps.

Add a Script element to the Application element.

<mx:Script>

<![CDATA[

// code goes here

]]>

</mx:Script>

In the Script element, import the following packages.

import mx.collections.*;

import com.digg.services.*;

import com.digg.services.response.*;

import com.digg.model.*;

Add the following variables.

private static const SOURCE_SITE:String = "YourWebsiteHere";

private var response:StoriesResponse = null;

[Bindable] private var displayData:ArrayCollection = null;

Unlike most web API's, Digg does not require that you sign up for a specific, individual API key. Instead you simply need to supply your web sites URL. The API key is not optional, but the site you supply as the API key is up to you. You can read more about the API key requirements here.

The response variable will hold the result of our Digg query once Digg has returned some data.

The displayData variable will hold the individual Story objects that will be displayed by the TileList.