In my previous Vista article, I showed you how to create a gadget that will launch Computer from the Windows Sidebar. Many readers commented that this technique is quite handy, so I decided to continue with this series on adding the missing desktop icons to the Windows Sidebar as gadgets.

In this edition of the Windows Vista Report, we’ll explore how to create gadgets that will add the Documents, Network, and Internet Explorer to the Windows Sidebar. Before you get started, take a look at my previous article for a refresher on the basics.

In each step, be sure that you type the codes exactly as they appear in the screenshots, or the gadgets will not function!

A brief gadgets overview

Each one of these gadgets consists of three files. The first text file (which is known as the manifest file) is a relatively simple XML file called Gadget.xml. This file essentially contains the base settings for the gadget. The second file (which is named after the gadget) is a basic HTML file and contains a few HTML tags and the script code required to perform a task. The graphic file is a PNG file used to create the gadget’s icon. Each set of files lives in a specially named folder located inside the Gadgets folder.

Creating the special folders

The quickest way to access the Gadgets folder in Vista is to follow these steps:

  1. Press [Windows]R to access the Run dialog box.
  2. Type the following command in the Open text box:

%userprofile%\appdata\local\microsoft\windows sidebar\gadgets

Once you access the Gadgets folder, use the New Folder command on the Organize menu to create the following folders:

  • MyDocuments.gadget
  • MyNetwork.gadget
  • InternetExplorer.gadget

When you finish, your Gadgets folder will look like the one in Figure A.

Figure A

Create a special folder for each gadget you produce.

The My Documents gadget

You should use Notepad to create the Gadget.xml manifest file. Figure B shows the Gadget.xml file you’ll need to create for the My Documents gadget.

Figure B

The Gadget.xml file is called the manifest file and contains the base settings for the My Documents gadget

When you finish typing the file, save it to the MyDocuments.gadget folder as an XML file with UTF-8 encoding. To do so, follow these steps:

  1. Pull down the File menu and select the Save As command.
  2. In the Save As dialog box, type gadget.xml in the File Name text box.
  3. Select All Files from the Save As Type drop-down menu.
  4. Select UTF-8 from the Encoding drop-down menu.

The HTML file contains basic tags and the script code that serves as the gadget’s engine. You may create the MyDocuments.html file in Notepad, as shown in Figure C.

Figure C

The code in the MyDocuments.html file uses the class identifier (CLSID) to open the Documents folder.

When you finish typing, follow these steps:

  1. Save the file to the MyDocuments.gadget folder.
  2. Save the file as MyDocuments.html.
  3. Select All Files from the Save As Type drop-down menu.
  4. Select ANSI from the Encoding drop-down menu.

In the script section of the My Documents gadget, I use a combination of Microsoft JScript and Windows Script Host to open the Documents folder. Without getting too technical, the line containing the command ActiveXObject(“WScript.Shell”) prepares the script to access the operating system’s Windows Script Host using the moniker WshShell. The next section lays out the LaunchDocuments function, which uses the WshShell.Run command and the class identifier (CLSID) for the Documents folder.

Within the body tags, a single line prepares the My Documents gadget to respond when you click its icon. When you click the icon in the Windows Sidebar, the OnClick command will direct the script to the LaunchDocuments function, which uses the WshShell.Run command and the CLSID to open the Documents folder.

It’s easy to create the icon for your gadget — all you have to do is create or capture an image in your favorite graphics editor and save it as a PNG file in the MyDocuments.gadget folder. The image file must have the same name and be the same size as specified in the Gadget.xml and MyDocuments.html files. In the case of the My Documents gadget, the name would be MyDocuments.png, and the image would be 100 pixels high by 100 pixels wide. If you plan to create your own image file, the image must be a minimum of 60 pixels high and anywhere from 25 pixels to 130 pixels wide in order to fit within the maximum width of the Windows Sidebar.

If creating the files for the My Documents gadget doesn’t appeal to you, you can download all three files here.

The My Network gadget

In Figure D, you can see the Gadget.xml file you’ll need to create for the My Network gadget.

Figure D

When you create the Gadget.xml files in Notepad, it is critical that you save them using the UTF-8 encoding.

When you finish typing the file, save it to the MyNetwork.gadget folder as an XML file with UTF-8 encoding.

The HTML file you’ll need to create for the My Network gadget is shown in Figure E.

Figure E

In the MyNetwork.html file, the WshShell.Run command uses the appropriate CLSID to open the Network folder.

When you finish typing, save the file to the MyNetwork.gadget folder as MyNetwork.html. I’ve used a combination of Microsoft JScript and Windows Script Host to open the Network folder — the WshShell.Run command and the CLSID for the Network folder take care of the task.

The image file for the My Network gadget must have the same name and be the same size as specified in the Gadget.xml and MyNetwork.html files. Also, you must save the image file as a PNG file in the MyNetwork.gadget folder. If you’d prefer not to create the files for the My Network gadget, download all three files here.

The Internet Explorer gadget

You will create the Gadget.xml file for the Internet Explorer gadget in Notepad (Figure F).

Figure F

The Gadget.xml file for the Internet Explorer gadget is almost identical to the other manifest files.

Then, save it to the InternetExplorer.gadget folder as an XML file with UTF-8 encoding. The HTML file contains basic tags and the script code that essentially launches Internet Explorer. You may create the InternetExplorer.html file in Notepad (Figure G).

Figure G

In the InternetExplorer.html file, the WshShell.Run command uses an URL to launch the browser.

When you finish typing, save the file to the InternetExplorer.gadget folder.

Like the other gadgets, the Internet Explorer gadget uses the WshShell.Run command as the launcher; however, rather than calling a CLSID, this gadget simply specifies an URL. For this example I’ve used www.msn.com, but you can replace the text with the address of your favorite Web site.

It’s easy to create the icon for your Internet Explorer gadget — simply create or capture an image in your favorite graphics editor and save it as a PNG file in the InternetExplorer.gadget folder. I captured an image of the regular Internet Explorer icon, cropped it to 100 pixels high by 100 pixels wide, and saved it as InternetExplorer.png.

If you don’t want to create the files for the Internet Explorer gadget yourself, you can get all three files here.

Installing the gadgets

Once you create your gadgets, they will appear in the Gadget Gallery (Figure H). Installing them is as easy as double clicking the icon in the Gadget Gallery. When the gadget appears on the Windows Sidebar, you can close the Gadget Gallery and then launch each gadget whenever you wish.

Figure H

Installing and using the new gadgets from the Windows Sidebar is easy.

What your take?

Do you think that putting desktop icons on the Windows Sidebar is a good idea? Why or why not? Will you create these gadgets and put them on the Windows Sidebar? Do you have an idea for other gadgets that would you like me to describe how to create in future Vista articles?

Get Vista tips in your mailbox!

Delivered each Friday, TechRepublic’s Windows Vista Report newsletter features tips, news, and scuttlebutt on Vista development, as well as a look at new features in the latest version of the Windows OS. Automatically sign up today!