Как моментально фиксировать изменения параметров

Статья
12/12/2015

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

В приложениях Магазина Windows все параметры применяются сразу же после изменения их значений пользователем. Эта модель важна, поскольку пользователь может поэтапно показать вам, как моментально фиксировать параметры с помощью всплывающего элемента "Параметры WinJS" и локальных данных приложения.

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

Добавление всплывающего элемента "Параметры" к чудо-кнопке "Параметры"

Подробнее о том, как добавить всплывающий элемент "Параметры": Краткое руководство: добавление параметров приложения с использованием библиотеки Windows для JavaScript. Вот краткое содержание этого раздела.

Определите HTML-код для всплывающего элемента "Параметры":

<div aria-label="App Settings Flyout" data-win-control="WinJS.UI.SettingsFlyout" data-win-options="{settingsCommandId:'settingsExample', width:'narrow'}">
<!-- Add the background color matching you app tile color to the Settings flyout header. -->
<!-- Use add the win-ui-dark class if the background color requires a white text  -->
<!-- Add the app small logo to the Settings flyout header                         -->
    <div class="win-header win-ui-light" style="background-color: #dbf9ff;">
        <button class="win-backbutton" onclick="WinJS.UI.SettingsFlyout.show()" type="button"></button>
     <div class="win-label">Example</div>
     <img alt="smalllogo" src="/images/smalllogo.png" style="height: 30px; width: 30px; position: absolute; right: 40px;"/>
    </div>
    <div class="win-content">
    <!—Your settings contents go here -->
    </div>
</div>

Подключите всплывающий элемент "Параметры" к чудо-кнопке "Параметры":

WinJS.Application.onsettings = function (e) {
    e.detail.applicationcommands = {
        "settingsExample": { title: "Example" }
    };
    WinJS.UI.SettingsFlyout.populateSettings(e);
};

Добавьте элементы управления к всплывающему элементу

В этом примере мы добавляем переключатель и элемент управления выбором во всплывающий элемент «Параметры». Это два наиболее распространенных элемента управления параметрами.

<div class="win-content">
    <div class="win-settings-section">
        <h3>Example settings section</h3>
        <p>Description: toggle and select are common settings controls</p>
        <div id="settingsToggle" data-win-control="WinJS.UI.ToggleSwitch" 
             data-win-options="{title:'Example toggle switch', 
             onchange: settingsToggleChange}"></div>
    </div>
    <div class="win-settings-section">
        <h3>Select control</h3>
        <p>Select controls let users select an item from a set of text only items.</p>
        <label>Example select control</label>
        <select id="settingsSelect" aria-label="Example select control">
            <option value="1">Value 1</option>
            <option value="2">Value 2</option>
            <option value="3">Value 3</option>
            <option value="4">Value 4</option>
        </select>
    </div>
</div>

Примечание

Мы добавили параметр события onchange в data-win-options для settingsToggle. Это приводит к регистрации события onchange для элемента управления ToggleSwitch. Подробности см. в Руководстве по тумблерам.
Оболочкой параметров служат классы CSS win-settings-section. Параметры используют рекомендуемые элементы для оформления в соответствии с рекомендациями по параметрам (см. Рекомендации по параметрам приложений).

Инициализируйте элементы управления из локального хранилища данных приложения

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

function initSettingsControls() {
    // Initialize the toggle control using the current value of settingsToggleValue in the local state store
    var toggleControl = document.getElementById("settingsToggle").winControl;
    toggleControl.checked = (Windows.Storage.ApplicationData.current.localSettings.values["settingsToggleValue"] === "on");

    // Initialize the select control using the current value of settingsSelectValue in the locale state store
    var selectControl = document.getElementById("settingsSelect");
    var settingsSelectValue = Windows.Storage.ApplicationData.current.localSettings.values["settingsSelectValue"];
    for (var i = 0; i < selectControl.options.length; i++) {
        if (selectControl.options(i).value === settingsSelectValue) {
            selectControl.selectedIndex = i;
            break;
        }
    }

    // Add event listener for change event on select control
    selectControl.addEventListener("change", settingsSelectChange, false);
}

Примечание

Позаботьтесь о том, чтобы инициализация элементов управления происходила после загрузки DOM и инициализации элементов управления WinJS. При использовании всплывающего элемента "Параметры", определенного на его собственной HTML-странице, может потребоваться вызов метода ready для элемента управления страницей, чтобы убедиться, что всплывающий элемент "Параметры" готов к использованию.
Учтите, что в данном примере мы используем локальное хранилище данных приложения. Вы могли бы использовать хранилище данных перемещаемого приложения, чтобы обеспечить автоматическое перемещение параметров. Подробности см. в разделе Руководство по перемещению данных приложения.

Передайте события изменения элементам управления параметрами

На этом этапе и происходит мгновенная фиксация. Когда пользователь изменяет значения, связанные с элементом управления, мы сразу же записываем новое значение в хранилище данных приложения. Это делается в обработчике событий onchange, связанных с элементом управления.

function settingsToggleChange() {
    var toggleControl = document.getElementById("settingsToggle").winControl;
    // Write new value to the local state store
    Windows.Storage.ApplicationData.current.localSettings.values["settingsToggleValue"] = (toggleControl.checked ? "on" : "off");
}

// To protect against untrusted code execution, all functions are required 
// to be marked as supported for processing before they can be used inside 
// a data-win-options attribute in HTML markup.
WinJS.Utilities.markSupportedForProcessing(settingsToggleChange);

function settingsSelectChange(changedEvent) {
    // Write new value to the local state store
    Windows.Storage.ApplicationData.current.localSettings.values["settingsSelectValue"] = changedEvent.target.options.value;
}

Сводка

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

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