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

Статья
12/12/2015

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

Информация о том, как добавить элемент управления Hub в приложение Магазина Windows на JavaScript.

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

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

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

Инструкции

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

Запустите Microsoft Visual Studio Express 2013 для Windows.
На вкладке Start Page (Начальная страница) щелкните New Project (Создать проект). Откроется диалоговое окно New Project (Создание проекта).
На панели Installed (Установлено) разверните узлы Templates (Шаблоны) и JavaScript, а затем выберите шаблон Windows Store app (Приложение Магазина Windows). Шаблоны проектов для JavaScript отображаются на центральной панели диалогового окна.
На центральной панели выберите шаблон Blank App (Пустое приложение).
В текстовом поле Name (Имя) введите Hub demo.
Чтобы создать проект, нажмите кнопку ОК.

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

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

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

В следующем примере главный раздел добавляется декларативно с помощью трех объектов HubSection. Второй объект HubSection является первым видимым разделом в Hub. Используйте стили по умолчанию или напишите собственный код каскадных таблиц стилей (CSS) для элементов управления Hub и HubSection.


<div data-win-control="WinJS.UI.Hub" id="hub"
    data-win-options="{
        sectionOnScreen : '1',
    }">
    <div data-win-control="WinJS.UI.HubSection"
        data-win-options="{
            header: 'Ancient Greek authors',
            isHeaderStatic: true
        }">
        My favorite authors of Ancient Greek (Homeric, Attic, Ionic):
        <ul>
            <li>Homer</li>
            <li>Herodotus</li>
            <li>Thucydides</li>
            <li>Plato</li>
        </ul>
    </div>
    <div data-win-control="WinJS.UI.HubSection"
        data-win-options="{
            header: 'Latin authors'
        }">
        <div>
            My favorite authors of works in Classical Latin:
            <ul>
                <li>Marcus Tullius Cicero</li>
                <li>Caius Julius Caesar</li>
                <li>Publius Virgilius Maro (Virgil)</li>
                <li>Titus Livius Patavinus (Livy)</li>
            </ul>
        </div>
    </div>
    <div data-win-control="WinJS.UI.HubSection"
        data-win-options="{
            header: 'English authors',
            isHeaderStatic: false
        }">
        My favorite authors of works in Middle and Early Modern English: 
        <ul>
            <li>Geoffrey Chaucer</li>
            <li>William Shakespeare</li>
            <li>Christopher Marlowe</li>
        </ul>
    </div>
</div>

3. Добавление кода обработки событий главного раздела

В этом примере два объекта HubSection имеют динамические заголовки. Если их щелкнуть, по умолчанию возникает событие Hub.onheaderinvoked. Для установки динамических или статических заголовков используйте свойство HubSection.isHeaderStatic, для которого по умолчанию задано значение false.

В обработчике событий Hub.onheaderinvoked объект HubSection или индекс вызванного объекта HubSection можно извлечь из аргументов события (индекс на базе нуля).

В следующем примере добавляется обработчик события Hub.onheaderinvoked. Обработчик получает индекс вызванного объекта HubSection и устанавливает значение Hub.sectionOnScreen.

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

В файле default.js замените существующий код следующим кодом:


(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    var hub;

    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.
            }
            args.setPromise(WinJS.UI.processAll());
        }

        // Get the hub control from the HTML page and
        // add a handler to the headerInvoked event.
        hub = WinJS.Utilities.query("#hub")[0];
        hub.winControl.onheaderinvoked = onHeaderInvoked;
    };

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

    // When a HubSection header is clicked, call this code to
    // make the section completely visible within the hub.
    function onHeaderInvoked(args) {
        hub.winControl.sectionOnScreen = args.detail.index;
    }

    app.start();
})();

Переведите среду выполнения в режим Имитатор и нажмите F5, чтобы запустить приложение.
Измените разрешение окна имитатора, чтобы последний раздел главного раздела частично находился за пределами экрана, когда страница главного раздела сдвинута влево.
Щелкните заголовок последнего частично видимого раздела главного раздела, чтобы сдвинуть страницу главного раздела и полностью отобразить его.

4. Навигация по приложению "Главный раздел"

В приложении "Главный раздел" реализован иерархический шаблон навигации. Дополнительную информацию о вариантах навигации в приложениях Магазина Windows см. в разделе Схемы навигации.

В приложениях, которые включают большое количество содержимого или много различных разделов содержимого, обычно необходимо предоставить пользователям способ быстрого возврата по тому пути, по которому они пришли. В заголовках и разделах приложения "Главный раздел" можно разместить элементы управления BackButton. На каждой странице можно разместить кнопку "Назад", которая остается скрытой, пока вы не переходите на эту страницу с другой, после чего кнопка "Назад" становится видимой на этой странице. Элемент управления BackButton можно создать декларативно в HTML страницы или во время выполнения с помощью JavaScript.

Элемент управления BackButton не требует особых усилий. Фактически большая часть кода, связанного с функцией навигации с помощью кнопки "Назад", встроена в платформу WinJS. Вам остается только объявить элемент управления в разметке HTML, как показано ниже.

<!DOCTYPE html>
<html>
<head>
    <title>home</title>
</head>
<body>
    <header role="banner">
        <button data-win-control="WinJS.UI.BackButton"></button>
        <h1 class="titlearea">Home</h1>
    </header>
</body>
</html>

Без применения стилей элемент управления BackButton отображается в отдельном блоке над заголовком страницы. Чтобы реализовать стиль Windows, в котором кнопка "Назад" находится на одной строке с заголовком, необходимо добавить в проект пользовательский CSS. В частности, необходимо создать сетку в родительском элементе (тег <section>), которая размещает два элемента рядом.

В default.css (в папке css ) добавьте следующий код CSS, чтобы выровнять макет элемента управления BackButton и заголовок на странице.

#contenthost {
    height: 100%;
    width: 100%;
}

header[role=banner] {
    display: -ms-grid;
    -ms-grid-columns: 37px 83px 1fr;
    -ms-grid-rows: 1fr;
}

    header[role=banner] button {
        -ms-grid-column: 2;
        margin-top: 57px;
    }

    header[role=banner] h1 {
        -ms-grid-column: 3;
        margin-top: 37px;
    }

Сводка

В этом кратком руководстве вы добавили элемент управления Hub с помощью трех объектов HubSection. Кроме того, вы добавили простую функцию обработчика в событие Hub.onheaderinvoked.

Мы также добавили элемент управления BackButton на каждую страницу приложения.