Revision as of 05:40, 25 August 2013 by lpvalente (Talk | contribs)

Displaying Nokia Music Metadata with JQuery Mobile

From Nokia Developer Wiki
Jump to: navigation, search

This article explains how to display Nokia Music metadata with JQuery Mobile UI.

WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code Example
Source file: NokiaMixRadioQueryExample (github)
Tested with
Devices(s): Nokia Lumia 820
Created: summeli (13 Aug 2013)
Updated: summeli
Last edited: lpvalente (25 Aug 2013)



This article shows how to create a simple UI with JQuery Mobile to view the metadata on Nokia Music REST API. The JQuery Mobile based UIs can be run on almost every smartphone platform. For example on Windows Phone you can run the UI in internet explorer. The development of JQuery Mobile based UIs is very nice, since you can develop them with HTML and JavaScript in a standard desktop browser.

This application will let the user browse the Radio Mixes in the Nokia Music, and show the cover art for the Mixes.

Running the example application

First you'll need to register to Nokia Music to get the API keys for your application. You can do this at: http://api.ent.nokia.com/reststart.html

You can get the code example in this project from the Github: NokiaMixRadioQuery. After this you should edit the common.js and replace the myownAPPID with your own app ID.

if (window.localStorage){
localStorage.setItem("appid", "myownAPPID");

Creating the pages

This application is made from two pages. The first page lists the high level categories, and the second page lists the categories in the chosen level.

<!-- Starting page, listing the mixes --> 
<div data-role="page" id="cat">
<div data-role="header" data-position="fixed">
<h1>Mix Radio</h1>
</div><!-- /header -->
<div data-role="content">
<ul id="catList" data-role="listview" data-inset="true">
</div><!-- /content -->
</div><!-- /page -->
<!-- Mix Lists page -->
<div data-role="page" id="mixgroup" data-add-back-btn="true">
<div data-role="header" id="mixheader" data-position="fixed">
<h1 id="mixtext"></h1>
</div><!-- /header -->
<div data-role="content">
<ul id="mixList" data-role="listview" data-inset="true">
</div><!-- /content -->
</div><!-- /page -->

Loading the content for the pages

The content for the pages is loaded dynamically in JavaScript. The categories are fetch in the content.js file. The javascript will download all the top level mixgroups though Nokia REST API at the pageinit() function. So this request is made only one when the page is initialized.

The request are loaded with JSONP so the extra parameter &callback=? is added to the end of the requests.

$( document ).delegate("#cat", "pageinit", function() {
var jqxhr = $.getJSON('http://api.ent.nokia.com/1.x/'+localStorage.country+'/mixes/groups?domain=music&itempsperpage=20&startindex=0&app_id='+localStorage.appid+'&callback=?', null, null,'application/vnd.nokia.ent.radiogroups+json')
.done(function(result) {
var list = $("#catList").listview();
$(list).append('<li><a href="index.html#mixgroup" onclick="sessionStorage.mixGroupId=' + this.id+ '">'
+ this.name + '</a></li>');
.fail(function() { console.log( "error" ); });

The metadata for subgroups must be loaded every time when the page is loaded, so here we'll get the metadata every time before showing the page. Showing the thumbnails is really easy with HTML. Just set the <img src=location> tag to point to the image resource returned by the REST API, and the browser will download the images.

$( document ).delegate("#mixgroup", "pagebeforeshow", function() {     
$('#mixheader #mixtext').text(sessionStorage.mixGroupName);
var jqxhr = $.getJSON('http://api.ent.nokia.com/1.x/'+localStorage.country+'/mixes/groups/'+sessionStorage.mixGroupId +'/?domain=music&itempsperpage=20&startindex=0&app_id='+localStorage.appid+'&callback=?', null, null,'application/vnd.nokia.ent.radiogroups+json')
.done(function(result) {
//write the header
$('#mixheader #mixtext').text(result.data.name);
//fill the data into the listview
var list = $("#mixList").listview();
$(list).append('<li><a href="index.html#mix" onclick="sessionStorage.mixId=' + this.id+ '">'
+ '<img src="' + this.thumbnails["50x50"] + '" class="ui-li-icon"/> <h3>' + this.name + '</h3></a></li>');
.fail(function() { console.log( "error" ); });

Using PhoneGap

You can use PhoneGap to package the application to multiple platforms if you like. For example you can package this example for Windows Phone, Android, Tizen and Blackberry very easily with PhoneGap's build system.

Testing the application on Windows Phone

You can build and package the application with PhoneGap and install it to the phone, but you can also test the UI by hosting all the files on some webserver, and then just loading the page with Internet Browser on Windows Phone.

225 page views in the last 30 days.