Schnellstart: Verwenden von Hub-Steuerelementen für Layout und Navigation

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]

Hier erfahren Sie, wie Sie einer Windows Store-App mit JavaScript ein Hub-Steuerelement hinzufügen.

Hilfe zur Auswahl des besten Navigationsmusters für die App finden Sie unter Navigationsmuster.

Außerdem können Sie das flache Navigationsmuster und das hierarchische Navigationsmuster in Aktion erleben, wenn Sie sich die Reihe App-Features – Gesamtübersicht ansehen.

Voraussetzungen

Anweisungen

1. Erstellen eines neues Projekts mit der Vorlage "Leere App"

Starten Sie Microsoft Visual Studio Express 2013 für Windows.
Klicken Sie auf der Registerkarte Startseite auf Neues Projekt. Das Dialogfeld Neues Projekt wird geöffnet.
Erweitern Sie im Bereich Installiert die Einträge Vorlagen und JavaScript, und klicken Sie auf den Vorlagentyp Windows Store-App. Die verfügbaren Projektvorlagen für JavaScript werden im mittleren Fenster des Dialogfelds angezeigt.
Wählen Sie im mittleren Bereich die Projektvorlage Leere App aus.
Geben Sie im Textfeld Name den Namen Hub-Demo ein.
Klicken Sie auf OK, um das Projekt zu erstellen.

2. Hinzufügen der Hubdefinition zum Projekt

Ein Hub-Steuerelement kann entweder deklarativ in einer HTML-Seite oder zur Laufzeit mithilfe von JavaScript-Code definiert werden, der mit der Seite geladen wird. In diesem Beispiel wird der Hub deklarativ im HTML-Markup erstellt.

Öffnen Sie default.html, und fügen Sie den folgenden HTML-Code in das body-Element ein. Der Hub sollte direkt dem body-Element untergeordnet sein. Es wird empfohlen, im Dokumentobjektmodell (DOM) globale Befehle vor Kontextbefehlen zu platzieren, um beim Ändern der App-Größe das optimale Layout zu erzielen.

In diesem Beispiel wird ein Hub deklarativ mit drei HubSection-Objekten hinzugefügt, wobei das zweite HubSection-Objekt der erste sichtbare Abschnitt im Hub ist. Verwenden Sie die Standardstile oder schreiben Sie eigene Cascading Style Sheets (CSS) für die Steuerelemente Hub und HubSection.


<div data-win-control="WinJS.UI.Hub" id="hub"
    data-win-options="{
        sectionOnScreen : '1',
    }">
    <div data-win-control="WinJS.UI.HubSection"
        data-win-options="{
            header: 'Ancient Greek authors',
            isHeaderStatic: true
        }">
        My favorite authors of Ancient Greek (Homeric, Attic, Ionic):
        <ul>
            <li>Homer</li>
            <li>Herodotus</li>
            <li>Thucydides</li>
            <li>Plato</li>
        </ul>
    </div>
    <div data-win-control="WinJS.UI.HubSection"
        data-win-options="{
            header: 'Latin authors'
        }">
        <div>
            My favorite authors of works in Classical Latin:
            <ul>
                <li>Marcus Tullius Cicero</li>
                <li>Caius Julius Caesar</li>
                <li>Publius Virgilius Maro (Virgil)</li>
                <li>Titus Livius Patavinus (Livy)</li>
            </ul>
        </div>
    </div>
    <div data-win-control="WinJS.UI.HubSection"
        data-win-options="{
            header: 'English authors',
            isHeaderStatic: false
        }">
        My favorite authors of works in Middle and Early Modern English: 
        <ul>
            <li>Geoffrey Chaucer</li>
            <li>William Shakespeare</li>
            <li>Christopher Marlowe</li>
        </ul>
    </div>
</div>

3. Hinzufügen von Code zum Behandeln von Hub-Ereignissen

Zwei der HubSection-Objekte in diesem Beispiel besitzen dynamische Header. Werden sie angeklickt, wird das Hub.onheaderinvoked-Ereignis ausgelöst. Verwenden Sie zum Festlegen von dynamischen oder statischen Headern die HubSection.isHeaderStatic-Eigenschaft, die standardmäßig auf false festgelegt ist.

Im Hub.onheaderinvoked-Ereignishandler kann das HubSection-Objekt oder der Index des aufgerufenen HubSection-Objekts aus den Ereignisargumenten extrahiert werden (der Index ist nullbasiert).

Das folgende Beispiel zeigt, wie dem Hub.onheaderinvoked-Ereignis ein Handler hinzugefügt wird. Der Handler ruft den Index des aufgerufenen HubSection-Objekts ab und legt den Hub.sectionOnScreen-Wert fest.

Öffnen Sie im Projektmappen-Explorer im Ordner "js" die Datei "default.js".

Ersetzen Sie den vorhandenen Code in der Datei "default.js" durch diesen Code.


(function () {
    "use strict";

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

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // Add your initialization code here.
            } else {
                // Restore app state here.
            }
            args.setPromise(WinJS.UI.processAll());
        }

        // Get the hub control from the HTML page and
        // add a handler to the headerInvoked event.
        hub = WinJS.Utilities.query("#hub")[0];
        hub.winControl.onheaderinvoked = onHeaderInvoked;
    };

    app.oncheckpoint = function (args) {
        // Add app suspension code here.
    };

    // When a HubSection header is clicked, call this code to
    // make the section completely visible within the hub.
    function onHeaderInvoked(args) {
        hub.winControl.sectionOnScreen = args.detail.index;
    }

    app.start();
})();

Legen Sie die Laufzeitumgebung auf Simulator fest, und drücken Sie F5, um die App auszuführen.
Ändern Sie die Auflösung des Simulator-Fensters so, dass sich der letzte Hub-Bereich teilweise außerhalb des Bildschirm befindet, wenn die Hub-Seite nach links gerichtet ist.
Klicken Sie auf den Header des letzten, teilweise eingeblendeten Abschnitts im Hub, um die Hub-Seite so auszurichten, dass der Abschnitt vollständig eingeblendet wird.

Hub-Apps folgen einem Muster, das als hierarchisches Navigationsmuster bezeichnet wird. Zusätzliche Informationen zu Navigationsmöglichkeiten für Benutzer in Windows Store-Apps finden Sie unter Navigationsmuster.

In Apps mit umfassenden Inhaltssammlungen oder vielen unterschiedlichen Inhaltsbereichen, die von Benutzern durchsucht werden können, sollten Sie Benutzern die Rückwärtsnavigation ermöglichen. Seiten und Abschnittsüberschriften in einer Hub-App können zum Hosten von BackButton-Steuerelementen genutzt werden. Auf jeder Seite kann eine Zurück-Schaltfläche gehostet werden, die erst dann eingeblendet wird, wenn Sie über eine andere Seite auf diese Seite navigieren. Das BackButton-Steuerelement kann deklarativ im HTML-Code der Seite oder zur Laufzeit mithilfe von JavaScript erstellt werden.

Das BackButton-Steuerelement erfordert wenig Aufwand. Der Großteil des Codes für die Navigationsfunktion der Zurück-Schaltfläche ist in der Windows-Bibliothek für JavaScript (WinJS) integriert. Sie müssen lediglich das Steuerelement wie hier gezeigt in Ihrem HTML-Markup deklarieren.

<!DOCTYPE html>
<html>
<head>
    <title>home</title>
</head>
<body>
    <header role="banner">
        <button data-win-control="WinJS.UI.BackButton"></button>
        <h1 class="titlearea">Home</h1>
    </header>
</body>
</html>

Ohne Formatierung wird das BackButton-Steuerelement in einem separaten Block über dem Seitentitel angezeigt. Zum Erzielen des Windows-Stils, bei dem die Zurück-Schaltfläche in einer Linie mit dem Titel angezeigt wird, müssen Sie Ihrem Projekt benutzerdefinierte CSS hinzufügen. Insbesondere müssen Sie ein Raster innerhalb des übergeordneten Elements (<section> -Tag) erstellen, in dem die beiden Elemente nebeneinander angeordnet werden.

Fügen Sie unter default.css (im Ordner css) folgenden CSS-Code hinzu, um das Layout des BackButton-Steuerelements und des Titels auf den Seiten anzupassen.

#contenthost {
    height: 100%;
    width: 100%;
}

header[role=banner] {
    display: -ms-grid;
    -ms-grid-columns: 37px 83px 1fr;
    -ms-grid-rows: 1fr;
}

    header[role=banner] button {
        -ms-grid-column: 2;
        margin-top: 57px;
    }

    header[role=banner] h1 {
        -ms-grid-column: 3;
        margin-top: 37px;
    }

Zusammenfassung

In diesem Schnellstart haben Sie ein Hub-Steuerelement mit drei HubSection-Objekten hinzugefügt. Außerdem haben Sie zum Hub.onheaderinvoked-Ereignis eine einfache Handlerfunktion hinzugefügt.

Zudem haben Sie jeder Seite in der App ein BackButton-Steuerelement hinzugefügt.

Voraussetzungen

Anweisungen

1. Erstellen eines neues Projekts mit der Vorlage "Leere App"

2. Hinzufügen der Hubdefinition zum Projekt

3. Hinzufügen von Code zum Behandeln von Hub-Ereignissen

4. Navigation in einer Hub-App

Zusammenfassung

Verwandte Themen

Zusätzliche Ressourcen