English (UK)

Make Windows Gadget

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>&#169; 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>

© 2017 Bruno Tessaro. My life in the web. All right reserved.