Skip to main content

Expression Web 4: Add-in Friendly

Author: Mike Lissick, Senior Software Development Engineer, Expression Web

About the Author: Mike is a Senior Software Development Engineer on the Expression team. He is part of the team that built the extensibility feature for Expression Web 4.

Expression Web 4 just got a heck of a lot easier to customize—with new support for JavaScript add-ins.

What is an Add-In?

An add-in is a new feature that can be added to Expression Web. It can act just like the features that ship with the product. In fact, some of the features that ship with Expression Web are add-ins. An add-in can have menu items, toolbar buttons, dialogs and panels. Most add-ins will modify your site to add something that isn't easy to add by hand. For example, an add-in could allow you to apply a jQuery "slide" behavior to any element in your HTML with the click of a button.

That's old news.

Add-ins have been available in several versions Expression Web. However, before version 4, writing an add-in required plenty of time and took a lot of .NET coding knowledge. Once a developer hammered out an add-in, there was still more work to do; the old-school add-ins also required an installer.

From the perspective of someone installing an add-in, they were managed outside of Expression Web. You’d download an installer and run it. From that point forward, the installer would work its magic to put the add-in’s code on your machine. Similarly, when you wanted to remove the add-in you had to rely on the add-in’s installer again.

Enter the JavaScript add-in!

Now with Expression Web 4, you can write add-ins with HTML and JavaScript. In fact, one of the benefits of the new add-in model, is that you can write Expression Web add-ins in Expression Web.  If you want to, you can do it without a single line of compiled code. One of the greatest things about this is that writing an add-in doesn't require a pile of .NET experience. Sure, if you have the skills and need to do some hardcore programming you can still get up to your elbows in CLR. It just isn't required anymore.

Even better, you can create an installer just by zipping up your files with your favorite zip tool. If you rename the file with the .xadd extension, it will be recognized as an Expression Web 4 add-in.

Just like in previous versions, users can manage legacy and JavaScript add-ins from the improved “Manage Add-ins” dialog. In version 4, we’ve added the ability install and remove JavaScript add-ins from this screen too. Once a JavaScript add-in installed, it is good to go. No application restart is needed. You can also see the details of your add-ins like name, description, author, version and home page.

Enough talk. Let’s do this.

I love examples. Let’s build a super simple add-in to show you what’s involved. We’ll create an add-in, an installable “.xadd” file, install it and remove it.

Our add-in will insert a menu item that puts “hello world” at the current cursor location. We’ll call the add-in “The Greeter”. To do this, we only need one file.

The heart of an addin is the addin.xml, manifest file. It defines the menu items, toolbars and panels that make up the add-in and it gets loaded when Expression Web starts. A really simple addin.xml looks like this:

<addin>   
    <name>Greeter</name>
    <description>This add-in puts Hello world at the cursor</description>
    <author>Mike Lissick</author>
    <homepage>http://expression.microsoft.com/en-us</homepage>
    <version>1.0</version>
    <command id="Greeting" onclick="xweb.document.insert('Hello world')"           filetype="HTML-DOM">
        <menuitem label="Greeting" parent="MENU_Insert" />
    </command>
</addin>

If you want to work along, just create a folder named Greeter. In it, create a file named addin.xml. Put the code above in the file and save it. That’s your add-in! A more interesting add-in would have images, JavaScript, HTML and CSS in it, but this is a great minimal example.

Let’s make it installable. Right-click the folder containing your addin.xml and select “Send to -> Compressed (zipped) folder” to create a zip file with the folder at the root. This is important. Expression Web expects the zip file to contain a single folder at the top level and nothing else. If you are using another method to zip up the folder, that’s fine. Just remember it is important to choose the “.zip” format, or Expression Web won’t be able to read it. Rename the file greeter.xadd, and we are good to go.

Now, launch Expression Web 4 so we can install it. When it comes up,

  1. Click on the Tools menu and pick Add-Ins…
  2. Click the Install… button, find your file and open it.
    You’ll get a dialog showing the add-in details. These are pulled from the addin.xml.
  3. Click ok, and it is installed. You don’t even need to restart to use it.

Open an HTML file, click in the document and pick Insert -> Greeting from the menu. Voilà, the greeting has been applied.

To remove the add-in, open the Manage Add-ins dialog again. Select Greeter and click remove. Once you click ok to confirm the removal, it is gone from your file system. However, it is still loaded in the application so you really should restart as suggested in the popup.

That’s all

I hope that was informative. In future articles, we’ll work through creating a more useful add-in. We’ll talk more about tools, tips and tricks for building them.

Keep an eye on the Expression Gallery for Expression Web Add-ins for Expression Web 4.  And, consider writing and contributing one of your own.