Windows 8 App Bar using HTML

by sunil ravulapalli /29. December 2011 22:08 /windows8 /Comments (0)

This code was tested on Windows 8 developer preview and may be outdated by the time future versions are released.

Once you create a Blank solution your default.html should look like the code below.
The new parts are the scripts tags and the control div as highlighted.
The scripts files are needed for the App Bar control to work. The actual control is the div with the attribute data-win-control="WinJS.UI.AppBar".

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>MyAppBar</title>
    <!-- WinJS references -->
    <link rel="stylesheet" href="/winjs/css/ui-dark.css" />
    <script src="/winjs/js/base.js"></script>
    <script src="/winjs/js/wwaapp.js"></script>
    <script src="winjs/js/ui.js"></script>
    <script src="winjs/js/binding.js"></script>
    <script src="winjs/js/controls.js"></script>
    <script src="winjs/js/animations.js"></script>
    <!-- MyAppBar references -->
    <link rel="stylesheet" href="/css/default.css" />
    <script src="/js/default.js"></script>
</head>
<body>
     <div id="mybar" data-win-control="WinJS.UI.AppBar" data-win-options="{position:'bottom', transient:true, autoHide:0, lightDismiss:true}">
       <div class="win-right">
            <button class="win-command" id="settingsButton">
                <span style="background-image: url('images/smalllogo.png')" class="win-commandicon"></span>
                <span class="win-label">Settings</span>
            </button>
        </div>
    </div>
</body>
</html>

The default.js file should like below. The highlighted(6 to 8) lines are required for WinJS controls to work.

Lines 13 to 16 are used to wire up the button in the App Bar button with a function.

(function () {
    'use strict';
    // Uncomment the following line to enable first chance exceptions.
    // Debug.enableFirstChanceException(true);
 
    document.addEventListener("DOMContentLoaded", function () {
        WinJS.UI.processAll();
    }, false);
 
    WinJS.Application.onmainwindowactivated = function (e) {
        if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            // TODO: startup code here
            var settingsButton = document.getElementById('settingsButton');
             settingsButton.addEventListener('click', function () {
              WinJS.Navigation.navigate('settings.html');
             });
        }
    }
 
    WinJS.Application.start();
})();
blog comments powered by Disqus