Краткое руководство. Добавление параметров приложения с использованием библиотеки Windows для JavaScript

Статья
12/12/2015

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

В этом кратком руководстве описана реализация контракта "Параметры" с помощью HTML и класса SettingsFlyout для библиотеки Windows для JavaScript.

См. эту функцию в действии в нашей серии Функции приложений от А до Я: Пользовательский интерфейс Магазина Windows от А до Я

Введение

В следующем примере в двух отдельных HTML-файлах будут определены два всплывающих элемента "Параметры": Defaults (Умолчания) и Help (Справка). Будут обработаны всплывающие элементы "Параметры", и с помощью JavaScript будет заполнена панель "Параметры".

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

1. Создание пустого приложения

Создайте пустое приложение "Hello, world", как описано в разделе Создание приложения "Hello, world". Вам нужно выполнить только два первых шага:

Создайте новый проект в Visual Studio.
Запустите приложение.

2. Определение всплывающего элемента "Параметры по умолчанию"

Не выходя из Visual Studio, создайте HTML-файл с именем DefaultSettings.html:

В области обозревателя решений в решении "HelloWorld" щелкните правой кнопкой мыши проект HelloWorld.
Выберите Добавить, Создать папку.
Назовите новую папку "html".
Правой кнопкой мыши щелкните папку и выберите пункты Добавить, Новый файл HTML.
Выберите пункт HTML-страница, введите имя "DefaultSettings.html" и нажмите кнопку Добавить.

Скопируйте и вставьте следующий код в содержимое нового файла.


<!doctype HTML>
<html>
    <head>
        <title>App defaults Settings flyout</title>
    </head>
    <body>
        <!-- BEGINTEMPLATE: Template code for an empty Help Flyout. -->
        <!-- Each Settings flyout should be defined in its own HTML file. -->
        <!-- Set the width to 'narrow' (346px) or 'wide' (646px). -->
        <!-- Set the background color for the header to the background color defined for your
             app tile in the manifest. -->
        <div id="defaultsDiv" data-win-control="WinJS.UI.SettingsFlyout" aria-label="App defaults Settings flyout"
                data-win-options="{settingsCommandId:'help',width:'narrow'}">
            <div class="win-header" style="background-color:#464646">
                <button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>
                <div class="win-label">Defaults</div>
                <img src="ms-appx:///images/smalllogo.png" style="position: absolute; right: 40px;" />
            </div>
            <div class="win-content">
                {App defaults content goes here}
            </div>
        </div>
        <!-- ENDTEMPLATE -->
    </body>
</html>

3. Определение всплывающего меню Help

Создайте дополнительный HTML-файл с именем HelpUI.html в папке "html".

Скопируйте и вставьте следующий код в содержимое нового файла.

<!doctype HTML>
<html>
    <head>
        <title>Help Settings flyout</title>
    </head>
    <body>
        <!-- BEGINTEMPLATE: Template code for an empty Help Flyout. -->
        <!-- Each Settings flyout should be defined in its own HTML file. -->
        <!-- Set the width to 'narrow' (346px) or 'wide' (646px). -->
        <!-- Set the background color for the header to the background color defined for your
             app tile in the manifest. -->
        <div id="helpDiv" data-win-control="WinJS.UI.SettingsFlyout" aria-label="Help Settings flyout"
                data-win-options="{settingsCommandId:'help',width:'narrow'}">
            <div class="win-header" style="background-color:#464646">
                <button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>
                <div class="win-label">Help</div>
                <img src="ms-appx:///images/smalllogo.png" style="position: absolute; right: 40px;" />
            </div>
            <div class="win-content">
                {Help content goes here}
            </div>
        </div>
        <!-- ENDTEMPLATE -->
    </body>
</html>

4. Заполнение панели "Параметры"

Обработайте всплывающий элемент "Параметры" и заполните панель параметров, добавив приведенный ниже код JavaScript в файл default.js. Поместите новый код в функцию onactivated, чтобы он выполнялся после инициализации вашей модели DOM.


    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());

            // BEGIN BLOCK OF NEW CODE
            // Populate Settings pane and tie commands to Settings flyouts.
            WinJS.Application.onsettings = function (e) {
                e.detail.applicationcommands = {
                    "defaultsDiv": { href: "html/DefaultSettings.html", title: "App defaults" },
                    "helpDiv": { href: "html/HelpUI.html", title: "Help" }
                };
                WinJS.UI.SettingsFlyout.populateSettings(e);
            }
            // END OF BLOCK

        }
    };