Write Social Applications for Imeem in ActionScript Using Adobe Flex: Part 2

In the previous tutorial, we set the stage to allow users to search for songs on Imeem. We added all the necessary user controls to the stage, which looks like this. Today, we'll write the code to make it all happen. Before we get to that part, let's make sure that the controls have IDs associated with them - since we'll reference them in the code.

The easiest way to assign IDs to controls is to use the Design View. So switch to Design View and click on each control to assign IDs to them. For label 1, ID=lblPrompt; label2, ID=lblResult; text input, ID=txtQuery; button, ID=btnSearch; datagrid, ID=dgResults.

For now, we'll show only 3 pieces of information about the search results - in our datagrid:

1. Title
2. Artist
3. Album

So let's modify the datagrid to reflect that. Switch to Source View, and change the headerText & dataField properties for the datagrid like so:

headerText="Title" dataField="title"/>
headerText="Artist" dataField="artist"/>
headerText="Album" dataField="album"/>

Note that the values for dataField are all lowercase; it has to be that way! While in Source View, locate the mx:button line and add this: click="search_click(event)". Also, add this to the mx:Application line (at the very top): creationComplete="onInit()". Like so.

What do these 2 things do? We specify that the method search_click should be called when the search button is clicked, and the method onInit should be called when the application is [fully] loaded. When the application is fully loaded, we'll set the stage for interaction with imeem. We'll define those 2 methods shortly, but first let's get some pre-requisites in place.

We need to import some classes from the imeem library so we can use the methods from the API. Also, we need some variables like api key and secret. So right before the closing tag for mx:Application, start by typing the mx:Script tag and then hit Enter; the closing tag should automatically be typed for you, including the CDATA section.

Inside the CDATA section (view screen shot), type the following:

import imeem.api.Imeem;
import imeem.api.data.MusicData;
import imeem.api.results.ResultData;

private var imeemService:Imeem = null;

static private const API_KEY:String = "YOUR API KEY";
static private const API_SECRET:String = "YOUR SECRET";

//will be called once application is fully loaded
private function onInit() : void {
imeemService = new Imeem(API_KEY, API_SECRET);
}

//will be called when search button is clicked
private function search_click(evt:Event) : void {
imeemService.media.search(txtQuery.text, "music", 0, 100, onMediaSearch);
}

//will be called with the results of the search, will display data in datagrid control
private function onMediaSearch(result:ResultData) : void {
dgResults.dataProvider = result.data.results;
}

Insert your API key and Secret above and run the application. Here's what the script section looks like: view screen shot.

Let's explain. In the first 3 lines, we import the necessary classes to interact with the API. Then we declare some variables that'll be used throughout the application. In the first method, we instantiate the required Imeem object that'll give us access to the various classes - including media, users, and playlists. The API key and Secret are required for the instantiation; Imeem needs them to verify our application.

In the second method, we use the search method of the media class to query imeem for music matching the keyword typed by the user. Also, we pass the default values for offset (0) and number of results (100). Offset is used for paging. The last argument is a method (a callback method), which will be called with the results of the search.

In that callback method (last method), we extract the data out of the argument (result) and bind the datagrid to the dataset.

Did you run the application? Did you get any results? If so, it must be getting exciting! I ran my version and got this: view screen shot.

It'll get even more exciting as we add more functionalities to the application. In the next tutorials of the series, we'll add the Login function and allow users to add songs to their existing playlists.

Stay tuned!