Channels ▼
RSS

.NET

Developing Windows Vista Sidebar Gadgets

Source Code Accompanies This Article. Download It Now.


Mike is a DDJ contributing editor and can be contacted at mike@ mikeriley.com.


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.

[Click image to view at full size]

Figure 1: Start menu showing Sidebar icon.

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.

[Click image to view at full size]

Figure 2: The Sidebar GadgetPicker.

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.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video