There are many tutorials available on net describing the creation of a Windows Gadget. Here is one quick start tutorial from me.
Theme of my sample gadget is "Show system time".
First, simply create a folder say MyGadget inside folder %userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets. You can reach this location by pasting this in the explorer window. Like this:
Here, I added a folder called MySystemClock.gadget. The important thing you need to care is you must provide .gadget extension to the folder name. Without that, your gadget will not work.
Now basically two files are needed for your gadget. More files required based on the theme and complexity of gadget you are developing. He two files needed are:
1. Manifest file - where the properties of your gadget are defined
2. HTML Code file - your application code
Manifest file
gadget.xml is the filename for manifest files. You can simply copy paste the below contents to a file and name it gadget.xml and edit the necessary fields.
<?xml version="1.0" encoding="utf-8" ?>
<gadget>
<name>My System Clock</name>
<namespace>My.System.Clock</namespace>
<version>1.0.0.0</version>
<author name="NinethSense">
<info url="www.ninethsense.com" />
</author>
<copyright>2008</copyright>
<description>My System Clock gadget</description>
<hosts>
<host name="sidebar">
<base type="HTML" apiVersion="1.0.0" src="MySystemClock.html" />
<permissions>Full</permissions>
<platform minPlatformVersion="1.0" />
</host>
</hosts>
</gadget>
HTML Code File
Here is where our application working exactly. You can see there is an html filename in the menifest file above - MySystemClock.html. Create a file with this name and add your sample html there. You can double click and view it in browser for testing. Sample html code below:
<script language="Javascript">
function time () {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds()
var timeValue = "" + ((hours >12) ? hours -12 :hours)
timeValue += ((minutes < 10) ? ":0" : ":") + minutes
timeValue += ((seconds < 10) ? ":0" : ":") + seconds
document.getElementById("divHolder").innerHTML = timeValue;
setTimeout("time()",1000);
}
</script>
<body onLoad="time()" style="width: 130px;">
<div id="divHolder" style="color:white;background-color:black;"></div>
</center>
Your Windows vista gadget is ready!
You can add your gadget with below steps:
1. Click on the + symbol on the side bar - see screenshot below
Or you can right click on the sidebar and select "Add Gadgets..."
2. Your new gadget will be displayed in the next window like this:
3. Your sample gadget is here
End Note:
You can download the above sample Windows Vista gadget here.
This is a very small beginning and this article explans very less. Many advanced things you can do.
Post your comments
About the Author
Praveen.V.Nair aka NinethSense, a technology enthusiast and Microsoft MVP Awardee. You can find more about him on his website http://www.ninethsense.com and his blog http://blog.ninethsense.com.