Language: HTML | XAML

Quickstart: Adding an app bar with commands (HTML)

Applies to Windows and Windows Phone

This quickstart explains how to add an app bar to your Windows Runtime 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.

(Windows only) See this feature in action as part of our App features, start to finish series:  Windows Store app UI, start to finish

Prerequisites

Instructions

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

  1. Launch Microsoft Visual Studio.

  2. From the Start Page tab, click New Project. The New Project dialog opens.

  3. In the Installed pane, expand Templates and JavaScript, and click the Store apps template type. The available project templates forJavaScript are displayed in the center pane of the dialog.

  4. In the center pane, pick the Blank App project template for the platform that you want to target (Windows, Windows Phone, or both).

  5. In the Name text box, enter App bar demo.

  6. 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.

default.html Windows


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

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.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>



default.html Windows Phone


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

    <!-- WinJS references -->
    <link href="/css/ui-themed.css" rel="stylesheet" />
    <script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
    <script src="//Microsoft.Phone.WinJS.2.1/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).gifAdd the Appbar.js file

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

Open Appbar.js and add the following code.


(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.

Related topics

WinJS.UI.AppBar
WinJS.UI.AppBarCommand
AppBarIcon

 

 

Show:
© 2014 Microsoft