June, 2010

  • Expression Web team blog

    Adding symbols and characters to your web page


    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.

    Symbols dialog in Expression Web 4

     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:

    Special Characters tab of the Symbol dialog box in Expression Web 4 

    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 team blog

    Create useful, professional-Looking add-ins for Expression Web 4


    Expression Web 4 enables developers familiar with web technologies such as HTML, JavaScript, and CSS to easily extend the functionality of the product.  A useful add-in that was demoed at the product launch lets you insert a Bing map into your web page.  In this blog post, I’ll provide a detailed look at this add-in which is available for free on our community site.

    A Quick Look at the finished Add-in

    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.



    The dialog contains a functional Bing map that you can pan and zoom. In addition, you can specify a location to center the map around and create a pushpin.  Once you have selected the desired location, zoom, and perspective, press the Insert button to add the HTML and JavaScript that will display your interactive map.

    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.

    Defining the Add-in

    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”. 

    Next, you need to define what happens when your command is executed.  That’s where the onclick attribute comes in.  Much like an onclick JavaScript event handler, you use the onclick attribute to define the JavaScript code that runs when the user selects the toolbar button or menu item.

    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:

    1. an html page which provides the UI for the dialog,
    2. a title for the dialog,
    3. a string containing dialog options (such as size and scrolling). 

    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’.

    Defining the Dialog UI

    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.

    JavaScript and CSS

    The Bing Map add-in’s index.html includes references to standard JavaScript libraries such as jQuery as well as custom JavaScript developed for this add-in.  As these references suggest, you can leverage powerful JavaScript libraries like jQuery, and your own custom JavaScript, to help you write your 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.

    Inserting Markup and Script

    To understand what the add-in does to insert the map, have a look at the file prepare.js within the addi-in’s js folder.  This file contains a function called handleInsertButton which defines the behavior of the Insert button in the Insert Bing Map dialog box.  This function makes heavy use of the jQuery JavaScript framework to define what happens when the pointer hovers over the button and presses it.

    This function does quite a bit, so I’ll break some of it down.


    These two lines of code show how the Bing Map add-in adds JavaScript references to the current page.  In both of these examples, we point to remote script resources using the API function call xweb.document.appendScriptReference. In fact, we not only use jQuery to build the functionality in our add-in, we also use it to build the map functionality in our page.  By using this approach the API will protect you from adding a reference to the same resource more than once.

    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.


    The remainder of the function is standard JavaScript that generates the JavaScript code added to the HEAD element of the document being edited in Expression Web.  Finally, towards the end of the onclick function handler for insert, you see the following code:


    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.

    Handling Keys

    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

    Tab Order

    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

    1. Location text box (id ‘txtWhere’)
    2. More information link (id ‘hp’)
    3. Insert button (id ‘insert’)
    4. Close button (id ‘close’)

    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.

  • Expression Web team blog

    Expression Web 4 Licensing FAQ


    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:

    • MSDN – Browse to the MSDN download center to download Microsoft Expression Studio 4 and acquire your product key.  Once you have that the product key, you should select Help->Enter Product Key to license your copy of Expression Studio 4.
    • DreamSpark – Browse to the download center location to download Microsoft Expression Studio 4 and acquire your product key.  Once you have that the product key, you should select Help->Enter Product Key to license your copy of Expression Studio 4.
    • Volume Licenses – Visit the Volume Licensing Service Center (VLSC) to make arrangements to download the upgrade.  Your company and/or your reseller need to be registered with the VLSC in order to successfully download the upgrade.  As with DreamSpark, at the time I write this, Expression Web 4 and Expression Studio 4 are not yet available on the VLSC, but should be soon. We will update this post when we have the link to the download page.

    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:

    • If you’re in doubt about whether your copy of Expression Web is fully licensed and activated, select Help->About Microsoft Expression Web and look for the phrase, “This is a fully licensed copy.” (Note: The information that appears when you choose Help->Activate Product or Help->Enter Product Key is not a reliable measure of whether the app is licensed.)
    • If you’re in doubt about whether your copy of Expression Web 3 is eligible for the automatic upgrade, select Help->About and look for the product ID which is in the form of a 5-digit number, a dash, a 3-digit number, a dash, etc.  If the 3-digit number is 617, the Expression Web 4 installer should automatically license your copy during the installation.
    • If you acquired version 3 through a program like MSDN or DreamSpark but are no longer participating in the program, you are not eligible for the free upgrade.  You are still eligible for the reduced-cost upgrade.

    I hope this answers your questions.

    Paul Bartholomew

    Microsoft Expression Web

  • Expression Web team blog

    SlapShot for Expression Web 4


    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:

    • The page must belong to a site on the local computer.
    •  Expression Web must be configured to use the Microsoft Expression Development Server.
    • To configure Expression Web to use the Development Server:
      • On the Site menu, click Site Settings, and then click the Preview tab.
      • Make sure Use Microsoft Expression Development Server is checked and select For all web pages.
    • Run any page once or load SnapShot  to start the Development Server for the site.

    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:

    1. Download the Mozilla XUL SDK from the Mozilla download center: http://releases.mozilla.org/pub/mozilla.org/xulrunner/releases/.
    2. Unzip the latest version to your hard drive.
    3. Start a command prompt as an administrator and change to the bin subdirectory where you unzipped the XUL SDK.
    4. Type regsvr32.exe mozctl.dll and press ENTER.
    5. Restart Expression Web 4. The SlapShot panel now supports Firefox.





    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

    1. In Expression Web, click Tools, and then click Add-Ins. The Manage Add-ins dialog box is displayed.
    2. Click Install, browse to the location you downloaded SlapShot.xadd to, click SlapShot.xadd, and then click Open. The extension is unpacked and added to the list of add-ins, SlapShot can then be found towards the bottom of the Panels menu item.


    John Dixon
    Expression Web


  • Expression Web team blog

    Improve Your Site’s Search Ranking


    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!

    A Simple Way to Think About SEO Guidance

    SEO guidance on the Web tends to fall into one of the following categories:

    • Don’t confuse the crawler
    • Maximize useful content
    • Don’t look like a bad guy

    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.

    Don’t confuse the crawler!

    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.

    • Fix obvious code problems in your site
    • Link consistently
    • Define clear crawling boundaries

    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.

    Fix Code Problems with Expression Web Diagnostics

    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.

    Code Error icon in the Expression Web 4 status bar

    To run a comprehensive report for your site, select Compatibility Checker from the Tools menu, which opens the following dialog.

    Compatibility Checker dialog in Expression Web 4

    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.

     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).

    Reaping the Rewards of Consistency

    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.

    Site Summary in Expression Web 4

    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.


    Hyperlinks report in Expression Web 4

    To fix the problem, double-click the reported problem in the report to open a more powerful version of the Edit Hyperlink dialog.

    Edit Hyperlink dialog box

    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):

    • Web servers have a notion of a default document for a URL. http://contoso.com and http://contoso.com/default.html for example are two URLs that can resolve to the same page. Using both of these URLs throughout a site to link to your homepage is bad for SEO. Page ranking for incoming references to a single page can be split into two, making the SEO value of each URL weaker than if they were considered one. So you should pick one form of the URL and use it consistently throughout your site.
    • Another subtle problem involves trailing slashes. http://contoso.com and http://contoso.com/ are treated as two distinct URLS by crawlers, even if each URL resolves to the same page. For best SEO results, you should consistently either avoid or include a trailing slash in your internal links.
    • Many sites support URLs with and without a leading ‘www’ hostname prefix. For sites like this, URLs such as http://constoso.com/mycontent.html and http://www.contoso.com/mycontent.html split page ranking, so use only one or the other to link to your content.

    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.

    Hyperlinks report in Expression Web 4

    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.

    Edit Hyperlink dialog

    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:

    Find and Replace dialog in Expression Web 4

    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.

    Find panel in Expression Web 4

    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:

    HTML Rules dialog in Expression Web 4

    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:

    HTML Rules dialog

    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:

    Find and Replace dialog

    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.

    What Next?

    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

  • Expression Web team blog

    Simplify Your Add-In Development with the Extensibility Tester Add-In


    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.


    The add-in panel lets developers evaluate JavaScript expressions from within the panel, giving access to the full extensibility model.  This allows add-in developers to interact with the Expression Web application while seeing all output, errors, and events that come from the interaction.

    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.

    Using the Extensibility Tester Add-In

    Once you have installed the Extensibility Tester add-in you can display it via Tools -> Extensibility Tester. Enter any JavaScript expression into the Input box and click Evaluate. The resulting output or error messages appear in the Output and Error boxes, respectively. Extensibility events are logged into the Events box as they are fired, with the most recent event on the top. The Clear All button clears all the textboxes if you want to start from a clean slate.

    The JavaScript expression is evaluated within the global scope, so variables you create are available from evaluation to evaluation (instead of falling out of scope after the evaluation is completed and not being available). This can save you quite a bit of typing, but comes with one small gotcha: these variables are properties of the window object and must be declared without ‘var’ (see example in image above).

    Here are a few expressions you can try to see some of the cool stuff you can do with the extensibility model:

    • xweb.document.selection.set(10,100);
    • Xweb.document.selection.insert(“text”);
    • xweb.application.newdocument("HTML 4.01 STRICT");
    • xweb.document.getElementsByTagName("div").length;
    • xweb.document.getScriptElementByCode("var foo = 1");
    • xweb.document.replaceRange(15, 20, "replacement");

    Let me know what you think!

    Erik Mikkelson
    Software Development Engineer in Test, Expression Web

  • Expression Web team blog

    Easily create an Add-in for Expression Web 4 with the Add-in Builder


    With today's launch of Expression Web 4, we’ve made extending Expression Web’s functionality easier than ever.  Developers can create Add-ins for Expression Web by using HTML, JavaScript and CSS standards they already know!  We have also simplified integrating your Add-ins into Expression Web’s Panel and menu system using XML.  In order to make it even easier, we are providing an Add-in on the Expression Community site that makes it super simple to build other Add-ins. It’s a classic Chicken or the Egg problem solved with the “Add-in Builder”. Click here to download the Add-in Builder. Once you have downloaded it, you can install it within Expression Web 4 directly via the Tools -> Add-ins menu! Click the Install button and choose the .xadd file you just downloaded.

    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">

    <name>Add-in Builder</name>

    <load type="AddinUtilities.Utilities, AddinUtilities" name="addinUtils"/>

    <description>Chicken or the Egg?</description>

    <command id="AddinBuilderCommand"


               'Add-in Builder','dialogHeight:500;dialogWidth:700;resize:yes')">

             <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!

    We’ve cleared all of the hurdles for you and now as a Web Developer you can focus on building the HTML, CSS and JavaScript inside of an Expression Web panel or dialog to build powerful new functionality instead of how to integrate your ideas into Expression Web itself.

    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

Page 1 of 1 (7 items)