Create a Vista Gadget Using Visual Studio IDE (updated)

• Download RunVistaGadget21Source - 125.88 KB
• Download RunVistaGadgetInstallationPackage - 211.54 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 Windows Explorer. If you will create gadget for company which 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 onle 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 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 template, because 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 required AddIn for running. You can set path for existed applications if they have already installed on your computer. Later I 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 addin and some templates you should define some important options for your future gadget development. For this issue you should open addin settings window and define some parameters. 

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

 Then you should see the next window. 

In this window you should define:

1. Output Vista Gadget Path – path where addin would save your gadget after it have been created.
2. Cabarc.exe path – cabarc.exe is an application which create gadget file. So, it’s extremely important define here 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 path where you placed installation for this article.
3. 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.

 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 addin wouldn't include this file to output .gadget file.

 Here I wouldn't tell you about how to create 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 you 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 Addin 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 observe you gadget on sidebar.

 By now after clicking on "Run gadget" button you are always should see this window that suggest you install gadget on Windows sidebar. But I'm descovered 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 shoul twice repeate installation process. I'm personally trying to find out the reason for such behavior, but only reveal that 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 swich off this add-in. You should choose menu item Tools -> Add-in manager. And in 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 you 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 addin are commands. Exec method is called when some command is invoked. Exec method is common handler for all commands. So, mentioned above piece of code executed from Exec method too, but only for particular command (in this case RunGadget command). For running gadget we should asking on question - is already some project loaded in IDE (it would be better if it will be some gadget project as well). Then we save all changed files in this project, afterwards addin create gadget file. Then it check if we should sign gadget. If we should we will sign gadget. And at the end addin trying to run gadget installation.

 On my opinion the most interesting methods here are CreateGadget() and SignGadget() as well. Both this function 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 external program typical 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 addin 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 is calling base class with appropriate arguments.

 For example, lets consider next example. For this example we want to open 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 addin 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 are create new instance for inner Visual Studio Command class and then define for it some properties in its building method.

 Then we define 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 ahead of time command for our action (OpenVistaSidebarControlConsoleCommand) we can add new menu item to  "Gadget" group menu. Below you can see all the 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. This guys should only prepare templated 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 use in Visual Studio. There are exist add-in item among other. With this item you can easier deliver add-in to other developers. For use 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.

 To use the Visual Studio Content Installer to install your community components, you must create a .vscontent file for the component. After you create the .vscontent file, you compress the component files and the .vscontent file into a .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