Complete Guide to Making Vista Sidebar Gadgets

[Marik]

Recently I wanted to make a Vista Sidebar Gadget, so I Googled for some info and I came up with a few, so I thought of writing an article.

What Is a Sidebar Gadget?

A Sidebar gadget can be a powerful and handy little tool. So you might be surprised by how easy they are to create. In fact, if you know HTML, CSS, and JavaScript (and I suspect many of you already do), you’re well on your way.

In its simplest form, a gadget is made up of nothing more than an HTML file and an XML definition file. Of course, most gadgets include other files, such as image files (PNG and JPG), style sheets (CSS), and scripting (JavaScript and/or VBScript source files). All of the content is stored in a ZIP file that is renamed with a .gadget extension. If you want, you can grab a gadget online, rename it with a .zip extension, and easily explore its contents. I recommend this as a good way to peek into other gadgets and see what they’re made up of.

First of all they are some key issues to consider before you start designing,

♦ 1. What Type of widget/Gadget you want (In our case a vista sidebar gadget)?

♦ 2. What function do you want the gadget to perform?

♦ 3. How do you want the gadget to look?

♦ 4. (Optional) What purpose do you want to use your gadget?

Ok. Now that we have decided let’s get to know the components,

Please note that the gadget i have used to demonstrate various aspects is called Hermes after the Greek messenger of gods. You can get it from windows live gallery.

Basic Things First

A. List of files

• Gadget.htm – contains the HTML mark up for the gadget displayed in the sidebar.
  
• Settings.htm – contains the HTML mark up for the settings view.
  
• Gadget.xml – the manifest file.
  
• Flyout.htm - flys out of the gadget wen u click on an item in the gadget.
  
• Note: You can put the JS and CSS inline in the HTML files but I prefer to have separate files referenced from the HTML.
  

It should be somewhat similar to this:

Files Explained

Gadget.htm

This is the file where you define the workspace and div tags of your gadget you write this similar to coding html web pages, simple as that. In this you will also have to use JavaScript and CSS you can have them inline in the html page or can call them from an external file in the gadget directory, but saying that, I recommend calling them from external files within the gadget directory. Use the CSS to style your gadget’s look.

Settings.htm

This is the html layout page for your gadget settings. This also should have a JavaScript file (optional but preferred) and also a definitely a CSS. This setting page will pop-up in the vista sidebar whenever you click the wrench icon which represents settings. Use a CSS file to style the way your gadget’s settings page looks.

Position of the Settings wrench

Sample Setting Page

Gadget.xml

The XML definition file, or manifest, is the glue that holds a gadget together. I am not sure about calling this file a manifest since it does not contain links to all of the files in the gadget; it only contains links to the main HTML file (which has links to the other files), a few icon files, and the gadget author’s Web site.

Attributes of Gadget.xml

• name: Title of your gadget.
  
• version: Version number of your gadget.
  
• author: Your name or your company’s name.
  
• info url: Web site address.
  
• info text: Friendly name for your Web site. logo src: Name of company’s logo image file.
  
• copyright: Copyright notice.
  
• description: Description of the gadget.
  
• icon src: Name of icon image file for the gadget.
  
• base src: Name of gadget’s main HTML file. Most of the elements in the
  

definition file are used for displaying the gadget in the gallery. The one truly functional element is the src attribute of the base element—this points to the HTML file that will kickstart the gadget. I make it a practice to name this file gadget.html, but any valid filename will do.

Flyout.htm

This is the file that contains the actions and events which are triggered when the user clicks the gadget link or items. Its called a flyout since it pops out of the sidebar. Although this is optional, most sidebars need this to have added/extended functionality.

JavaScript

You will be needing a lot of JavaScript coding skills to code the widgets. But don’t worry Microsoft’s developers have given a full documentation on how to build your own gadgets. They have included several JavaScript methods you will be needing.

That’s all, now you can get started, but before that Here are some Sample Gadgets and How to make them. Best option would be to download a gadget and unzip it using any archiving utility but I recommend IZArc. After unzipping view and see other coders have coded it. When you develop a gadget based on another author’s gadget, always give the Credit to the proper author. Everyone deserves the credit for their hard work.

More Tutorials

If you are considering to dive into the world of gadget developing, Here are some sites giving tutorials to make different gadgets. Also please read the Microsoft’s guide to gadget developing.

• Windows Live Gadgets Gallery
  
• Live Gadgets Gallery Developer Center
  
• Flicker Sideshow Gadget Tutorial
  
• HDD Free/Used Space Display Gadget Tutorial
  
• Other Gadget Tutorials
  
• Dilbert Daily Sidebar Gadget
  

Source: DotNetWizzard