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.
Create a new folder named HelloWorld.gadget
(NOTE: The source is available for download at the bottom of this article)
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.
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\GadgetsThis 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.Younamespace>
<version>1.0.0.0version>
<author name="Your Name">
<info url="www.example.com" />
author>
<copyright>© 2007copyright>
<description>My first gadgetdescription>
<hosts>
<host name="sidebar">
<base type="HTML" apiVersion="1.0.0" src="HelloWorld.html" />
<platform minPlatformVersion="1.0" />
<permissions>Fullpermissions>
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
No comments:
Post a Comment