Creating an Expression Web Add-in (4)

Configuring the Project for Debugging

So far, we haven't added any code that should require debugging. However, as you develop your add-in, there's a decent chance that you might run into errors and need to debug.

The problem is that a Class Library project in Visual Studio is not designed to run like an application. Therefore, when you start debugging in Visual Studio with the add-in project, you'll get an error. Instead of trying to run the DLL when we debug, we need Visual Studio to build the add-in and then launch Expression Web.

To configure that, follow these steps.

The exprwd.exe executable is located at c:\Program Files\Microsoft Expression\Web Designer by default.

Your Debug options should now look like those shown in Figure 7. When you start debugging in Visual Studio, Expression Web will be launched and the Visual Studio debugger will attach to the process and allow you to debug your add-in.

Figure 7

To debug your add-in, you'll want to configure Visual Studio to launch Expression Web when you start debugging.

You can now debug your add-in in Visual Studio. If you'd like, set a breakpoint on the OnConnection method and start debugging. Expression Web should launch and your breakpoint should get hit. If it doesn't, make sure that your Registry entries are still there and that you have Expression Web closed when you start debugging.

Hooking Up Events (C# Only)

When we added the variable for the Expression Web application, we used the WithEvents keyword in VB so that the events for the application would be exposed. Since C# has no such keyword, you will have to manually hook up the events for the Expression Web application.

Doing so is actually quite simple thanks to the new coding features in Visual Studio 2005. In this case, we want to hook up the events that will fire when a Web site is created or opened and when a Web page is created or opened. Let's first hook up the OnWebOpen event. After that, you should be able to easily hook up the other events yourself.

Inside of the OnConnection method, enter the following code under the declaration for the ewApp variable.

C#

ewApp.OnWebOpen +=

As soon as you type the = sign, Visual Studio will display the code that it believes you want to insert and will ask you to press Tab to insert it. Press Tab to insert the code. Visual Studio will then highlight ewApp_OnWebOpen and ask you press Tab to insert the handler in the class. Press Tab again and Visual Studio will add the necessary code for your event handler.

Visual Studio creates the event handler method directly under the OnConnection method. It's best to cut the code for the ewApp_OnWebOpen method and paste it under the region created for the IDTExtensibility2 interface methods. I've done that in the sample C# project that you can download here.

Add new handlers for the OnWebNew, OnPageOpen, and OnPageNew events using the same technique you used to create the handler for the OnWebOpen event.

Hooking Up Events (VB Only)

Hooking up the events in VB is a simple matter. Open Connect.vb and select ewApp from the left dropdown at the top of the window. Click the Method Name dropdown on the right and select the event you'd like to hook up as shown in Figure 8.

Figure 8

Hooking up events in VB couldn't be simpler.

Repeat this method in order to hook up the OnWebNew, OnWebOpen, OnPageNew, and OnPageOpen events.

Adding Codes to the Events (C# and VB)

Before we add code to the events, let's make it a bit easier on ourselves. By default, if you want to access the .NET Framework's MessageBox class to display a message, you'll need to refer to it as System.Windows.Forms.MessageBox as we did earlier. That's a lot of typing! You can make it easier by using an Imports statement in VB or a using statement in C#.

Add the following code to the very top of the Connect.vb or Connect.cs file.

VB

Imports System.Windows.Forms

C#

using System.Windows.Forms;

After adding this code, we can now access the MessageBox class by simply typing MessageBox. That's much easier to handle.

Now let's add the code for our events. We'll start by adding code to display a message when a Web site is opened. Locate the ewApp_OnWebOpen method and add the following code inside of the method. (If you're using C#, first remove the existing code from the method first.)

VB

MessageBox.Show("Web Site Opened: " & pWeb.Url)

C#

MessageBox.Show("Web Site Opened: " + pWeb.Url);

This code will display a message when a Web site is opened. That message will display the URL of the opened Web site using the pWeb variable. This variable comes from the event handler and will always contain a reference to the Web site that was just opened.

If you'd like, go ahead and test your add-in. There's no need to build it first. Simply start debugging by clicking the Start button in Visual Studio or by pressing F5.

When you build your add-in in Visual Studio, it will register it on your system. From then on, your add-in will always load into Expression Web.

If you want to stop your add-in from loading in Expression Web, open Expression Web and then select Tools, Add-ins. Select your add-in and click Remove. If you want your add-in to run again, you will need to re-add the Registry entries we added earlier.

Now locate the OnPageOpen method and add the following code to it.

VB

MessageBox.Show("Web Page Opened: " & pPage.ActiveDocument.url)

C#

MessageBox.Show("Web Page Opened: " + pPage.ActiveDocument.url);

Like the previous code we added, this code will display a message box, but this time, it will display it when a page is opened. We use the pPage object provided by the event. The pPage object will contain a reference to the active PageWindow, an Expression Web object that refers to the window that displays a Web page. The ActiveDocument property of the PageWindow object returns a reference to the active document, and the url property provides us with the URL.

Using these same techniques, add some code to the OnPageNew and OnWebNew events.

Conclusion

As you've seen in this article, creating an Expression Web add-in using Visual Studio 2005 isn't difficult. However, many of the required steps are not easily discoverable. If you don't understand COM and how the .NET Framework works with it, you'd have a hard time figuring it out.

Hopefully this article has pushed you in the right direction. You should now have the knowledge necessary to take advantage of Expression Web's object model to create your own add-ins.

Lagniappe: Installing An Add-in

Once you've created your add-in, you might want to distribute it to others so that they can use it. With a native COM add-in, this was a fairly trivial task. Send them the DLL and have them run regsvr32 on it and you're done. (Of course, a nice installation package puts some polish on the process.) .NET Framework add-ins are a bit more tricky because you have to use utilities provided by the Framework to register your DLL. It's not something you'd want to ask your end-users to do.

Fortunately, you can use Visual Studio to create your own Setup package. You'll find this project type in the Other Project Types section of the New Project dialog as shown in Figure 9. Visual Studio has some good documentation on creating a deployment project, and you should be able to use it to create a package pretty easily.

Figure 9

Creating a deployment package is pretty easy with Visual Studio's project template.

Keep in mind that you'll need to add your Registry entries to the Setup project. For information on doing that, see the Visual Studio documentation.