Tag: accelerator

IE8 Accelerator Tutorial

Goal of this article

This article will describe what a accelerator is and how to implement one for Internet Explorer 8 (IE8).

What is a accelerator

According to answers.com ‘to accelerate’ means : ‘To increase the speed of’; ‘To reduce the time required’.
And that is exactly what Microsoft intended. Imagine yourself reading a webpage about an hotel and you want to know where the hotel is located. We used to select the address text, copy it, go to our favorite locator, http://maps.live.com, http://maps.google.be, paste it and press go. This took a lot of time, and was a repetitive task.

I said "was" because Microsoft has automated this process for us. To accelerate our productivity and to make it really convenient, they allow the user (that’s us) to install accelerators (webservices). Take the above scenario. We want to know the location of the hotel. We select the address and then automagically a blue button appears. Clicking this blue button let you select your accelerator of choice. In this case the maps. Hovering on "live maps" will give you an immediate preview on the location without you having to leave the page. If you click , you will be redirected towards the maps.live.com website with the address already searched for you and in display. No more copying and pasting anymore, just selecting and picking your accelerator.

If you want to see it in action check out this awesome video explaining the feature: http://mschnlnine.vo.llnwd.net/d1/mix/8/1/5/IE8Activ_mix.mp4 (takes a while to load, just be patient)

Creating an Accelerator is easier than you think

To create one the only thing you need is a page where you host your accelerator definition. And a webservice that is available to use. Let’s create ourselves a blog.nickbelhomme.com search.

First we need a service. Luckily for us, this service already exist!
http://blog.nickbelhomme.com/index.php?s=php

So we’ll be using this one. What we need next is an accelerator definition.

The accelerator definition

The definition is an xml file.

<?xml version="1.0" encoding="UTF-8"?>
<os:openServiceDescription
    xmlns:os="http://www.microsoft.com/schemas/openservicedescription/1.0">
    <os:homepageUrl>http://blog.nickbelhomme.com</os:homepageUrl>
    <os:display>
        <os:name>Search Nick's Blog</os:name>
        <os:icon>http://blog.nickbelhomme.com/favicon.ico</os:icon>
        <os:description>Search on the Nick's Blog</os:description>
    </os:display>
    <os:activity category="Search">
        <os:activityAction context="selection">
            <os:execute action="http://blog.nickbelhomme.com/index.php" method="get">
                <os:parameter name="s" value="{selection}" type="text" />
            </os:execute>
        </os:activityAction>
    </os:activity>
</os:openServiceDescription>

Most of it is self explanatory so the only thing I am going to discuss is this part:

    <os:activity category="Search">
        <os:activityAction context="selection">
            <os:execute action="http://blog.nickbelhomme.com/index.php" method="get">
                <os:parameter name="s" value="{selection}" type="text" />
            </os:execute>
        </os:activityAction>
    </os:activity>

category="Search"

Accelerators are grouped by function so that users can quickly access the task that they want. You can set the default Accelerator for a given category when you install the Accelerator or through the Manage Add-ons dialog box. Examples of services that exist today:

  • Add: del.icio.us, Digg, Reddit
  • Blog: Windows Live Spaces, Windows Live Writer, Blogger
  • Define: Encarta, Wikipedia, Dictionary.com
  • Map: Windows Live Map, Google Maps, Yahoo! Maps, MapQuest
  • Send: Windows Live Mail, Gmail, Yahoo! Mail
  • Translate: Windows Live Translation, AltaVista’s Babel Fish, Google Translation

We have added our custom one: Search

os:execute

In the action parameter we define the uri of the webservice and in the method we define the communication method: post or get.
In this os:execute container we can define as many parameters as we want, but we can only have access to 1 dynamic parameter and that is {selection}. Whatever the user selects will be used here. So if he would select "php" the os:parameter name=s would get a value of php.

I hope this is clear. And congratulations you just build your first accelerator.

The attentive reader was probably already dying to get an answer to the question: "but what about preview screens?" Well I am glad you ask. Let’s get into that now!

Adding a preview

Adding a preview screen to the definition is as simple as adding 1 line. Let’s see if you can find it.

<?xml version="1.0" encoding="UTF-8"?>
<os:openServiceDescription
    xmlns:os="http://www.microsoft.com/schemas/openservicedescription/1.0">
    <os:homepageUrl>http://blog.nickbelhomme.com</os:homepageUrl>
    <os:display>
        <os:name>Search Nick's Blog</os:name>
        <os:icon>http://blog.nickbelhomme.com/favicon.ico</os:icon>
        <os:description>Search on the Nick's Blog</os:description>
    </os:display>
    <os:activity category="Search">
        <os:activityAction context="selection">
            <os:preview action="http://blog.nickbelhomme.com/index.php?s={selection}" /> 
            <os:execute action="http://blog.nickbelhomme.com/index.php" method="get">
                <os:parameter name="s" value="{selection}" type="text" />
            </os:execute>
        </os:activityAction>
    </os:activity>
</os:openServiceDescription>

I’ll bet you found it: 

<os:preview action="http://blog.nickbelhomme.com/index.php?s={selection}" />

Adding this line, automagically enables the preview window.
However if you try out this piece of code, you will see that the entire page is loaded into the small preview window. This is not what we want, so we will have to create a new page. Sepcifically designed to fit the preview window. Creating such a page should be very standard for you.
Having a page specifically designed to fit the preview box gives us complete control on what to show to the user when he sees the preview window.

Installing

To allow the user to install an accelerator is as easy as providing the user a button, or link with a onclick event.

<button id="myButton"
    onclick="window.external.AddService('http://blog.nickbelhomme.com/accelerator')">
    add Search Nick's Blog</button>

Add this piece of code somewhere a user would click it and IE8 will give them an alert box with the request for installation.

”’Attention”’: It seems like you need to define a new category in order to have two different accelerators using the same root domain. This means when you want to install multiple accelerators from one page, you will have to define a different category for each of them. Instead of Search => Search Nick, Search Resume, …

<os:activity category="Search Resume">

Possible selections

VARIABLES          CONTEXT      DESCRIPTION
===========================================
{documentUrl}      All          The href of the document. 
{documentTitle}    All          The title of the document, if available. 
{documentDomain}   All          Effective second-level domain from the document's href. 
{documentHost}     All          Fully qualified domain from the document's href. 
{selection}        selection    Currently selected text. 
{link}             link         The href of the selected link. 
{linkText}         link         The innerText of the selected link. 
{linkRel}          link         The rel of the selected link, if available. 
{linkType}         link         The type of the selected link, if available. 
{linkDomain}       link         Effective second-level domain from the link's href. 
{linkHost}         link         Fully qualified domain from the link's href.

A few things to remember about variables:

  • Always enclose variable names in curly braces {}; for example {selection}. To specify a literal curly brace character in the request, escape it with a backslash, such as \{{selection}\}.
  • Placing a "?" after the variable name indicates that it is optional; for example, {documentTitle?}.
  • If any required (non-optional) variable in the URL template is not available (for example, trying to execute an Accelerator that includes {linkRel} in the action attribute against a link with no rel attribute) the Accelerator cannot be executed and its entry in the shortcut menu is dimmed.
  • If any os:parameter element has an empty value for any reason, it will not appear in the request.

Facebook Example using multiple selections

<?xml version="1.0" encoding="utf-8"?> 
<openServiceDescription xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0"> 
    <homepageUrl>http://www.facebook.com</homepageUrl> 
    <display>  
        <description>Share web content with your Facebook friends.</description>  
        <name>Share on Facebook</name>  
        <icon>http://www.facebook.com/favicon.ico</icon> 
    </display> 
    <activity category="Share"> 
        <activityAction context="selection">  
            <execute method="get" action="http://www.facebook.com/share.php">  
                <parameter name="src" value="iea"/>  
                <parameter name="u" value="{documentUrl}"/>  
                <parameter name="t" value="{selection}" />  
            </execute> 
        </activityAction> 
        <activityAction context="document">  
            <execute method="get" action="http://www.facebook.com/share.php">  
                <parameter name="src" value="iea"/>  
                <parameter name="u" value="{documentUrl}"/>  
                <parameter name="t" value="{documentTitle}" />  
            </execute> 
        </activityAction> 
        <activityAction context="link">  
            <execute method="get" action="http://www.facebook.com/share.php">  
                <parameter name="src" value="iea"/>  
                <parameter name="u" value="{documentUrl}"/>  
                <parameter name="t" value="{linkText}" />  
            </execute> 
        </activityAction> 
    </activity>
</openServiceDescription>

Preview Window from Ebay

the accelerator definition: http://www.ieaddons.com/nl/DownloadHandler.ashx?ResourceId=1444 (check the source)
the preview code: http://ie8.ebay.com/activities/preview/index.php?query=ipod (check the source)

More Information

http://msdn.microsoft.com/en-us/library/cc289775(VS.85).aspx

Ok that are two tutorials in two days. Now it is up to you!
Have fun.
Nick Belhomme