Teil 2: Verwalten von App-Lebenszyklus und -Zustand (Windows Store-Apps mit JavaScript und HTML)

In Windows 8.1 können Sie mehrere Apps starten und zwischen den einzelnen Apps wechseln, ohne befürchten zu müssen, das System dadurch zu verlangsamen oder den Akku schneller zu entladen. Der Grund: Im Hintergrund ausgeführte Apps werden vom System automatisch angehalten (und manchmal sogar beendet). Indem Sie den App-Zustand beim Anhalten oder Beenden der App speichern und den Zustand beim Neustart wiederherstellen, können Sie den Eindruck erwecken, die Ausführung der App wäre nicht unterbrochen worden.

Hier lernen Sie Folgendes:

  • Speichern des Zustands mit unterschiedlichen Arten von Speicher für das Roaming
  • Wiederherstellen des App-Zustands beim nächsten Start der App

Tipp  

Wenn Sie das Lernprogramm überspringen und direkt den Code aufrufen möchten, gehen Sie zu Erste Schritte mit JavaScript: Vollständiger Code für die Lernprogrammreihe.

Vorbereitung

  • Dies ist das zweite Lernprogramm in einer Lernprogrammreihe. Lesen Sie zunächst Teil 1: Erstellen der App "Hello, world!", bevor Sie sich diesem Lernprogramm widmen. Wir beginnen mit dem Code, den Sie für Teil 1 erstellt haben.

Informationen zum App-Lebenszyklus

Im vorherigen Lernprogramm haben wir erläutert, dass die Datei default.js Code zur Behandlung der App-Aktivierung enthält. Bevor wir uns jedoch wieder dem Code zuwenden, beschäftigen wir uns erst einmal etwas mit dem Lebenszyklus unserer App.

Eine App wird entweder nicht ausgeführt, ausgeführt oder wurde angehalten.

Der App-Lebenszyklus

Apps können angehalten werden, wenn der Benutzer die App verlässt oder Windows in den Stromsparmodus wechselt. Angehaltene Apps verbleiben im Arbeitsspeicher, sodass Benutzer schnell und zuverlässig zwischen angehaltenen Apps wechseln und sie dadurch reaktivieren können. Für eine App, die angehalten und anschließend reaktiviert wird, ist kein zusätzlicher Code erforderlich, um den Eindruck zu erwecken, die Anwendung wäre ununterbrochen ausgeführt worden.

Windows kann angehaltene Apps aber auch jederzeit beenden, um Arbeitsspeicher für andere Apps freizugeben oder um Energie zu sparen. Eine beendete App wird nicht weiter ausgeführt und aus dem Arbeitsspeicher entladen.

Wenn der Benutzer eine App durch Drücken von ALT+F4 oder mit der Geste zum Schließen schließt, wird die App für 10 Sekunden angehalten und dann beendet.

Windows benachrichtigt Ihre App, wenn sie angehalten wird. Im Falle einer Beendigung erfolgt keine Benachrichtigung. Das bedeutet, Ihre App muss das Ereignis "Angehalten" behandeln und dabei ihren Zustand speichern sowie exklusive Ressourcen und Dateihandles sofort freigeben.

Um ein hohes Maß an Benutzerfreundlichkeit zu erreichen, soll der Eindruck entstehen, unsere App wäre ununterbrochen ausgeführt worden. Das bedeutet, die App muss sämtliche vom Benutzer eingegebene Daten sowie vom Benutzer geänderte Einstellungen und Ähnliches speichern. Das bedeutet wiederum, dass wir beim Anhalten der App den App-Zustand speichern müssen, damit wir ihn später wiederherstellen können, sollte Windows die App beenden.

In Ihrer App müssen zwei Arten von Daten verwaltet werden: App-Daten und Sitzungsdaten.

In den folgenden Schritten erfahren Sie, wie die App aktualisiert wird, um diese Datentypen zu speichern. Welchen Zustand müssen wir speichern? In der aktuellen Version kann der Benutzer lediglich den eingegebenen Namen und die Bewertung ändern. Der Benutzer kann außerdem auf die Schaltfläche Say "Hello" klicken, um eine personalisierte Begrüßung zu generieren.

Schritt 1 Speichern von App-Daten

App-Daten bleiben sitzungsübergreifend erhalten und müssen dem Benutzer immer zur Verfügung stehen. In unserer App gehört value im input-Feld nameInput zu den App-Daten: eine Einstellung, die immer in der App vorhanden sein sollte, wenn die App vom Benutzer ausgeführt wird. Da die Ausführung von Code im Anhalteereignishandler nur maximal fünf Sekunden dauern darf, müssen Sie sicherstellen, dass die wichtigen App-Daten im beständigen Speicher gespeichert wurden, bevor die App angehalten (oder beendet) wird. Dies wird am besten dadurch erreicht, dass die App-Daten inkrementell bei Änderungen gespeichert werden.

Zur Unterstützung beim Verwalten von App-Daten stellt Windows ein Windows.Storage.ApplicationData-Objekt zur Verfügung. Dieses Objekt besitzt eine roamingSettings-Eigenschaft, die einen ApplicationDataContainer zurückgibt. Mit diesem lokalen ApplicationDataContainer für das Roaming können wir Benutzerdaten speichern, die sitzungsübergreifend erhalten bleiben sollen. Speichern wir nun den Namen des Benutzers im ApplicationDataContainer für das Roaming, wenn der Benutzer ihn eingibt.

Hinweis  In diesem Lernprogramm wird die Verwendung von roamingSettings gezeigt. Der Container für Sitzungsdaten der App für das Roaming erleichtert das Speichern von Daten, die für Benutzer auf mehreren Computern zugänglich sind. Im Grunde werden Ihre Daten im Hintergrund auf eine Cloud hochgeladen. Sie können auch den Container für lokale Sitzungsdaten der App verwenden (localSettings), sie sollten dies aber nur dann tun, wenn sie computerspezifische Informationen speichern möchten.

Wir beginnen hier mit dem Code aus Teil 1: Erstellen der App "Hello, world!".

Hh986966.wedge(de-de,WIN.10).gifSo speichern Sie App-Daten

  1. Erstellen Sie in der Datei default.js einen Ereignishandler für das change-Ereignis des input-Felds nameInput. Nennen Sie den Ereignishandler nameInputChanged. Fügen Sie diesen Code gleich nach dem buttonClickHandler hinzu, den wir in Teil 1 erstellt haben.

    
        function nameInputChanged(eventInfo) {
    
        }
    
    
  2. Verwenden Sie die srcElement-Eigenschaft des eventInfo-Objekts, um auf das nameInput-Steuerelement zuzugreifen. (Die srcElement-Eigenschaft ruft das Element ab, das das Ereignis ausgelöst hat.)

    
        function nameInputChanged(eventInfo) {
            var nameInput = eventInfo.srcElement;
    
        }
    
    
  3. Speichern Sie den Namen des Benutzers im ApplicationDataContainer für Einstellungen für das Roaming:

    1. Rufen Sie die Windows.Storage.ApplicationData.current-Eigenschaft auf, um das ApplicationData-Objekt unserer App abzurufen.
    2. Rufen Sie anschließend die roamingSettings-Eigenschaft des ApplicationData-Objekts auf, um den ApplicationDataContainer für Einstellungen für das Roaming abzurufen.

    Nun können wir den Namen des Benutzers mit einem beliebigen Schlüssel speichern. In diesem Beispiel verwenden wir "userName".

    
        function nameInputChanged(eventInfo) {
            var nameInput = eventInfo.srcElement;
    
            // Store the user's name for multiple sessions.
            var appData = Windows.Storage.ApplicationData.current;
            var roamingSettings = appData.roamingSettings;
            roamingSettings.values["userName"] = nameInput.value;
        }
    
    
  4. In Teil 1: Erstellen der App "Hello, world!" haben wir unseren Ereignishandler mithilfe des onactivated-Ereignishandlers registriert. Nun fügen wir weiteren Code hinzu, um den nameInputChanged-Ereignishandler mit dem nameInput-Steuerelement zu registrieren.

    
        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().then(function completed() {
    
                    // Retrieve the div that hosts the Rating control.
                    var ratingControlDiv = document.getElementById("ratingControlDiv");
    
                    // Retrieve the actual Rating control.
                    var ratingControl = ratingControlDiv.winControl;
    
                    // Register the event handler. 
                    ratingControl.addEventListener("change", ratingChanged, false);
    
                    // Retrieve the button and register our event handler. 
                    var helloButton = document.getElementById("helloButton");
                    helloButton.addEventListener("click", buttonClickHandler, false);
    
                    // Retrieve the input element and register our
                    // event handler.
                    var nameInput = document.getElementById("nameInput");
                    nameInput.addEventListener("change", nameInputChanged);
    
                }));
    
            }
        };
    
    
  5. Nun speichern wir den Zustand des Bewertungssteuerelements, wenn sich dieser ändert. Wir müssen nur den Ereignishandler aktualisieren, den wird in Teil 1 zum Speichern unseres roamingSettings-App-Containers erstellt haben. Speichern wir nun die Bewertung als greetingRating

    
        function ratingChanged(eventInfo) {
    
            var ratingOutput = document.getElementById("ratingOutput");
            ratingOutput.innerText = eventInfo.detail.tentativeRating;
    
            // Store the rating for multiple sessions.
            var appData = Windows.Storage.ApplicationData.current;
            var roamingSettings = appData.roamingSettings;
            roamingSettings.values["greetingRating"] = eventInfo.detail.tentativeRating;
        }
    
    

Wenn Sie die App jetzt ausführen, werden Name und Bewertung nach der Eingabe in das Textfeld gespeichert. Der Name wird aber nicht angezeigt, wenn Sie die App neu starten. Das liegt daran, dass wir noch Code hinzufügen müssen, um den soeben gespeicherten Zustand zu laden. Darum kümmern wir uns in Schritt 3. Zuvor gehen wir aber noch auf die Vorgehensweise zum Speichern von Sitzungsdaten ein.

Schritt 2: Speichern von Sitzungsdaten

Sitzungsdaten sind temporäre Daten, die für die aktuelle Benutzersitzung in Ihrer App relevant sind. Eine Sitzung ist beendet, wenn der Benutzer die App mit der Geste zum Schließen oder mit STRG-F4 schließt, den Computer neu startet oder sich vom Computer abmeldet. In unserer App handelt es sich bei innerText des div-Elements greetingOutput um Sitzungsdaten. Diese stellen wir nur wieder her, falls Windows die App anhält und beendet. Zum Speichern von Sitzungsdaten verwenden wir das WinJS.Application.sessionState-Objekt.

Wann speichern wir unsere Sitzungsdaten? Die Datei default.js enthält einen oncheckpoint-Ereignishandler, den wir verwenden können. Dieser Ereignishandler wird aufgerufen, wenn Windows im Begriff ist, Ihre App anzuhalten. Es empfiehlt sich allerdings, unsere Sitzungsdaten bei Änderungen inkrementell zu speichern, wie wir dies bei den App-Daten getan haben. Wir speichern also unsere Sitzungsdaten immer dann, wenn der Benutzer auf die Schaltfläche "Say Hello" klickt.

Hh986966.wedge(de-de,WIN.10).gifSo speichern Sie Sitzungsdaten

  • Aktualisieren Sie in default.js die buttonClickHandler-Funktion, die Sie in Teil 1: Erstellen der App "Hello, world!" erstellt haben, sodass sie die personalisierte Begrüßung speichert.

    Da die personalisierte Begrüßung nur für die Sitzung gespeichert werden muss, speichern wir sie in einem WinJS.Application.sessionState-Objekt. Um das sessionState-Objekt zu verwenden, fügen wir ihm einfach eine Eigenschaft hinzu und legen deren Wert fest. Die Eigenschaft nennen wir greetingOutput.

    
        function buttonClickHandler(eventInfo) {
    
            var userName = document.getElementById("nameInput").value;
            var greetingString = "Hello, " + userName + "!";
            document.getElementById("greetingOutput").innerText = greetingString;
    
            // Save the session data. 
            WinJS.Application.sessionState.greetingOutput = greetingString;
        }
    
    

Mehr ist nicht erforderlich, um den Zustand der App zu speichern, bevor sie beendet wird. Nun müssen wir uns damit beschäftigen, wie wir den Zustand unserer App beim nächsten Start wiederherstellen.

Schritt 3: Wiederherstellen des App-Zustands

Sehen wir uns einmal den Code zum Behandeln der App-Aktivierung im onactivated-Ereignishandler etwas näher an.

Der Code ruft zunächst einen Verweis auf unsere App ab und speichert ihn in einer Variablen namens app. Anschließend erstellt er eine Variable namens activation, die auf den Windows.ApplicationModel.Activation-Namespace verweist. Beide Schritte sind optional und dienen lediglich dazu, den Eingabeaufwand bei Verweisen auf die App oder auf den Windows.ApplicationModel.Activation-Namespace zu verringern.


    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;


Anschließend definiert der Code einen Aktivierungsereignishandler. Der Handler prüft, welche Aktivierungsart vorliegt. Er funktioniert nur, wenn es sich um eine launch-Aktivierung handelt. Bei einer anderen Aktivierungsart bewirkt der Handler gar nichts.

(Sie können den Ereignishandler erweitern, sodass er auch auf andere Aktivierungsarten reagiert, dies wird in diesem Lernprogramm allerdings nicht behandelt. Weitere Informationen finden Sie unter App-Lebenszyklus.)



    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
          

Im nächsten Schritt prüft der Handler den vorherigen Ausführungszustand, um zu ermitteln, wie die App beim letzten Mal beendet wurde.



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


Handelt es sich beim vorherigen Ausführungszustand um terminated, bedeutet das, dass Windows die App bei der letzten Ausführung erfolgreich angehalten und anschließend beendet hat. Wurde die App nicht beendet, behandelt der Handler sie so, als würde sie erstmals gestartet.

Abschließend ruft der Handler die WinJS.UI.processAll-Methode und den Code auf, den wir zum Registrieren unserer Ereignishandler hinzugefügt haben. Dieser Code wird unabhängig vom vorherigen Ausführungszustand bei jedem App-Start aufgerufen.



            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().then(function completed() {

                // Retrieve the div that hosts the Rating control.
                var ratingControlDiv = document.getElementById("ratingControlDiv");

                // Retrieve the actual Rating control.
                var ratingControl = ratingControlDiv.winControl;

                // Register the event handler. 
                ratingControl.addEventListener("change", ratingChanged, false);

                // Retrieve the button and register our event handler. 
                var helloButton = document.getElementById("helloButton");
                helloButton.addEventListener("click", buttonClickHandler, false);

                // Retrieve the input element and register our
                // event handler.
                var nameInput = document.getElementById("nameInput");
                nameInput.addEventListener("change", nameInputChanged);

            }));

        }
    };

Nachdem die Funktion des onactivated-Ereignishandlers nun klar ist, können wir damit den Zustand unserer App wiederherstellen.

Hh986966.wedge(de-de,WIN.10).gifSo stellen Sie den Zustand der App wieder her

  1. Falls es sich beim previousExecutionState um terminated handelt, laden Sie die persönliche Begrüßung.

    Prüfen Sie in der else-Klausel, in der in den Kommentaren auf die Wiederherstellung des App-Zustands hingewiesen wird, ob WinJS.Application.sessionState.greetingOutput einen Wert besitzt. Falls es einen Wert besitzt, rufen Sie das DIV-Element greetingOutput ab, und zeigen Sie damit die Begrüßung an.

    
        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.
    
                    // Retrieve our greetingOutput session state info, 
                    // if it exists. 
                    var outputValue = WinJS.Application.sessionState.greetingOutput;
                    if (outputValue) {
                        var greetingOutput = document.getElementById("greetingOutput");
                        greetingOutput.innerText = outputValue;
                    }
                }
                args.setPromise(WinJS.UI.processAll().then(function completed() {
    
                    // Retrieve the div that hosts the Rating control.
                    var ratingControlDiv = document.getElementById("ratingControlDiv");
    
                    // Retrieve the actual Rating control.
                    var ratingControl = ratingControlDiv.winControl;
    
                    // Register the event handler. 
                    ratingControl.addEventListener("change", ratingChanged, false);
    
                    // Retrieve the button and register our event handler. 
                    var helloButton = document.getElementById("helloButton");
                    helloButton.addEventListener("click", buttonClickHandler, false);
    
                    // Retrieve the input element and register our
                    // event handler.
                    var nameInput = document.getElementById("nameInput");
                    nameInput.addEventListener("change", nameInputChanged);
    
                }));
    
            }
        };
    
    
  2. Im nächsten Schritt laden wir den Benutzernamen und die Bewertung. Da die Daten für Benutzernamen und Bewertung über mehrere Sitzungen hinweg erhalten bleiben sollen, haben wir sie im roamingSettings-App-Datencontainer gespeichert. Nun fügen wir weiteren Code hinzu, um den App-Datencontainer abzurufen und (sofern vorhanden) den Benutzernamen und die Bewertung anzuzeigen.

    Wir möchten, dass dieser Code unabhängig davon ausgeführt wird, wie die App nach der letzten Ausführung heruntergefahren wurde (wir müssen nur die Sitzungsdaten im vorherigen Ausführungszustand überprüfen). Daher fügen wir ihn außerhalb der if-Klausel hinzu, die den vorherigen Ausführungszustand der App überprüft. Wir fügen Sie ihn innerhalb des then-Handlers für WinJS.UI.processAllein, wo unsere Ereignisse registriert werden.

    
        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.
    
                    // Retrieve our greetingOutput session state info, 
                    // if it exists. 
                    var outputValue = WinJS.Application.sessionState.greetingOutput;
                    if (outputValue) {
                        var greetingOutput = document.getElementById("greetingOutput");
                        greetingOutput.innerText = outputValue;
                    }
                }
                args.setPromise(WinJS.UI.processAll().then(function completed() {
    
                    // Retrieve the div that hosts the Rating control.
                    var ratingControlDiv = document.getElementById("ratingControlDiv");
    
                    // Retrieve the actual Rating control.
                    var ratingControl = ratingControlDiv.winControl;
    
                    // Register the event handler. 
                    ratingControl.addEventListener("change", ratingChanged, false);
    
                    // Retrieve the button and register our event handler. 
                    var helloButton = document.getElementById("helloButton");
                    helloButton.addEventListener("click", buttonClickHandler, false);
    
                    // Retrieve the input element and register our
                    // event handler.
                    var nameInput = document.getElementById("nameInput");
                    nameInput.addEventListener("change", nameInputChanged);
    
                    // Restore app data. 
                    var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings;
    
                    // Restore the user name.
                    var userName =
                        Windows.Storage.ApplicationData.current.roamingSettings.values["userName"];
                    if (userName) {
                        nameInput.value = userName;
                    }
    
                    // Restore the rating. 
                    var greetingRating = roamingSettings.values["greetingRating"];
                    if (greetingRating) {
                        ratingControl.userRating = greetingRating;
                        var ratingOutput = document.getElementById("ratingOutput");
                        ratingOutput.innerText = greetingRating;
                    }
    
                }));
    
            }
        };
    
    

Jetzt können Sie die App erstellen und ausführen. Beachten Sie dabei, wie die App den Sitzungszustand speichert und wiederherstellt. Bislang haben Sie Ihre App zum Testen im Debuggingmodus ausgeführt und durch Klicken auf Debugging beenden in Microsoft Visual Studio beendet. Dadurch führt die App jedoch eine normale Beendigung aus, und das Suspending-Ereignis tritt überhaupt nicht ein. Praktischerweise können Sie mit Visual Studio aber das Anhalten, Beenden und Reaktivieren einer App simulieren.

Hh986966.wedge(de-de,WIN.10).gifSo simulieren Sie das Anhalten, Beenden und Reaktivieren einer App in Visual Studio

  1. Drücken Sie F5, um die App im Debugmodus auszuführen.
  2. Geben Sie Ihren Namen in das Eingabefeld ein, und klicken Sie auf "Say "Hello"". Die Begrüßung wird angezeigt.
  3. Drücken Sie ALT+TAB, um zu Visual Studio zurückzukehren.
  4. Öffnen Sie auf der Symbolleiste Debugspeicherort das Dropdownmenü neben der Schaltfläche Anhalten.

    Die Symbolleiste Debuggen wird während der Ausführung des Debuggers standardmäßig angezeigt. Sollte sie nicht angezeigt werden, klicken Sie auf Ansicht > Symbolleisten > Debugspeicherort, um sie einzublenden.

    Schaltfläche zum Anhalten und Herunterfahren

  5. Klicken Sie auf die Schaltfläche zum Anhalten und Herunterfahren.

    Visual Studio simuliert das Anhalten und Beenden Ihrer App, sodass das Suspending-Ereignis auftritt und der Code für die Zustandsverwaltung ausgeführt wird.

  6. Drücken Sie F5, um die App erneut auszuführen. Die App wird in ihrem vorherigen Zustand wiederhergestellt.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben dieses Lernprogramm vollständig durchgearbeitet! Sie haben gelernt, wie Sie den Lebenszyklus Ihrer App verwalten und ihren Zustand speichern. In diesem Lernprogramm wurden lediglich zwei Methoden zum Speichern des App-Zustands behandelt. Weitere Informationen zu den anderen Speichermethoden für den Zustand finden Sie unter Verwalten von App-Daten sowie unter Effizientes Verwenden des Zustands.

Herunterladen des Beispiels

Kommen Sie nicht voran, oder möchten Sie Ihre Arbeit überprüfen? Falls ja, laden Sie das Beispiel für die ersten Schritte mit JavaScript herunter.

Nächste Schritte

Im nächsten Teil dieser Lernprogrammreihe lernen Sie, wie Sie eine etwas komplexere App erstellen. Fahren Sie mit Teil 3: PageControl-Objekte und Navigation fort.

Verwandte Themen

Erste Schritte mit JavaScript: Vollständiger Code für die Lernprogrammreihe
Programmieren von Windows 8-Apps mit HTML, CSS und JavaScript (E-Book)

 

 

Anzeigen:
© 2014 Microsoft. Alle Rechte vorbehalten.