Adding an application bar to an HTML/JS app

I recently created a post on Adding an application bar to a XAML/C# application on Windows 8. This is fine if you’re a C# dev. But, how do you do this on the Windows developer preview if you are using HTML/JavaScript? This post will try and concisely cover how to do this.
What’s the Application Bar?
The application bar is a show/hide control that is very reminiscent of the Menu bar and Ribbon in Windows 7.
You can see the app bar in apps that ship in the Windows 8 Developer Preview (total aside, free developer preview, yay!).
The app bar is a control that lets you assign visual buttons to actions in your application. In the screenshot on stocks, there are three items: Add Stock, Remove Stock, Pin Stock. As you can imagine, this is a very convenient means to setup pretty buttons in your Windows 8 apps. Let’s dive into the code!
Add the HTML markup to your app
First, you will need to add some HTML to your app that will present the UI for the app bar. If you’re just starting from the “blank” template as I was and haven’t yet refactored out your UI from default.html, you should add this code to the body of your page right before the closing <body> tag. Note: this code was taken from the TwilioCollage project that developed to learn about working with RESTful web services from HTML5/JS apps. The following markup will create the buttons and a div that will behave as your app bar:
 <div id="theAppBar" data-win-control="WinJS.UI.AppBar" aria-label="Command Bar" data-win-options="{position:'bottom', transient:true, autohide:0, lightDismiss:false}" >       
   <div>
     <button id="home">
       <span>&amp;#xE10F;</span><span>Home</span>
     </button>
     <hr />
     <button id="glow">
       <span>&amp;#x2383;</span><span>Glow</span>
     </button>
     <hr />
    <button id="reset">
      <span>&amp;#x260E;</span><span>Reset</span>
    </button>
   </div>
 </div>
The HTML is actually pretty simple. All it does is create a nice div for the app bar using the app bar control that ships with the SDK.
Hooking up the app bar buttons to code
After you have created the UI elements, it’s time to connect the buttons to code. First, you will need to add listeners to the buttons. This is done in the WinJS.Application.onmainwindowactivated function. The following code will hook up the 3 buttons that were created in the UI HTML:
    WinJS.Application.onmainwindowactivated = function (e) {
        if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            WinJS.UI.process(document.getElementById('theAppBar'))
                .then(function () {
                document.getElementById('home').addEventListener('click', homeClick, false);
                document.getElementById('glow').addEventListener('click', toggleGlow, false);
                document.getElementById('reset').addEventListener('click', callAndReset, false);
            });

 

Nothing too exciting happening there either. The buttons are looked up by id and a click handler is created with the appropriate function name. Just as an example, the following code shows the implementation of the callAndReset function which uses the XHR object to perform a RESTful Calls API on the Twilio service:
function callAndReset() {
        // URI string building
        var URI      = "";
        var baseURL  = "https://api.twilio.com/2010-04-01/";
        var acctPath = "Accounts/" + acctSID + "/";
        var action   = "Calls";

        // Call handler URL
        var callHandler = svcBaseURL + "handle_call.php";

        var params   = "From=" + fromNum;
        params      += "&amp;To="   + toNum;
        params      += "&amp;Url="  + callHandler;

        URI = baseURL + acctPath + action;

        WinJS.xhr({
            type: "POST",
            url:  URI,
            user: acctSID,
            password: token,
            headers: { 'Content-type': 'application/x-www-form-urlencoded'},
            data : params
        }).then(
            function (request) {
                // Nothing to do here...
            },
            function (request) {
                // HANDLE error case here or, could just retry...
                // setTimeout(function (){ callAndReset(); }, 10000);
            }
        );
    }

Thanks for reading, feel free to ask questions if you have any. Also, if you’re looking for a C# example for adding an app bar check out my last post.  For a deeper dive into the TwilioCollage app, check my last post on it.