Writing a simple gadget for Vista’s sidebar is actually very straightforward. All gadgets are essentially HTML/CSS and JavaScript and hosted by IE. In this first part of a series on developing Vista gadgets I’m going to show you the bare essentials to get something (not much) to appear in your sidebar. In future parts I promise things will get a little more interesting…
- Open Windows Explorer and browse to C:\Users\ [User] \AppData\Local\Microsoft\Windows Sidebar\Gadgets
- Create a folder called jacksTest.gadget
The .gadget suffix is essential, without it you won’t see your gadget listed in Vistas Add Gadget dialog.
- Create a file called gadget.xml in your new folder
This is the gadget manifest; the filename is essential. Your manifest should look like this:
<gadget>
<name>jacksTest</name>
<version>1.0</version>
<author name="jacksBag">
<info url="www.jacksbag.com" />
</author>
<copyright>© Jacks Bag Limited.</copyright>
<description>
A simple and some might say, pointless gadget.
</description>
<hosts>
<host name="sidebar">
<base type="HTML" apiVersion="1.0.0" src="jacksTest.html" />
<permissions>Full</permissions>
<platform minPlatformVersion="1.0" />
</host>
</hosts>
</gadget>
The name, version, author, etc elements are what gets displayed when you’re selecting gadgets to add to your sidebar in Vista.
- Create a file called jacksTest.html
This is the file that will host your gadget’s UI.
This can be called anything you like so long as it matches the src attribute in the manifest as highlighted above. As a standard I’d say it’s a good idea to name this file after your gadget.
- Add the following HTML to the file and save it:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Unicode" />
</head>
<body>
Hey Jack!
</body>
</html>
- At this point you now have a “working” gadget.
If you click the + button on the sidebar, you’ll see jacksTest listed as a gadget and adding it will display a small white slither in the sidebar where most of the text is hidden.
Obviously this looks crap so we’ll get a little more fancy, but for now leave the crapo jacksTest on the sidebar.
- Create a folder called css, within the jacksTest.gadget folder.
- Within the new folder, create a file called jacksTest.css and add the following content:
body
{
margin: 0;
width: 130px;
height: 50px;
}
- Return to jacksTest.html and add a reference to our new style sheet by adding the following within the <head></head> section:
<link type="text/css" rel="stylesheet" href="css/jacksTest.css" />
Make sure everything is saved.
- Click the + button on the sidebar again and add jacksTest once more. You should see something like this:
Much better!
Now I’ll admit, this is not that exciting but there are still some important lessons to be learnt even as this early stage:
- Each gadget is independent, hence the crapo gadget we already had on our side bar has not picked up the addition of a style sheet. As a note of interest; if at this point you logged off/restarted your computer, when windows and the sidebar reloaded the crapo gadget would pick up the changes. We can presume from this that the source is never copied anywhere but is instead loaded into memory once for each instance of a gadget.
- Whilst developing a gadget it pays to work on the files in the AppData folder as it makes tweaking and testing quick and simple. You can make a change and just re-add the gadget to your sidebar to test its effect.
- Because of the previous reason, it’s a very good idea to take a copy of your work from the AppData directory and save it else where at the end of a dev session. If you accidentally choose to uninstall your gadget via the sidebar UI all your hard work would be deleted.
- Folder structure – its good practise to keep each type of component separated, such as creating a separate css directory for your style sheets.
- Naming – it’s good practise to give related components the same base name, so it’s clear that jacksTest.html and jacksTest.css are related.
You can download the files for this example here: jacksTest Gadget Part 1.zip (1.52 kb)
In Part 2 we’ll look at adding some functionality to our gadget and the use of settings.
Subscribe