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

Applies to Windows only

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-Einstellungsflyouts und lokaler Anwendungsdaten für Einstellungen sofort einen Commit ausführen kann.

Voraussetzungen

Lesen Sie die Richtlinien für App-Einstellungen.

Hinzufügen eines Einstellungsflyouts zum Charm "Einstellungen"

Ausführliche Informationen zum Hinzufügen eines Einstellungsflyouts 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 Einstellungsflyout:


<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 Einstellungsflyout dem Charm "Einstellungen" hinzu:


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

Hinzufügen von Steuerelementen zum Flyout

In diesem Beispiel fügen wir unserem Einstellungsflyout 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 Einstellungsflyout 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 Einstellungsflyout müssen Sie möglicherweise die ControlReady-Methode der Seite aufrufen, um sicherzustellen, dass das Einstellungsflyout 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.

 

 

Anzeigen:
© 2014 Microsoft