Navigationsmodell
Das in den Projektvorlagen "Grid App", "Split App" und "Navigation App" verwendete Navigationsmodell wird für mehrseitige Windows-Store-Apps empfohlen, die in JavaScript für Windows erstellt werden. In diesem Modell werden logische HTML-Seiten, die über den Seiten-URI geladen werden, in einen einzelnen App-weiten Kontext geladen. Die logischen Seiten werden je nach Bedarf in den App-Kontext geladen (in der Regel als Reaktion auf Benutzeraktionen). Webentwickler bezeichnen diesen Typ von Navigationsmodell häufig als Einzelseitennavigation. Die navigator.js-Datei implementiert das Navigationsmodell. Das Modell für Einzelseitennavigation ermöglicht einen reibungsloseren, App-ähnlichen Übergang zwischen Seiten und erleichtert auch das Verwalten des Zustands, weil Skripts nie entladen werden.
In anderen Projektvorlagen wie "Blank App" ist die Datei "navigator.js" nicht enthalten. Für diese Vorlage müssen Sie eine benutzerdefinierte Navigation implementieren, wenn Sie die Projektdatei "navigator.js" nicht manuell hinzufügen möchten. Wenn Sie mit WinJS.Navigation.navigate zwischen Seiten navigieren, denken Sie daran, dass WinJS.Navigation.navigate keine direkte Navigation vornimmt. Es handelt sich nur um einen Wrapper, der ein Statusobjekt speichert, das Ihrem aktuellen Standort zugeordnet ist und dann das WinJS.Navigation.onnavigated-Ereignis aufruft. Weitere Informationen zur Navigation und ein Beispiel zur Verwendung der Einzelseitennavigation in Windows Store-Apps, die für Windows mit JavaScript erstellt werden, finden Sie unter Schnellstart: Verwenden der Einzelseitennavigation.
Hilfe zur Auswahl des besten Navigationsmusters für die App finden Sie unter Navigationsmuster. Sie sehen das flache Navigationsmuster in unserer Serie App-Features von A bis Z in Aktion.
Im Einzelseiten-Navigationsmodell, das in den Vorlagen "Grid App", "Split App" und "Navigation App" verwendet wird, stellt ein DIV-Element, das als Navigationssteuerelement der App (in "default.html") deklariert ist, den Inhaltshost für alle App-Seiten bereit. Das DIV-Element verwendet das data-win-control-Attribut der Windows-Bibliothek für JavaScript, um sich selbst als Navigationssteuerelement zu deklarieren. Dieses Steuerelement stellt das Navigationsmodell für die App bereit. Sämtlicher Seiteninhalt wird in dieses DIV geladen. Das hier angezeigte Element ist in default.html in der Vorlage "Split App" enthalten.
<div id="contenthost" data-win-control="Application.PageControlNavigator"
data-win-options="{home: '/pages/items/items.html'}">
</div>
Das Navigationssteuerelement PageControlNavigator, das Sie hier sehen, definiert mehrere Funktionen, die für die Navigation verwendet werden. Dieses Steuerelement ist in navigator.js implementiert.
WinJS.Namespace.define("Application", {
PageControlNavigator: WinJS.Class.define(
// Define the constructor function for the PageControlNavigator.
function PageControlNavigator(element, options) {
// Initialization code.
}, {
// Members specified here.
}
), // . . .
});
Die Konstruktorfunktion führt die Initialisierung für das Navigationssteuerelement aus. Zu den wichtigen Aufgaben zählen das Festlegen von Handlern für WinJS-Ereignisse (beispielsweise das WinJS.Navigation.onnavigating-Ereignis) sowie das Festlegen der Startseite der App. (Der Wert für die Startseite wird im contenthost DIV-Element in einem data-win-options-Attribut angegeben.)
// Initialization code.
this.home = options.home;
// . . .
// The 'nav' variable is set to WinJS.Navigation.
addRemovableEventListener(nav, 'navigating', this._navigating.bind(this), false);
addRemovableEventListener(nav, 'navigated', this._navigated.bind(this), false);
Die in den Inhaltshost geladenen Seiten sind Seitensteuerelemente, die im Namespace WinJS.UI.Pages definiert sind. Ein Seitensteuerelement ist eine modulare Einheit von HTML, CSS und JavaScript, die als eine logische Seite fungiert. Wenn Sie Seitensteuerelemente verwenden, können Sie eine Gruppe vordefinierter Methoden nutzen, die die Bibliothek automatisch in einer vorgegebenen Reihenfolge aufruft. Die WinJS.UI.Pages.define-Funktion macht diese Methoden für die Implementierung verfügbar. Hier sehen Sie einen Teil der define-Funktion in "split.js" (Vorlage für eine geteilte App):
WinJS.UI.Pages.define("/pages/split/split.html", {
// . . .
ready: function (element, options) {
// ready function implementation.
},
// . . .
});
Die Projektvorlagen implementieren die letzte der internen Seitensteuerungsmethoden: die ready-Funktion sowie für einige Vorlagen die init-Funktion. (Die anderen in split.js definierten Funktionen sind von der Vorlage abhängig.) Die ready-Funktion wird aufgerufen, wenn die Seite geladen und vollständig verarbeitet wurde. Diese Funktion muss den Initialisierungscode für jede Seite enthalten. Der Code ist für jede Seite eindeutig.
Tipp Die internen Seitensteuerungsfunktionen werden in der folgenden Reihenfolge aufgerufen: load, init, processed und ready. Normalerweise werden nur die ready-Funktion und die init-Funktion in eine Windows Store-App implementiert. Weitere Informationen finden Sie unter IPageControlMembers.init.
Um zu einer neuen Seite zu navigieren, ruft jede Vorlagen-App WinJS.Navigation.navigate auf. Diese Aufrufe bewirken, dass das Navigationssteuerelement die HTML-Datei als logische Seite in das Inhaltshost-DIV-Element lädt. Mehrere Funktionen auf den Vorlagenseiten rufen die WinJS-Funktion navigate auf:
- Die _itemInvoked-Funktion, die die Auswahl eines Elements in einer Listenansicht behandelt. Abhängig von der aktuellen Seite und dem Kontext kann ein einzelnes Element oder eine Gruppe ausgewählt werden.
- Die _selectionChanged-Funktion, die die Auswahl eines Elements in der split.html (Vorlage "Split Application") behandelt.
In einigen Vorlagen ändern bestimmte Funktionen in den JavaScript-Dateien der HTML-Seiten möglicherweise den Verlauf der Schaltfläche Zurück. Dies hängt vom aktuellen Ansichtszustand ab. In der Vorlage für geteilte Apps ändert die App beispielsweise den Verlauf der Schaltfläche Zurück, wenn sich die App in einem besonderen vorlagendefinierten Ansichtszustand befindet, der als Master/Detail-Ansicht bezeichnet wird. Weitere Informationen finden Sie im Abschnitt "Behandeln des Ansichtszustands" im Thema JavaScript-Projektvorlagen für Windows Store-Apps.