GeekZilla
A simple guide to creating your first Vista Gadget
Gadgets are simply HTML and JavaScript. The SideBar exposes a bunch of API's which are accessible from JavaScript and extends the HTML schema. In this short guide we will greate a simple "Hello World" gadget.
The four steps
- Create a directory to contain the gadget files.
- Create an HTML page for our "Hello World".
- Create the XML file for the gadget manifest.
- Test the created gadget with Vista Sidebar.
Step 1 - Create a directory to contain the gadget files
Locate and open your gadgets folder. Click the Start button, and then click Run. In the Open text box, type:
%userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets
This will open an explorer window containing your Gadgets folder.
Create a new folder named HelloWorld.gadget
Step 2 - Create an HTML page for our "Hello World".
Create a file named HelloWorld.html and update it's contents with the following HTML:
(NOTE: The source is available for download at the bottom of this article)
<html> <head> <title>Hello, World!</title> <style> body { margin: 0; width: 130px; height: 65px; } #gadgetContent { width: 130px; top: 24px; text-align: center; position: absolute; font-family: Verdana; font-size: 10pt; } </style> </head> <body> <span id="gadgetContent"> Hello, World! </span> </body> </html>
Step 3 - Create the XML file for the gadget manifest
Now you need to create a Gadget manifest. This is an XML file that specifies the core HTML file and defines the gadget's properties, such as name, icon, and description. Every gadget manifest is named gadget.xml.
To create the gadget manifest, copy and paste the following text into a new file. Save your file with the file name gadget.xml. For localization support, make sure that you save your gadget.xml file with UTF-8 encoding.
<?xml version="1.0" encoding="utf-8" ?> <gadget> <name>Hello, World!</name> <namespace>Example.You</namespace> <version>1.0.0.0</version> <author name="Your Name"> <info url="www.example.com" /> </author> <copyright>© 2007</copyright> <description>My first gadget</description> <hosts> <host name="sidebar"> <base type="HTML" apiVersion="1.0.0" src="HelloWorld.html" /> <platform minPlatformVersion="1.0" /> <permissions>Full</permissions> </host> </hosts> </gadget>
Step 4 - Test the created gadget with Vista Sidebar
- Right click on the Sidebar. Choose Add Gadgets...
- Double click the Hello World Gadget
The gadget should now appear on your sidebar. If you want to make updates to the Gadget HTML then view the changes you need to remove it from the sidebar and add it again for the changes to become visible.
Next Steps....
Why not try adding a background to the Gadget (see GadgetBackground), changing the height or editing the CSS to make it appear differently.
Paul is the COO of kwiboo ltd and has more than 20 years IT consultancy experience. He has consulted for a number of blue chip companies and has been exposed to the folowing sectors: Utilities, Telecommunications, Insurance, Media, Investment Banking, Leisure, Legal, CRM, Pharmaceuticals, Interactive Gaming, Mobile Communications, Online Services.
Paul is the COO and co-founder of kwiboo (http://www.kwiboo.com/) and is also the creator of GeekZilla.
Comments
Ford
said:
Hello - I just wanted to say you can upload your gadgets on this site http://www.gadgetsdownload.com we try to collect a good collection so people have some to choise of, if you are a beginner or PRO it dossent matter, we just want gadgets 
btw great Nerd site.
DaTval
said:
I have created this gadget, but windows sidebar,can't find it. what to do? how to make installation program of the gadget?
phayman
said:
DaRval, did you see the installer download in my article?
DaTval
said:
Yes I've seen, and it's working very well, but I want to make it myself. I create folder Helloworld.gadget and paste this files in it. then moved this folder in gadgets folder. But I can't find them in sidebar 
Can I suggest me how to create this instalation?
GadgetGuy
said:
Get The Creating Vista Gadget Book ! http://www.amazon.com/Creating-Vista-Gadgets-JavaScript-Silverlight/dp/0672329689
DaDroll
said:
@GadgetGuy
Stop tying to get DaTival to buy your crappy book.
