Go Go Gadgets

Executive Summary:

In "System Inventory Mini-App" (http://www.scriptingprovip.com/articles/articleid/ 96668 / 96668 .html), I introduced a miniature application that I developed as HTML Application (HTA). SysInfo.hta uses Windows Management Instrumentation (WMI) classes to gather an assortment of system inventory information from a server or workstation and saves the information in a Microsoft Excel spreadsheet.

I call this HTA a mini-app because it performs just one specific task and because it has very small application window—just 180 x 185 pixels. The application window is tiny because I developed the HTA so that I could easily incorporate it into a Windows Vista Sidebar gadget, which I show you how to do in this article. However, this mini-app also works nicely in Windows XP, where the minuscule footprint lets me leave it open throughout the day rather than minimizing or closing it.

So What’s a Gadget?
By far the coolest feature I’ve found so far in Vista is Windows Sidebar, a semitransparent pane that you can add to the Vista desktop to house and organize gadgets. Gadgets are miniature programs consisting of scripts and HTML, similar to HTAs. Vista ships with a handful of pretty nice gadgets, such as a CPU meter, a clock, a calendar, a notepad, and a slideshow. Hundreds if not thousands of other gadgets are available for download at various Web sites, including Microsoft's site (http://vista.gallery.microsoft.com/vista/SideBar.aspx).

With little or no tweaking, you can also transform your own HTA scripts into gadgets, as I explain later. Keep in mind, though, that because gadgets application windows are very small, some applications, such HTAs that have a lot of input boxes, might not be well suited to a Sidebar gadget.

In this article, I show you how to turn SysInfo.hta into a Vista Sidebar gadget. You can also use SysInfo.hta on an XP system, although in that case it can't be a Sidebar gadget.

There are five basic steps to creating a gadget:

We'll look at each of these steps individually.

Create the Gadget Folder
Each gadget you create must have its own folder created under C:UsersUserIDAppDataLocalMicrosoftWindows SidebarGadgets, where UserID is your logon user ID. You name the folder with a .gadget extension. A sample gadget path and folder name would be C:Users jturnervbsAppDataLocalMicrosoftWindows SidebarGadgetsMyFirstGadget.gadget.

The C:UsersUserIDAppDataLocalMicrosoftWindows SidebarGadgets folder contains gadgets that only you can see, and only when you're logged on. Other users must have their gadgets in a folder named with their own user ID. As a result, you can see only your gadgets and other users can see only theirs. If you create a gadget that you want all users to have access to, put it in C:Program FilesWindows SidebarGadgets, which is the folder that contains the gadgets that ship with Vista. Regardless of which path you use, each gadget must have its own specific .gadget folder.

Create a Manifest
A manifest is an XML file that contains information about the gadget. Each gadget folder must have a manifest, which must be named gadget.xml and saved with 8-bit Unicode Transformation Format (UTF-8) encoding, as Figure 1 shows. I copied a gadget.xml file from one of the .gadget folders that ships with Vista and used it as a template for my manifests. Listing 1 shows the manifest file for the SysInfo gadget.

In Listing 1, the boldface elements show what you'll need to modify if you adapt this manifest to your own gadgets. Most of the manifest elements are self-explanatory, such as the application name, which appears between the start and end name tags. If you want an icon for your gadget to appear in the Sidebar, replace the g.png name at callout A with the name of the icon you want to use. The icon must exist in the .gadget folder. If you don’t specify an icon, a default icon is used.

The line at callout B is where you declare the source file by specifying the name of your gadget HTML or HTA application file—in this case, SysInfo.hta. Elements such as namespace and copyright can be left as-is or modified.

Manifests typically look pretty much the same, although most use an HTML source file. But it’s good to know that you can also use HTAs.

Create an Icon
The most important thing to remember about the icon-creation step is that if you want to use an icon to represent your gadget, you'll need to create it in the .gadget folder or copy it to the .gadget folder after you’ve created it. An icon image can pretty much be any type of image file, such as a .jpg or .bmp file, and when I created the first version of the icon for the SysInfo gadget, I used Microsoft Paint. But then I noticed that the gadgets that ship with Vista use Portable Network Graphics (PNG) files. PNG files are a bitmapped image format that can have a transparent background. Curiosity led me to find and use an open-source graphics package called lnkscape (http://www.inkscape.org) to create a PNG icon.

Develop Your Gadget
Most of the effort you devote to creating gadgets will be spent developing them, so this is the meat-and-potatoes step of gadget creation. Because Vista hasn't yet been widely adopted, and because I want my utilities to be available to other admins who are using earlier versions of Windows, I try to create gadgets that can also be used as standalone HTAs.

With SysInfo.hta, you won't have to make any adjustments to turn it into a gadget. The only thing I need to mention is that the HTA window and the gadget window are different sizes—Figure 2 shows the HTA window at the top and the gadget window at the bottom. Initially I wondered how to handle the sizing of the two windows, then I discovered that the HTA can include the window sizing code for both the HTA and the gadget. The underlying gadget application refers to only the HTML code and ignores the VBscript sizing code, while the HTA ignores the HTML code and uses the VBscript code. Listing 2 shows the an excerpt from SysInfo.hta. Callout A shows the HTML code used to size the gadget, and callout B shows the code used to size the window for the HTA. Although you could remove the HTML code from the HTA and remove the VBscript code from the gadget, removing the code is unnecessary and leaving it in means you don't have to maintain two different versions.

On a side note, Figure 2 shows the gadget window as it appears when the gadget is detached from the Sidebar. To detach a gadget, you simply grab it by the little pad-like image underneath the “X” and drag it out of the Sidebar. You can move it back just as easily by reversing the process.

Installing the Gadget
You can install a gadget in a couple of ways. The first way is to develop all the gadget pieces within the .gadget folder that you created for the gadget, then open the sidebar (Start, All Programs, Accessories, Windows Sidebar) and click the plus sign (+) at the top of the Sidebar to open the Gadgets Gallery. Find your new gadget and double-click its icon to complete the installation.

The second way to install a gadget is to put all the required gadget files in one folder, zip the contents of the folder, and change the .zip extension to .gadget. Then all you have to do to install the gadget is double-click the compressed .gadget folder. This is the preferred method if you want to distribute your gadget to other Vista users. Remember that the compressed file must contain at least two files: the gadget.xml file and the HTML or HTA file. Also keep in mind that whatever you name your .gadget compressed folder will become the name of the folder in which all the gadget files will be stored. If you name your compressed folder MyFirst.gadget, for example, your gadget files will be stored in C:UsersYourUserIDAppDataLocalMicrosoftWindows SidebarGadgetsMyFirst.gadget.

Have Fun!
Gadgets and the Sidebar are two features of Vista that are enticing me to slowly move away from XP. If you're not using Vista yet, tuck this article away for later. And if you have some time, check out the Application Compatibility Toolkit 5.0 Technet Virtual Lab (https://msevents.microsoft.com/cui/WebCastEventDetails.aspx?EventID=1032330298), where you can get a good idea of what Vista is like and learn about the Sidebar and gadgets. The lab will give you 90 minutes before it automatically ends, which is plenty of time to even create a gadget if you want to. Once you start developing and using gadgets, you’ll find gadget development is a lot of fun.