Create a gig guide with Adobe Flex and Last.FM

VIEW THE DEMO

DOWNLOAD THE SOURCE CODE

Last.fm is a an online music website that offers a number of services like finding related artists and songs, getting chart lists, finding music events and more. All of this functionality is also exposed to developers through the Last.fm REST API. Here we will use the API to get and display a list of local gigs.

Sign into Last.fm (create an account if you need to) and create an API key here.

Create a new Flex project. Add a TileList element as a child of the Application element using the code below.

<mx:TileList

dataProvider="{events}"

itemRenderer="TileRenderer"

right="10"

left="10"

top="10"

bottom="10"

columnCount="1"

rowCount="1"

allowMultipleSelection="false">

</mx:TileList>

TileLists are a great way to display complex information in table. This is because the appearance of the individual items in a TileList can be defined in the same GUI editor used to create Flex applications. This allows you to create quite intricate designs with a very quickly.

In this example the individual tiles will be rendered by a class called TileRenderer, (as specified by the itemRenderer attribute) which we will create next.

Add a new MXML component to the Flex project, and call it TileRenderer. Then copy the following code to the source code view.

<?xml version="1.0" encoding="utf-8"?>

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

<mx:Label y="10" text="{data.title}" id="lblTitle" right="146" left="150" textAlign="left"/>

<mx:Label y="10" text="Title:" width="121" x="10" textAlign="left"/>

<mx:Label y="36" text="Venue Name:" width="121" x="10" textAlign="left"/>

<mx:Label y="62" text="Venue City:" width="121" x="10" textAlign="left"/>

<mx:Label y="88" text="Venue Country:" width="121" x="10" textAlign="left"/>

<mx:Label y="114" text="Venue Country:" width="121" x="10" textAlign="left"/>

<mx:Label y="140" text="Venue Postcode:" width="121" x="10" textAlign="left"/>

<mx:Label y="166" text="Start Date:" width="121" x="10" textAlign="left"/>

<mx:Label y="192" text="Start Time:" width="121" x="10" textAlign="left"/>

<mx:Label y="36" text="{data.venue.name}" id="lblVenueName" right="146" left="150" textAlign="left"/>

<mx:Label y="62" text="{data.venue.location.city}" id="lblVenueCity" right="146" left="150" textAlign="left"/>

<mx:Label y="88" text="{data.venue.location.country}" right="146" left="150" textAlign="left"/>

<mx:Label y="114" text="{data.venue.location.street}" right="146" left="150" textAlign="left"/>

<mx:Label y="140" text="{data.venue.location.postcode}" right="146" left="150" textAlign="left"/>

<mx:Label y="166" text="{data.startDate}" right="146" left="150" textAlign="left"/>

<mx:Label y="192" text="{data.startTime}" right="146" left="150" textAlign="left"/>

<mx:LinkButton label="Venue Website" click="{navigateToURL(new URLRequest(data.venue.url));}" bottom="10" left="10" width="106"/>

<mx:LinkButton label="Event Website" click="{navigateToURL(new URLRequest(data.website));}" bottom="10" left="277" width="106"/>

<mx:LinkButton label="LastFM Event Website" click="{navigateToURL(new URLRequest(data.url));}" bottom="10" left="124" width="145"/>

<mx:TextArea htmlText="{data.description}" right="10" left="10" bottom="38" top="218"/>

<mx:Image source="{data.image.(@size=='large')}" right="10" top="10"/>

</mx:Canvas>

As you can see this code is very similar the MXML code that defines a standard Flex application, and the UI elements can all be created and modified using the same GUI editing tools.

The information that is displayed by the elements comes from a built in property called data. This data object is one element of the data source attached to the TileList. The object itself can be anything, but in this case it will be an XML node because this is the format that Last.fm uses. However, because of way Flex handles XML objects, we simply pull out the information using the standard dot notation that is used for any other object.

The simple data, like names, are all displayed with Labels, URL links are set to open in the click even of LinkButtons, images are displayed by an Image, and the description of the gig, which includes some HTML tags, is displayed in a TextArea (we simply assign the text to the htmlText property, which recognises a subset of HTML tags, instead of the default text property). In this way we have neatly displayed a fairly complex set of data.