There is always a first time for something. I spent a couple of hours today developing my first Windows Vista Sidebar Gadget.
I love sports, especially European soccer. My favorite soccer club is Manchester United. Manchester is playing in Premier League, the top division in England. I try to follow them as often as I can. The problem is that not every match is sent on TV and I don’t have time to see all the matches on TV anyway.
There are several news papers in Norway that offer Live Stats from European soccer matches on their website, for instance VG and Dagbladet. All of them have nice AJAX enabled web apps that spits out live stats for me in the browser. I never need to refresh the website to get the updated content. They “magically” refresh themselves and when a team scores a goal a sound is played (ping) to notify the users. The problem with this is that I have to open the browser every time I hear this sound. By Live Stats I mean current events that happened during the matches. For instance when a team scores a goal, change formation, a player get a yellow card etc.
Wouldn’t it be really nice if you could glance at the live soccer stats in the Windows Vista Sidebar while working? – I think! Therefore I’ve developed a Windows Vista Sidebar Gadget with these features.
My Gadget gets the live match data from a Norwegian news papers (VG) website. The data is downloaded every 10 seconds. I haven’t had the chance to test my Gadget during soccer matches, because the first game is this evening. Manchester United is going to play against Chelsea. This is a huge match, and it’s my first opportunity to test this Gadget with live stats.
You are welcome to test my Gadget during this match. You can download it from the link below. Please give me some feedback if you are testing the Gadget this evening.
Creating of the Gadget
I developed my Gadget using Visual Studio 2005. I followed these steps during the development phase.
Step 1: Creating a directory
The installed Windows Sidebar Gadgets are localized in the “%userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets\” folder. I started the developed by creating a new folder “VGLive.gadget” in this folder. Note the .gadget “extension” in the folder name. Your folder must contain this “extension” in order to be visible for the Gadget Explorer.
Windows Sidebar Gadget Explorer
Step 2: Create the content (HTML file)
The content of a Gadget html files, images and java scripts. I created new HTML file called docked.html. This file contains the content for the Gadget.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>VGLive!</title>
<link rel="stylesheet"
type="text/css"
href="stylesheets/docked.css" />
<script type="text/javascript"
src="scripts/vglive.js"></script>
<script type="text/javascript"
src="scripts/gadget.js"></script>
</head>
<body onload="startTimer(), init()">
<div id="content">
</div>
</body>
</html>
Note that I have to JavaScript resources (vglive.js and gadget.js). The gadget.js script contains gadget specific functions. Here I specify which HTML to load for the settings screen.
The vglive.js JavaScript contains scripting logic for gathering Live Stats data from http://sport.vg.no/live website.
Step 3: Creating manifest
Then I created a XML file for the Gadget manifest. This file describes the Gadget package. Some of the properties are Name, version, description, icon, which file to start with etc. I specify that the Gadgets shall load the docked.html file when it starts.
<?xml version="1.0" encoding="utf-8" ?>
<gadget>
<name>VG Nett Live!</name>
<namespace>GOEran.Gadgets.VGLive</namespace>
<version>1.0</version>
<author name="Gøran Hansen">
<logo src="images\goeran.jpg" />
<info url="http://blog.goeran.no" />
</author>
<copyright>Last ned flere Gadgets på:</copyright>
<description>
Live oppdateringer fra VG!
</description>
<icons>
<icon height="64"
width="64"
src="images\gadget-logo.png"/>
</icons>
<hosts>
<host name="sidebar">
<base type="HTML"
apiVersion="1.0.0"
src="docked.html" />
<permissions>full</permissions>
<platform minPlatformVersion="0.3" />
</host>
</hosts>
</gadget>
Step 4: Develop and test
It’s not efficient to test the Gadget implementation in the Sidebar. Because then you need to add the Gadget to the Sidebar in order to get it to reload itself. When you are finished testing you have to remove it. Then you must add it again the next time you have med some new changes – you get the picture.
I think the best way is to load Gadget HTML file into the browser and test the implementation there. When the functionality works properly you can start to add it to the Sidebar for environment testing.
Live Match data
My Gadget gets the data from the Norwegian news papers VG website: http://sport.vg.no/live/. This web pages show live stats from the currently playing matches that they cover. They usually cover most of the European soccer matches. Especially Norwegian and English premier league matches.
This is an AJAX enabled web page, which means that they use JavaScript to update the content of the page instead of refreshing the whole page. This made it pretty trivial for me to download the live stats data to the Gadget. Luckily for me I didn’t have to screen scrape the page and parse the HTML in order to get the data.
By using Fiddler to monitor HTTP traffic from my computer I could find the location from where the JavaScript on webpage download the data. The location is http://sport.vg.no/live/fun/xmlhttp.php?live2op=getDiff&postfix=1.
As you can is if you try to access this URL you get lots of JavaScript code in return. The type of the content in the response is “text/plain”.
currentEvents = new Array(10);
currentEvents[0] = new Array(6);
currentEvents[0][0] = '14866';
currentEvents[0][1] = 'Charlton';
currentEvents[0][2] = 'Spurs';
currentEvents[0][3] = new Array(12);
currentEvents[0][3][0] = '79';
currentEvents[0][3][1] = '0';
currentEvents[0][3][2] = '';
currentEvents[0][3][3] = "Charlton har ballen mye";
currentEvents[0][3][4] = "14866_tell_470";
currentEvents[0][3][5] = "0";
currentEvents[0][3][6] = "1";
currentEvents[0][3][7] = "1";
currentEvents[0][3][8] = "";
currentEvents[0][3][9] = "0";
currentEvents[0][3][10] = new Array(2);
currentEvents[0][3][10][0] = "";
currentEvents[0][3][10][1] = "";
currentEvents[0][3][11] = "14866_tell_460";
currentEvents[0][4] = "0";
currentEvents[0][5] = "2";
If you are a developer you probably notice that the returned JavaScript creates a multi dimensional array. My challenge was to figure out how to take advantage of that the content of the HTTP response was actually JavaScript – could I somehow load the downloaded JavaScript into the JavaScript runtime of the browser (Gadget) in order to traverse the array? Of course! This is the lovely part about dynamic languages!
If you look up the Function object in the JavaScript documentation you find out that JavaScript threats all functions as a data type that has a value. You can either return something or execute some code. This is not as efficient as the alternative method of declaring a function using the function statement where the code is compiled.
//Dynamically loaded hello code
var hello2 = new Function("window.alert('hello2');");//Call compiled hello
hello();
//Call dynamic loaded hello (evualuted for every call)
hello2();
/* Compiled hello code */
function hello()
{ window.alert("hello");}
So what I did was to create a new instance of a Function object. Into the object is passed the JavaScript downloaded from http://sport.vg.no/live/fun/xmlhttp.php?live2op=getDiff&postfix=1 as an argument. And voila, I could traverse the array as it was an array I declared an instantiated myself.
/*
Download live match data from VG Nett Live
*/
function getData()
{ //Create a new instance of the XmlHttpRequest obj.
//This is used to download the data from the webside
xmlHttp = new XMLHttpRequest();
//The callback method to be called when state
//of the xmlHttp object is changed.
xmlHttp.onreadystatechange = dataCallback;
//The random number in the end of the url is used
//to prevent the XMLHttpRequest from caching data.
xmlHttp.open("GET", "http://sport.vg.no/live/fun/xmlhttp.php?" +
"live2op=getDiff&postfix=1&" +
Math.random());
//Send the request
xmlHttp.send();
}
/*
This method is called by the xmlHttp
object when executin web request
*/
function dataCallback()
{ //Data downloaded
if (xmlHttp.readyState == 4)
{ var data = xmlHttp.responseText;
//Create a new Function object and pass
//the downloaded JavaScript into it
var currentEvents = new Function(
"var " + xmlHttp.responseText +
"return currentEvents;")();
//Reverse the array
//(To get the newest events first)
currentEvents.reverse();
//Renders the output
renderOutput(currentEvents, 4);
}
}
You can get all the JavaScript code if you download the Gadget.
Tips for Gadget development
- Take a look at the Sidebar API http://msdn2.microsoft.com/en-us/library/aa965853.aspx.
- Separate the structure from layout. By this I mean use div tags in the Gadget content file (The HTML file). Use the ID and CLASS property of the tags so you can refer to them in the style sheets (CSS files)
- Separate JavaScript from the content. Add the JavaScript resources in the header of the Gadget content file (HTML file). I usually create on dedicated script for Gadget specific functions (gadget.js). By Gadget specific function I mean Sidebar API calls
- Create a background image of type PNG for the Gadget to get transparency
- Test the implementation in a web browser during the development phase
- When you have reached code complete, test the Gadget in the Sidebar Environment.
Do you have any other tips for Gadget development; feel free to drop me a comment on this :)
Resources
Happy coding!