Windows Vista Sidebar gadgets are a great way to add value by addressing targeted and focused user scenarios. Think souped-up system tray - always-on applications typically used for monitoring something that often drives, based on notification, to a broader range of related scenarios. The nice thing about Sidebar is that it gives you more space and freedom to work with in designing your notification-based applications; rather than being limited to an icon and toast pop-ups, you can take advantage of resident UI space.

Out-of-the-box Sidebar gadgets include an analog clock, image rotator, calculator, RSS feed rotator, and a few more. You can go to gallery.live.com to start taking advantage of the gadgets that others are sharing with the world. Figure 1 and Figure 2 show samples of what the gadgets look like in Windows Vista.

This article isn't intended to be the bible of Sidebar gadgetry; rather, we're going to provide the data you need to pop the top off the subject and start enjoying the rich and creamy caramel center. The best learning comes through experience, but before you start enjoying that delectable, you might want to know what's inside. So we're going to give you the wrapper to help you decide if you want it, and then we'll show you the list of ingredients if you want to know more.

The Wrapper
Before you take it to the checkout aisle, you should at least know this:

• Sidebar gadgets are little HTML applications. They use a combination of JavaScript, HTML, CSS, and supporting media (primarily images) packaged in a Zip or CAB file (renamed a .gadget extension) with a minimum of an XML manifest (gadget.xml) and a docked HTML file. Using CAB let's you provide publisher information.
• Besides standard DHTML, you can use specialized elements/objects to provide effects like glow, shadow, opacity, rotation, and soft edges. Just remember: g:background, g:image, and g:text. These allow for a richer graphical user experience than you get in the browser or, by extension, Live gadgets.
• In addition to standard JavaScript, there's a Sidebar gadget API that provides deeper interaction with Windows such as reading files and folders, getting information about hardware, and displaying networking and Windows information. It's not limited to what you can do in the browser, and you can use ActiveX to loosen security constraints further if necessary.
• The gadgets have three basic states: docked, undocked, and flyout. Docked is size-restricted; the others can be as large as the desktop. Docked is the only required state, but it's good to develop all three. Flyout mode should be thought of as a "more information" view on what the gadget provides and can drive other resources as needed.
• Sidebar gadgets support the Multilingual User Interface (MUI), including language selection fallback, so you can build globalized and localized gadgets.

Ingredients
If you're reading this, you probably think you want to go ahead and take that bite and build a gadget yourself, or maybe you just have some time to kill. (Or you may just want to show off!) Whatever your reasons, we'll be exploring some of the essential information you need to build a gadget for yourself. We're going to attack the topic first by examining the gadget manifest format and file and directory structure; this should give you a better understanding of what's involved in building a gadget. After that, we'll dig down to the second layer and look at the Sidebar Gadget APIs, some constraints, and other yummy tidbits you'll want to know about to enjoy your gadget experience fully.

Gadget Manifest
The best place to start learning about how gadgets are made is to read the manifest file. Being in XML, it's both human- and machine-readable, and it provides everything the runtime needs to know for successful execution. The following listing elucidates the core elements for the gadget manifest:

• <gadget> encloses the gadget definition as the document element.
• <name> is the friendly name of your gadget that's displayed in the gadget gallery UIs.
• <namespace> defines the namespace (like in .NET) of your gadget.
• <version> provides the version number, again, similar to .NET.
• <author> is you or your company.
• <info> and <logo> specify the URL and image for the author.
• <copyright> is used for copyright information in gallery UIs and elsewhere.
• <description> is the friendly description used in galleries.
• <icons> and <icon> define the various icons associated with the gadget.
• <hosts> and <host> define the various hosts the gadget can play in. The host's name attribute should be "sidebar" for sidebar gadgets.
• <base> defines the type and source file to start running the gadget. Right now, the type is HTML and the src should be your docked gadget HTML file.
• <permissions> and <platform> just have expected values of "Full" and "1.0" for now.
• <defaultImage> can be used to as a sort of splash screen to show while the gadget loads.

<?xml version="1.0" encoding="utf-8" ?>
<gadget>
   <name>Hello World!</name>
   <namespace>Example.You</namespace>
   <version>1.0</version>
   <author name="Your Name">
     <info url="http://www.example.com" />
     <logo src="logo.png"/>
   </author>
   <copyright>© 2006</copyright>
   <description>My first gadget</description>
   <icons>
     <icon height="48" width="48" src="icon.png" />
   </icons>
   <hosts>
     <host name="sidebar">
       <base type="HTML" src="HelloWorld.html" />
       <permissions>full</permissions>
       <platform minPlatformVersion="1.0" />
       <defaultImage src="drag.png" />
     </host>
   </hosts>
</gadget>