Quickstart: adding an app bar with commands (Windows Store apps using JavaScript and HTML) (Windows)

Language: JavaScript and HTML | VB/C#/C++ and XAML

6 out of 25 rated this helpful - Rate this topic

This quickstart explains how to add an app bar to your Windows Store app using JavaScript. If you use the default styles and markup shown in this example, the commands that you place in the app bar will be styled appropriately. Both image sprites and font glyphs are supported for the icons of the commands.

Prerequisites

Instructions

Hh465309.wedge(en-us,WIN.10).gif Create a new project by using the Blank App template

Launch Microsoft Visual Studio Express 2012 for Windows 8.
From the Start Page tab, click New Project. The New Project dialog opens.
In the Installed pane, expand Templates and JavaScript, and click the Windows Store app template type. The available project templates forJavaScript are displayed in the center pane of the dialog.
In the center pane, pick the Blank App project template.
In the Name text box, enter App bar demo.
Click OK to create the project.

2. Add the app bar definition to the project

Your app bar is defined in an HTML file with a corresponding JavaScript file.

Open Default.html and replace the automatically generated HTML with the following HTML. The app bar should be a direct child of the <body> element. It's a good idea to place global commands before contextual commands in the DOM in order to get the best layout when people snap your app.

This example adds an app bar with one left-aligned command and three right-aligned commands with a separator between them.

HTML


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>App bar demo</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- App_bar_demo references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <script src="/js/appbar.js"></script>
</head>
<body>
    <!-- BEGINTEMPLATE: Template code for an app bar -->
    <div id="appBar" data-win-control="WinJS.UI.AppBar" data-win-options="">
        <button 
            data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{id:'cmdAdd',label:'Add',icon:'add',
                section:'global',tooltip:'Add item'}">
        </button>
        <button 
            data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove',
                section:'global',tooltip:'Remove item'}">
        </button>
        <hr 
            data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{type:'separator',section:'global'}" />
        <button 
            data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{id:'cmdDelete',label:'Delete',icon:'delete',
                section:'global',tooltip:'Delete item'}">
        </button>
        <button 
            data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{id:'cmdCamera',label:'Camera',icon:'camera',
                section:'selection',tooltip:'Take a picture'}">
        </button>
    </div>
    <!-- ENDTEMPLATE -->
    <div id="statusMessage"></div>
</body>
</html>

Hh465309.wedge(en-us,WIN.10).gif Add the Appbar.js file

In Solution Explorer, right-click the js folder, point to Add, and click New Item.
In the Installed pane, expand JavaScript and click JavaScript File in the center pane of the dialog.
In the Name text box, enter Appbar.js.
Click Add to create the file and add it to the project.

Open Appbar.js and add the following code.

JavaScript


(function () {
    "use strict";
    var page = WinJS.UI.Pages.define("default.html", {
        ready: function (element, options) {
            document.getElementById("cmdAdd")
                .addEventListener("click", doClickAdd, false);
            document.getElementById("cmdRemove")
                .addEventListener("click", doClickRemove, false);
            document.getElementById("cmdDelete")
                .addEventListener("click", doClickDelete, false);
            document.getElementById("cmdCamera")
                .addEventListener("click", doClickCamera, false);
            WinJS.log && WinJS.log("To show the bar, swipe up from " +
                "the bottom of the screen, right-click, or " +
                "press Windows Logo + z. To dismiss the bar, " +
                "tap in the application, swipe, right-click, " +
                "or press Windows Logo + z again.", "sample", "status");
        },
    });

    // Command button functions
    function doClickAdd() {
        WinJS.log && WinJS.log("Add button pressed");
    }

    function doClickRemove() {
        WinJS.log && WinJS.log("Remove button pressed");
    }

    function doClickDelete() {
        WinJS.log && WinJS.log("Delete button pressed");
    }

    function doClickCamera() {
        WinJS.log && WinJS.log("Camera button pressed");
    }

    WinJS.log = function (message) {
        var statusDiv = document.getElementById("statusMessage");
        if (statusDiv) {
            statusDiv.innerText = message;
        }
    };
})();

Note You can use only AppBarCommands in an app bar. For a list of icons to use, see AppBarIcon enumeration.

Summary

In this quickstart you added an app bar to your app.

Quickstart: adding an app bar with commands (Windows Store apps using JavaScript and HTML)

Prerequisites

Instructions

2. Add the app bar definition to the project

Summary

Related topics