Краткое руководство: добавление панели навигации (NavBar)

Статья
12/12/2015

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

Информация о добавлении панели навигации (также называемой "верхней панелью приложения") в приложение Магазина Windows на языке JavaScript."" Библиотека Windows для JavaScript (WinJS) включает элементы управления NavBar, NavBarCommand и NavBarContainer, при помощи которых можно создать приложение с одностраничной навигацией.

Примечание Элементы управления NavBar, NavBarCommand и NavBarContainer впервые появились в Windows 8.1. В Windows 8 для создания панели навигации используйте элемент управления AppBar и свойство placement.

Большинство шаблонов Microsoft Visual Studio 2013 для приложений Магазина Windows реализуют схему навигации, поэтому вам не нужно решать эту задачу. Эти шаблоны, в том числе шаблон элемента управления страницей (см. раздел Добавление элементов управления страницей), включают элемент управления BackButton, который позволяет реализовать переходы назад.

Примечание Приложения Магазина Windows обычно используют один из двух шаблонов навигации (одноуровневую и иерархическую). Не рекомендуется использовать объект BackButton в приложениях с одноуровневой навигацией. Подробнее: Схемы навигации.

В приведенном здесь примере используется шаблон "Пустое приложение" Microsoft Visual Studio. Если вы применяете стили и разметку по умолчанию, то команды, добавляемые в элемент управления NavBar, будут стилизованы соответствующим образом. Это относится к спрайтам изображений и к глифам шрифтов для значков команд.

Справку по выбору оптимальной схемы навигации для конкретного приложения см. в разделе Схемы навигации.

Шаблоны одноуровневой навигации и иерархической навигации в действии можно посмотреть в нашей серии Компоненты приложения от начала до конца.

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

Инструкции

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

Запустите Visual Studio 2013.

Примечание При первом запуске Visual Studio вам будет предложено получить лицензию разработчика.
Выберите пункты Файл > Создать проект или выберите команду Создать проект на вкладке Начальная страница. Откроется диалоговое окно Создание проекта.
На панели Установленные разверните узлы Шаблоны и JavaScript, а затем выберите тип шаблона Приложение для Магазина Windows. Шаблоны проектов для JavaScript отображаются на центральной панели диалогового окна.
На центральной панели выберите шаблон проекта Пустое приложение.
В текстовом поле Имя введите имя для вашего проекта. В примерах в этом разделе используется имя Nav bar demo.
Чтобы создать проект, нажмите кнопку ОК.

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

Панель навигации можно определить либо декларативно на HTML-странице, либо во время выполнения в файле JavaScript, загружаемом со страницей. В этом примере панель навигации создается декларативно в разметке HTML.

Откройте файл default.html и вставьте следующий HTML-код в элемент body. Панель навигации должна быть прямым потомком элемента body.

В данном примере объявлен элемент управления NavBar, содержащий объект NavBarContainer с двумя элементами управления NavBarCommand.

Примечание Хотя это допустимо, мы не рекомендуем добавлять элементы управления NavBarCommand как непосредственные дочерние элементы NavBar. Это приводит к нарушению макета кнопок и специальных возможностей клавиатуры.


<div id="navBar" data-win-control="WinJS.UI.NavBar">
  <div id="globalNav" data-win-control="WinJS.UI.NavBarContainer">
    <div data-win-control="WinJS.UI.NavBarCommand"
      data-win-options="{
                    label: 'Home',
        tooltip: 'Take me home',
        id:'homeButton',
        icon: WinJS.UI.AppBarIcon.home,
        location: '/pages/home/home.html',
      }">
    </div>
    <div data-win-control="WinJS.UI.NavBarCommand"
      data-win-options="{
                    label: 'Page 2',
        tooltip: 'Take me to Page 2',
        id:'page2Button',
        icon: WinJS.UI.AppBarIcon.page,
        location: '/pages/page2/page2.html',
      }">
    </div>
  </div>
</div>

3. Добавление кода обработчика навигации

Объявленные в разметке объекты NavBarCommand по определению вызывают события навигации (Navigation.onnavigating и Navigation.onnavigated), поэтому нет необходимости добавлять код обработчика в объекты NavBarCommand. Вместо этого следует добавить код обработчика в события Navigation.onnavigating или Navigation.onnavigated в файле default.js, связанном с файлом default.html.

В данном примере добавляется обработчик события Navigation.onnavigated. Обработчик получает URL-адрес расположения, куда выполняется переход, от объекта события (определенного в свойстве location атрибута data-win-options объекта NavBarCommand). Затем обработчик очищает узел содержимого (элемент управления страницей) и отрисовывает новую страницу в узле.

В окне Solution Explorer (Обозреватель решений) откройте файл default.js в папке js.

В default.js замените код по умолчанию следующим кодом.


(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    var nav = WinJS.Navigation;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // Add your initialization code here.
            } else {
                // Restore app state here.
            }

            var start = WinJS.UI.processAll().
                then (function () {
                    return nav.navigate("/pages/home/home.html");
                                                                });

            args.setPromise(start);
        }
    };

    app.oncheckpoint = function (args) {
        // Add app suspension code here.
    };

    nav.onnavigated = function (evt) {
        var contentHost = 
            document.body.querySelector("#contenthost"),
            url = evt.detail.location;

        // Remove existing content from the host element.
        WinJS.Utilities.empty(contentHost);

        // Display the new page in the content host.
        WinJS.UI.Pages.render(url, contentHost);
    }

    app.start();
})();

4. Добавление двух страниц, между которыми будет выполняться переход

Эти две страницы можно добавить вручную или при помощи шаблона элемента управления страницей Visual Studio, который содержит всю необходимую разметку и код JavaScript.

Dn376409.wedge(ru-ru,WIN.10).gif Добавление новых страниц в проект вручную

В обозревателе решений щелкните правой кнопкой мыши имя проекта (Nav bar demo) и выберите пункты Добавить, Новая папка. Назовите новую папку "pages".
Правой кнопкой мыши щелкните созданную папку pages и выберите пункты Добавить, Новая папка. Назовите новую папку "home".
Создайте вторую папку в папке pages. Назовите эту папку "page2".
Правой кнопкой мыши щелкните папку home и выберите пункты Добавить, Новый файл HTML. В диалоговом окне Добавление нового элемента дайте этому файлу имя "home.html" и выберите команду Добавить.

Замените HTML-код по умолчанию следующим кодом.
```
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <p>Home</p>
</body>
</html>
```
Повторите предыдущий шаг для папки page2. Назовите файл "page2.html".

Замените HTML-код по умолчанию следующим кодом.
```
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <p>Page2</p>
</body>
</html>
```

В качестве альтернативы можно использовать шаблоны элементов JavaScript для приложений Магазина Windows в Visual Studio.

Dn376409.wedge(ru-ru,WIN.10).gif Добавление новых страниц в проект при помощи шаблона элемента управления страницей

Создайте папку pages с вложенными папками home и page2, как описано выше.
Щелкните правой кнопкой мыши папку home и выберите пункты Добавить > Новый элемент.... Откроется диалоговое окно Добавление нового элемента.
Выберите в списке Элемент управления страницей. В текстовом поле Имя введите "home.html".
Нажмите кнопку Добавить. В обозревателе решений появится новый объект PageControl.

Новый объект PageControl включает три файла: home.css, home.html и home.js.

Примечание HTML-файлы, добавленные таким способом, содержат код для элемента управления BackButton. Как упоминалось ранее, если вы используете шаблон одноуровневой навигации, не рекомендуется использовать объект BackButton. Поэтому можно смело удалить этот код. Подробнее: Схемы навигации.
Щелкните правой кнопкой мыши папку page2 и выберите пункты Добавить > Новый элемент.... Откроется диалоговое окно Добавление нового элемента.
Выберите в списке Элемент управления страницей. В текстовом поле Имя введите "page2.html".
Нажмите кнопку Добавить. В обозревателе решений появится новый объект PageControl.

Новый объект PageControl имеет три файла: page2.css, page2.html и page2.js.

5. Проверка приложения

Чтобы запустить приложение, нажмите клавишу F5. Приложение отображает страницу Home.
После запуска щелкните в любом месте приложения правой кнопкой мыши, чтобы вывести панель навигации, и выберите Page2.

В элементе управления страницей приложения появляется страница Page2.
Снова щелкните правой кнопкой мыши, чтобы вывести панель навигации, и выберите Home.

В элементе управления страницей приложения появляется страница Home.

Краткая сводка и дальнейшие действия

В данном кратком руководстве вы добавили в приложение объект NavBar с одним объектом NavBarContainer и четырьмя объектами NavBarCommand. Кроме того, вы добавили простую функцию обработчика события Navigation.onnavigated.

Пример с иерархической навигацией и более сложным макетом см. в нашем следующем учебнике по элементу управления Hub.

Краткое руководство: использование элемента управления "Главный раздел" для макета и навигации