Article
Build a Yahoo Music Mashup with Adobe AIR
Our custom event class also needs some upgrades to handle the new events that the Artists list generates. This updated code is shown here:
File: ArtistEvent.as
package com.videomashup
{
import flash.events.Event;
public class ArtistEvent extends Event
{
public static const ITUNES_ANALYSIS_COMPLETE:String = 'ITUNES_ANALYSIS_COMPLETE';
public static const ARTIST_LIST_CHANGE:String = 'ARTIST_LIST_CHANGE';
public static const ARTISTID_UPDATE:String = 'ARTISTID_UPDATE';
public static const YAHOO_UPDATE_COMPLETE:String = 'UPDATE_COMPLETE';
public static const STARTING_YAHOO_SEARCH:String = 'STARTING_YAHOO_SEARCH';
public function ArtistEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
}
}
}
This code contains events for the artist list to start searching Yahoo, notification of the artist IDs update status, and notification that the entire update of the Artists list is complete.
You must also store the Yahoo API key in the Constants class, as shown here:
File: Constants.as
package com.videomashup
{
public class Constants
{
public static const APPID:String = 'Your Yahoo APP ID';
}
}
Next, we replace the placeholder string with the application ID that we receive from Yahoo. Our main interface also undergoes a few upgrades, as shown here:
File: iTunesVideos.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="onStartup()"
title="iTunes Video Timeline">
<mx:Style>
WindowedApplication { padding-bottom:10; padding-left:10; padding-right:10; padding-top:10 }
</mx:Style>
<mx:Script>
<![CDATA[
import com.videomashup.Artists;
import com.videomashup.ArtistEvent;
private function onStartup() : void {
Artists.instance.addEventListener( ArtistEvent.YAHOO_UPDATE_COMPLETE, onUpdateComplete );
Artists.instance.addEventListener( ArtistEvent.STARTING_YAHOO_SEARCH, onStartYahoo );
var ar:ProgressWindow = new ProgressWindow();
ar.title = 'Scanning Artists';
ar.open( true );
Artists.instance.startReader();
}
private function onStartYahoo( event:ArtistEvent ) : void {
var ar:ProgressWindow = new ProgressWindow();
ar.title = 'Scanning Yahoo';
ar.open( true );
}
private function onUpdateComplete( event:ArtistEvent ) : void {
timeline.dataProvider = Artists.instance.videosByYear;
}
]]>
</mx:Script>
<mx:List width="100%" height="100%" id="timeline" itemRenderer="YearRenderer">
</mx:List>
</mx:WindowedApplication>
Now we have two progress windows: one for the iTunes reader and another for Yahoo scanning. When all this processing has completed, the onUpdateComplete method sets the dataProvider of the timeline to the list of artists.
The timeline itself is custom-rendered using the YearRenderer MXML code shown below:
File: YearRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" height="100" creationComplete="onDataChange()" dataChange="onDataChange()"
horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Script>
<![CDATA[
import mx.controls.Image;
private function onDataChange() : void {
if ( data == null || initialized == false ) return;
videosCanvas.removeAllChildren();
var index:int = 0;
for each( var video:Object in data.videos ) {
var img:Image = new Image();
img.x = ( index++ * 70 ) + 5;
img.y = 5;
img.toolTip = video.name;
img.source = "http://d.yimg.com/img.music.yahoo.com/image/v1/video/"+video.videoID+"?fallback=defaultImage&size=90x90";
videosCanvas.addChild( img );
}
}
]]>
</mx:Script>
<mx:Canvas id="videosCanvas" />
<mx:Label text="{data.year}" left="10" top="10" fontSize="38" fontWeight="bold" color="white">
<mx:filters>
<mx:GlowFilter blurX="5" blurY="5" color="#cccccc" />
</mx:filters>
</mx:Label>
</mx:Canvas>
This custom-rendering object creates a set of images in our video canvas. The images represent all of the videos from the year specified in the Data field for this item. The creation of the images is performed in the onDataChange method; this method takes the list of videos and creates Image objects that point to Yahoo.
Whew! If you’ve managed to understand all that we’ve covered here, you’re doing well. Let’s launch this application in Flex Builder; it should look something like the screenshot in Figure 3, though of course with thumbnails of much cooler music than that stored in my library.
The completed video timeline—minus the progress window—is shown in Figure 4.
While my motivation for building this application was for educational purposes, it’s actually a cool little AIR widget that could provide the basis for a useful application. And it’s also a fun way to visualize what your favorite artists have been doing over the years.
Summary
In this tutorial, we built a fully fledged Adobe AIR mashup of our iTunes library and the Yahoo Music API.
Dissecting this example application exposed us to several different aspects of both the Flex and AIR platforms. On the Flex side, we learned how to parse XML from the desktop and from a web service. We also saw an example of how to use a List control as a way to scroll around a custom visualization by creating a renderer.
And from an AIR perspective, we looked at how to read data from an XML file, as well as how to create and maintain an SQLite database. We also used the Window Flex class to create native pop-up windows that look right at home in the host operating system.
I hope you enjoyed mashing up your iTunes library, and that you’ll use the concepts here to build your own exciting AIR applications!
Quiz Yourself!
Test your understanding of this article with a short quiz, and receive a FREE PDF of my book, Getting Started With Flex 3. The first 100 people to complete the quiz will also receive a paper copy delivered to their door for FREE, thanks to Adobe Systems.