如何及时提交设置

项目
12/11/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>

注意

我们为 settingsToggle 的 data-win-options 添加一个 onchange 事件选项。这将向 ToggleSwitch 控件注册 onchange 事件。有关详细信息，请参阅切换开关指南。
该设置封装在 win-settings-section CSS 类中，并使用推荐的元素来获取与设置指南（请参阅应用设置指南）相同的风格样式。

通过本地应用数据存储初始化控件

在本例中我们使用本地应用程序数据存储。用户每次调用“设置”弹出窗口时，我们都会读取应用程序数据中的值，以确保 UI 中的控件反映最新值。

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;
}

摘要

在本快速入门中，你学习了如何及时将更新提交给设置。

Share via