This is an introduction to developing windows gadgets on the Microsoft Windows 7 Operating System. A windows gadget is a small piece of UI that floats around on your desktop. This is the version 2 of the Windows Sidebar which appeared in Windows Vista operating system. All gadgets are simply a collection or group of HTML/JS(JScript)/CSS files and a bunch of assets described by a gadget.xmlplaced in a .gadget Folder. This tutorial assumes you know basic HTML and Javascript. Gadgets uses Jscript which is a minor variant and is more or less similar to Javascript.
Before jumping to How to make the windows gadget, lets see where the default Gadgets used by windows are present. We can always use those inbuilt gadgets as reference to make our windows gadget.
Finding the default gadgets on Windows 7
The default gadgets on Windows 7 are located in the drive (typically C:) you installed Windows, Under "Program Files\Windows Sidebar\Gadgets" folder, and any shared or additional gadgets in "Program Files\Windows Sidebar\Shared Gadgets". We can create gadgets in any of these folder provided we haveAdministrative Privileges to the system. If not we can place our apps in%localappdata%\Microsoft\Windows Sidebar\Gadgets, which usually expands to C:\users\<username>\AppData\Local\Microsoft\Windows Sidebar\Gadgets.
Note: The AppData folder might be a hidden folder. Make sure to enable show hidden folders to view the folder.
Making a new Gadget, creating the folder Structure
Lets start making a simple gadget that counts down given the number of seconds to countdown to. That is the final output, and now lets start to make a new windows gadget. If you just want to skip the entire shebang and just get the files and figure out yourself, goto the end of this post and get the zip file for the gadget folder.
gadget.xml File
Use one of the folders above, and create a new folder. Countdown.gadget. Create a gadget.xml file inside this new folder. (If you see the windows examples, you can see this file is inside the en-US folder, this is for gadgets that support multiple languages.). For simplicity let us just ignore the language support.
Paste the following into the XML file and save it in UTF-8 Encoding.
<?xml version="1.0" encoding="utf-8" ?> <gadget> <name>CountDown</name> <namespace>windows.sdk</namespace> <version>1.0.0.0</version> <author name="digitalpbk"> <info url="digitalpbk.com/?ref=gadget" text="digitalpbk.com"/> <logo src="logo.png" /> </author> <copyright>digitalpbk.com</copyright> <description>Count Down gadget.</description> <icons> <icon height="48" width="48" src="icon.png" /> </icons> <hosts> <host name="sidebar"> <!-- New autoscaleDPI node --> <autoscaleDPI>true</autoscaleDPI> <base type="HTML" apiVersion="1.0.0" src="main.html" /> <permissions>Full</permissions> <platform minPlatformVersion="1.0" /> <defaultImage src="icon.png" /> </host> </hosts> </gadget>
The above code is almost self explanatory, but I will explain some of the important parts of it.
- autoscaleDPI : For enablng automatic zooming of images in the widget
- base : The src attribute deteremines the main HTML file that is shown when the widget is added to the desktop.
- defaultImage : The image choosing the icon that is shown in the gadget selection window. A point to be added here is that the current working directory would be the .gadget folder we created. In the above xml file icon.png lies inside the .gadget directory. (alongside the gadget.xml file)
The main.html File
<html>
<head>
<title>Hello World</title>
<script type="text/jscript" language="jscript">
/* see http://digitalpbk.com/windows-gadgets/how-make-windows-gadget-windows-7 */
System.Gadget.settingsUI = "settings.html";
var timeLeft = 0;
var iid = 0;
function init()
{
var oBackground = document.getElementById("imgBackground");
oBackground.src = "url(images/bg.png)";
var oContent = document.getElementById("gadgetContent");
if (System.Gadget.Settings.read("SettingExist") == true)
timeLeft = System.Gadget.Settings.read("settingsTimeOut");
else
timeLeft = 600;
iid = setInterval("tick()",1000);
}
function timeFormat(secs)
{
var t = new Date(1970,0,1);
t.setSeconds(secs);
var s = t.toTimeString().substr(0,8);
if(secs > 86399)
s = Math.floor((t - Date.parse("1/1/70")) / 3600000) + s.substr(2);
return s;
}
function tick(){
var oContent = document.getElementById("gadgetContent");
oContent.innerHTML = timeFormat(timeLeft--);
if(timeLeft<0){
clearInterval(iid);
var oBackground = document.getElementById("imgBackground");
oBackground.src = "url(images/bgred.png)";
oContent.innerHTML = "";
}
}
System.Gadget.onSettingsClosed = function(event)
{
if(event.closeAction == event.Action.commit)
{
timeLeft = System.Gadget.Settings.read("settingsTimeOut");
}
}
</script>
<style>
body { width:180px; height:80px; margin:0px;text-align:center; }
#gadgetContent { font-size:26px; font-weight:bold; color: white; font-family:courier new; margin-top:20px;}
</style>
</head>
<body onload="init()">
<g:background id="imgBackground" style="width:180px;height:80px;padding:5px;">
<div id="gadgetContent"></div>
<a href="http://digitalpbk.com">digitalpbk</a>
</g:background>
</body>
</html>The Settings.html File
<html>
<head>
<title>Countdown Settings</title>
<script type="text/jscript" language="jscript">
/* see http://digitalpbk.com/windows-gadgets/how-make-windows-gadget-windows-7 */
function init() {
if (System.Gadget.Settings.read("SettingExist") == true)
timeout.value = System.Gadget.Settings.read( "settingsTimeOut" );
else
timeout.value = "600";
System.Gadget.onSettingsClosing = SettingsClosing;
}
function processed(str) {
if(str.indexOf(":") == -1) {
return parseInt(str);
}
var parts = str.split(":");
var ret = 0;
var d = 1;
for(part in parts.reverse()) {
ret += parts[part]*d;
d*=60;
if(d==60*3600){
break;
}
}
return ret;
}
function SettingsClosing(event)
{
// Save the settings if the user clicked OK.
if (event.closeAction == event.Action.commit)
{
System.Gadget.Settings.write(
"settingsTimeOut", processed(timeout.value));
System.Gadget.Settings.write("SettingExist", true);
}
// Allow the Settings dialog to close.
event.cancel = false;
}
</script>
<style>
body { width:180px; height:120px; margin:0px; }
</style>
</head>
<body onload="init()">
TimeOut: <input type="text" id="timeout" name="timeout" size="12" maxlength="9"/>
</body>
</html>Download:
Countdown.Gadget.zip
No comments:
Post a Comment