Before we get started building an Add-in with the Add-in Builder let’s take a look at the exact XML used in order to integrate the Add-in Builder itself into Expression Web 4. It’s pretty simple and very straightforward.
<addin legacy=“yes” developer=“yes”>
<load type=“AddinUtilities.Utilities, AddinUtilities” name=“addinUtils”/>
<description>Chicken or the Egg?</description>
<menuitem parent=“MENU_Tools” before=“MENU_Tools_AddIns” label=“Add-in Builder…”/>
As simple as it is, learning and authoring new XML syntax can be time consuming and is largely based on trial-and-error. The Add-in builder provides a user-friendly interface that makes it simple to generate the XML and all the associated content files. In addition, the add-in you define is created in the correct location and a site is created for you inside of Expression Web 4 for you. Why is that cool? Simple, once your add-in is generated you can live edit it just like any other site!
1. If you haven’t downloaded the Add-in already you can download the Add-in Builder from here. Install the .xadd file in Expression Web 4 via the Tools -> Add-ins menu. Click the Install button and choose the .xadd file you just downloaded.
2.Once you have installed the Add-in Builder add-in you can access it in Expression Web 4 via Tools > Add-in Builder.
3.The first step is to describe your add-in, including name, description, homepage, and version. (I’ll publish another post in the near future to describe the other more advanced options in this dialog.)
4. To create a panel for your add-in, click Add Panel. Name, Source, and ID are required fields.
5. Click Insert, and then click Create Add-in. That’s it; it’s that easy to create your own Add-ins.
After the Add-in is created, a new site appears in Expression Web 4, with your Addin.xml file and an empty html file (the content of the panel you just defined!).
At this point, restart Expression Web 4. Upon restarting, the Add-in panel (or, if you selected, a dialog or assembly) will automatically be installed and available for use.
7. If you created an Add-in panel, go to the Panels menu and click the name you gave for your panel.
A panel hosting the empty html page opens.
The panel can be docked, moved, pinned, etc… within the Expression Web 4 application just like any other default panel!
8.Open panel.html from the site Expression Web created for your Add-in. Add <h1>Hello World</h1> to the page and save it.
9.Right click inside your open “My First Panel” tab and choose Refresh. You should be able to immediately see the HTML you added rendered in your panel!
Marc Kapke, Software Development Engineer in Test