Schnellstart: Hinzufügen von Navigationsleisten (NavBar)

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 Ihrer Windows Store-App mit JavaScript eine Navigationsleiste (auch als "obere App-Leiste" bezeichnet) hinzufügen."" Die Windows-Bibliothek für JavaScript (WinJS) enthält die Steuerelemente NavBar, NavBarCommand und NavBarContainer, mit denen Sie eine Einzelseitennavigations-App erstellen können.

Hinweis Die Steuerelemente NavBar, NavBarCommand und NavBarContainer sind unter Windows 8.1 neu. Verwenden Sie unter Windows 8 das AppBar -Steuerelement und die placement-Eigenschaft, um eine Navigationsleiste bereitzustellen.

Die meisten Microsoft Visual Studio 2013-Vorlagen für Windows Store-Apps implementieren das Navigationsframework automatisch, sie müssen es also nicht selbst implementieren. Diese Vorlagen, einschließlich der Elementvorlage zur Seitensteuerung (siehe Hinzufügen von Seitensteuerelementen), enthalten das BackButton-Steuerelement, mit dem Sie Benutzern die Rückwärtsnavigation ermöglichen können.

Hinweis Windows Store-Apps verwenden in der Regel eines von zwei Navigationsmustern (flach und hierarchisch). Die Verwendung des BackButton-Objekts in App mit flachem Navigationsmuster wird nicht empfohlen. Einzelheiten finden Sie unter Navigationsmuster.

Im vorliegenden Beispiel wird die leere Projektvorlage von Microsoft Visual Studio verwendet. Wenn Sie die standardmäßigen Formatvorlagen und das Markup verwenden, werden die im NavBar-Steuerelement abgelegten Befehle passend formatiert. Dazu zählen sowohl Bildüberlagerungen als auch Schriftartensymbole für die Befehlssymbole.

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 Visual Studio 2013.

Hinweis Wenn Sie Visual Studio zum ersten Mal ausführen, werden Sie auf die Entwicklerlizenz hingewiesen.
Wählen Sie Datei > Neues Projekt, oder klicken Sie auf der Registerkarte Startseite auf Neues Projekt. Das Dialogfeld Neues Projekt wird geöffnet.
Erweitern Sie im Bereich Installiert den Eintrag Vorlagen und anschließend JavaScript, und wählen Sie dann den Vorlagentyp Windows Store-App aus. Die verfügbaren Projektvorlagen für JavaScript werden im mittleren Bereich des Dialogfelds angezeigt.
Wählen Sie im mittleren Fenster die Projektvorlage Leere App aus.
Geben Sie in das Textfeld Name einen Namen für Ihr Projekt ein. In den Beispielen in diesem Thema wird Navigationsleistendemo verwendet.
Klicken Sie auf OK, um das Projekt zu erstellen.

2. Hinzufügen der Definition der Navigationsleiste zum Projekt

Ihre Navigationsleiste kann entweder deklarativ in einer HTML-Seite oder zur Laufzeit in einer mit der Seite geladenen JavaScript-Datei definiert werden. In diesem Beispiel wird die Navigationsleiste deklarativ im HTML-Markup erstellt.

Öffnen Sie default.html, und fügen Sie den folgenden HTML-Code in das body-Element ein. Die Navigationsleiste sollte dem body-Element direkt untergeordnet sein.

Hier deklarieren wir ein NavBar-Steuerelement, das ein NavBarContainer-Objekt mit zwei NavBarCommand-Steuerelementen enthält.

Hinweis Auch wenn es ein gültiger Vorgang ist, raten wir Ihnen, NavBarCommand-Steuerelemente nicht als direkte untergeordnete Elemente von NavBar hinzuzufügen. Sowohl das Schaltflächenlayout als auch die Barrierefreiheit der Tastaturnavigation werden dadurch beeinträchtigt.


<div id="navBar" data-win-control="WinJS.UI.NavBar">
  <div id="globalNav" data-win-control="WinJS.UI.NavBarContainer">
    <div data-win-control="WinJS.UI.NavBarCommand"
      data-win-options="{
                    label: 'Home',
        tooltip: 'Take me home',
        id:'homeButton',
        icon: WinJS.UI.AppBarIcon.home,
        location: '/pages/home/home.html',
      }">
    </div>
    <div data-win-control="WinJS.UI.NavBarCommand"
      data-win-options="{
                    label: 'Page 2',
        tooltip: 'Take me to Page 2',
        id:'page2Button',
        icon: WinJS.UI.AppBarIcon.page,
        location: '/pages/page2/page2.html',
      }">
    </div>
  </div>
</div>

3. Hinzufügen des Navigationshandlercodes

Die im Markup deklarierten NavBarCommand-Objekte lösen Navigationsereignisse aus (Navigation.onnavigating und Navigation.onnavigated), weshalb es nicht erforderlich ist, Handlercode zu den NavBarCommand-Objekten hinzuzufügen. Sie müssen stattdessen Handlercode zu den Navigation.onnavigating- oder Navigation.onnavigated-Ereignissen in der default.js-Datei hinzufügen, die der default.html-Datei zugeordnet ist.

Dieses Beispiel zeigt, wie dem Navigation.onnavigated-Ereignis ein Handler hinzugefügt wird. Der Handler ruft die URL des Speicherorts, zu dem navigiert wird, vom Ereignisobjekt ab (dieses ist in der location-Eigenschaft des data-win-options-Attributs von NavBarCommand definiert). Anschließend entfernt der Handler den vorhandenen Inhalt aus dem Inhaltshost (Seitensteuerung) und rendert die neue Seite im Host.

Öffnen Sie im Projektmappen-Explorerdefault.js im Ordner js.

Ersetzen Sie den Standardcode in der Datei default.js durch den folgenden Code:


(function () {
    "use strict";

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

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

            var start = WinJS.UI.processAll().
                then (function () {
                    return nav.navigate("/pages/home/home.html");
                                                                });

            args.setPromise(start);
        }
    };

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

    nav.onnavigated = function (evt) {
        var contentHost = 
            document.body.querySelector("#contenthost"),
            url = evt.detail.location;

        // Remove existing content from the host element.
        WinJS.Utilities.empty(contentHost);

        // Display the new page in the content host.
        WinJS.UI.Pages.render(url, contentHost);
    }

    app.start();
})();

4. Hinzufügen zweier Seiten, zwischen denen navigiert werden kann

Sie können diese Seiten manuell oder über die Visual Studio-Elementvorlage zur Seitensteuerung hinzufügen, die den gesamten erforderlichen Markup- und JavaScript-Code enthält.

Dn376409.wedge(de-de,WIN.10).gif Manuelles Hinzufügen von Seiten zum Projekt

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Projektnamen ("Navigationsleistendemo"), und wählen Sie dann Hinzufügen, Neuer Ordner aus. Benennen Sie den Ordner "Seiten".
Klicken Sie mit der rechten Maustaste auf den soeben erstellten Ordner Seiten, und wählen Sie Hinzufügen, Neuer Ordner. Nennen Sie den neuen Ordner "home".
Erstellen Sie einen zweiten Ordner unter Seite. Benennen Sie diesen Ordner "page2".
Klicken Sie mit der rechten Maustaste auf den Ordner home, und wählen Sie Hinzufügen, Neue HTML-Datei. Geben Sie im Dialogfeld Neues Element hinzufügen dieser Datei den Namen "books.js", und klicken Sie dann auf Hinzufügen.

Ersetzen Sie den Standard-HTML-Code in der Datei durch den folgenden Code.
```
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <p>Home</p>
</body>
</html>
```
Wiederholen Sie den obigen Schritt für den Ordner page2. Benennen Sie die Datei "page2.html".

Ersetzen Sie den Standard-HTML-Code in der Datei durch den folgenden Code.
```
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <p>Page2</p>
</body>
</html>
```

Alternativ können Sie die JavaScript-Elementvorlagen für Windows Store-Apps in Visual Studio verwenden.

Dn376409.wedge(de-de,WIN.10).gif Verwenden der Elementvorlage zur Seitensteuerung zum Hinzufügen neuer Seiten zum Projekt

Erstellen Sie wie oben beschrieben den Ordner Seiten mit den Unterordnern home und page2.
Klicken Sie mit der rechten Maustaste auf den Ordner home, und klicken Sie auf Hinzufügen > Neues Element.... Das Dialogfeld Neues Element hinzufügen wird angezeigt.
Wählen Sie in der Liste Seitensteuerung aus. Geben Sie im Textfeld Name den Namen "home.html" ein.
Klicken Sie auf Hinzufügen. Im Projektmappen-Explorer wird ein neues PageControl-Objekt angezeigt.

Das neue PageControl-Objekt enthält drei Dateien:home.css, home.html und home.js.

Hinweis Auf diese Weise hinzugefügte HTML-Dateien enthalten Code für das BackButton-Steuerelement. Wie bereits erwähnt, sollten Sie bei der Verwendung eines flaches Navigationsmusters nicht das BackButton-Objekt verwenden. Daher können Sie diesen Code problemlos löschen. Weitere Informationen finden Sie unter Navigationsmuster.
Klicken Sie mit der rechten Maustaste auf den Ordner page2, und klicken Sie auf Hinzufügen > Neues Element.... Das Dialogfeld Neues Element hinzufügen wird angezeigt.
Wählen Sie in der Liste Seitensteuerung aus. Geben Sie im Textfeld Name den Namen "page2.html" ein.
Klicken Sie auf Hinzufügen. Im Projektmappen-Explorer wird ein neues PageControl-Objekt angezeigt.

Die neue PageControl enthält drei Dateien:page2.css, page2.html und page2.js.

5. Testen der App

Drücken Sie F5, um die App auszuführen. Die App zeigt die Seite Home an.
Klicken Sie, während die App ausgeführt wird, mit der rechten Maustaste auf eine beliebige Stelle innerhalb der App, damit die Navigationsleiste angezeigt wird, und wählen Sie dann Page2 aus.

Die Seite Page2 wird im Seitensteuerelement der App angezeigt.
Klicken Sie erneut mit der rechten Maustaste, um die Navigationsleiste anzuzeigen, und wählen Sie dann Home.

Die Seite Home wird im Seitensteuerelement der App angezeigt.

Zusammenfassung und nächste Schritte

In dieser Schnellstartanleitung haben Sie Ihrer App ein NavBar-Objekt mit einem NavBarContainer-Objekt und vier NavBarCommand-Objekten hinzugefügt. Außerdem haben Sie dem Navigation.onnavigated-Ereignis eine einfache Handlerfunktion hinzugefügt.

Ein komplexeres Beispiel für hierarchische Navigation und einem entsprechenden Layout finden Sie im nächsten Lernprogramm zum Hub-Steuerelement.

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