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
We’ve received a number of questions about the free upgrade from Expression Web 3 to Expression Web 4. With this post, I hope to answer the most frequently asked questions and eliminate any confusion.
The upgrade path for Expression Web 4 depends on how you acquired Expression Web 3. If you purchased a retail version of Expression Web 3 (e.g., from the Microsoft Store, from a local software retailer, from Digital River, etc.), you should download and install the Expression Web 4 Trial version from microsoft.com. The upgrade should happen automatically as you install Expression Web 4. In this scenario, the Setup program for version 4 locates your version 3 license in the Windows License Store and applies that license to version 4. After you have installed version 4, you are free to either uninstall version 3 or leave it installed.
NOTE: Please keep your copy of Expression Web 3 and your version 3 product key. Should you need to reinstall Windows or have a hard drive failure, you will need to first install Expression Web 3, then reinstall Expression Web 4.
If you have any other version of Expression Web 3, e.g., acquired through a volume license, MSDN, DreamSpark, etc., you should not install the trial version. Instead, you should get your copy of version 4 through the same program you used to acquire version 3. I’ve listed a few examples below:
If your free upgrade to Expression Web 4 is not yet available from your supplier, please download and use the free trial version of Expression Web 4 at http://www.microsoft.com/expression/try-it/. When your free upgrade becomes available, you can uninstall the trial version and install the full version.
Some additional notes:
I hope this answers your questions.
Microsoft Expression Web
After downloading the Bing Map add-in, you need to install the add-in in Expression Web 4. To install the Bing Map add-in, choose Tools > Add-ins, click Install, and follow the onscreen instructions. After you install the Bing Map add-in, the Bing Map command appears on the Insert menu and displays the Insert Bing Map dialog box.
Notice that the Bing Map add-in’s dialog has a color theme that matches the look of the Expression Web application. I’ll show you how to get the same look for your own add-in in a bit.
To see your map in action, press F12 to view the current page in your browser. The browser will show the map with the same location, perspective and zoom that you specified in the Insert Bing Map dialog. The map also provides controls that allow a visitor to your page to move around the map.
Let’s take a look at how we created this addin.
Expression Web add-ins require a manifest file which is an XML file named addin.xml. This file provides the basic description about the add-in as well as some of the ways the add-in introduces functionality into the application. Here’s the addin.xml file for the insert Bing Map add-in:
The addin.xml file requires a single <addin> element at the root level. At a minimum, it must also include a <name> element. Optional descriptive elements, such as author, description, guid, homepage, minversion and version, help users identify your add-in in the Manage Add-ins dialog.
For example, here’s how the Insert Bing Maps add-in appears in the Manage Add-ins dialog:
To add a menu item or toolbar button to Expression Web for your add-in, use the <command> element in your add-in’s manifest file.
Let’s look at the command we added to Expression Web for the Bing Map add-in. At first glance, this part of the manifest file may appear complicated, but after breaking it down, you’ll see it’s really quite simple.
Each menu command is defined by a command element which requires a unique id attribute to identify the command for Expression Web. To help ensure your command is unique, try to use an id that identifies what your command does. For example, in the Bing Map add-in, we used the id “InsertMap”.
In this example we need to launch a new dialog. To do this, we use the Expression Web API function xweb.application.showModalDialog. This function takes 3 parameters:
You’ll note that the html page in this example is specified as “addin:index.html”. This tells Expression Web to look for the file relative to your addin.xml file. So in this case, there should be a file called index.html in the same directory as the addin.xml file. We’ll have a look at some things in this file in a moment.
The final attribute of the command element is filetype, which tells Expression Web to make the add-in’s command available only for files that have an HTML DOM, such as HTML, ASP, and PHP files. This makes our command disabled when the user is editing other types of files (such as CSS and JS). If your add-in does not have a similar restriction, you can omit this attribute.
Within the command element is a menuitem element, which tells Expression Web to add a new menu item for triggering the add-in’s command. The menuitem element requires you to specify the parent menu your command should appear under as well as a label for the menu item. Notice in our example the label attribute has a value of “_Bing Map…”. The underscore character (“_”) is optional and tells Expression Web to define a hotkey for the letter ‘B’.
Let’s have a look at how we created the dialog UI with the file index.html, which the xweb.application.showModalDialog function references. The good news is most of this file should look very familiar as it simply uses standard web technologies. I won’t focus on things like basic HTML such as hyperlinks, buttons, and text fields, but I will highlight things in this file which are unique to developing Expression Web Add-ins.
The index.html file also references some stylesheets, which work just as CSS does with any normal HTML page. Take special note of the following CSS reference:
This expression.css file defines the standard color schemes that match the Expression Web application color schemes. To give your add-in a professional, built-in look and feel, make sure you use this this CSS file as well as the style classes defined within it. You can use the version of this CSS file from the Bing Map add-in in your add-ins.
This function does quite a bit, so I’ll break some of it down.
The next interesting property of the handleInsertButton function is xwebdocument.selection which uses the Expression Web API to locate a suitable home for the map within our HTML markup. This gives you access to the current cursor location or selection in the current document in Expression Web.
The code uses this property to determine if the current cursor location or selection is within a DIV element with a proper ID. If it is, it will use that element. Otherwise, the add-in adds a new DIV with an ID. Notice, that while this code is using Expression Web-specific APIs, working with the DOM of the current document is very similar to working with the DOM in a regular HTML page.
Again, we use the xweb.document API to address the DOM of the page being edited to locate the HEAD element and use the DOM-standard approach of appending html to the innerHTML property of this node. Finally, we need to close the dialog. To do this, we use the xweb.appliation.endDialog function. The argument to this function is what is returned to the original call to xweb.application.showModalDialog which displayed the dialog. In this particular case it goes unused.
To add the final polish of a professional application as well as to support accessibility, it’s important to make sure your add-in responds well to keyboard interactions. The insert Bing map add-in shows some examples of how to do this.
Notice how the Insert button in the Insert Bing Map dialog has a the letter “I” underlined. This signifies that the button is wired to the hotkey of Alt-I. This functionality needs to be added by our add-in. To see how this is done, check out the setupKeys function in prepare.js. Specifically, notice the following code:
This uses jQuery to wire an event handler to the keyup event on the body of the dialog’s page. When an Alt-I is detected, a click event is manually sent to the insert button
Another subtle, yet important key function is the use of tabs to cycle through input field selection. Tab should select the next logical input field. While shift tab should select the previous logical input field. In the insert Bing map dialog we’ve chosen the logical order to be
To assist in this, we added a function called handleTab which takes an event, a previous control id and a next control id. The function uses a jQuery selector to send focus to the next or previous control if tab or shift tab is pressed respectively.
Wiring in our tab functionality is as easy as adding the following code to the setupKeys function:
I hope you’ve found this overview of the insert Bing map add-in useful. Be sure to download the add-in and make use of it. It’s not only a great extension of Expression Web, it’s also a great example of how to make a professional looking add-in.
SlapShot is a new extension written for Expression Web 4. For those of you who already use the SnapShot panel (a feature that debuted in Expression Web 3), you will feel right at home with SlapShot.
For those of you who haven’t yet used SnapShot (or who need a quick refresher course), SnapShot is a panel in Expression Web that displays an image of the current page as rendered by the selected browser. It allows you to easily change the browser and browser resolution without having to repeatedly preview in browser to see your changes.
SlapShot is based on the same premise in that you can easily preview a page without loading a browser, however SlapShot extends the features of SnapShot by including full ActiveX support (Silverlight®, Flash®, and so on), as well as interactivity within the page (including navigation).
In the following screenshot, you can see that SnapShot displays only the Install Silverlight message but SlapShot displays (with interaction) the actual Silverlight content.
Slapshot works by listening to the Expression Web ondocumentchanged and ondocumentsaved events (for more information about these events, see The add-in manifest in the Expression Web SDK User Guide). When a page is saved or the active document is changed (for example, the user clicks on the tab of a different page), the SlapShot display updates. Quite nifty.
There are a few conditions that must be met before SlapShot will work correctly:
For more detailed instructions configuring and loading the Development Server see the Previewing documentation.
Version 1 of SlapShot includes default support for the version of Internet Explorer that is installed on your computer.
You can enable Beta (not all features are available yet) Firefox support in the SlapShot panel using the following steps:
The SlapShot add-in uses a fairly large swath of the extensibility layer and, hopefully, can provide a reference about how to get various pieces of data out of Expression Web 4 (as well as be a useful tool). SlapShot is already available on the Expression Gallery.
To install SlapShot
John DixonExpression Web
Expression Web 4 includes a new Symbol dialog box that enables you to insert symbols and characters in either the Design view or Code view of your web page. You can browse all available characters or choose a subset of characters from the Type menu.
For quick access the Special Characters tab lists only the most commonly-used characters, such as the copyright symbol, em dash, en dash, registered and trademark symbols:
Unlike earlier versions of the Symbol dialog box, the Symbol dialog box in Expression Web 4 inserts only the entity name for the character you select and adds nothing else; the Symbol dialog does not add paragraph or span tags, and does not apply a font and style to the character you insert. Consider that reason #11 to get your (potentially free) copy of Expression Web 4 today!
Expression Web 4 (released last week!) has a powerful new Search Engine Optimization (SEO) reporting tool that identifies potential SEO problems in your site. This tool makes it very convenient to automatically locate mark-up patterns that might be compromising your page rankings. But all versions of Microsoft Expression Web have a range of features you can use to drive SEO improvements into your mark-up. Let’s take a look at them!
SEO guidance on the Web tends to fall into one of the following categories:
To expand on these, your mark-up should be clean and well-constructed, so that crawlers can understand and crawl it efficiently. You should exercise every available opportunity to describe and differentiate your page content to search engines (including non-user-facing information such as meta tags that provide a description). Finally, you should avoid looking like you’re attempting to game the system by misrepresenting your content or artificially inflating page ranking via SEO spam. I’ll cover all these points eventually; this post is dedicated to the first bullet.
One consistent (but not necessarily the most critical) component of SEO involves the mark-up or code of your web pages. Search engines employ programs called crawlers to retrieve and index content on the web. If your pages contain code errors or otherwise confuse the crawler, search engine results can be compromised and not in your site’s favor. Good quality mark-up also increases the usability of your site, resulting in happy visitors that stick around longer.
Here’s a simple list of rules you can use to help crawlers successfully index your site.
Your pages should be well-formed and free of coding issues. Page hyperlinks should point to existing content and written in a consistent way (that is, all links to the same destination should be identical in case and syntax). Finally, large sites should provide an index or robots.txt file that describes the site content you want crawled. I will cover the first two bullets below.
If you are not already practicing web standards, the SEO benefits of using web standards might help motivate you. If your markup is syntactically correct and adheres to the rules of your page’s doctype declaration, you reduce the work required to crawl your content. The faster a crawler can get through your site, the faster results for new content will be available to web searches. Expression Web makes it very easy to keep tabs on the quality of your HTML. Open up any page in the tool and both the status bar (at the bottom of the application) and code editor provide immediate feedback regarding the presence or absence of mark-up errors.
In the following screenshot, I’ve opened up a version of http://msn.com in the Expression Web code editor. The status bar shows me right away that there is a mark-up error on the page. If you click the warning icon in the status bar, you’ll get a pop-up menu that allows you to jump to the coding problem or run a complete compatibility check. If you choose to jump to the code editor and there are multiple code errors, you can press F8 to jump to the next code error.
To run a comprehensive report for your site, select Compatibility Checker from the Tools menu, which opens the following dialog.
This dialog lets you check your HTML/XHTML and CSS compatibility against a number of different doctypes and browser versions. You can also easily restrict results to the current page, all open pages, or your entire site. Choose your settings and click the ‘Check’ button to send the code checker on its way. Results pop up in the Compatibility panel.
You can double-click compatibility errors in the output panel to jump directly to the problematic code. Hover over the highlighted issue with your pointer, and a pop-up tooltip describes the problem diagnostic and guidance for resolving it. You can also use the F8 key to move forward and back through report results on the current page (F8 moves to the next problem, Shift-F8 will take you back).
As in many things, there is a place in SEO work for being consistent as well as a place for differentiating yourself. When it comes to putting links in mark-up, there is a particular value on standardizing on a consistent format for URLs.
Search engine algorithms are complicated and constantly evolving but all modern engines analyze links to pages as a critical part of indexing pages and providing page ranks. Links tell the search engine there is other site content it should crawl, and links build a map of inter-relatedness that defines the relative value of page. A large number of incoming links to a target page is a sign that the destination represents especially valuable or authoritative content. This is true both for links coming from other sites and links that originate within your own site. (Numerous high-quality external incoming links, of course, are most valuable for elevating search rank.) For best search results, you should insure that links point to content that actually exists. It’s also important that links are expressed in a consistent way. Components of a URL are, technically, case-sensitive; crawlers can therefore potentially divide page rankings between URLs that are identical except for casing or other differences (described below).
Expression Web provides help for both these problems. First, you should regularly run the broken links report. To do this, open your site in Expression Web. Click the Site View tab and then click Reports at the bottom of this view to see a list of reports that Expression Web can run for you, including several that relate to hyperlinks in your site.
Next, click the report titled ‘Broken hyperlinks’ and you’ll see the following screenshot. In the example below, I’ve neglected to properly format an external hyperlink. Expression Web has also determined that a link to an embedded image is in good shape.
To fix the problem, double-click the reported problem in the report to open a more powerful version of the Edit Hyperlink dialog.
This dialog lets you jump to the link in the page itself for correction (just click the ‘Edit Page’ button). Or you can the correct URL in the dialog and apply the link fix to all pages or a subset.
Once you’ve fixed all broken links in your site, you should review all internal links to insure they are expressed in a consistent way. As mentioned previously, most parts of a URL are case-sensitive. Web servers that run non-Microsoft operating systems might return entirely different content for http://contoso.com/mypage.html than http://contoso.com/MYPAGE.HTML. Search engines can therefore rightly regard these links as unique (depending on other factors). If the links actually point to the same content, search results are split between them, diluting the rank of each URL. A good practice, therefore, is to case all URLs in a consistent way, such as using all lower-case capitalization.
There are several other URL formatting issues you should be aware of (and fix in your site):
There are several ways to resolve the problem of inconsistent hyperlinks. The most straightforward method is to manually review and correct all internal links in the Hyperlinks report. To display the Hyperlinks report, go to the Site View tab, and click Reports in the bottom tab. Select Site Summary from the drop down menu in the upper left, and click Hyperlinks. Notice the status bar reports the number of broken links that have been found so far and also differentiates between internal and external links.
Click the ‘Hyperlink’ column name to sort by the link destination and more easily compare and identify problematic URLs. (To reduce the number of links in the report, you can click the green arrow on the Destination column to create a custom filter that ensures the list only contains Internal URLs.) If you find any problem URLs, double-click the URL in the list to correct and apply your hyperlink changes to all files across your site, in a single step.
You can also use Expression Web’s Find and Replace functionality to scan and modify internal hyperlinks. Hit CTRL-F or choose Edit > Find to open the Find and Replace dialog. The HTML Tags tab provides special search functionality that uses mark-up to locate and modify values:
Pull down the ‘Find tag’ dropdown and select ‘a’ in order to run a simple query for all <a> tags in your site. Be sure to select ‘All pages’ under ‘Find where’. Expression Web presents the results in the Find panel, which you can review for URL consistency issues. Double-clicking a result opens the associated page in the editor and jumps to the appropriate code for editing.
The Expression Web Find and Replace dialog has additional useful and powerful capabilities. Let’s say you have a mixture of internal references to your web site both with and without a trailing slash and you’d like to correct that. You can use the Find and Replace dialog to locate all <a> tags with a particular href attribute value and make them uniform. To do so, in the Find and Replace dialog box, on the HTML Tags tab, select <a> as before in the ‘Find tag’ dropdown. Now, let’s refine the search rule by clicking the ‘HTML Rules…’ button to open the HTML Rules dialog:
Click ‘New rule…’ and then select ‘With attribute’ from the dropdown menu. Next, specify the attribute (‘href’) and attribute value (the URL you’d like to correct) that should be used to filter results. Here’s what the dialog looks like using the example case I’ve provided above:
The search tool will now scan all pages looking for <a> tags with an href value equal to http://contoso.com. Now, let’s specify that these should be updated to an attribute value of http://contoso.com/ (which has a trailing slash). Click ok in the ‘HTML Rules’ dialog. In the ‘Find and Replace’ dialog, select ‘Set attribute value’ in the ‘Replace action’ dropdown. Specify ‘href’ in the ‘Attribute’ dropdown and populate ‘To:’ with the value you’d like as a replacement value, like so:
Click ‘Replace All’ and you’re on your way. Note the ‘Match case’ option in the ‘Advanced’ section. This option will allow you to easily locate and correct casing problems in URLs. Simply specify the URL you’d like to find, make sure ‘match case’ is not enabled, and provide a replacement value. The search tool will locate all occurrences of the URL in a case-insensitive way and apply a consistently cased value that you specify.
After cleaning up obvious mark-up issues that confuse the crawler, it is time to think about how to increase the useful information in your mark-up that will maximize your page rank and the likelihood that a user will click-through to your site. Expression Web can help with this, too, a topic that I will cover in a post to be published shortly.
Michael Fanning Principal Architect, Microsoft Expression Web
I created the Extensibility Tester add-in to provide Expression Web 4 developers a way to test out ideas and troubleshoot their add-ins without the endless cycle of edit, save, and refresh.
Click here to download the Extensibility Tester add-in. Once you’ve downloaded it, you can install it from within Expression Web 4 via the Add-Ins Manager under the Tools menu.
Here are a few expressions you can try to see some of the cool stuff you can do with the extensibility model:
Let me know what you think!
Erik Mikkelson Software Development Engineer in Test, Expression Web