Erstellen von Seiten und Navigation zwischen Seiten in Hilo (Windows Store-Apps mit JavaScript und HTML)

Applies to Windows only

Aus: Umfassende Entwicklung einer Windows Store-App mit JavaScript: Hilo

Leitfaden-Logo

Vorherige Seite | Nächste Seite

Windows Store-Apps wie Hilo verfügen über eine Seite für jeden Bildschirm der Anwendung, zu dem ein Benutzer navigieren kann. Die App lädt beim Starten eine Startseite (die zentrale Hubseite). Weitere Seiten werden in Abhängigkeit von den Navigationsanforderungen geladen. Wir haben Seiten mit Seitensteuerelementen erstellt, die integrierte Unterstützung für die Navigation bereitstellen. Darüber hinaus haben wir die Projektvorlagendatei navigator.js geändert, um das Navigationsmodell zu implementieren.

Download

Herunterladen des Hilo-Beispiels
Buch herunterladen (PDF)

Anweisungen zu dem heruntergeladenen Code finden Sie unter Erste Schritte mit Hilo.

Im Einzelnen werden Sie Folgendes lernen:

  • Gestaltung der Seiten in der Hilo-App.
  • Laden der Seiten und ihrer Datenquellen zur Laufzeit durch die Hilo-App.
  • Verwenden einer angepassten Version des Navigationssteuerelements für Vorlagen durch die Hilo-App.

Betrifft

  • Windows-Runtime für Windows 8
  • Windows-Bibliothek für JavaScript
  • JavaScript

Hinzufügen neuer Seiten zu einem Projekt

In der Hilo-App sind fünf Seiten vorhanden. Dies sind:

  • Die zentrale Hubseite, auf der einige Fotos und Links zu anderen Ansichten angezeigt werden.
  • Die Seite mit der Monatsansicht, auf der Sie Fotos unterteilt nach Gruppen anzeigen können.
  • Die Detailseite, auf der Sie ein Foto zum Zuschneiden oder Drehen auswählen können.
  • Die Seite für den Bildzuschnitt, auf der Sie ein Foto bearbeiten können.
  • Die Seite für die Bilddrehung, auf der Sie ein Foto drehen können.

Beim Erstellen der App haben die Hilo-Entwickler die einzelnen Seiten dem Projekt mithilfe des Dialogfelds Neues Element hinzufügen in Visual Studio hinzugefügt. Jede Seite ist ein separates PageControl-Element, dem eine HTML-, CSS- und JavaScript-Datei zugeordnet ist.

Die Hubseite ist die Startseite, die beim Ausführen der App angezeigt wird. Die zentrale Hubseite sieht wie folgt aus:

Zentrale Hubseite

[Oben]

Entwerfen von Seiten in Visual Studio und Blend

Hilo C++-Entwickler haben mithilfe von Blend für Microsoft Visual Studio 2012 für Windows 8 die Feinabstimmung des gemeinsamen UX-Designs für Hilo C++ und Hilo JavaScript vorgenommen. Blend war hilfreich bei dem Entwurf von Seiten und Steuerelementen. Weitere Informationen zum gemeinsamen UX-Design finden Sie unter Entwerfen der UX. Für Hilo JavaScript wurde Blend vorrangig als vielseitiger CSS-Editor eingesetzt. Blend verfügt nicht nur über eine DOM-Liveansicht, sondern unterstützt auch eine Funktion, die als interaktiver Modus bezeichnet wird. Mit dieser Funktion können Sie die App ausführen und in einem bestimmten Zustand anhalten. Sie können die angehaltene App auf der Entwurfsoberfläche einblenden, CSS-Änderungen vornehmen und die Auswirkungen prüfen, da sie sofort sichtbar sind. Diese Funktion ist beim Feinabstimmen der Seitendarstellung sehr hilfreich. In der folgenden Abbildung ist eine angehaltene App dargestellt, die in der Entwurfsoberfläche ausgeführt wird. Der Bereich mit den CSS-Eigenschaften auf der rechten Seite enthält Informationen dazu, wie die Formate auf die Seite angewendet werden, und ermöglicht Ihnen das Ändern der Werte.

Blend-Entwurfsmodus mit angehaltener App im interaktiven Modus

Weitere Informationen zur Verwendung von Blend finden Sie unter Blend für Visual Studio 2012.

Wir empfehlen, Visual Studio für das Arbeiten mit den codespezifischen Aspekten Ihrer App zu verwenden. Visual Studio eignet sich am besten zum Schreiben von JavaScript-Code sowie zum Ausführen und Debuggen Ihrer App. Die Schaltfläche Windows-App aktualisierenSchaltfläche zum Aktualisieren einer Windows-App in Visual Studio ermöglicht das schnelle Durchlaufen der Codeänderungen, indem aktualisierter HTML-, CSS- und JavaScript-Code neu geladen wird, ohne dass der Debugger neu gestartet werden muss.

Weitere Informationen zum Entwerfen einer App mit Visual Studio finden Sie unter Erstellen Ihrer ersten Windows Store-App mit JavaScript. Dieses Thema enthält eine Einführung, in der das Entwerfen einer einfachen Seite in einer Windows Store-App beschrieben wird.

[Oben]

Navigationsmodell in Hilo

Bei den Seiten der Hilo-App handelt es sich um Seitensteuerelemente, die ein Modell für Einzelseitennavigation unterstützen. Dies ist das bevorzugte Navigationsmodell für Windows Store-Apps, für die JavaScript verwendet wird. Jedes Seitensteuerelement steht für Inhalt, zu dem der Benutzer navigieren kann. Seiten enthalten andere Steuerelemente. 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. Bei der Erstellung von Hilo war der schnellste Weg zu einem funktionierenden Navigationsmodell die Verwendung der Einzelseitennavigation. Hierbei ergaben sich Vorteile aus der Wiederverwendung von vorhandenem getesteten Navigationscode. Beim Nutzen der Einzelseitennavigation in sehr großen Anwendungen kann eine aktivere Verwaltung der Arbeitsspeicherauslastung erforderlich sein, um eine bessere Leistung zu erzielen.

Bei diesem Navigationsmodell werden HTML-Seiten (die Seitensteuerelemente) in einen einzelnen Inhaltshost geladen. Der Inhaltshost ist ein in default.html deklariertes DIV-Element. In default.html wird das DIV-Element des Inhaltshosts als Steuerelement vom Typ PageControlNavigator deklariert. Dafür wird das data-win-control-HTML-Attribut verwendet, das von WinJS bereitgestellt wird.

Hilo\Default.html


<div id="contenthost" data-win-control="Hilo.PageControlNavigator" data-win-options="{home: '/Hilo/hub/hub.html'}">
</div>


PageControlNavigator wird in PageControlNavigator.js implementiert. In Hilo ist PageControlNavigator.js eine geänderte Version der Datei navigator.js, die Teil von Visual Studio-Projektvorlagen wie "Grid" und "Split" ist. Weitere Informationen zum Modell für Einzelseitennavigation, das in einigen Windows Store-Apps verwendet wird, finden Sie unter Schnellstart: Verwenden der Einzelseitennavigation.

Für Hilo wurden an navigator.js einige Änderungen vorgenommen, z. B. das Umbenennen der Datei und das Ändern des Namespace, um die Benennungskonventionen für Hilo-Code zu erfüllen. Außerdem wurden einige Formatereignisregistrierungen der DOM-Ebene 0 durch die Verwendung des addEventListener-Elements der DOM-Ebene 2 ersetzt.

In der geänderten Datei navigator.js wurde eine reload-Funktion implementiert (nicht dargestellt). Die reload-Funktion wurde hinzugefügt, um Fälle zu unterstützen, in denen Benutzer eine Änderung im Ordner "Bilder" des Dateisystems vornehmen, während die App ausgeführt wird. Die Dateisystemänderung wird mithilfe des contentschanged-Ereignisses der Dateiabfrage erfasst. Der Listener für das Ereignis wird in der Datei contentChangedListener.js implementiert.

[Oben]

Navigieren zwischen Seiten im Modell für Einzelseitennavigation

Um eine Seite in das DIV-Element des Inhaltshosts zu laden, wird von der App WinJS.Navigation.navigate aufgerufen und die Seiten-URL übergeben. Die navigate-Funktion wird zum Navigieren zu einem Seitensteuerelement verwendet. Ein typisches Beispiel für die Verwendung der navigate-Funktion auf Hilo-Seiten befindet sich im itemClicked-Element, das aufgerufen wird, wenn auf ein Bild geklickt oder getippt wird. In diesem Code enthält nav einen Verweis auf WinJS.Navigation.

Hilo\Hilo\hub\hubPresenter.js


itemClicked: function (args) {

    // Get the `Hilo.Picture` item that was bound to the invoked image,
    // and the item index from the list view control.
    var picture = args.detail.item.data;

    // Build the query that can find this picture within it's month group.
    var options = this.buildQueryForPicture(picture);

    // Navigate to the detail view, specifying the month query to
    // show, and the index of the individual item that was invoked.
    this.nav.navigate("/Hilo/detail/detail.html", options);
},


Mit WinJS.Navigation.navigate wird nicht direkt zu einer Seite navigiert, sondern es wird das WinJS.Navigation.onnavigated-Ereignis aufgerufen. Der Handler für WinJS.Navigation.onnavigated wird in PageControlNavigator.js implementiert. Die Hauptaufgabe des Handlers ist das Aufrufen einer Seitensteuerelementfunktion aus WinJS (render), mit der die eigentliche Seite geladen wird. Der Code im Handler – hier nicht dargestellt – ist gegenüber Navigator.js unverändert.

Jedes Seitensteuerelement implementiert eine ready-Funktion, die beim Laden der Seite automatisch ausgeführt wird. Die Implementierung der ready-Funktion ist für jede Seite unterschiedlich. Weitere Informationen zur Implementierung von Funktionen auf den Seiten finden Sie unter Verwenden von Steuerelementen.

[Oben]

Erstellen und Laden von Seiten

Zum Erstellen einer neuen Hilo-Seite wurde Visual Studio verwendet, um eine Elementvorlage zur Seitensteuerung hinzuzufügen (Hinzufügen > New Item). Dank der Vorlage konnte dem Projekt in nur einem Schritt eine HTML-, eine CSS- und eine JavaScript-Datei hinzugefügt werden. Diese Dateien enthielten Standardinhalte und verfügten bereits über die Unterstützung für das Modell für Einzelseitennavigation. Die Vorlage wurde dann so modifiziert, dass sie als Hilo-Seite verwendet werden konnte.

Bei Hilo-Seiten wird für alle Seitensteuerelemente ein benutzerdefiniertes Basisobjekt verwendet. Das Basisobjekt wurde implementiert, damit die gemeinsame Seitenlogik kombiniert und einige Aufgaben einfacher zentralisiert werden konnten, als dies mit der Standardelementvorlage möglich ist. In das Basisobjekt wurde Code für die Behandlung der folgenden Aufgaben eingebunden:

  • Registrieren von Seiten wie "Hilo/hub/hub.html".
  • Verarbeitung lokalisierter Zeichenfolgenressourcen
  • Verarbeitung klickbarer Untertitel, die auf den meisten Seiten vorhanden sind
  • Behandlung der Deserialisierung, wenn eine App nach dem Anhalten fortgesetzt wird

Damit eine neue Seite das Basisseitenobjekt verwenden kann, wird der Aufruf von WinJS.UI.Pages.define im Elementvorlagencode durch einen Aufruf von Hilo.controls.pages.define ersetzt. Wir haben den zum Erstellen eines Seitensteuerelements erforderlichen Aufruf von WinJS.UI.Pages.define in das Basisseitenobjekt verschoben. Die an define übergebenen Argumenten geben den Namen der Seite und die auf der Seite implementierten Methoden an. Das folgende Codebeispiel stammt aus hub.js. In diesem Code enthalten die auf der Seite implementierten Methoden ready, updateLayout und unload.

Hilo\Hilo\hub\hub.js


Hilo.controls.pages.define("hub", {

    ready: function (element, options) {

        // Handle the app bar button clicks for showing and hiding the app bar.
        var appBarEl = document.querySelector("#appbar");
        var hiloAppBar = new Hilo.Controls.HiloAppBar.HiloAppBarPresenter(appBarEl, WinJS.Navigation);

        // Handle selecting and invoking (clicking) images.
        var listViewEl = document.querySelector("#picturesLibrary");
        this.listViewPresenter = new Hilo.Hub.ListViewPresenter(listViewEl, Windows.UI.ViewManagement.ApplicationView);

        // Coordinate the parts of the hub page.
        this.hubViewPresenter = new Hilo.Hub.HubViewPresenter(
            WinJS.Navigation,
            hiloAppBar,
            this.listViewPresenter,
            new Hilo.ImageQueryBuilder()
        );

        this.hubViewPresenter
            .start(knownFolders.picturesLibrary)
            .then(function () {
                WinJS.Application.addEventListener("Hilo:ContentsChanged", Hilo.navigator.reload);
            });
    },

    updateLayout: function (element, viewState, lastViewState) {
        this.listViewPresenter.setViewState(viewState, lastViewState);
    },

    unload: function () {
        WinJS.Application.addEventListener("Hilo:ContentsChanged", Hilo.navigator.reload);
        Hilo.UrlCache.clearAll();
        this.hubViewPresenter.dispose();
        this.hubViewPresenter = null;
    }
});


Die define-Funktion für das Basisobjekt, implementiert in pages.js, wird für die Verwendung in der App mit WinJS.Namespace.define verfügbar gemacht.

Hilo\Hilo\controls\pages.js


WinJS.Namespace.define("Hilo.controls.pages", {
    define: define
});


In der define-Funktion wird die URL für die Seite festgelegt, und anschließend wird die seitenspezifische ready-Funktion an einen Aufruf von wrapWithCommonReady übergeben.

Hilo\Hilo\controls\pages.js


function define(pageId, members) {

    var url = "/Hilo/" + pageId + "/" + pageId + ".html";

    members.ready = wrapWithCommonReady(members.ready);
    members.bindPageTitle = bindPageTitle;

    return WinJS.UI.Pages.define(url, members);
}


wrapWithCommonReady übernimmt die ready-Funktion der Seite als Eingabe und gibt eine neue Wrapper-Funktion zurück. In der Wrapper-Funktion wurde zusätzlicher Code hinzugefügt, der für alle Hilo-Seiten gilt. Dazu gehört beispielsweise der Aufruf von WinJS.Resources.processAll, der die lokalisierten Zeichenfolgenressourcen (RESJSON-Dateien) verarbeitet. Außerdem zählt ein Aufruf zur Behandlung der Deserialisierung dazu, wenn die App nach dem Anhalten fortgesetzt wird. Die Wrapper-Funktion enthält einen Aufruf der ready-Funktion der Seite in der folgenden Zeile: return ready(element, options). Aufgrund der Zentralisierung dieser Aufgaben konnten die Seitenabhängigkeiten reduziert, Wiederholung von Code auf verschiedenen Seiten verhindert und das Seitenverhalten vereinheitlicht werden.

Hilo\Hilo\controls\pages.js


function wrapWithCommonReady(pageSpecificReadyFunction) {

    pageSpecificReadyFunction = pageSpecificReadyFunction || function () { };

    return function (element, options) {

        processLinks();

        // Handle localized string resources for the page.
        WinJS.Resources.processAll();

        // Ensure that the `options` argument is consistent with expectations,
        // for example, that it is properly deserialized when resuming.
        Hilo.controls.checkOptions(options);

        // We need to bind the `pageSpecificReadyFunction` function explicitly, 
        // otherwise it will lose the context that the developer expects (that is, 
        // it will not resolve `this` correctly at execution time.
        var ready = pageSpecificReadyFunction.bind(this);

        // Invoke the custom `ready`.
        return ready(element, options);
    };
}


Wenn die Rückgabe für wrapWithCommonReady durchgeführt wird, wird der Rückgabewert (die Wrapper-Funktion) verwendet, um die neue ready-Funktion für die Seite festzulegen. In define wird dann eine Funktion aufgerufen, um den Seitentitel festzulegen und danach WinJS.UI.Pages.define aufzurufen. An diese Methode werden die URL und Seitenmember übergeben. Die WinJS.UI.Pages.define-Funktion ist zum Definieren eines Seitensteuerelements erforderlich.

Hilo\Hilo\controls\pages.js


members.ready = wrapWithCommonReady(members.ready);
members.bindPageTitle = bindPageTitle;

return WinJS.UI.Pages.define(url, members);


Während der Ausführung der App wird die neue ready-Funktion automatisch nach dem Aufruf von navigate aufgerufen. Anschließend ruft die neue ready-Funktion die ready-Funktion der Seite auf. Dies ist die ready-Funktion für die Hubseite.

Hilo\Hilo\hub\hub.js


ready: function (element, options) {

    // Handle the app bar button clicks for showing and hiding the app bar.
    var appBarEl = document.querySelector("#appbar");
    var hiloAppBar = new Hilo.Controls.HiloAppBar.HiloAppBarPresenter(appBarEl, WinJS.Navigation);

    // Handle selecting and invoking (clicking) images.
    var listViewEl = document.querySelector("#picturesLibrary");
    this.listViewPresenter = new Hilo.Hub.ListViewPresenter(listViewEl, Windows.UI.ViewManagement.ApplicationView);

    // Coordinate the parts of the hub page.
    this.hubViewPresenter = new Hilo.Hub.HubViewPresenter(
        WinJS.Navigation,
        hiloAppBar,
        this.listViewPresenter,
        new Hilo.ImageQueryBuilder()
    );

    this.hubViewPresenter
        .start(knownFolders.picturesLibrary)
        .then(function () {
            WinJS.Application.addEventListener("Hilo:ContentsChanged", Hilo.navigator.reload);
        });
},


Mit der ready-Funktion werden so genannte "Presenter" für die Ansicht erstellt. Mit Hilo wird ein Model-View-Presenter (MVP)-Muster implementiert. Weitere Informationen finden Sie unter Verwenden eines eigenen Darstellungsmusters.

[Oben]

Laden der Hubseite

Beim Starten der Hilo-App wird die Hubseite in das in der Datei default.html deklarierte DIV-Element des Inhaltshosts geladen. Die Hubseite ist im DIV-Element des Inhaltshosts als Homepage angegeben, indem das data-win-options-Attribut aus WinJS verwendet wird.

Hilo\default.html


<div id="contenthost" data-win-control="Hilo.PageControlNavigator" data-win-options="{home: '/Hilo/hub/hub.html'}">
</div>


In PageControlNavigator.js wird der data-win-options-Wert in die Konstruktorfunktion für das PageControlNavigator-Element übergeben. Die Homepage wird dem Navigator-Objekt zugewiesen. Außerdem wird in diesem Code Hilo als Namespace für das Navigator-Objekt angegeben.

PageControlNavigator.js


WinJS.Namespace.define("Hilo", {
    PageControlNavigator: WinJS.Class.define(

        // Define the constructor function for the PageControlNavigator.
        function PageControlNavigator(element, options) {
            var body = document.body;

            // . . . 

            this.home = options.home;
            // . . . 
            Hilo.navigator = this;
        },


Um die Hubseite in das DIV-Element des Inhaltshosts zu laden, wird von der App navigate aufgerufen. Die App übergibt den Wert für die Startseite von PageControlNavigator. Der folgende Code ist in der Datei "default.js" in der activated-Ereignishandlerfunktion enthalten.

Hilo\default.js


if (nav.location) {
    nav.history.current.initialPlaceholder = true;
    return nav.navigate(nav.location, nav.state);
} else {
    return nav.navigate(Hilo.navigator.home);
}


[Oben]

Herstellen der Datenbindung

Jede Seite der Hilo-App enthält eine Datenbindung. Mithilfe der Datenbindung wird das Modell (Datenquelle) mit der Ansicht verknüpft. In Hilo sind Presenterklassen für das Zuweisen der Datenquelle zur Ansicht zuständig. Weitere Informationen finden Sie in diesem Leitfaden unter Verwenden eines eigenen Darstellungsmusters. Weitere Informationen zur deklarativen Bindung in Hilo finden Sie unter Verwenden von Steuerelementen.

[Oben]

Unterstützen von Hochformatlayouts sowie angedockten und gefüllten Layouts

Hilo wurde für die Anzeige im Querformat und im Vollbildmodus entwickelt. Windows Store-Apps wie Hilo müssen sich an andere Ansichtszustände von Anwendungen wie Quer- und Hochformat anpassen können. Hilo unterstützt Layouts vom Typ fullScreenLandscape, filled, fullScreenPortrait und snapped. Hilo ruft den aktuellen Ansichtszustand mithilfe der Windows.UI.ViewManagement.ApplicationView-Klasse ab. Änderungen an der visuellen Anzeige werden von Hilo mit dem resize-Ereignis behandelt. Dies ermöglicht die Unterstützung der einzelnen Layouts.

Das PageControlNavigator-Element wird für das resize-Ereignis im entsprechenden Konstruktor registriert.

Hilo\Hilo\PageControlNavigator.js


    function PageControlNavigator(element, options) {

        // . . .

        window.onresize = this._resized.bind(this);

        // . . .
    },



Beim Auftreten eines resize-Ereignisses ruft der Handler für das Ereignis die in Hilo-Seiten implementierte updateLayout-Funktion auf. Die appView-Variable enthält einen Verweis auf das ApplicationView-Objekt, dessen Wert an den Ansichtszustand übergeben wird.

Hilo\Hilo\PageControlNavigator.js


_resized: function (args) {
    if (this.pageControl && this.pageControl.updateLayout) {
        this.pageControl.updateLayout.call(this.pageControl, this.pageElement, appView.value, this._lastViewstate);
    }
    this._lastViewstate = appView.value;
},


Im folgenden Beispiel ist die Implementierung von updateLayout für die Hubseite dargestellt. Auf der Hubseite ruft updateLayout die setViewState-Funktion des ListView-Presenters auf. Anschließend wird der Ansichtszustand übergeben.

Hilo\Hilo\hub\hub.js


updateLayout: function (element, viewState, lastViewState) {
    this.listViewPresenter.setViewState(viewState, lastViewState);
},


Im ListView-Presenter wird mit setViewState das aktuelle Layout für das ListView-Steuerelement der Hubseite festgelegt, indem der von selectLayout zurückgegebene Wert verwendet wird. Anschließend wird der Ansichtszustand an selectLayout weitergeleitet.

Hilo\Hilo\hub\listViewPresenter.js


setViewState: function (viewState) {
    this.lv.layout = this.selectLayout(viewState);
},


Mithilfe von selectLayout wird überprüft, ob für den aktuellen Ansichtszustand das Andocken aktiviert oder deaktiviert ist. Wenn ja, wird ein ListLayout-Objekt zurückgegeben, das eine vertikale Liste darstellt. Wenn das Andocken für den Ansichtszustand nicht aktiviert ist, wird ein GridLayout-Objekt zurückgegeben, das eine vertikale Liste darstellt.

Hilo\Hilo\hub\listViewPresenter.js


selectLayout: function (viewState, lastViewState) {

    if (lastViewState === viewState) { return; }

    if (viewState === appViewState.snapped) {
        return new WinJS.UI.ListLayout();
    }
    else {
        var layout = new WinJS.UI.GridLayout();
        layout.groupInfo = function () { return listViewLayoutSettings; };
        layout.maxRows = 3;
        return layout;
    }
},


Für einige Seiten müssen zum Behandeln von Ansichtszuständen keine speziellen Schritte ausgeführt werden, sodass updateLayout nicht für alle Seiten implementiert wird.

[Oben]

 

 

Anzeigen:
© 2014 Microsoft