A Heterodox Visual Studio Gadget Template

• Download application - 161.3 KB

Introduction

When I began to developer Sidebar Gadget for Vista, like other developers I discovered with surprise that Visual Studio 2008 does not have support to develop this small program type.

I looked up on the Internet and in a pair of books to see the actual state-of-art of the individual solution and found different ways to resolve with this problem. The functional ways that I found are as listed below:

• Work direct in the Gadget directory ($LocalApplicationData\Microsoft\Windows Sidebar\Gadgets) [1]

  

  Figure 1: Click + to see your installer gadgets

  This is the most rudimentary method, but it is also the most efficient and quick method to begin to develop with Visual Studio Gadget. You don't need to do anything, you must only place your project in the gadget directory within a sub-directory named: “yourproject.gadget” and you can edit your files and test your gadget by running the installer gadget utility (click in the button * in menu sidebar as you see in Figure 1.

  The method is ideal to learn (reference [1] from an excellent learning book). It is problematic to a standard developer who potentially develops a great number of gadgets. Another problem is an organizational problem: you cannot concentrate on the VS project in a unique repository. Naturally you do not have help to know about the Gadget project structure and you should use a normal WEB project template to create your Gadget.

• Create a Gadget Installer add-in in VS studio to get your project files and directory and create an installer. Then run the installer and see the result. There is a very good add-in that does this, developed for Alexey Prosyankin on The Code Project [2]. Prosyankin has also developed a VS Gadget template to help the developer with the gadget structure.

This method has an advantage that you can have your gadget projects in your normal VS project directory, and with the add-in you can run the gadget in the sidebar. An important advantage of the Prosyankin system is that the gadget can be automatically signed. Unfortunately, this system has problems with the use of Microsoft Cabinet Tool and does not work in certain circumstances.

With that background, I thought of developing a proper tool. I want a template that does the following:

Using Visual Studio 2008:

• I can use to develop the application in my favourite project directory.
• I can test the Gadget in the sidebar without use of external tool, or external utility.
• I have Intellisense Support for Gadget API and JavaScript.
• I can extend per project; the possibility to sign-in the Gadget or do other operations based in the singular project demands.
• I need for a moment only support for classical JS & CSS & HTML Sidebar Gadget.

Impossible, not at all, only we need to think a little different on the concept of what a Template is and how a VISTA Gadget works.

Background

A Gadget it is not a “normal” Windows program, because it does not have “code”. It is also not an ASP.NET program or a program that needs a Web Server to run. When you install it, you don't generate any *.exe or any *.dll. Basically a Gadget is a client part of a web page, and then you only need the Internet Explorer engine to run it. (You only test on Internet Explorer because it runs in VISTA desktop).

The template that I saw was developed as WEB Templates and then customized with the necessary files that need the Gadget to be developed. The Build action in this template (if you work only with CSS, JavaScript and HTML) does nothing.

Why do I need to use a WEB Template? And why don't I use the run action?

Here we use a normal Console Application template, create the Gadget files, install the additional files to support Intellisense for Gadget API and JavaScript and create a small C# application that makes the installation and runs the Gadget in:

$LocalApplicationData\Microsoft\Windows Sidebar\Gadgets

When we run the project, the resident C# application get the necessary files and copies them in the Gadget directory, calls the gadget installer utility and opens it to install the gadget. Easy and clean!

Also if you want a complementary action, you can change the console application to adjust it as per your requirements.

The following template is a simple template to work with a Gadget (CSS HTML JS) developed in only one language. You can modify this template to adapt it as per your requirements.

Now we describe how we implement a simple Template with this principle. If you are the only one that will use the template, you can skip the following topic.

Template Anatomy

The template is based in a Windows Console Application Template.

You can see the structure in the following figure:

• Template Run and Install Support

  You can see in the directory launcher a simple Launcher.cs file that has the utility that runs when you select “run” in VSS Menu: The code is simple and only takes the application files and copies them to the Gadget System directory. The files and directory that are not the right ones for the gadget are filtered and not copied. (Examples: .bin, .obj, .launcher directories). See code 1 for more detail.

• Template for a Hello Word Gadget

  As you can see, the template has all files and logic, which you need to create a simple Gadget with a setting form and two fly out forms. The user only needs to create the logic for his/her specific gadget.

• Template and Intellisense Support

  I have not found Microsoft Intellisense support for Gadget API, but I found an EXCELLENT individual initiative in this direction. Jonas Follesoe [3] has developed an excellent Intellisense support for the System.Gadget API. Thanks Jonas!

  To get this support, we only need to include two *.js files in our template:

  • MicrosoftAjax.debug.js
  • Sidebar.IntelliSense.js

  Then we need only register the Intellisense in our *.js files, as you can see in the code 2 segment.

  Both *.js files are not needed when you deploy the project, and are not copied for the install utility. They are only used in design time when we need the Intellisense Support.

Code 1: Launcher.cs (fragment)

[STAThread]
static void Main()
{
//Get the GadgetName
XmlDocument doc = new XmlDocument();
doc.Load("gadget.xml");
var trime = new[]{' ','\n','\r'};
string gadgetName = doc.SelectSingleNode("gadget/name").InnerText.Trim(trime);
string userGadgetDir = Environment.GetFolderPath
			(Environment.SpecialFolder.LocalApplicationData) +
@"\Microsoft\Windows Sidebar\Gadgets\";
string testGadGetDir = userGadgetDir + gadgetName + ".gadget";

//See if in gadget directory the same directory name exists 
if (Directory.Exists(testGadGetDir))

{ //delete if exists
   Directory.Delete(testGadGetDir, true);
}

//create new
Directory.CreateDirectory(testGadGetDir);

//Get the application develop directory
string dirApp = Environment.CurrentDirectory;
int index = dirApp.ToLower().IndexOf(@"\bin\debug");
dirApp = dirApp.Remove(index);

//copy all application file recursively
copyDirectory(dirApp, testGadGetDir);

//Open the installation of gadget sidebar
string sidebar = Environment.GetFolderPath(Environment.SpecialFolder.ProgramFiles) +
@"\Windows SideBar\sidebar.exe";
var process = System.Diagnostics.Process.Start(sidebar, " /showgadgets");
process.WaitForExit(1000);

You can see more detail in the code companion.

Code 2: Register in Intellisense the System.Gadget API

//-------------------------------------------------------------

// Intellisense Support for Gadget Development
// MicrosoftAjax.debug.js is property of Microsoft Corporation
// Sidebar.Intellisense.js was developed for Jonas Folles
// http://jonas.follesoe.no/JavaScriptIntelliSenseForTheVistaSidebarObjectModel.aspx
//-------------------------------------------------------------
///<reference path="MicrosoftAjax.debug.js" />
///<reference path="Sidebar.IntelliSense.js" />
//-------------------------------------------------------------

And that is all. In the following section, we talk about how we can use the Template.

Using the Code

Step 1

Please download the template and place the zip file in your My Documents\Visual Studio 2008\Templates\ProjectTemplates. If you use another directory for your templates, please change the path according. Open your VS and create a new project and select JSGadGetApplication Template.

Step 2

Build it and Run. The Gadget installer is open and you can see the Test template in your Gadgets Collection (see figure). Double click over the Gadget icon to install it.

The Gadget is installed.

Step 3

Explore the Hello World Gadget.

Upper right moves the mouse directly out of the gadget border. The configuration bar will be visible. Click over the tool icon. The Setting screen is open. Close it.

Click with the right button over the Gadget. Select undocking in the menu. You can see the undocking screen. Repeat over the undocked screen and select docking. The gadget returns to the sidebar. (sorry for the messages in German, but my VISTA only speaks German.

Click the “?” button, a fly out form is open. Close it and click the “.” Button. A fly out About Form is opened.

As you see, the template gives you a complete prototype for a Gadget and you have a good basis to begin your own development.

Design Considerations

• It is a good idea to use the browser (Internet Explorer, because the gadget only works in the sidebar over the Internet Explorer engine) to develop the HTML and test the JS of your form.
• Use the VS run command when you want to see how your gadget in the sidebar looks.
• You can use Attach to process if you want to debug the JavaScript code step by step.
• Do not forget to activate script debugger in your Internet Explorer if you want to debug.

Deployment

In a moment, I thought of adding a deployment facility to the template, but the process of creating a template.gadget deploy file it very easy and not much repetitive. To create the install, simply follow the following simple steps:

• With Windows Explorer, go to $LocalApplicationData\Microsoft\Windows Sidebar\Gadgets\Yourgadget.gadget.
• With 7ZIP, winzip or the native windows ZIP or another utility, create the zip file with the content of the directory and subdirectories.
• Rename the created yourgadget.zip file to yourgadget.gadget.

Then you can delete the directory if you don’t want to conserve the created gadget (of course the original files are in your Project directory). In the following figure, you can see an example of creating the gadget zip file with 7 ZIP.

That is all!

Points of Interest

The creation of a Gadget with the possibility of run directs it in the sidebar give of a lot of commodity and velocity to develop our project. The small heterodox idea to use the debug and run command to install the gadget gives you the opportunity to have in a single template all the necessary tools to develop the Gadget.

This is a simple template. It is possible to enhance it to add more possibilities.

• Support for different languages
• Support for WPF/e
• Support for strong signature

History

• First Version 07.03.2009

Bibliography

[1] Professional Windows Vista® Gadgets Programming. Wei-Meng Lee. Pag 19-56, Wrok. Wiley Publishing, Inc. 2007.

[2] Create a Vista Gadget Using Visual Studio IDE (updated). Alexey Prosyankin. The Code Project. 2 Dec 2008.

[3] JavaScript IntelliSense for the Vista Sidebar Object Model. Jonas Follosoe.