Web Application Toolkit for IE8

Article
09/30/2009

Some time back I did a video and some demos on how to create IE8 accelerators, search providers and web slices based around a traffic information site I called Trafficify (I know, it’s not pretty, it was never meant to be published but Ian wanted it up on the IE Add-On Gallery so up it went).

Since then, we’ve released the Web Application Toolkit for IE8 which makes it *even easier* (as if that were possible after my explanation) to create these things. In particular it includes some clever ASP.NET controls which do most of the hard work for you.

As you can see there are 3 Extenders (controls that you can attach to other controls to add new functionality), one each for search, accelerator and web slice. There’s also a “stand alone” control for web slices which just takes its content as the web slice content. And there’s the BrowserHelperControl which identifies the browser type and enables / disables IE8 specific functionality on the page as well a providing the capability add helpful messages for the user.

VisualSearchControlExtender

The VisualSearchExtenderControl extends a button or similar control that the user will use to install your search provider. As well as allowing you to easily specify search and suggestion URLs etc, the Toolkit also comes with handlers and templates to make it very straightforward to create a new search provider. The control is automatically hidden if the user already has the search provider installed.

The markup for my VisualSearchControlExtender for Trafficify looks like this:

 <asp:Button ID="SearchButton" runat="server" Text="Button" />
<IE8:VisualSearchControlExtender ID="VisualSearchControlExtender1" runat="server" 
    TargetControlId="SearchButton"
    TargetControlText="Install Trafficify Seach Provider"
    OpenSearchDescriptionHandlerUrl="~/OpenSearchDescription.ashx"
    SearchUrlTemplate="~/Search.aspx?road={searchTerms}"
    SuggestionsUrlTemplate="~/SearchSuggestions.ashx?road={searchTerms}"
    SearchProviderTitle="Road Search" />

I have a standard ASP.NET Button with ID SearchButton that the user can use to install the search provider. OpenSearchDescription.ashx comes with the Toolkit and generates the OpenSearchDescription file based on the properties you set on the control. I have a search page (Search.aspx) and a suggestions handler (SearchSuggestions.ashx) that takes partial search terms and offers different alternatives. It’s possible (quite easy in fact) to add unique images to the suggestions but my application doesn’t lend itself well to that.

AcceleratorControlExtender

Similarly the AcceleratorControlExtender extends and installation control and makes it easy to build a new accelerator

The markup for my AcceleratorControlExtender for Trafficify looks like this:

 <asp:Button ID="AcceleratorButton" runat="server" Text="Button" />
<IE8:AcceleratorControlExtender ID="AcceleratorControlExtender1" runat="server" 
    DiscoveryControlId="AcceleratorButton"
    DiscoveryControlText="Install Trafficify Accelerator" 
    InstallDescriptionFileUrl="~/traffic.xml" />

In this case I had an OpenServiceDescription file already (from my original implementation of Trafficify) so I just used that – these controls are happy with either a file URL or the handler + template approach.

WebSliceControl / WebSliceControlExtender

With web slices you have the choice to use the WebSliceControl (in which case you simply include the content you want to turn into a web slice as the content of the control itself) or the WebSliceControlExtender in which case you set the TargetControlId to the ID of the control you want to turn into a web slice. The control supports alternative update and display sources (ie it the refresh tigger and content don’t need to come from the original page).

The markup for my WebSliceControl for Trafficify looks like this:

 <IE8:WebSliceControl ID="WebSliceControl1" runat="server" WebSliceTitle="Traffic Info">
    <uc1:TrafficSummary ID="TrafficSummary1" runat="server" />
</IE8:WebSliceControl>

I’ve incorporated all the content I want in my web slice as a user control which makes life nice and easy.

BrowserHelperControl

The BrowserHelperControl detects the type of browser and optionally displays a suitable message / hides IE8 specific controls on the page for non-IE8 browsers.

The markup for my BrowserHelperControl for Trafficify looks like this:

 <IE8:BrowserHelperControl ID="BrowserHelperControl1" runat="server" 
    CheckSupportedScenarios="true" />

Quite simply I’m using it to hide the IE8 controls when appropriate with the CheckSupportedScenarios property.

Here’s the results – a slightly updated (but still very ugly) version of Trafficify.

Note the notification of the web slice and the buttons to install the accelerator / search provider.

The web slice provides me access to latest traffic information whatever web page I’m viewing.

The accelerator shows me a preview of traffic conditions at a particular location (whatever I’ve selected). Note that the button to install the accelerator is hidden as the accelerator is now installed.

The visual search includes search suggestions as I type in the search box.