What are BingBar applications

The Bing Bar for Internet explorer is packaged with standard applications shown on the picture (like FaceBook, BingRewards, Weather, ..)

The buttons on the bar, called Bing Bar Applications can be developed in HTML + javascript and this post should show how you can create your own like this sample one. To demonstrate collaboration with Internet Explorer, when you click on the Hello World text, you get Bing homepage opened in the new IE tab.

Bing Bar Applications basics

Applications are packed in zip packages having predefined structure and manifest file. Each package has its internal ID (a GUID without dashes). You can see the default Facebook BingBar app structure by downloading it from this link:

http://az15112.vo.msecnd.net/apps/facebook_76c7b5062c4e4be69d843ace834517ec/versions/7.0.853/ar-ploc-sa_et-al/facebook.bingbarapp

Applications are developed in html + javascript. They have loosely coupled dependencies as services. An application can provide or consume multiple services. Because they runs in local context, they can take advantage of local filesystem and also services provided by BingBar.

Default package structure shows this picture:

Applications supports internationalization and by default the culture is en-us. The localized content is stored in the loc folder.

In the root of the package is the manifest file and also default .html code. For the Facebook the root contains two files

  • appmanifest.xml
  • facebook.html

Application manifest is also in the localization resources directory (loc).

AppManifest.xml file is the starting point

For the test app I have created for this post, the manifest looks like following:

<?xml version="1.0"?>
<AppManifest Name="TestApp" Publisher="Microsoft Corporation" Copyright="© 2011" Description="Test" Version="7.0.822" MinRuntimeVersion="7.0" MaxRuntimeVersion="7.0" Locale="EN-US" TargetFolder="TestApp" Id="63630244A02F4E4CB6CB9B09B2F886F4">
	<Button Icon="images\icons\tempIcon.png" Tooltip="Teest"/>
	<AppServices>
		<Script>js\json2.js</Script>
		<Script>js\serviceutility.js</Script>
		<Script>js\instrumentation.js</Script>
		<Script>js\common.js</Script>
		<Script>js\service.js</Script>
	</AppServices>
	<AppUI Html="helloworld.html" Width="546" Height="308"/>
</AppManifest>

Where

  • AppManifest Name describes name of your application
  • Button Icon is icon of your bar app
  • AppUI Html is the html file being rendered when your application is opened by clicking on the button. the file I have used is helloworld.html and by default it lies in root of the package.
  • AppManifest ID attribute is the GUID of your application without delimeters.

Services element describes required service dependecies.

Markup and JavaScript parts of the app

As any other html page, which Bing Bar App is it uses HTML and JavaScript (and images, CSS etc..) So you “could” manually open default html page, which is described in manifest (helloworld.html) in our sample. Only difference is that it uses other BingBar JavaScript dependencies (from AppServices element), which wont be loaded just by opening the HTML in IE.

In this small sample, I have just prepared some DIV elements with IDs and JavaScript called helloworld.js is going to use jQuery, which might be a part of your scripts to work with the app. I am just handling click event of my content element to open another page using this JavaScript method:

    $("#content").click(function (e)
    {
        Instrumentation.trace(InstrumentationEvents.clickCurrentConditions);
        instance._navigatePage('www.bing.com')
    });

Which is pretty standard jquery method for handling click. I have used another method for opening a page in IE tab, which looks like this:

HelloWorldApp.prototype._navigatePage = function (url)
{
    bingclient.ui.browser.session(bingclient.context.browserSessionId).create(encodeURI(url));
    bingclient.flyout.close();
}

The bingclient object is an service for bing bar related operations.

How to deploy the testing application

BingBar stored all its applications in local user path similar to this one:

c:\Users\Martin\AppData\Local\Microsoft\BingBar\Apps\TestApp_63630244a02f4e4cb6cb9b09b2f886f4

Please mention, that the application folder name has application ID (defined in manifest above) in it.

To deploy the testing app, just extract the attached zip with sample into your

c:\Users\[USERNAME]\AppData\Local\Microsoft\BingBar\Apps\

and then open Internet Explorer with installer BingBar, click on the Three points in the right side to add new Application and select Test App and move it to toolbar.

Digging deeper into deployment

The system is currently using Microsoft cloud servers to check for new BingBar apps, but they actually have pretty much the standard applications deployed.
Currently available applications list in xml form in the cloud can be discovered by opening this url:
http://65.52.193.252/catalogs/getcatalog?Version=7.0.822.0&Market=en-us&Brand=BB07&Flight=prod-en-us_prod&FlightRevision=0&Id=12381649D8CF4400A8073830FD52882E-1

The available applications are structured as so called catalog.xml format, which is what you can see on the link above. Catalog has its local copy and on each start of IE with BingBar is checked that location to get new applications.

About these ads

3 thoughts on “What are BingBar applications

  1. 1 – It would be nice to have skydrive running as an application on Bingbar
    2 – facebook login should be automatic pretty much like mail login

    Thank you

    Reply
    • Hi iliya, I Agree that skydrive is a good candidate for new app. Lets see what MS will come with.
      To your second point, I guess that would be just minimal change in the app, hopefully, they would bing it soon.

      Reply
  2. For fun, in a recent version of Bing Bar, open the Settings application (the “…” button on the right) and once the flyout is open, click near the upper-right edge of the flyout.

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s