Windows Vista supports a user-selectable strip of miniapplications docked along the side of the screen in an area called the "Sidebar." Applications that reside in this dock are referred to as "Sidebar Gadgets," and are members of the three-part Gadget family. (The other two gadget constructs are "Windows Live Gadgets" that execute exclusively on Microsoft's Live.com web site and "Sideshow Gadgets" that can be displayed on specially constructed laptop PCs that feature an additional smaller display on the laptop lid.) While similar in conceptual design, gadget types are not interoperable. In this article, I focus on Sidebar Gadgets and how you create them.
Getting Started
The most obvious requirement for Sidebar Gadget construction is running the Windows Vista operating system. While the files that make up gadgets are standards-based (meaning that you can write them on any computing platform using a text editor), testing them is a Vista-only process. Once you have Vista running, activate the Sidebar by clicking on the All Programs-> Accessories->Windows Sidebar item in the Start menu (Figure 1). Sidebar ships with several default gadgets that demonstrate the possibilities gadgets offer. These range from a clock and calendar to a CPU/memory usage meter and RSS reader. Observe the behavior by clicking on a gadget's control button or dragging it off the Sidebar onto the Windows Desktop. These events trigger state-change messages that well-designed gadgets need to accommodate.
Once you're comfortable with how these gadgets work, click on the "+" icon at the top of the Sidebar to view the GadgetPicker window (Figure 2) and choose several of the preinstalled gadgets, or select "Get more gadgets online" to visit Microsoft's Gadget Gallery. In all likelihood, gadgets have already been created that match your initial ideas. Microsoft anticipates that over time, there will be thousands of gadgets available for all classes of users. Feeding the growth of gadget variations is the fact that the code executing any gadget is not compiled or obfuscated in any way. Sidebar Gadgets, delivered in specially placed folders with a .gadget extension, are nothing more than a collection of specially named and formatted text/image files. These special folders are often compressed as zip files to provide a single file download for delivery. Note that the zipped folder should also have a .gadget extension, not .zip, as Vista will properly identify and use the zipped folder contents appropriately. Gadget bundles can also be delivered as CAB files, though this is done less frequently in practice. While writing this article, I did what any other new gadget author would do—I visited the Microsoft Sidebar Gadget site (microsoftgadgets.com/Gallery), downloaded the gadget(s) that most closely matched the functionality of my idea (in this case, I retrieved a basic RSS and Windows Media Player gadget), appended a .zip extension to the file, expanded the contents, and analyzed the code within the files. (If you forget to add the .zip extension and double click a .gadget file, Vista attempts to install the gadget into the Sidebar instead.) After familiarizing myself with the typical gadget structures, I read the gadget developer documentation (microsoftgadgets.com/Build) and began tinkering.
Primary Ingredients
A typical .gadget payload contains both required and optional files. The required files are:
- gadget.xml, the Gadget Manifest file that describes the gadget's name, version, author, copyright, description, icon, and host information.
- An HTML file, referenced by the Gadget Manifest within the <base> element in the <hosts> branch, that displays content to the gadget user the same way any HTML document would be displayed in a web browser. This is the central file for the gadget's operations. While this file can have any suffix name, a popular convention is to call it the same name as the gadget. In the case of my MikesMediaCenter.gadget test project, I named this file "MikesMedia.html" and referenced it in the gadget.xml manifest file accordingly.
The optional files include:
- An icon file displayed in the GadgetPicker view. If no icon file is included, Sidebar displays a generic icon instead.
- JavaScript files, preferably with a .js extension. While JavaScript can reside within the main HTML file (frequently found in quick and dirty prototypes), good programming practices abstract the programmed functionality from the HTML presentation-layer file.
- Cascading Style Sheet (CSS) files, preferably with a .css extension. Like JavaScript, CSS code can reside in the main HTML file but should be contained in a separate .css file and referenced from the main HTML file for code maintainability and organization.
- Image files, preferably in PNG format, which may be displayed throughout the course of the gadget's operation. These may include overlays for button selections, logos, image-based text boxes, and other graphic elements necessary to enhance the aesthetic appeal of the user experience.
