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

Welcome to the closing article of the series of tutorials on how to write music applications in ActionScript using imeem media platform API. In the preceeding articles of the series, we've built a music application that allows users to search for songs, listen to music, add songs to existing playlists and sign in/out to/of their imeem account. The application works like this. To view all the articles, go to my profile page.

Today, we'll add one final item to the application and give you an overview of the whole imeem API. Besides the current 3 fields (title, artist, album) in the search results, we'll add the Duration field. It's important to let the users see how long a particular song is. We'll format the display like so: min:sec. We assume that no song will be longer than 59 minutes. But if the assumption fails to hold, you'll have enough knowledge on how to extend the functionality to make it work with hours - and not just minutes and seconds. So let's get to it!

Open up the project, and make sure you have imeemMusicExtension.mxml file open in Source View. Locate the markup for the datagrid (mx:DataGrid). Right after the last mx:DataGridColumn markup, add another column like this:

mx:DataGridColumn headerText="Duration" dataField="duration" labelFunction="renderDuration"

Your markup should now look like this. Make sure that the word duration is in lowercase for the dataField property.

The duration field - as returned by imeem - will be in seconds. For instance, a song that is 3 minutes long will have a duration of 180 seconds (3 x 60). What we will do is convert the amount of seconds into 2 parts: minutes and seconds. In the markup for the additional datagrid column (duration), we've added a property called labelFunction. What is that?

The labelFunction property of the datagrid column is what renders the label for the column. By default, it takes the value specified in dataField and displays it in the datagrid. But we can manipulate what displays by assigning a custom method for labelFunction. The signature of that method is defined like this:

MethodName(arg1:Object, arg2:DataGridColumn) : String

So it's a method that takes in 2 parameters and returns a string. The first parameter is of type Object, the second DataGridColumn. We call this method (in our case) renderDuration. Let's define it.

private renderDuration (d:Object, col:DataGridColumn) : String {

var sec : Number = (d.duration as Number) % 60;
var min : Number = int ((d.duration as Number) / 60);

if ( sec < 10 ) return min.toString() + ":0"+ sec.toString();
return min.toString() + ":" + sec.toString();

}

The first parameter, d, represents a media object. It has various properties including title, artist, album, duration and more. We divide the duration by 60 and store the remainder in a variable, sec. Since we assume that no song will be longer than 59 minutes, we compute the number of minutes simply by dividing the duration by 60. The altered code looks like this.

We want to format the "seconds" part of the duration using 2 digits. Thus, for 5 seconds we'll show "05". That's what's being done in the conditional if statement. But for anything with 2 digits, we just return minutes colon seconds. We don't format minutes as 2 digits. But you can easily do it.

You can now run the application to see the changes. Here's what I got. By the way, did you know you can sort the results by clicking on the different headers? I sorted the results by duration (ascending) and got this.

Well, that's how you can display songs' durations!

Now that you've got this cool imeem music application, what else? Well, it all depends on what you'd like to accomplish. There are a lot more that you can do with imeem's API. But you should know there are some restrictions as well. To better understand the whole API or the media platform, you should check out the documentation. Also, you can browse what's available right through the developers dashboard. Using the console, you can check out the different methods, see what gets returned (in JSON or XML) and many more. Know what's available and let your imagination run wild :)

It's been a fun experience writing these tutorials about using imeem media platform to create music applications. I hope you've learned a thing or two. And most importantly, I hope you will write a useful application very soon - and tell me about it :) For feedback or comments or anything else, drop me a line: wlucdor AT gmail DOT com.

Happy Coding :)