Schnellstart: Erstellen mehrerer Fenster für eine App (HTML)

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]

Sie können den Benutzern bei der Steigerung ihrer Produktivität helfen, indem Sie ihnen das Anzeigen mehrerer voneinander unabhängiger Funktionen in separaten Fenstern ermöglichen. Dabei können die Benutzer kurzerhand von einem Teil der App in einem Fenster zu einem anderen Teil der App in einem anderen Fenster wechseln. Sie können auch die Inhalte mehrerer Fenster nebeneinander vergleichen, um beispielsweise verschiedene Dokumente gleichzeitig anzuzeigen oder um eine Rangliste in einem Spiel und das Spiel selbst in separaten Fenstern anzuzeigen. Mithilfe der Mail-App kann der Benutzer eine Nachricht in einem neuen Fenster öffnen. Durch die Verwendung mehrerer Fenster kann er eine neue Mail erstellen und sich gleichzeitig auf eine Nachricht im Posteingang beziehen.

Wenn Sie für eine App mehrere Fenster erstellen, verhält sich jedes Fenster unabhängig. In der Liste der zuletzt verwendeten Apps werden die einzelnen Fenster separat aufgeführt. Die Benutzer können App-Fenster unabhängig voneinander verschieben, deren Größe ändern und anzeigen und ausblenden, und sie können zwischen App-Fenstern wechseln, als ob es sich dabei um separate Apps handeln würde. Jedes Fenster agiert in seinem eigenen Thread- und Ausführungskontext.

Mail-App mit zwei geöffneten Fenstern

Wie das geht, sehen Sie in diesem Schnellstart:

Erstellen eines neuen Fensters für Ihre App
Hinzufügen von Inhalt zum neuen Fenster
Anzeigen des neuen Fensters
Wechseln von einem Fenster zu einem anderen
Schließen eines Fensters, wenn es aus der Liste der zuletzt verwendete Apps fällt

Dies ist die JavaScript-Version dieses Schnellstarts. Die Version für C# mit XAML finden Sie unter Schnellstart: Erstellen mehrerer Fenster für eine App (XAML).

Das Erstellen mehrerer Fenster für eine App unterscheidet sich von der Projizierung eines separaten Fensters Ihrer App auf einem anderen Bildschirm, die nur der Anzeige und nicht der Interaktion dient. Weitere Informationen zum Projizieren eines Fensters finden Sie unter Richtlinien für Projektions-Manager.

Voraussetzungen

Wenn Sie nicht über Microsoft Visual Studio 2013 und Windows 8.1 verfügen, laden Sie die Software unter Downloads herunter.
Es wird davon ausgegangen, dass Sie eine einfache Windows Store-App mit JavaScript erstellen können. Informationen zum Erstellen der ersten App finden Sie unter Erstellen Ihrer ersten Windows Store-App mit JavaScript.
Schlagen Sie in den Richtlinien zum Entwerfen von Apps mit mehreren Fenstern nach.

Erstellen der sekundären Seite

Öffnen Sie im Projektmappen-Explorer das Kontextmenü für den Projektknoten, und klicken Sie dann auf Hinzufügen > Neues Element.
Wählen Sie im Dialogfeld Neues Element hinzufügen im mittleren Bereich Seitensteuerung aus.
Geben Sie im Feld Name einen Namen für die Seite ein, beispielsweise secondaryView, und klicken Sie dann auf die Schaltfläche Hinzufügen.
Fügen Sie die UI-Elemente und Funktionalität hinzu, die die sekundäre Seite enthalten soll. Weitere Informationen finden Sie unter Gestalten der Benutzeroberfläche und Richtlinien für die Verwendung mehrerer Fenster.

Erstellen einer neuen Ansicht

Erstellen Sie einen neuen Thread und ein neues Fenster für diesen Thread, indem Sie MSApp.createNewView aufrufen. Die gemeinsame Kopplung eines Threads und eines Fensters wird als Ansicht bezeichnet. Weitere Objekte, die Sie in dieser Ansicht erstellen (beispielsweise UI-Elemente), werden an diesen Thread gebunden.

Die erste Ansicht, die beim Starten der App erstellt wird, wird als Hauptansicht bezeichnet. Beim Schließen des Fensters der Hauptansicht wird die App beendet.

var newView = MSApp.createNewView("ms-appx:///html/secondaryView.html");

Dieser Code lädt die angegebene Seite, secondaryView, automatisch im neuen Fenster.

Da jedes Fenster in seinem eigenen Ausführungskontext agiert, kann ein sekundäres Fenster nur über postMessage oder freigegebene Dateien und Einstellungen mit dem Hauptfenster kommunizieren. Dieser Code veranschaulicht die Verwendung von postMessage zum Einfügen von zusätzlichen Zustandsinformationen, die Sie möglicherweise zum Einrichten des neuen Fensters benötigen.

newView.postMessage({ myState: 'My important state'}, thisOrigin);

Anzeigen des neuen Fensters

Nachdem Sie eine neue Ansicht erstellt haben, wobei es sich um die Kopplung eines Threads und eines Fensters handelt, können Sie das neue Fenster mithilfe der ApplicationViewSwitcher.TryShowAsStandaloneAsync-Methode anzeigen. Der viewId-Parameter in der TryShowAsStandaloneAsync-Methode ist eine ganze Zahl, die die einzelnen Ansichten in der App eindeutig identifiziert. Die Ansichts-ID wird mithilfe von ApplicationView.Id oder ApplicationView.GetApplicationViewIdForWindow abgerufen.

var newView = MSApp.createNewView("ms-appx:///html/secondaryView.html");
newView.postMessage({ myState: 'My important state' }, thisOrigin);
Windows.UI.ViewManagement.ApplicationViewSwitcher.tryShowAsStandaloneAsync(newView.viewId).done(function (viewShown) {

});

Es wird empfohlen, dass nicht automatisch ein neues Fenster geöffnet werden, wenn Benutzer zu einem anderen Teil der App navigieren. Das Öffnen eines neuen Fensters sollte vom Benutzer initiiert werden. Sie können den Aufruf von TryShowAsStandaloneAsync einem UI-Element hinzufügen, beispielsweise einen Befehl in der unteren App-Leiste.

Wechseln von einem Fenster zu einem anderen

Sie müssen den Benutzern eine Möglichkeit zur Navigation von einem sekundären Fenster zurück zum Hauptfenster bieten. Verwenden Sie dazu die ApplicationViewSwitcher.SwitchAsync-Methode. Sie rufen diese Methode über den Thread des Fensters auf, von dem aus Sie wechseln, und übergeben die Ansichts-ID des Fensters, zu dem Sie wechseln.

Windows.UI.ViewManagement.ApplicationViewSwitcher.SwitchAsync(viewIdToShow).done();

In der Mail-App wird über die Schaltfläche „Zurück“ im sekundären Fenster SwitchAsync aufgerufen. Die Mail-App verwendet SwitchAsync auch dann, wenn ein Benutzer die im sekundären Fenster enthaltene Nachricht sendet oder löscht. Die Mail-App ersetzt das sekundäre Fenster durch das Mail-Hauptfenster.

Wenn Sie SwitchAsync verwenden, können Sie auswählen, ob das erste Fenster geschlossen und aus der Liste der zuletzt verwendeten Apps entfernt wird, indem Sie den Wert von ApplicationViewSwitchingOptions angeben.

Schließen des neuen Fensters

Nachdem Sie ein sekundäres Fenster angezeigt haben, bleibt es in der Liste der zuletzt verwendeten Apps erhalten, bis der Benutzer genügend andere Apps gestartet hat und die App aus der Liste fällt. Das consolidated event tritt ein, wenn das Fenster aus der Liste der zuletzt verwendeten Apps entfernt wird. Voraussetzung dafür ist, dass für die App mindestens ein weiteres Fenster in der Liste erhalten bleibt. Da jedes Fenster Speicherkapazität verbraucht, wird empfohlen, das Fenster zu schließen, sobald es aus der Liste fällt.

Windows.UI.ViewManagement.ApplicationView.getForCurrentView().addEventListener("consolidated", viewConsolidated, false);

function viewConsolidated(e) {
    if (!isMainView) {
        window.close();
    }
}

Hinweis Schließen Sie keinesfalls das Fenster mit der Hauptansicht, weil dadurch die App beendet wird. Der App-Zertifizierungsprozess erfordert, dass sie eine App nicht programmgesteuert schließen. Schließen Sie ein Fenster nur dann, wenn es sich dabei nicht um das Hauptfenster handelt, wie in diesem Beispiel verdeutlicht.

Zusammenfassung und nächste Schritte

Sie haben gelernt, wie Sie mehrere Fenster für eine App erstellen und anzeigen können. Zudem haben Sie gelernt, wie Sie zwischen Fenstern wechseln und wie und wann ein App-Fenster geschlossen wird.

Informationen zur Verwendung des Projektions-Managers zum Projizieren eines separaten App-Fensters auf einen anderen Bildschirm finden Sie unter Richtlinien für Projektions-Manager.

Freigeben über