Поделиться через

Добавление панели приложения AppBar с командами (HTML)

  • Статья

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. В случае разработки приложений для Windows 10 см. раздел последняя документация]

В данной статье рассказывается, как добавить панель приложения AppBar в приложение среды выполнения Windows с помощью JavaScript. Если вы будете применять стили и разметку по умолчанию, используемые в данном примере, то команды, добавляемые на панель приложения AppBar, будут иметь соответствующий стиль. В качестве значков команд поддерживаются спрайты и глифы шрифтов.

(Только для Windows) Посмотрите, как работает эта функция, в нашей серии Компоненты приложения от начала до конца: Пользовательский интерфейс Магазина Windows от А до Я

Необходимые условия

Инструкции

1. Создание нового проекта с помощью шаблона пустого приложения

  1. Запустите Microsoft Visual Studio.

  2. На начальной странице щелкните Создать проект. Откроется диалоговое окно Создать проект.

  3. На панели Установлено разверните Шаблоны и JavaScript, а затем выберите шаблон Приложения Магазина. Выберите платформу, на которую необходимо нацелиться (Универсальные приложения, Приложения для Windows или Приложения для Windows Phone), но для данного краткого руководства будет использоваться платформа Универсальные приложения.

  4. На центральной панели выберите шаблон проекта Пустое приложение (универсальные приложения) (пока не нажимайте кнопку ОК).

  5. В текстовом поле Имя введите AppBar demo.

  6. Чтобы создать проект, нажмите кнопку ОК.

2. Добавление определения панели приложения AppBar в проект

Ваша панель приложения AppBar определена в HTML-файле с помощью соответствующего JavaScript-файла (один файл используется для Windows, а второй — для Windows Phone).

Как показано ниже для каждой платформы (Windows и Windows Phone), откройте файл default.html и замените автоматически созданный код HTML указанным ниже кодом HTML. Рекомендуется создавать по одной глобальной панели приложения AppBar для каждого приложения. Эта панель должна быть прямым дочерним элементом для элемента <body>. Кроме того, рекомендуется поместить глобальные команды перед контекстными командами в модели DOM, чтобы обеспечить самый лучший макет, когда пользователи прикрепляют ваше приложение.

В данном примере показано, как добавить панель приложения AppBar с одной командой, выровненной по левому краю, тремя командами, выровненными по правому краю, и разделителем между ними.

Windows — default.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>App_bar_demo.Windows</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.Windows references -->
  <link href="/css/default.css" rel="stylesheet" />
  <script src="/js/default.js"></script>
  <script src="/js/appbar.js"></script> <!-- Not part of the stock template. -->
</head>
<body>
  <ol>
    <li>
      To show the AppBar, swipe up from the bottom of the screen, swipe down from
      the top of the screen, right-click, or press Windows&nbsp;Logo&nbsp;+&nbsp;Z.
    </li>
    <li>
      Click or tap one of the following AppBar buttons: <strong>Camera</strong>,
      <strong>Add</strong>, <strong>Remove</strong>, or <strong>Delete</strong>
    </li>
    <li>
      To dismiss the AppBar, click or tap in the application, swipe, right-click,
      or press Windows&nbsp;Logo&nbsp;+&nbsp;Z again.
    </li>
  </ol>
  <!-- BEGINTEMPLATE: Template code for an AppBar -->
  <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:'primary', tooltip:'Add item'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdRemove', label:'Remove', icon:'remove', section:'primary', tooltip:'Remove item'}"></button>
    <hr data-win-control="WinJS.UI.AppBarCommand"
        data-win-options="{type:'separator',section:'primary'}" /> <!-- SEPARATOR NOT AVAILABLE ON PHONE prior to WinJS 4.0 -->
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdDelete', label:'Delete', icon:'delete', section:'primary', tooltip:'Delete item'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdCamera', label:'Camera', icon:'camera', section:'secondary', tooltip:'Take a picture'}"></button>
  </div>
  <!-- ENDTEMPLATE -->
  <div id="statusMessage"></div>
</body>
</html>

Внимание  Пример кода ниже можно использовать только для Windows Phone 2.1 и более ранней версии. При использовании WinJS 4.0 и более поздней версии следует применять один и тот же код HTML для панели приложения AppBar и в приложениях Windows, и в приложениях Windows Phone.

 

Только для Windows Phone 2.1: файл default.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>App_bar_demo.WindowsPhone</title>

  <!-- WinJS references -->
  <!-- At runtime, ui-themed.css resolves to ui-themed.light.css or ui-themed.dark.css
  based on the user’s theme setting. This is part of the MRT resource loading functionality. -->
  <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.Phone references -->
  <link href="/css/default.css" rel="stylesheet" />
  <script src="/js/default.js"></script>
  <script src="/js/appbar.js"></script> <!-- Not part of the stock template. -->
</head>
<body class="phone">
  <p>
    Tap the Add, Remove, or Delete AppBar button, or swipe the ellipsis and tap the Camera AppBar button.
  </p>
  <!-- BEGINTEMPLATE: Template code for an AppBar -->
  <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:'primary', tooltip:'Add item'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdRemove', label:'Remove', icon:'remove', section:'primary', tooltip:'Remove item'}"></button>
    <!-- <hr data-win-control="WinJS.UI.AppBarCommand"
        data-win-options="{type:'separator',section:'primary'}" /> SEPARATOR NOT AVAILABLE ON PHONE -->
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdDelete', label:'Delete', icon:'delete', section:'primary', tooltip:'Delete item'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdCamera', label:'Camera', icon:'camera', section:'secondary', tooltip:'Take a picture'}"></button>
  </div>
  <!-- ENDTEMPLATE -->
  <div id="statusMessage"></div>
</body>
</html>

Hh465309.wedge(ru-ru,WIN.10).gif Добавление файла Appbar.js

  1. В обозревателе решений щелкните правой кнопкой мыши папку js, нажмите кнопку Добавить и выберите Создать элемент.
  2. На панели Установленные разверните узел JavaScript и затем выберите Файл JavaScript на центральной панели диалогового окна.
  3. В текстовом поле Имя (рядом с нижней частью диалогового окна) введите Appbar.js.
  4. Чтобы создать файл и добавить его в проект, нажмите кнопку Добавить.

Откройте файл Appbar.js (если необходимо) и добавьте следующий код.

(function () {
  "use strict";

  WinJS.UI.Pages.define("default.html", {
    ready: function (element, options) {
      // Use element.querySelector() instead of document.getElementById() to ensure that the correct default.html page is targeted:
      element.querySelector("#cmdAdd").addEventListener("click", doClickAdd, false);
      element.querySelector("#cmdRemove").addEventListener("click", doClickRemove, false);
      element.querySelector("#cmdDelete").addEventListener("click", doClickDelete, false);
      element.querySelector("#cmdCamera").addEventListener("click", doClickCamera, false);
    }
  });

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

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

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

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

  WinJS.log = function (message, messageType) {
    var statusDiv = document.getElementById("statusMessage"); // For a multi-page app, always ensure that each element ID is unique (across all pages).

    if (statusDiv && messageType === "status") {
      statusDiv.innerText = "STATUS: " + message;
    }
  };
})();

Файл Appbar.js вводится в два файла default.html через их разметку <script src="/js/appbar.js"></script>.

3. Примечания для разработчиков

  • На панели приложения AppBar можно использовать только объект AppBarCommands. Список значков, которые можно использовать, см. в перечислении AppBarIcon.
  • Панель приложения AppBar — это исчезающее наложение. Соответственно, она всегда будет закрывать некоторую часть экрана.
  • Как и все исчезающие наложения, панель приложения AppBar всегда должна быть прямым дочерним элементом для элемента <body>.
  • Чтобы панель приложения AppBar не перекрывала другое содержимое экрана, зарезервируйте место в верхней или нижней части экрана для закрытой панели приложения AppBar. В этом случае только открытая панель приложения AppBar будет перекрывать другое содержимое.
  • Вы можете управлять высотой закрытой панели приложения AppBar с помощью ее свойства closedDisplayMode.
  • Верхним и нижним положением панели приложения AppBar можно управлять с помощью ее свойства placement.

Сводка

В данном кратком руководстве мы добавили панель приложения AppBar в приложение.

Связанные разделы

WinJS.UI.AppBar

WinJS.UI.AppBarCommand

AppBarIcon