Integrating IE9 Pinning with Adobe Flash

As you may know Internet Explorer 9 supports desktop integration using pinning. You can learn about pinning from various resources: great article on MSDN, my Windows Summit presentation, Scott’s blog here and of course great demos on ietestdrive.com. Pinning allows web applications to be integrated with Windows and therefore providing user experience such as taskbar integration, jump lists and thumbnail bar button on the task bar preview.

One piece of information missing thus far is how to take advantage of pinned sites directly from Adobe Flash. Taking advantage of pinned sites from Adobe Flash control entails integration of JavaScript pinning APIs implemented by IE9 with ActionScript. Since pinning is only available in IE9, the following will only work when Flash control is hosted in a web page running in IE9. The topic of integrating JavaScript APIs with ActionScript is documented in this kb article. Lets see how we can apply this to IE9 site pinning.

To demonstrate the concept I have created a simple example using Adobe Flex. Adobe Flex allows developers to quickly create rich applications using declarative ActionScript embedded in an MXML file. However the same approach will also work if you are creating a flash movie– FLA file which contains ActionScript. Here is how my example looks, as you can see it is implemented as Flash:

My example implements the following pinned sites features:

1. Overlay icons (shows as a star in this screenshot):

2. Thumbnail bar buttons (back and forward buttons) are shown when you hoover your mouse on top of the site’s icon when site is open in the browser:

3. Jumplist items in custom category (Microsoft.com in the “Custom created items:” category):

In addition, I have included pinning metatags in my sample to define custom favorite icon and custom tasks directly in the index.template.html file.

There are two integration topics which are interesting: calling JavaScript APIs from Action script and calling Action script from JavaScript. Let’s review these topics separately.

Calling JavaScript APIs from ActionScript

You will need to call JavaScript from ActionScript to add jumplist items or to check if site is running in the pinned mode.

Calling a JavaScript API and obtaining its return value is done by using ExternalInterface.call method. This method takes two parameters: a function to call and a parameter to pass to the function. Here is the example of my code in ActionScript:

ExternalInterface.call("addJumpListItem", "init");

addJumpListItem is a function declared as follows in the JavaScript:

function addJumpListItem (param).

It is also possible to check the value returned from JavaScript function by checking return value of the ExternalInterface.call as follows in ActionScript code:

protected var siteMode:Boolean;

siteMode = ExternalInterface.call("checkSiteMode", "");

Of course you have to have corresponding JavaScript function declared as:

function checkSiteMode ()

…which in turn returns either true or false.

Calling ActionScript from JavaScript

You will need to call methods implemented by the Flash control if you want to control do a specific task when user is interactive with the pinned site, such as clicking on the thumbnail bar buttons.

Calling ActionScript from JavaScript takes a few more steps:

1. First I have to register my callback function which JavaScript will call like so:

ExternalInterface.addCallback ("getTextFromJavaScript",

                                getTextFromJavaScript);

2. I have to declare my function as follow:

protected function getTextFromJavaScript(str:String) : void {                                 

…

}            

3. The last step left is to call this function from JavaScript :

function thumbnailclick(btn) {
if (btn.buttonID == prev)
window["LeonTest"].getTextFromJavaScript ("previous");
else if (btn.buttonID == next)
window["LeonTest"].getTextFromJavaScript ("next");
}

“LeonTest” is the ID of the Flash movie passed as a parameter to the Flash player. Usually it is a name of the project, but of course you can change the ID as needed.

There are two interesting details I ran into. When using ActionScript in the declarative MXML, to call an API to setup JavaScript callback:

ExternalInterface.addCallback ("getTextFromJavaScript", getTextFromJavaScript);

The callback needs to be made in the scope of the function. This is why I am calling it in the scope of the handleCreationComplete()function, which is in turn called when application is created.

The other detail is that both the callback function registered with ExternalInterface.addCallback and the JavaScript function called by ExternalInterface.call take only one parameter. This means that if you need to pass multiple parameters, you would need to concatenate them together when you call a function and then split back to the individual parameters. I use this approach when I need to add new jump list item:

protected function addJumpList_clickHandler(event:MouseEvent):void
{
…
ExternalInterface.call("addJumpListItem",
"additem&" + itemUrl.text + "&" + itemText.text);
…
}

As you can see I concatenate the 3 different values (“addItem” string, item’s URL and item’s text) using the & character as a delimiter. I will then split these values in my JavaScript:

function addJumpListItem (param) {
var myValue = param.split ("&");
…
}

Where to go from here?

You may consider improving this for a production by encoding the item’s URL and text to allow both of them to contain & delimiters (with my current approach values won’t be parsed correctly if they contain & delimiters).

You may also improve the code by implementing the rest of the pinning functionality (such as clearing jump list items).

Thank you and I hope you found this blog useful.

DOWNLOAD SAMPLE CODE!