A Tutorial - Create Your Own Vista Sidebar Gadget

One of the coolest features of Windows Vista is the sidebar gadgets. These gadgets sit prettily on the Windows sidebar and allow you quick access to various tools and information you may need frequently. The gadgets feature of Vista has been very popular, and that is the reason we have gadgets which cater to many kinds of needs. Though there are thousands of gadgets which you can download and use, you may want to create a gadget yourself to cater to your specific need. Contrary to what you may think, creating a gadget for Windows Vista is pretty easy. Let’s see how to create a vista gadget with a very simple example.

A gadget is a collection of HTML, XML, and CSS files contained in a folder named with a .gadget extension. At least two types of files are necessary to create a basic gadget: the manifest file containing the general configuration and presentation information and the HTML file providing the gadget UI and containing the code for core functionality. The manifest file is always named ‘gadget.xml’ while the HTML file can be named anything you want and needs to be specified in the tag of the manifest file.

Now, let’s get started creating our first gadget.

The first thing you need to do is to create a folder to contain the gadget files. For this example we will build a basic gadget which will just display a message string, let’s say “Hello Gadgets!” (I am kind of sick of using ‘Hello World!’ too many times!) I know it’s not much but the intention of this article is just to show you the steps required to create your own gadgets. If you want to build a more complex gadget all you would need is some HTML skills and knowledge of the specific tools or web service you want to build your gadget on. The steps required would still be the same.

So, now let’s start by creating a new folder and naming it ‘Hello.gadget” (yes, that’s a folder with an extension). To make it easier to develop and test the gadget we need to put the gadget folder in the Sidebar system folder which typically has the path “%userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets”.

Once you have created your gadget folder in the Sidebar system folder it is now time to create the files necessary for the gadget. Let’s start with the manifest file. Here’s the code for our manifest file. For a detailed description of the manifest file you can go through the MSDN documentation page.

We are half way through the process of creating our first gadget. The next step is to create the HTML file that provides the UI for the gadget and also contains the core codes for its functionality. As all that our gadget does is to display a message string the code is fairly simple and would look something like this.

Of course, you can create a more complex HTML file by adding CSS elements and scripts etc. to provide your gadget with a cooler look and advanced functionality. You can name this HTML file anything you want to but make sure you refer to the file correctly in the manifest file. Since we defined the HTML file name as “Hello.html” in the manifest file we are going to have it named the same way.

Once you save the HTML file as “Hello.html”, we are ready to test our gadget. As we have created the gadget in the gadget system folder we don’t need to install it to test it. Just go to the Vista sidebar and click on the “+” symbol to bring up the gadget gallery. If you have done everything correctly then you should be able to see your gadget “Hello Gadget” in the gadget gallery. Now to install the gadget in the sidebar all you need to do is to double click the icon for “Hello Gadget”. You can also drag and drop it to the sidebar. The icon displayed for this gadget in the gadget gallery is the default icon provided by the sidebar. However, you can create your own icon for your gadgets. A gadget icon is nothing but a .gif, .jpg, or .png image of 64x64 pixels. Apart from putting the icon in your gadget folder you also need to define it in the manifest file.

So, these are the steps to create a basic Vista sidebar gadget. The look and functionality of the gadget you create is limited only by your HTML, CSS, and scripting knowledge. Just apply your imagination and have fun creating that awesome gadget you always had in mind, but were never sure how to create.