Vista Gadgets

Article
12/17/2007

by Ben Coley

I don’t know about you guys, but I love Windows Vista. Amongst other things, it offers powerful performance, stability, security and a rich User Interface (UI). Part of this new rich UI is the Windows Vista Sidebar; a place on the side of your screen devoted to displaying gadgets that feed you information from your computer, such as the latest weather reports, CPU usage and RSS feeds.

So I got to thinking... there’s this powerful bar at the side of my screen for displaying stuff – why can’t I make it a bit more fun and display something festive? J

I found this site which explains the basics of creating a gadget. You simply need two files; an XML file with all the settings for your gadget, and an HTML page that contains the actual gadget itself.

You then simply have to place all the stuff in YourUserFolder\appdata\local\microsoft\windows sidebar\gadgets\YourGadgetName.gadget\ (yes I know, it’s a long path!) to get your gadget to appear in the Windows Sidebar.

Creating Your First Gadget

I thought the best way to go through creating a gadget was to create one through this article. I was feeling rather festive when I did this, so I made a gadget that counts down the days until Xmas day! J Feel free to play around with the code – you can use my gadget as a template to get started creating your own!

XML

The XML file for my gadget looks like this:

<?xml version="1.0" encoding="utf-8" ?>

<name>Xmas Gadget</name>

</author>

<copyright>Microsoft UK 2007</copyright>

<description>Count down the days until Christmas!</description>

<icons>

</icons>

<hosts>

</host>

</hosts>

</gadget>

Each part of the XML helps to define our gadget:

name	A name for your gadget
version	The version number of your gadget
info	A url to a web page for the author of the gadget
copyright	Basic Copyright information
description	A sentence to explain what your gadget does
icon	The icon for your gadget
base	The src property points to an HTML page

The rest of the text defines stuff like permissions and where the gadget runs, but we won’t go in to that just to keep things simple! The other part of the gadget is the HTML page, which is where we’ll actually write the gadget. This is the same HTML document as indicated by the src property of the base tag.

HTML

The HTML file for my gadget looks like this:

<head>

<title>Xmas Gadget</title>

body

{

margin: 0;

width: 125px;

height: 125px;

color: #ffffff;

}

#text

{

text-align: center;

font-family: Segoe UI;

font-size: 12pt;

color: white;

}

</style>

function checkforchange()

{

var mydiv = document.getElementById("text");

var curdate = new Date();

var month = curdate.getMonth();

var day = curdate.getDate();

if(month==11)

{

// It is Xmas, do the countdown!

var daysleft = 25 - day;

if(daysleft<0)

{

mydiv.innerHTML = "<br />Take your decorations down :)";

}

else if(daysleft==0)

{

mydiv.innerHTML = "It's<br /><font style=\"font-size: 34pt;\"><strong>Xmas</strong></font><br />Day!!!";

}

else if(daysleft>0)

{

mydiv.innerHTML = "<font style=\"font-size: 46pt;\"><strong>" + daysleft + "</strong></font><br />Days until Xmas!";

}

else

{

mydiv.innerHTML = "<br />It's not<br />December yet!";

}

setTimeout('checkforchange()',4000); // every time we run it, reset the timer

}

setTimeout('checkforchange()',1); // do the first check as quickly as possible

</script>

</head>

<body>

<g:background id="background" src="bg.png" style="position: absolute; top: 0; left: 0;

z-index: -999; no=repeat;" />

<br />

Loading...</div>

</body>

</html>

I appreciate at this point that there is a lot of code there, but I’ll try to simplify it down! Firstly under the HTML and inside the HEAD tag, we have some CSS. This is just to set the gadget’s width, height, colour, font, and that sort of stuff. Next, we have some JavaScript. Most of the programmatic features of our gadget will be written in JavaScript, because it’s the current standard language that Internet Explorer understands. So in my JavaScript code, I’ve got a function that checks the month first, then checks the date, so it can work out how many days are remaining until Christmas, so it can display this information to the user. If the month is not December, then a div element called “text” has it’s HTML changed to read “It’s not December yet! ”. If it is December, and it’s after Christmas day, the message reads “Take your decorations down J”. If it’s before Christmas day, the message reads “n Days until Xmas! ” and of course, if it is Christmas day, then it reads “It’s Xmas Day!!! ”.

So that’s the script that’s going to change our message depending on the date. Also at the bottom of the JavaScript, I’m calling this setTimeout function. Basically this function runs another function after the set period (in milliseconds). So firstly, after 1 millisecond, it’s going to update our message. Once it’s finished updating our message, it sets the same function again, but for 4000 milliseconds (4 seconds), so from then on, every 4 seconds, our message will be updated.

After that, we’ve got a specially tagged bit of HTML (g:background) that sets the background for our gadget. I’ve called my background “bg.png” but you can call whatever background you like here J.

Finally, we’ve got some standard-looking HTML that provides our div (called “text”) which by default has the caption “Loading...” which is displayed until we update our text for the first time.

And there you have it! A simple gadget created to show us how many days remain until Christmas!

Vista Gadgets

by Ben Coley

Creating Your First Gadget

XML

HTML

Additional resources