When Windows Vista was released in early 2007, many of the users mentioned a new feature in the OS – the sidebar. The sidebar contained multiple useful elements, called gadgets, that can perform practically any activity. Some of them will show you the weather in your town, others will just display the time, some will display the network traffic.

Basically, the gadget capabilities are infinite. Many of the developers were wondering how these gadgets are created. Surprisingly, you won’t need a lot of programming experience to create a gadget. A solid understanding of XML, HTML, CSS and VBScript will be pretty much everything you need to create your own gadget for the Windows Sidebar.

So what tools do you need to create a gadget? You will only need a plain text editor (the regular Notepad or Notepad++ is more than enough).

Now, let’s start with your own gadget. Let’s create just a simple gadget that will display a text. First of all, let’s see what files are needed for a gadget (all of those are created by you):

gadget.xml
This is the main gadget manifest file. You must always name it gadget.xml. This file contains the information about the gadget, like the developer name, gadget version, gadget icon and the most important part – which HTML file is referenced as the main gadget file. This file has a standard structure that should not be changed. This file has to be a valid XML to be recognized as a gadget manifest, so I would recommend validating it first to see if it is a valid XML (does not contain illegal characters or any structural mistakes).

icon.png
Basically, this is the icon for the gadget that will be displayed in the gadget manager. You can either download a royalty-free image or create your own for this purpose. The recommended resolution for this image is 64 x 64, however larger images are also supported, but will be automatically resized, therefore the image quality may become unacceptable.

gadget.html
This is the main gadget file that has all the elements of the gadget structure. This file will ‘decide’ what your gadget is doing and your imagination is the limit in this case. It has a recommended structure, however, you can change it a little bit. This file can have any name, but must have the HTML file extension.

So, let’s start with creating the gadget.xml file. Take a look at the file structure:



All of the parameters here can be changed to anything you want, depending on the gadget purpose and developer. As you see, all the tags are self-descriptive so it is easy to understand which tag holds specific information. The [/b]<base>[/b] tag has that specific reference to the main HTML file. You can change it depending on the file name.

Save this file as gadget.xml. As mentioned before, you MUST NOT change this file name or the gadget won’t work.

Now, let’s create the HTML file for the gadget. As we have a very simple gadget that will only display some text, I used this HTML code (with a very small CSS part that will set the dimensions of the gadget area).



This is absolutely plain HTML with some CSS. Simple so far, isn’t it? The thing is that every other gadget is created the same way! Yes, some of them include more advanced CSS and VBScript or JavaScript elements, but the main structure building principle remains the same.
Save this file as gadget.html and place it in the same folder as gadget.xml. Now, you can change the name of this HTML file but make sure you also change the referenced name in the gadget.xml.

The thing you are missing now is the icon. I attached a sample icon to this tutorial, so you can use it with the gadget.

Now, there are a few final steps you need to take to pack the gadget. You can distribute the gadget in two ways. The first one is not really convenient. You have to navigate to this folder:

%userprofile%\appdata\local\microsoft\windows sidebar\gadgets

You can just enter this string in the Run dialog (Win+R) and it will get you to that folder. There you have to create a new folder with the .gadget extension. Yes, extension for a folder. You can name it as you want since it does not set the gadget name. Copy all three created files in that folder. Now, in the Gadget Explorer window (available if you press the + sign on the sidebar) you can see your gadget.

There is another method that will allow you to create an automatic gadget installer. For this, add the three created files to a ZIP archive (you can use the regular Windows Send To -> Compressed (zipped) folder method or use an archive creation tool). You can name the file the way you want, it just has to be a ZIP. When the archive is created, you should change the file extension to .gadget. Now that you’ve done this, you can distribute this file and it will automatically install your gadget.

The simple gadget didn't work on either of my machines. I tried it against Windows Vista Ultimate 32-bit and Windows 7 32-bit.

Cool tutorial! Mac dashboard widgets are made the same way with HTML and stuff. Vista is stealing the dashboard and the dock. ;D

What are you talking about Vista is stealing the dock? Vista Docks are not made by Microsoft at all, and Windows 7 is the exact same way, except that they don't have a sidebar... just the gadgets.

Can you see the gadget in the Gadget Explorer?




If by the dock you mean the sidebar, then it is actually developed by Microsoft.