How to Create a Vista Sidebar Gadget
Microsoft's release of Windows Vista was its first new operating system launch in over five years. Vista followed Windows XP and included a number of new features designed for ease of use and aesthetic improvement. Vista's new features ranged from superficial, as in a new set of default sound effects, to architectural, as in changes in the operating system kernel to improve stability. One feature that gained attention was the new Windows Sidebar, a desktop area that displays small programs called "gadgets." Even an amateur programmer can create a simple Vista sidebar gadget using a little HTML and JavaScript code.
- Difficulty:
- Moderate
Instructions
-
Create the Vista Sidebar Gadget
-
1
Click "Start" then "Documents" to open a Windows Explorer window. Click "File," "New," "Folder" to create a new folder under Documents that will contain the files for the gadget. Name it "SampleGadget.Gadget" (without the quotes).
-
2
Click "Start," "All Programs," "Accessories," "Notepad" to open Notepad.
-
3
Type the following code for the gadget's manifest file into Notepad:
<?xml version="1.0" encoding="utf-8" ?>
<gadget>
<name>Sample Gadget</name>
<version>1.0.0.0</version>
<description>Simple sample Vista sidebar gadget.</description>
<hosts>
<host name="sidebar">
<base type="HTML" apiVersion="1.0.0" src="SampleGadget.html" />
<permissions>Full</permissions>
<platform minPlatformVersion="1.0" />
</host>
</hosts>
</gadget>
Click "File" then "Save As." In the "File name" box type "gadget.xml" (without the quotes). In the "Save as type" list select "All Files (*.*)." In the "Encoding" list select "UTF-8." In the address bar or the folders pane, navigate to the new folder you created in Step 1 and click the "Save" button to save the manifest file.
-
4
Clear the contents of Notepad and type the following code for the gadget's HTML file:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Unicode" />
<title>Sample Vista Gadget</title>
<style type="text/css">
body
{
margin: 0;
width: 130px;
height: 90px;
font-family: arial;
font-weight: bold;
font-size: 20px;
}
#main
{
margin: 10px, 10px, 10px, 10px;
width: 110px;
vertical-align: middle;
text-align: center;
overflow: hidden;
}
</style>
<script type="text/javascript">
function startUp()
{
// Start-up housekeeping goes here, for example:
// Set reference to main div element
var theDiv = document.getElementById('main');
// Set background color style
theDiv.style.backgroundColor = 'black';
// Set text color style
theDiv.style.color = 'yellow';
}
</script>
</head>
<body onload="startUp()">
<div id="main">Vista Sidebar Gadget!</span>
</body>
</html>
Click "File," "Save As." In the "File name" box type "SampleGadget.html" (without the quotes). In the "Save as type" list select "All Files (*.*)." In the "Encoding" list select "UTF-8." Verify that Notepad is still saving in the new folder you created and click the "Save" button to save the HTML file.
Install the Vista Sidebar Gadget
-
1
Highlight the folder name in the Windows Explorer window you opened in Step 1. Press the "Ctrl" and "C" keys simultaneously to copy the folder and its contents to your clipboard. Navigate in the Explorer window to C:\Program Files\Windows Sidebar\Gadgets\ and press the "Ctrl" and "V" keys simultaneously to paste the folder and its contents. You may have to give an Administrator password and okay the copy operation, depending on your Vista security settings.
-
2
Click "Start," "All Programs," "Accessories," "Windows Sidebar" to start the sidebar if it's not already running.
-
3
Click the plus sign (+) near the top center of the sidebar to open the gadget gallery window. Double-click the icon labeled "Sample Gadget" to place the new gadget on your sidebar. It will display the message "Vista Sidebar Gadget!" in yellow type on a black background with a white border, as specified in the HTML file.
-
1
Tips & Warnings
You can create much more complex Vista sidebar gadgets than this simple example if you know HTML and JavaScript. One of the best ways to learn the intricacies of sidebar gadget design is to study the examples that install with Windows, found in sub-folders of the C:\Program Files\Windows Sidebar\Gadgets\ folder.
The procedure to create a gadget for the newer Windows 7 operating system is similar. This simple example will work in Windows 7 as well as in Vista.
Related Searches
References
Resources
- Photo Credit pc monitor image by Jorge Casais from Fotolia.com
