Online Advertising, Web Development & General Rantings

The title for this post is very cryptic.. What i meant to say is that i want to prototype being able to consume webservices from other people.

The scenario is this, i want to be able to get a playlist from a third party like LastFM.com.

LastFM provide API’s to there valuable data. Rather than me build my own datastore of songs i want to consume there data into my application.

LastFM provide many hooks into there webservice, the one i want to access is this one:

http://ws.audioscrobbler.com/1.0/tag/ + [genre] + /toptracks.xml

The end result is that LastFM data is integrated into the application via the grid.  

So LastFM is a music social site that has a wealth of data around music such as “Top 100 tracks by genre”.

What im going to do is configure the current playlist in “left navigation control”. Im going to populate the Playlists section with groups from LastFM.

In the prototype source code the navigations are hard coded as a “generic list” (c# term) in the App_code/wsITunes.asmx.cs file. The method used to populate the navigations is called GetAllNavigations().

What i did was hard code groups from LastFM into this list, ideally in the end product it will be data driven somehow but for prototyping purposes this will suffice. The below picture is a snippet of code from the webservice where i replaced the existing playlists with the ones from LastFM.

The next step was to wire up each rendered tree node with an onclick event which will make the webservice call which will then populate the grid with LastFM returned data.

If you remember from a previous post that the navigation tree is fully self contained on the client. That is the navigation tree is rendered on the client end using raw data provided from a webservice. The rendering is done in the file js/tree.js. I basically replaced the onclick javascript for each “playlist” navigation item with the following code:

As i mentioned in some early post’s, i wanted each control to be independent of each other, that is i wanted each control to do there own tasks and not know about the other controls. In cases where one control needed to affect another control, eg. the left navigation item when clicked should populate the grid with the relevant songs, i wanted the base page to contain this logic.

I created a _PageController.js file to contain this binding/linking logic. In the case of a left nav click causing the songs in the grid to be populated the function that performs this logic is “loadSongsLastFM”.

The method is very simple in concept it

1) performs the webservice call to LastFM to retrieve a data packet of songs

2) passes this data packet to the grid control for rendering of the list of songs

That’s it for this post. Again the aim of this post was to proove that i could consume webservices and pass the resulting data to any controls that needed it. The Controller script was in charge of marshalling calls between the controls, such that each control did not need to know about the others. 

Check out the sample here JF000019.aspx. Or if you want download the code here (JF000019.ZIP)