Schnellstart: Hinzufügen von App-Einstellungen mit der Windows-Bibliothek für JavaScript

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]

In dieser Schnellstartanleitung wird erläutert, wie der Vertrag für "Einstellungen" mithilfe von HTML und der SettingsFlyout-Klasse für die Windows-Bibliothek für JavaScript implementiert wird.

Sehen Sie dieses Feature in unserer Reihe App-Features von A bis Z in Aktion.: Windows Store-App-Benutzeroberfläche von A bis Z

Einführung

Im folgenden Beispiel definieren Sie die Einstellungen-Flyouts "Defaults" und "Help" in zwei separaten HTML-Dateien. Sie verwenden JavaScript, um die Einstellungen-Flyouts zu verarbeiten und den Einstellungsbereich mit JavaScript zu füllen.

Voraussetzungen

Lesen Sie die Richtlinien für App-Einstellungen.

1. Erstellen einer leeren App

Erstellen Sie wie unter Erstellen der App "Hello, world" beschrieben eine leere App "Hello World". Sie müssen nur die beiden ersten Schritte ausführen:

Erstellen Sie in Visual Studio ein neues Projekt.
Starten Sie die App.

2. Definieren des standardmäßigen Einstellungen-Flyouts

Erstellen Sie in Visual Studio eine HTML-Datei mit dem Namen "DefaultSettings.html":

Klicken Sie im Projektmappen-Explorer unter der Projektmappe "HelloWorld" mit der rechten Maustaste auf das Projekt HelloWorld.
Klicken Sie auf Hinzufügen > Neuer Ordner.
Geben Sie für den Ordner den Namen "page2" ein.
Klicken Sie mit der rechten Maustaste auf den Ordner, und wählen Sie Hinzufügen > Neue HTML-Datei aus.
Wählen Sie HTML-Seite aus, geben Sie den Namen "DefaultSettings.html" ein, und klicken Sie auf Hinzufügen.

Kopieren Sie den folgenden Code, und fügen Sie ihn anstelle des Inhalts der neuen Datei ein.


<!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. Definieren des Flyouts "Help"

Erstellen Sie eine weitere HTML-Datei mit dem Namen "HelpUI.html" unter dem Ordner "html".

Kopieren Sie den folgenden Code, und fügen Sie ihn anstelle des Inhalts der neuen Datei ein.

<!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. Auffüllen des Einstellungsbereichs

Verarbeiten Sie das Einstellungen-Flyout, und füllen Sie den Einstellungsbereich auf, indem Sie "default.js" den folgenden JavaScript-Code hinzufügen. Fügen Sie den neuen Code innerhalb der onactivated-Funktion hinzu, damit er nach der Initialisierung Ihres DOMs ausgeführt wird.


    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

        }
    };

Zusammenfassung

In dieser Schnellstartanleitung haben Sie erfahren, wie Sie den Vertrag für "Einstellungen" mithilfe von HTML und WinJS einrichten.

Freigeben über