The basics Create an empty gadget.xml file with Notepad and save it. In the Encoding drop-down, select UTF-8. Create an empty MyGadget.html file with Notepad and save it. In the Encoding drop-down, select UTF-8.
Create the manifest gadget.xml file and save it to folder.
<?xml version="1.0" encoding="utf-8" ?> <gadget> <name>MyGadget</name> <version>1.0.0.0</version> <hosts> <host name="sidebar"> <base type="HTML" apiVersion="1.0.0" src="/MyGadget.html" /> <permissions>Full</permissions> <platform minPlatformVersion="1.0" /> </host> </hosts> </gadget>
Create the core MyGadget.html file and save it to folder.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Unicode" /> </head> <body> <div id="gadgetContent"> </div> </body> </html>
Now packaging your Gadget. The simplest way to create a package is with Windows Explorer. Select the files that make up your gadget, right-click, and select Send To -> Compressed Folder. Just generate the zip file and then rename it with a .gadget extension.
Sample Gadget
Replace MyGadget.html file with the following code.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Unicode" />
<title>My Gadget</title>
<style type="text/css">
body {
margin: 0;
width: 130px;
height: 75px;
font-family: verdana;
font-weight: bold;
font-size: 20px;
}
#gadgetContent {
margin-top: 20px;
width: 130px;
vertical-align: middle;
text-align: center;
overflow: hidden;
}
</style>
<script type="text/jscript" language="jscript">
// Initialize the gadget.
function init() {
var oBackground = document.getElementById("imgBackground");
oBackground.src = "url(images/background.png)";
}
</script>
</head>
<body onload="init()">
<g :background id="imgBackground">
<span id="gadgetContent">Hello World!</span>
</g>
</body>
</html>
Create a new folder called images under the gadget folder. Create a new background image at least 130 pixels wide and 75 pixels high and save it to the images folder. Create a new icon image at least 64 pixels wide and 64 pixels high and save it to the images folder.
Replace gadget.xml file with the following code.
< ?xml version="1.0" encoding="utf-8" ?> <gadget> <name>MyGadget</name> <namespace>Noos</namespace> <version>1.0.0.0</version> <author name="Bruno Tessaro"> <info url="www.brunotessaro.it" /> <logo src="/images/icon.png" /> </author> <copyright>© Bruno Tessaro</copyright> <description>Sample Sidebar gadget</description> <icons> <icon width="64" height="64" src="/images/icon.png" /> </icons> <hosts> <host name="sidebar"> <base type="HTML" apiVersion="1.0.0" src="/MyGadget.html" /> <permissions>Full</permissions> <platform minPlatformVersion="1.0" /> <defaultimage src="/images/icon.png" /> </host> </hosts> </gadget>