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.

Visual Studio debugging mode macros

The situation – you are in a debugging session, and have some local variables. Local variables and warlking throught the stack is not good enough for you. You would like some way how to display some list of items in a nice form.

Fortunatelly, the Visual Studio macros can be used in the running debugging session. Lets say I have my sesssion like this in my Factorial calculating method:

I know it is possible to display local variables and using Call Stack go to the n-th recursion and find arguments in there, but I can display all that info using single VS VBA macro.

To open Macro IDE, I can hit Alt+F11, or Go to the Tools > Macros > Macro IDE.

Open Module1 and insert following code in there:


    Sub DumpExecPath()
        Dim currentStackFrame As EnvDTE.StackFrame
        currentStackFrame = DTE.Debugger.CurrentStackFrame

        For Each frame As EnvDTE.StackFrame In DTE.Debugger.CurrentThread.StackFrames
            If (frame.Module = "") Then Exit For
            DumpExecPathStackFrame(frame)
        Next

    End Sub

    Sub DumpExecPathStackFrame(frame As EnvDTE.StackFrame)
        Dim outputWindow As EnvDTE.OutputWindow
        outputWindow = DTE.Windows.Item(EnvDTE.Constants.vsWindowKindOutput).Object

        Dim a As String
        For Each arg As EnvDTE.Expression In frame.Arguments
            If (Len(a) > 0) Then a = a + ", "
            a = a + arg.Name + " = " + arg.Value
        Next

        outputWindow.ActivePane.OutputString(frame.FunctionName + "(" + a + ")" + Environment.NewLine)
    End Sub

After you save your macro you can return to Visual Studio. Now, when you open a debugging session, you can take advantage of written macro, when you go to the Command Window, write down full name of macro to execute it:

>Macros.MyMacros.Module1.DumpExecPath

Because we have used Output Window to write our Macro results, we need to switch to it to see results:

You can take advantage of macros to display also local variables using this code:

 


    Sub DumpLocals()
        Dim outputWindow As EnvDTE.OutputWindow
        outputWindow = DTE.Windows.Item(EnvDTE.Constants.vsWindowKindOutput).Object

        Dim currentStackFrame As EnvDTE.StackFrame
        currentStackFrame = DTE.Debugger.CurrentStackFrame

        outputWindow.ActivePane.OutputString("*Dumping Local Variables*" + vbCrLf)
        For Each exp As EnvDTE.Expression In currentStackFrame.Locals
            outputWindow.ActivePane.OutputString(exp.Name + " = " + exp.Value.ToString() + vbCrLf)
        Next
    End Sub

Enjoy ..