Create a Vista Gadget Using Visual Studio IDE (updated)

• Download RunVistaGadget21Source.zip - 127.54 KB  
• Download RunVistaGadgetInstallationPackage.zip - 207.89 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 state, but now, I want to show you some tools that can help you to develop Vista gadgets using only Visual Studio 2008 IDE. These tools include Visual Studio template for creating Vista gadgets and Visual Studio add-in for creating a .gadget file from a project and run a gadget installation. 

Background 

  By now, if we want to create a Vista gadget, we should following next steps:

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

  All this action is executed from the Windows Explorer. If you will create a gadget for a company which inner policy will require sign all assemblies and executed files that will have created in it you also will be engaged into using cabarc.exe and signtool.exe for signing your gadget. It’s a really boring task to create a signed gadget without any automation.

  So, how we can automate all these steps using Visual Studio IDE?

 The answer can be the add-in that was created for helping in development Vista gadget. With this add-in you can easily build signed and unsigned gadget using only one click on menu item or toolbar button or using shortcuts(Ctrl+R, Ctrl + R this combination can be changed). So, how to install it? For this issue I've prepared some installation pack. Below I describe how to install all these stuff.  

Installation

  In the installation pack I have prepared:

1. AddinDeployment.vsi  - Visual Studio add-in installation file.
2. CSharpHelloVistaGadgetTemplateDeployment.vsi  and VBHelloVistaGadgetTemplateDeployment.vsi files – Sample Visual Studio gadget  templates for C# and VB.NET. Really they don’t depend on which language you will install a template, because a gadget requires only javascript and vbscript as programming languages. So, here only one difference – for which language you will use template, no more.  
3. cabarc.exe and signtool.exe – Additional program that will require add-in for running. You can set path for existed applications if they have already installed on your computer. Later I will explain how. So, if you have already installed these applications you can delete each one from your computer.  

  So, when you are already have installed add-in and some templates you should define some important options for your future gadget development. For this issue you should open add-in settings window and define some parameters. 

  Choose from menu Gadget -> Open gadget properties window or choose corresponding appropriate button from the toolbar.  

 Then you should see the next window. 

In this window you should define:

1. Output Vista Gadget Path – a path where add-in will save your gadget after it have been created.
2. Cabarc.exe path – cabarc.exe is an application which will create your gadget file. So, it’s extremely important to define here the right path to this application. Official page where you can find this utility is: http://support.microsoft.com/kb/310618. Moreover I already prepared this utility for you in this installation pack. So, you can choose a path where you will place an installation for this article.
3. Allowed file extensions - this is a collection of file extensions that define types of files which you wish to place into your gadget.
4. If you are going to sign your gadget you should:

3.1      Mark checkbox “Is will build signed gadget”

3.2      Define core signtool.exe utility path for this action. You can find more about this utility here - http://msdn.microsoft.com/en-us/library/8s9b9yaz.aspx

3.3      If you have ready to use .pfx file (personal information exchange file) define path to it.

3.4      If you haven’t .pfx file but you have .pvk and one from .spc or .cer files you can make new .pfx file using pvk2pfk.exe utility. You can find more about this utility here - http://msdn.microsoft.com/en-us/library/aa906332.aspx

3.5       Define also password for your .pfx file.

 After you have completed entering all needed information click button "Save" for saving these options.

 Also I want to noticed that extremly important here is that your project was placed on the same logical  disk as cabarc.exe  and signtool.exe. This is restriction for Microsoft console applications that was mentioned above. So, you should be careful and place these utilities strictly on the same logical disk as for the project that you are working on. 

 Congratulations! Now you are ready to use addin from your Visual Studio 2008 IDE. 

Using Add-In And Templates

 When you already complete installation process you are ready for creating your own gadget with Visual Studio IDE. In this case you should open menu item: File -> Open -> Web site.
After this you can find new open window where you can choose HelloWorldVistaGadget template. 

When you click on this template Visual Studio is opened new web site which structure would resemble real gadget project structure as you can see on the picture.

 Here you can find only one foreign element - it's a web.config file. But if you are going to build gadget using RunVistaGadgetAddIn it is not an obstacle, because add-in will not include this file to output .gadget file.

 Here I will not tell you about how to create a gadget. You can find more sources with good explanation of this process rather here on CodeProject or read grateful book about this issue.

 I'm just noticed that after creating your beutiful gadget in Visual Studio you can just click on the button "Run gadget" or use shortcut Ctrl+R, Ctrl+R and you can see your gadget in the beforehand place. Moreover add-in will run gadget installation process and you should only click on "Install" button in the gadget installation dialog (you can see it on the picture) for observing your gadget on sidebar.

 By now after clicking on "Run gadget" button you are always should see this window that suggest you to install gadget on the Windows sidebar. But I'm discovered some problem with this scenario when gadget have used settings option in its code. You can have had a problem with installing gadget on sidebar in this case after first installation. Really it's not a problem, just you should twice repeate installation process. I'm personally trying to find out the reason for such behavior, but could only reveal that the Windows Sidebar has held some gadget files opened and hadn't clear resources after closing gadget on the sidebar. So, if you find out how to resolve this issue let me know, please!

 If you have felt that this add-in not satisfied your needs you can switch off this add-in. You should choose menu item Tools -> Add-in manager. And in the appeared window remove a tick from this add-in. In this case this add-in will not disturb you anymore. 

Development

In this topic I'm trying to explain how this add-in works. How to work the main part of add-in. How you can create you own template. And at the end of this topic I discribe you how you can prepare installation for Visual Studio add-in and templates.

The main algorithm is not a very intricate. I can show it using only some piece of code from add-in sources:

if (isHaveLoadedProject())
{
         SaveAllChangedFiles();
         CreateGadget();
         if (isBuildSignGadget())
         {
                  SignGadget();
         }
                        
         RunGadget();
} 

 First of all I want to remind that all action in an add-in is commands. Exec method is called when some command was invoked. Exec method is common handler for all commands. So, mentioned above piece of code will be executed from Exec method too, but only for particular command (in this case RunGadget command). For running gadget we should asking one question - is already some project loaded in IDE (it would be better if it will have some gadget project as well). Then we save all changed files in this project, afterwards add-in will create gadget file. Then it check if it should sign gadget. If it should than it will sign gadget. And at the end add-in trying to run gadget installation.

 On my opinion the most interesting methods here are CreateGadget() and SignGadget() as well. Both of these functions are used by external program for executing theirself. Here I apply, may be not a very optimal, but still simple way for executing external program. Because calling a external program typicaly used not only for this two methods in this add-in I create simple base class where I have implemented typical behavior for all classes that were used calling external program. Here you can see class diagram:

 As you can see only in this add-in had been used six different classes for calling external program. No, I'm really don't take a pride in this fact. But why I should reinvent something if it already existed in our system? So, for me it was easy way when I've used already existed application than create those one by myself. The structure of this hierarchy include base abstract class ApplicationRunner. When you inherit some class from this one you should override two main method:GetAppArgruments() and GetOutputAndRunApplication(). First one GetAppArguments method should return string with arguments as it would called in console application (for example for executing cmd.exe cd /? method mentioned above method should return only cd /? without *.exe file). The second one GetOutputAndRunApplication method will call base class with appropriate arguments.

 For example, lets consider next example. For this example we want to open the sidebar settings window. This is the window where we can choose appropriate Vista gadget and install it on the sidebar. You can see this window on the picture below.  

 For this purpose we can call cmd command like: "C:\Program Files\Windows Sidebar\sidebar.exe   /showgadgets". More about sidebar command looking for on this post. From C# code we can use mentioned above ApplicationRunner base class for this purpose. So, we need create new class that should inherits from ApplicationRunner class and override two methods. In this addin I've created class SidebarSettingsRunner. The code for this class you can see below:

class SidebarControlConsoleRunner: ApplicationRunner
{
        public SidebarControlConsoleRunner(DTE2 applicationObject)
            : base(applicationObject, false){ }

        public SidebarControlConsoleRunner(DTE2 applicationObject, bool isRunAsWinApp)
            : base(applicationObject, isRunAsWinApp){ }

        public override string GetAppArguments()
        {
            String GadgetArgs = "  /showgadgets";
            return GadgetArgs;
        }

        public override string GetOutputAndRunApplication()
        {

           
            base.CalledApplicationPath = "c:\\" +
Environment.SpecialFolder.ProgramFiles + Path.DirectorySeparatorChar +
"Windows Sidebar\\sidebar.exe";
           
            return base.GetOutputAndRunApplication();
        }
    
 } 

 As you can see here for GetAppArguments method we are define that argument would be " /cpl". For  GetOutputAndRunApplication method we are define application path for sidebar.exe file and return output string after the application have been run. Furthermore we can use this class like in this code snippet:

SidebarControlConsoleRunner sccr = new SidebarControlConsoleRunner(applicationObject, true);
String AppOutput = sccr.GetOutputAndRunApplication(); 

 where applicationObject - is a global for this add-in object which you can define on OnConnection event handler for current add-in instance.

 This feuture can be called from tollbar button or menu item "Open Vista Sidebar Control Console". So, in addition I want to explaine you how we can add such possibility for our add in.

 For this issue we should add some code for OnStartupComplete add in instance's event handler. First of all we should undertand that in any add-in we should programm any action with command pattern. And for any action we should define particular Command object instance. Class Command describe some action for add in. In this case we want to define action for open Vista Sidebar Control Console. So, we 've created new instance for inner Visual Studio Command class and then define for it some properties in its building method.

 Then we've defined command collections which we are want to use. In this case we define commandBars and menuCommandBar collections. Here commandBar is a collection of CommandBar objects that represent the command bars in the container application. CommandBar objects represent obeject that can help us to get specified controls collection for Visual Studio IDE. In this case GadgetTemporaryCommandBarPopup control collection which will specify new menu group "Gadget" in standard Visual Studio IDE menu. With defined above command for our action (OpenVistaSidebarControlConsoleCommand) we can add new menu item to  "Gadget" group menu. Below you can see entire code snippet for adding new toolbar, tollbar's button, menu group and menu item using c# code.

 public void OnStartupComplete(ref Array custom)
{
        Command OpenVistaSidebarControlConsoleCommand = null;
        CommandBar menuCommandBar;
        CommandBar GadgetTemporaryToolbar;
        CommandBars commandBars;
        CommandBarButton OpenVistaSidebarControlConsoleCommandBarButton;
        CommandBarControl GadgetToolsCommandBarControl;
        CommandBarPopup GadgetTemporaryCommandBarPopup;       
        

        try
        {
           
             OpenVistaSidebarControlConsoleCommand =
applicationObject.Commands.Item(addInInstance.ProgID + "." +
OPEN_VISTA_SIDEBAR_CONTROL_CONSOLE_COMMAND_NAME, 3);
        }
        catch
        {

         }
         object[] contextGUIDS3 = new object[] { };

         // Add the command if it does not exist
         if (OpenVistaSidebarControlConsoleCommand == null)
         {
               
             OpenVistaSidebarControlConsoleCommand =
applicationObject.Commands.AddNamedCommand(addInInstance,
OPEN_VISTA_SIDEBAR_CONTROL_CONSOLE_COMMAND_NAME, "Open Vista Sidebar
Control Console", "Open Vista Sidebar Control Console", true, 548, ref
contextGUIDS, (int)vsCommandStatus.vsCommandStatusSupported +
(int)vsCommandStatus.vsCommandStatusEnabled);
          }
          commandBars = (CommandBars)applicationObject.CommandBars;
          menuCommandBar = commandBars["MenuBar"];
          

          // Add a new toolbar with a button on it
         
GadgetTemporaryToolbar =
commandBars.Add("VistaGadgetDevelopmentToolbar",
MsoBarPosition.msoBarTop, System.Type.Missing, true);

          // Change the button style, which must be done casting the control to a button
  
          OpenVistaSidebarControlConsoleCommandBarButton =
(CommandBarButton)OpenVistaSidebarControlConsoleCommand.AddControl(GadgetTemporaryToolbar,
GadgetTemporaryToolbar.Controls.Count + 1);
          OpenVistaSidebarControlConsoleCommandBarButton.Style = MsoButtonStyle.msoButtonIcon;

          // Add a new command bar popup with a button on it
  
          GadgetTemporaryCommandBarPopup =
(CommandBarPopup)menuCommandBar.Controls.Add(MsoControlType.msoControlPopup,
System.Type.Missing, System.Type.Missing, position, true);
          GadgetTemporaryCommandBarPopup.CommandBar.Name = "VistaGadgetDevelopmentCommandBarPopup";
          GadgetTemporaryCommandBarPopup.Caption = "Gadget";         
  
                          
          OpenVistaSidebarControlConsoleCommand.AddControl(GadgetTemporaryCommandBarPopup.CommandBar,
GadgetTemporaryCommandBarPopup.Controls.Count + 1);
        
        
 }

 Some cool features of Visual Studio IDE can be used for saving time for developers. On of them is creating and using Visual Studio templates for projects and items. You can prepare your own template for some project and open entire project in a few minutes without writing any code string. The real benefit for template is simplisity for creating your own instance one. The most easy way is accepted for Team Edition owners. These guys should only prepare template project and choose menu item File -> Export Template... The rest can create template using methods that was described in the good article by Ron Petrusha "Creating Visual Studio Project Templates".

 Another intersting subject in add-in development is a deployment. You can create and share items for using in Visual Studio. There are also exist the item for add-in deployment among other. With this item you can easier deliver add-in to other developers. For using it with Visual Studio you can package the item in a .vsi file, which can be installed by using the Visual Studio Content Installer. The Visual Studio Content Installer automatically copies the add-in items to the correct directories on a developer's computer so that the items appear in the correct dialog boxes in Visual Studio. 

 For using the Visual Studio Content Installer to install your community components, you must create a .vscontent file for the component. After you've created the .vscontent file, you should compress the component files and the .vscontent file into a single  .zip file and change the file name extension from .zip to .vsi.  More about creating package for add-in and creating .vscontent file you can find in this article.

Also I want to denote a beautiful book about creating Visual Studio add-in which has always been a source of inspiration for me when I thinking about update for this article. There is Keyvan Nayyery "Professional Visual Studio Extensibility" book. I would be very much obliged to him for such interesting and useful for me book.

Conclusion

In this article, I show you how to create a Visual Studio Vista Gadget project template and use it from the Visual Studio IDE. Also, I show 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 files that you need for creating the gadget file just by choosing the required project.
• You can use your favorite source control program for managing versions and 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 leaving Visual Studio IDE.

History

Here is first version of this article - RunVistaGadget.aspx.   This version can be useful if you can't place your project and Microsoft's utilities on the same logical disk. But old version doesn't support signing and has pour interface for running. In any case it can be helpful for somebody.