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.
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.
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.
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:
<description>This add-in puts Hello world at the cursor</description>
<command id="Greeting" onclick="xweb.document.insert('Hello world')" filetype="HTML-DOM">
<menuitem label="Greeting" parent="MENU_Insert" />
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,
- Click on the Tools menu and pick Add-Ins…
- 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.
- 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.
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.