So wird's gemacht: Sofortiger Commit für Einstellungen

Artikel
12/12/2015

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

Bei Windows Store-Apps werden alle Einstellungen sofort angewendet, wenn der Benutzer ihre Werte ändert. Dieses Modell ist wichtig, da der Benutzer mithilfe des WinJS-Einstellungen-Flyouts und lokaler Anwendungsdaten für Einstellungen sofort einen Commit ausführen kann.

Voraussetzungen

Lesen Sie die Richtlinien für App-Einstellungen.

Hinzufügen eines Einstellungen-Flyouts zum Charm "Einstellungen"

Ausführliche Informationen zum Hinzufügen eines Einstellungen-Flyouts finden Sie unter Schnellstart: Hinzufügen von App-Einstellungen mit der Windows-Bibliothek für JavaScript. Im Folgenden sind die erforderlichen Schritte kurz zusammengefasst.

Definieren Sie die HTML-Seite für Ihr Einstellungen-Flyout:

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

Fügen Sie das Einstellungen-Flyout dem Charm "Einstellungen" hinzu:

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

In diesem Beispiel fügen wir unserem Einstellungen-Flyout ein Umschaltsteuerelement und ein Auswahlsteuerelement hinzu. Diese Steuerelemente werden am häufigsten für Einstellungen verwendet.

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

Hinweis

Wir haben den "data-win-options" für den "settingsToggle" eine onchange-Ereignisoption hinzugefügt. Dadurch wird das onchange-Ereignis für das ToggleSwitch-Steuerelement registriert. Weitere Informationen finden Sie unter Richtlinien für Umschalter.
Die Einstellungen sind in win-settings-section-CSS-Klassen umschlossen und verwenden die empfohlenen Elemente, damit das Format den Einstellungsrichtlinien entspricht (siehe Richtlinien für App-Einstellungen).

Initialisieren der Steuerelemente im lokalen App-Datenspeicher

In diesem Beispiel verwenden wir den lokalen Anwendungsdatenspeicher. Jedes Mal, wenn der Benutzer das Einstellungen-Flyout aufruft, lesen wir die Werte aus den Anwendungsdaten, um sicherzustellen, dass die Steuerelemente in der UI die aktuellen Werte wiedergeben.

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

Hinweis

Die Initialisierung von Steuerelementen muss nach dem Laden des DOMs und dem Initialisieren der WinJS-Steuerelemente erfolgen. Bei einem in einer eigenen HTML-Seite definierten Einstellungen-Flyout müssen Sie möglicherweise die ControlReady-Methode der Seite aufrufen, um sicherzustellen, dass das Einstellungen-Flyout verwendet werden kann.
Beachten Sie, dass wir in diesem Beispiel den lokalen Anwendungsdatenspeicher verwenden. Um das automatische Roaming der Einstellungen sicherzustellen, könnten Sie den Roaming-Anwendungsdatenspeicher verwenden. Ausführlichere Informationen finden Sie unter Richtlinien für das Roaming von Anwendungsdaten.

Behandeln von Änderungsereignissen für Einstellungssteuerelemente

Dies ist der Punkt, an dem der sofortige Commit stattfindet. Wenn der Benutzer die mit dem Steuerelement verknüpften Werte ändert, schreiben wir den neuen Wert sofort in den Anwendungsdatenspeicher. Dieser Schritt erfolgt im onchange-Ereignishandler, der dem Steuerelement zugeordnet ist.

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

Zusammenfassung

In dieser Schnellstartanleitung haben Sie erfahren, wie Sie für Einstellungsaktualisierungen einen sofortigen Commit ausführen.