|
Windows Vista supports a user-selectable strip of miniapplications, called "Gadgets," that reside along the side of the screen, called the "Sidebar."
March 12, 2007
URL:http://www.drdobbs.com/windows/developing-windows-vista-sidebar-gadgets/198000277
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.
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.
A typical .gadget payload contains both required and optional files. The required files are:
The optional files include:
Once you have reviewed the necessary references and code samples, create a folder with a .gadget extension. Doing so makes file organization during development (as well as packing the files for deployment) easier. For demonstration purposes, name this folder "MyFirst.gadget."
Next, using a text editor such as Notepad, create a new gadget.xml file from scratch or edit an existing one. Listing One is a gadget.xml source code listing.
<?xml version="1.0" encoding="utf-8" ?>
<gadget>
<name>My First Gadget</name>
<namespace>microsoft.windows</namespace>
<version>1.0</version>
<author name="Mike Riley">
<info url="www.mikeriley.com" />
</author>
<copyright>Copyright (c)2007</copyright>
<description>A simple gadget that displays
"DDJ Rules!" in the Sidebar.</description>
<icons>
<icon width="130" height="130" src="ddj.png" />
</icons>
<hosts>
<host name="sidebar">
<base type="HTML" apiVersion="1.0.0" src="gadget.html" />
<permissions>full</permissions>
<platform minPlatformVersion="0.3" />
</host>
</hosts>
</gadget>
You create an HTML document with the same name referenced in the gadget.xml <base> element (in this case, gadget.html). The file contents can be as simple as:
<html>
<style>
body {
width:130;
height:30;
}
</style>
<body>
DDJ Rocks!
</body>
</html>
If you omit the <style> information, the gadget still displays, but only shows the first letter of each word on a separate line—not quite your intended result. And while the body width can exceed 130 pixels (which happens to be the width of the Sidebar itself), exceeding this limit makes gadgets look oversized, out of place, and (most importantly) outside the range of the Sidebar Gadget design-guideline recommendations.
Another observation: While Notepad is sufficient for minimal UI construction, I recommend a web design program such as Adobe Dreamweaver for optimum design efficiency. Using a <div> tag during development to constrain the contents within the 130×130 pixel frame limitation is helpful during the debugging stage. Gadgets designed to expand their windows when dragged off the Sidebar can be developed using separate HTML files.
After creating the Gadget Manifest and referenced HTML file in the .gadget folder (MyFirst.gadget, in this example), you're ready to start debugging. Either copy or move the .gadget folder containing these two files into the c:\Users\YourUsername\AppData\Local\Microsoft\Windows Sidebar\Gadgets path, where "YourUsername" is the name of the active account being used to test the gadget. Opening the GadgetPicker reveals your gadget with a generic icon (Figure 3). This icon appears if there is no <icon> element in the manifest ,or in the case of the MyFirst.gadget example, the image file is missing. If the gadget fails to appear entirely, try opening the gadget.xml file in Internet Explorer. You may discover that your XML has illegal characters or is not well formed. Fix any syntax errors or illegal characters and try again. Once your XML is clean, select the gadget and it will be displayed in the Sidebar (Figure 4). It's that easy.
As you enhance the gadget's display with more attractive UI and programmed features, continue to use this GadgetPicker technique to reload any code changes. The Sidebar does not need to be restarted to refresh changes in your gadget's code, but all running instances of your gadget need to be closed before reselecting your gadget from the GadgetPicker to test any code modifications with the new instance.
While an attractive UI makes a good first impression to users, there's only so much interest in an entity with all beauty and no brains. The most popular gadgets will be those that perform a small set of functions extremely well while looking good. There are sure to be gadget programmers who go beyond these expected boundaries by creating full-blown Ajax-enabled wordprocessors and spreadsheets, but doing so is an aberration of the gadget design philosophy. Nevertheless, even with relatively simple programming logic, a script debugger always makes coding and bug hunting more efficient. A JScript debugger (such as those found in Microsoft's Script Debugger and Visual Web Developer 2005 Express Edition or Visual Studio 2005) are adequate (msdn.microsoft.com/vstudio/express/vwd). As is the case with standard web development and JavaScript debugging, be sure to uncheck the "Disable script debugging (Other)" option in Internet Explorer's Tools/Advanced tab.
Gadget deployment and distribution is straightforward. Although uncompressed .gadget folders can be copied from one system to another, users must manually move the folder into their respective Sidebar paths. To facilitate this, compress the contents of the folder into a .zip archive and rename it with a .gadget extension. When users double click on the file, Vista identifies the archive as a gadget archive and moves the contents into the correct location.
Because the archive is a single file, it can be easily transported using everything from e-mail attachments and local file servers to web servers, and if intended to be shared with the Vista community, on Microsoft's gadget web site. Gadgets can be submitted to Microsoft for distribution via the MicrosoftGadgets.com gadget submission page (microsoftgadgets.com/addgadget2.aspx). However, just because you submitted a gadget for public consumption doesn't automatically qualify it for a Gallery listing. Remember that Microsoft wants to promote Sidebar with as much positive buzz as possible and Microsoft has the final authority to consider every new gadget uploaded to be featured in the Gallery. Simple gadgets were allowed during the early beta development days to serve as tutorials and thought starters for other gadget developers, as well as a cherry-picking/sifting ground for Microsoft to select the "best of" gadgets for Vista's launch. The quality and coolness qualifications for Sidebar gadget Gallery distribution will continue to be raised as more attractive and sophisticated gadgets come online.
Obviously, MyFirst.gadget isn't very exciting, but it is a stub from which to begin developing the next killer gadget. As you have seen, gadgets are, for the most part, small web pages with special attributes, so having a solid background in web page design and JavaScript is essential for smart gadget implementation. Study the gadget object model (msdn.microsoft.com/library/en-us/sidebar/sidebar/reference/refs.asp) and experiment with the different calls that can be sent and received. Over time, more complex and interesting gadgets will be available. Use these for inspiration and insight toward creating your own amazing Sidebar gadgets.
Terms of Service | Privacy Statement | Copyright © 2024 UBM Tech, All rights reserved.