Create a Vista Gadget Using Visual Studio IDE

• Download setup - 585 KB
• Download sample - 12.7 KB

Introduction

The absence of tools in Visual Studio that can help developers to create Vista gadgets is strange and disappointing, in my opinion. Maybe, it's a temporary situation, but for now, I want to show you some tools that can help develop Vista gadgets using Visual Studio 2005 or Visual Studio 2008. These tools include the Visual Studio template for creating Vista gadgets and a Visual Studio add-in for creating a .gadget file from a project and to run a gadget installation.

Background

For now, if we want to create a Vista gadget, we should follow these steps:

1. Create all the needed folders and important files in some folder.
2. Create a zip archive from all the folders and files that should be included in the gadget.
3. Change the extension from .zip to .gadget for the archived file.
4. Run this file by double clicking for starting the process of gadget installation.

All this process is required if we want to share our gadget with others.

We don't have any tools now that can help us develop Vista gadgets using Visual Studio. In this article, I suggest you use a Visual Studio template for step 1 and automate steps 2-4 using a Visual Studio add-in. I have prepared both the Visual Studio template and the Visual Studio add-in for you, and will try to explain how to use them.

Using the code

You can use the RunVistaGadgetSetupAddIn.zip archive where you can find a setup file for installing all the needed templates and the add-in, or try to install by hand. After installation with the setup file, try to open the RunVistaGadget project and run it. It is available in the path that you set during the installation process as the path for the application installation. When you run the project a new Visual Studio window opens where you can select the project with your gadget or create a new one using the Vista Gadget template. Then, try to use the add-in itself.

Although I have already prepared a ready to use template for creating a Vista Gadget project, it's not a problem to create and use your own template. But, before you create your own template, let me show you how to use an already prepared template.

I prepared some templates for you in the source code archive HelloWorldVistaGadgetSample.zip. It includes the HelloWorldVistaGadget.zip file as another archive. If you want to see such a template in the Visual Studio project list, then just move the file to this path:

C:\Users\[User Name]\Documents\Visual Studio 2008\
     Templates\ProjectTemplates\Visual Web Developer\CSharp

When you use this template for creating a Vista gadget project, you will see this project structure:

You can prepare such a template by yourself; just create some web project (doesn't matter which language you use in this case - VB.NET or C#) and delete all the files that Visual Studio prepares for the website, except web.config. The file web.config should be reatined because we want to be sure that Visual Studio defines this project as a web project when we open it the next time. We exclude this file later when we prepare our gadget with the add-in. Then, prepare in this project all the folders and files that should be included in your gadget (you must include gadget.xml and some HTML page, in any case). Then, using File >> Export Template ... save your template. When you try to create a new website, you can see a new VS template in the "My templates" region as in the image below:

Now you should develop your own Vista Gadget. I wouldn't describe how to do this in this article. You can read about creating Vista gadgets in this book: Creating Vista Gadgets: Using HTML, CSS, and JavaScript with Examples in RSS, AJAX, ActiveX (COM), and Silverlight (Paperback).

When you create your gadget, you would want to run and feel it. For changing the settings for the add-in, you should go to the folder where Visual Studio keeps all its add-ins, where you can find four files: RunVistaGadget.AddIn, RunVistaGadget.dll, Settings.xml, and Ionic.Utils.Zip.dll (see the image below).

Here is the path where you can find all these files:

C:\Users\[User Name]\Documents\Visual Studio 2008\Addins

The files RunVistaGadget.AddIn and RunVistaGadget.dll should be used for running this add-in.

In Settings.xml, you can define some options that can be used for building a gadget. See this file for an example:

<?xml version="1.0" encoding="utf-8" ?>
<Settings>
    <GadgetFileName>YourGadgetName</GadgetFileName>
    <OutputGadgetDirectory>D:\</OutputGadgetDirectory>
    <ForbiddenFilesRegExpr>^[Ww]eb\.config|[a-zA-Z0-9_ ]+\.gadget$</ForbiddenFilesRegExpr>
</Settings>

As you can see here, we can define a name for our gadget in the node "GadgetFileName". In the "OutputGadgetDirectory" node, you can define where the add-in would create the output gadget and handle intermediate files on your disk. In the "ForbiddenFilesRegExpr" node, you can set a Regular Expression that would prevent adding some other types of files to the gadget file. I have already added for you the Regular Expression that prevents adding a web.config file to your gadget from the gadget project and any other gadget files that can be found in the gadget root folder.

Further, we can find that the gadget uses the Ionic.Utils.Zip.dll library. This library help the add-in in making the zip archive. More detailed information about this library can be found here.

Open your gadget project and try to use the "RunVistaGadget" menu item. If the installation process finishes well, you can see the common Vista installation window for the gadget. Use it for installing and evaluating your gadget.

I won't describe here how the add-in works because all that it does is mentioned above in points 2-4 in the Background section. If you are very curious, then you can find the source files in the path where you install the application.

If you are interested in creating Visual Studio add-ins, or you want to extend your skills and maybe improve this add-in, I advice reading this book: Working With Microsoft Visual Studio 2005.

In this article, I showed you how to create a Visual Studio Vista Gadget project template and use it from the Visual Studio IDE. Also, I showed you how to install and use the RunVistaGadget Visual Studio add-in for running a Vista gadget from Visual Studio IDE. Why is it comfortable to use the Visual Studio IDE for creating a Vista gadget?

• You can open a Vista gadget project with all the files that you need for creating the gadget file just by choosing the required project.
• You can use your favourite source control program for managing the versions and the history of a gadget's files.
• You can use such advantages of the Visual Studio IDE as highlighting syntax, autocomplete expression for JavaScript code, and so on.
• You can automate the process for running a new version of a gadget without exiting from the Visual Studio IDE.