Windows-Apps
Inhaltsverzeichnis reduzieren
Inhaltsverzeichnis erweitern

Hinzufügen von Elementvorlagen zur Seitensteuerung

In diesem Thema erfahren Sie, wie Sie einer Windows Store-App die Elementvorlage zur Seitensteuerung hinzufügen, um ganz einfach zwischen Seiten navigieren zu können. Beschreibungen der Elementvorlagen finden Sie unter JavaScript-Elementvorlagen. Bei den meisten Apps können Sie die in Microsoft Visual Studio 2013 enthaltenen Vorlagen verwenden, um die App-Entwicklung zu vereinfachen.

Die Elementvorlage zur Seitensteuerung unterstützt das einseitige Navigationsmodell, das für Windows Store-Apps mit mehreren Seiten empfohlen wird. Dieses Navigationsmodell wird von den Projektvorlagen "Hub", "Grid", "Split" und "Navigation" implementiert. Das Navigationsmodell enthält eine einzelne Inhaltshostseite (default.html), und es ermöglicht das Navigieren zwischen logischen Seiten, die in den Inhaltshost geladen werden. Weitere Informationen finden Sie unter Navigationsmodell.

Informationen zum Auswählen des besten Navigationsmusters für Ihre App finden Sie unter Navigationsmuster. Sehen Sie das flache Navigationsmuster in unserer Serie App-Features von A bis Z in Aktion.

Beim Hinzufügen einer neuen Seite zu einem Visual Studio-Projekt müssen Sie die folgenden Aktionen ausführen:

  • Hinzufügen der neuen Seite mithilfe der Elementvorlage "Seitensteuerung" von Visual Studio
  • Hinzufügen von Code zum Navigieren zu der neuen Seite mithilfe der WinJS.Navigation.navigate-Funktion.

    Tipp  Diese Funktion führt die Navigation zwar nicht direkt aus, aber sie ruft das Ereignis "WinJS.Navigation.onnavigated" auf, das in "navigator.js" behandelt wird. Der Code in "navigator.js" ruft die ready-Funktion auf Ihrer neuen Seite auf. Eine Änderung von "navigator.js" ist normalerweise nicht erforderlich.

  • Fügen Sie Ihrer App bei Bedarf UI und Ereignishandler hinzu, um den Seitennavigationscode aufzurufen.

Achtung  Wenn Sie die Elementvorlage "Seitensteuerung" mit der Vorlage "Blank Application" verwenden möchten, müssen Sie dem Projekt "navigator.js" und "default.html" den Inhaltshostcode hinzufügen (Sie können "navigator.js" und den Inhaltshostcode von einer anderen Projektvorlage wie "Grid" abrufen). Weitere Informationen finden Sie unter Navigationsmodell.

Erstellen des Projekts

Zunächst erstellen wir mit der Vorlage "Navigation" eine App. Die Vorlage "Navigation" stellt eine sehr einfache App bereit, in der das Navigationsmodell für mehrere Seite bereits enthalten ist.

Tipp  Wenn Sie die Vorlage "Hub", "Grid" oder "Split" verwenden, sind die Schritte ähnlich, die Dateinamen lauten jedoch anders. Der unten angegebene HTML- und CSS-Code muss zur Anpassung an die Vorlage geändert werden.

Hh920268.wedge(de-de,WIN.10).gifSo erstellen Sie das Projekt

  1. Wählen Sie in Visual Studio Datei > Neues Projekt.
  2. Erweitern Sie im linken Bereich des Dialogfelds Neues Projekt den Knoten JavaScript.
  3. Wählen Sie im mittleren Bereich die Option Navigations-App aus.
  4. Geben Sie dem Projekt den Namen NavApp, und klicken Sie auf OK.

    Die Projektmappe wird erstellt, und die Projektdateien werden im Projektmappen-Explorer angezeigt. Weitere Informationen zu den Projektdateien finden Sie unter JavaScript-Projektvorlagen.

    Hinweis  Wenn Sie Visual Studio zum ersten Mal ausführen, werden Sie auf die Entwicklerlizenz hingewiesen.

  5. Wählen Sie zum Ausführen des Programms Debuggen > Debugging starten, oder drücken Sie F5. Der Seiteninhalt "Welcome to NavApp!" wird angezeigt.
  6. Wählen Sie UMSCHALT+F5, um das Debuggen zu beenden und zu Visual Studio zurückzukehren.

Hinzufügen der Seitensteuerung

In diesem Abschnitt fügen wir die Elementvorlage "Seitensteuerung" hinzu. Danach fügen wir Code zum Navigieren zwischen den Seiten hinzu.

Hh920268.wedge(de-de,WIN.10).gifSo fügen Sie die Seitensteuerung hinzu

  1. Öffnen Sie im Projektmappen-Explorer das Kontextmenü für den Ordner pages, und wählen Sie Hinzufügen > Neues Element.
  2. Geben Sie dem Ordner den Namen page2.
  3. Öffnen Sie das Kontextmenü für den Ordner page2, und wählen Sie dann Hinzufügen > Neues Element.
  4. Wählen Sie im Dialogfeld Neues Element hinzufügen im mittleren Bereich Seitensteuerung aus.
  5. Nennen Sie die Seite page2.html, und wählen Sie Hinzufügen.

    Die Datei page2.html wird zusammen mit zwei anderen Projektdateien (page2.css und page2.js) im Ordner page2 erstellt.

    Tipp  Falls Sie die Elementvorlage an anderer Stelle in das Projekt einfügen, müssen Sie unter Umständen Skript- und CSS-Verweise in der Datei "page2.html" aktualisieren.

  6. Öffnen Sie "page2.js", und überprüfen Sie, ob der URI in der define-Funktion korrekt ist. Die Funktion sollte folgendermaßen aussehen:
    
    WinJS.UI.Pages.define("/pages/page2/page2.html", {
        // . . . 
    },
    
    

Hinzufügen von Navigationscode

In diesem Abschnitt fügen wir Code für die Navigation zwischen den Seiten hinzu. Die von uns erstellte Navigations-App verwendet ein Schaltflächen-Klick-Ereignis für die Navigation zur nächsten Seite. Das Stylesheet für die App (ui.css) aktualisiert die Schaltfläche automatisch mit dem Erscheinungsbild der Windows Store-App.

Hh920268.wedge(de-de,WIN.10).gifSo fügen Sie Navigationscode hinzu

  1. Öffnen Sie im Projektmappen-Explorer die Datei home.html.
  2. Fügen Sie im SECTION-Element wie folgt eine Schaltfläche hinzu:
    
    
    <section aria-label="Main content" role="main">
      <p>Content goes here.</p>
      <button class="navButton" title="Nav" >Next Page</button>
    </section>
    
    
    
  3. Öffnen Sie "home.css", um die Schaltflächencharakteristika für die Seite festzulegen.
  4. Fügen Sie diesen Abschnitt in der Datei home.css hinzu:
    
    
    .navButton {
        width: 10%;
        height: 10%;
    }
    
    
    
  5. Öffnen Sie home.js.
  6. Fügen Sie den Code für die Ereignisbehandlung, der die WinJS.Navigation.navigate verwendet, hinzu, um zur nächsten Seite zu navigieren: Die nextPage-Funktion sollte sich im gleichen Gültigkeitsbereich wie die ready-Funktion befinden, damit der Code wie folgt aussieht (mit hinzugefügtem Komma nach ready):
    
    
    WinJS.UI.Pages.define("/pages/home/home.html", {
        // . . .
        ready: function (element, options) {
            // . . .
        },
            
        nextPage: function () {
            WinJS.Navigation.navigate("/pages/page2/page2.html");
        }
    });
    
    
    

    Der Code in "navigator.js" ist mit den Ereignissen verknüpft, die generiert werden, wenn Sie WinJS.Navigation.navigate aufrufen, und lädt den neuen Seiteninhalt.

  7. Fügen Sie der ready-Funktion in home.js wie im folgenden Code gezeigt einen Ereignislistener hinzu. Weitere Informationen zur Verwendung von ready in Vorlagen finden Sie im Navigationsmodell.

    Für das Abrufen des Elements verwenden wir querySelector anstelle von document.getElementByID.

    Tipp  Die Vorlagen verwenden Klassennamen zum Identifizieren von Elementen in Seitensteuerungen. Auf der Seite kann es mehr als eine Instanz einer einzelnen Seitensteuerung geben (obwohl das in diesem Beispiel nicht der Fall ist), und das Verwenden von IDs in Seitensteuerungen kann dazu führen, dass mehrere Elemente die gleiche ID haben. Die Verwendung von querySelector und CSS-Klassennamen verhindert potenzielle Namenskonflikte und stellt gleichzeitig sicher, dass die korrekten DOM-Elemente gefunden werden.

    Nachdem Sie den Code hinzugefügt haben, sieht die Funktion folgendermaßen aus:

    
    
    ready: function(element, options) {
      // TODO: Initialize the fragment here.
      var elem = element.querySelector('.navButton');
      elem.addEventListener('click', this.nextPage.bind(this));
    },
    
    
    
  8. Drücken Sie F5, um die App auszuführen. Wenn Sie auf die Schaltfläche Next Page klicken, wird page2.html geladen und zeigt den Standard-HTML-Inhalt an.

Testen der App

Hh920268.wedge(de-de,WIN.10).gifSo testen Sie die App

  1. Drücken Sie F5, um die App auszuführen.
  2. Wenn die App geladen wird, klicken Sie auf die Schaltfläche Next Page. page2.html wird geladen und zeigt den Standard-HTML-Inhalt an.

    Seite 2 der Navigations-App

    Klicken Sie auf die Schaltfläche "Back", um zur ersten Seite der App zurückzukehren.

Verwandte Themen

JavaScript-Projektvorlagen für Windows Store-Apps
JavaScript-Elementvorlagen für Windows Store-Apps
Schnellstart: Verwenden der Einzelseitennavigation
Hinzufügen einer Elementvorlage zur Seitensteuerung (mit C#, VB und C++)

 

 

Anzeigen:
© 2017 Microsoft