Teil 3: PageControl-Objekte und Navigation (HTML)

Applies to Windows only

Die in den vorherigen Lernprogrammen erstellte App "Hello, world" enthält nur eine Seite mit Inhalt. Die meisten realen Apps enthalten jedoch mehrere Seiten.

In einer Windows Store-App können verschiedene Navigationsmuster verwendet werden. Unter Navigationsmuster finden Sie Hilfe zur Auswahl des besten Navigationsmusters für die App.

Hinweis  

Sie können die beiden primären Navigationsmuster (das flache Navigationsmuster und das hierarchische Navigationsmuster) in Aktion erleben, wenn Sie sich die Reihe App-Features – Gesamtübersicht ansehen.

In diesem Lernprogramm kopieren Sie den Code aus der App "Hello, world" in eine neue App, die die Navigation App-Vorlage verwendet. Anschließend fügen Sie eine weitere Seite hinzu.

Hier lernen Sie Folgendes:

  • Verwenden der Navigation App-Projektvorlage zum Erstellen einer App, die mehrere Seiten mit Inhalt enthält
  • Unterteilen des Codes in modulare Einheiten mithilfe der PageControl-Objekte
  • Verwenden des Modells für die Einzelseitennavigation zum Navigieren zwischen Seiten
  • Verwenden einer NavBar zum Bereitstellen von Navigationsbefehlen

Tipp  

Wenn Sie das Lernprogramm überspringen und direkt den Code aufrufen möchten, gehen Sie zu Erste Schritte mit JavaScript: Vollständiger Code für die Lernprogrammreihe.

Vorbereitung

Informationen zur Navigation in Windows Store-Apps

Fast alle Websites beinhalten eine Art der Navigation, meist in Form von Hyperlinks, auf die Sie klicken, um zu einer anderen Seite zu gelangen. Jede Seite enthält einen eigenen Satz von JavaScript-Funktionen und -Daten, einen neuen HTML-Satz für die Anzeige, Stilinformationen usw. Dieses Navigationsmodell wird als mehrseitige Navigation bezeichnet. Das Design ist für die meisten Websites geeignet, kann jedoch Probleme in einer App verursachen, da damit die Beibehaltung des Zustands über verschiedene Seiten erschwert wird.

Ein weiteres Navigationsmodell ist die Einzelseitennavigation, bei der Sie eine einzelne Seite Ihrer App verwenden und bei Bedarf weitere Daten in diese Seite laden. Sie können die App weiterhin in mehrere Dateien aufteilen. Anstatt aber von Seite zu Seite zu wechseln, lädt die App andere Dokumente in die Hauptseite. Da die Hauptseite der App niemals entladen wird, werden die Skripts nie entladen, und dadurch lassen sich Status, Übergänge oder Animationen leichter verwalten. Wir empfehlen Ihnen, für Windows Store-Apps das Modell der Einzelseitennavigation zu verwenden.

Zur Unterstützung beim Erstellen von Apps mit dem Model für die Einzelseitennavigation stellt die Windows-Bibliothek für JavaScript das WinJS.UI.Pages.PageControl-Objekt bereit. Außerdem wird die Navigation App-Projektvorlage bereitgestellt, die zusätzliche Navigationsinfrastruktur bietet. Im nächsten Schritt erstellen Sie mit dieser Vorlage ein neues Projekt.

Schritt 1: Erstellen einer neuen Navigations-App in Visual Studio

Wir erstellen nun eine neue App mit dem Namen HelloWorldWithPages, die die Navigation App -Vorlage verwendet. Gehen Sie dazu wie folgt vor:

  1. Starten Sie Microsoft Visual Studio Express 2013 für Windows.
  2. Klicken Sie im Menü Datei auf Neues Projekt.

    Das Dialogfeld Neues Projekt wird geöffnet. Im linken Bereich des Dialogfelds können Sie die Art der anzuzeigenden Vorlagen auswählen.

  3. Erweitern Sie im linken Bereich die Option Installiert und anschließend Vorlagen und JavaScript. Wählen Sie dann den Vorlagentyp Windows Store aus. Im mittleren Bereich des Dialogfelds sehen Sie eine Liste mit Projektvorlagen für JavaScript.

    In diesem Lernprogramm verwenden wir die Vorlage Navigation App.

  4. Wählen Sie im mittleren Bereich die Vorlage Navigation App aus.
  5. Geben Sie im Textfeld Name Namen "HelloWorldWithPages" ein.
  6. Deaktivieren Sie das Kontrollkästchen Projektmappenverzeichnis erstellen.

    Das Fenster "Neues Projekt"

  7. Klicken Sie auf OK, um das Projekt zu erstellen.

    Visual Studio erstellt Ihr Projekt und zeigt es im Projektmappen-Explorer an.

    Der Projektmappen-Explorer für das Projekt "HelloWorldWithPages"

Beachten Sie, dass Ihre neue Navigation App mehr Dateien als die App "Hello, world" enthält. Diese neuen Dateien sehen wir uns einmal genauer an:

  • /pages/home/home.css, /pages/home/home.html und /pages/home/home.js

    Diese drei Seiten definieren ein PageControl für die Startseite der App. Ein PageControl besteht aus einer HTML-Datei, einer JavaScript-Datei und einer CSS-Datei. Ein PageControl ist eine modulare Einheit aus HTML, CSS und JavaScript, zu der navigiert (wie zu einer HTML-Seite) oder die als benutzerdefiniertes Steuerelement verwendet werden kann. Sie können mit PageControl-Objekten eine große App in kleinere, leichter handhabbare Stücke aufteilen.

    PageControl-Objekte unterstützen mehre Methoden, durch die ihre Verwendung in einer App einfacher ist als die Verwendung einer Sammlung von einzelnen HTML-, CSS-, und JavaScript-Seiten. In späteren Schritten erhalten Sie weitere Informationen zu diesen Methoden.

  • /js/navigator.js

    Diese Datei stellt die Hilfsklasse PageControlNavigator bereit, mit der Sie PageControl anzeigen und zwischen diesen navigieren können. Sie benötigen sie nicht, wenn Sie kein PageControl anzeigen müssen, aber sie kann die Verwendung erleichtern.

Sehen wir uns einmal die Seite default.html Ihrer neuen App an:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>HelloWorldWithPages</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- HelloWorldWithPages references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <script src="/js/navigator.js"></script>
</head>
<body>

    <div id="contenthost" data-win-control="Application.PageControlNavigator" 
        data-win-options="{home: '/pages/home/home.html'}"></div>
    <!-- <div id="appbar" data-win-control="WinJS.UI.AppBar">
        <button data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}" 
            type="button"></button>
    </div> -->
</body>
</html>

Der body der Datei enthält zwei Elemente: ein div-Element für den PageControlNavigator und ein auskommentiertes div für eine AppBar. Ignorieren wir die app bar erst einmal und betrachten das erste div-Element etwas genauer.



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

Dieses div-Element erstellt ein PageControlNavigator-Steuerelement. Das PageControlNavigator-Steuerelement lädt die Startseite und zeigt sie an. Mit dem data-win-options-Attribut teilen Sie ihm mit, welche Seite geladen werden soll (/pages/home/home.html).

Führen Sie die App aus.

Die App "HelloWorldWithPages"

Es ist zwar nicht offensichtlich, aber von der App werden sowohl default.html als auch home.html angezeigt. Es ist, als würden Sie ein iframe-Objekt verwenden, um eine HTML-Seite in einer anderen HTML-Seite anzuzeigen.

Die Seitensteuerung "home.html" wird aus der Seite "default.html" angezeigt.

Schritt 2: Kopieren des HTML- und CSS-Inhalts aus der App "Hello, world"

Unsere neue App umfasst zwei HTML-Seiten: default.html und home.html. Wo platzieren Sie Ihren Inhalt?

  • Verwenden Sie default.html für UI, die unabhängig von der angezeigten Seite in der App stets angezeigt werden soll. Sie können beispielsweise mithilfe von default.html eine Navigationsleiste hosten.

  • Verwenden Sie Seiten wie home.html für Inhalt, der einen separaten Bildschirm in der App ausmacht.

Öffnen wir home.html und schauen uns das enthaltene Markup an.

  • Im Markup befindet sich ein head-Element, das Verweise zu WinJS-Code und -Stylesheets enthält. Außerdem sind Verweise zum Standard-Stylesheet der App (default.css) und zu den anderen Dateien enthalten, die die Startseite (home.css und home.js) darstellen.

    
    
    <head>
        <meta charset="utf-8" />
        <title>homePage</title>
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
    
        <link href="/css/default.css" rel="stylesheet" />
        <link href="/pages/home/home.css" rel="stylesheet" />
        <script src="/pages/home/home.js"></script>
    </head>
    
    
    
  • Es hat einen Seitenheaderbereich mit einer BackButton für die Rückwärtsnavigation und einen Titelbereich. Die Vorlage enthält Code, der die Zurück-Schaltfläche bei der Rückwärtsnavigation automatisch aktiviert. Die Schaltfläche wird erst sichtbar, wenn wir eine zweite Seite hinzufügen und sie aufrufen.

    
    
            <header aria-label="Header content" role="banner">
                <button data-win-control="WinJS.UI.BackButton"></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle">Welcome to HelloWorldWithPages!</span>
                </h1>
            </header>
    
    
    
  • Sie enthält einen Bereich für den Hauptinhalt.

    
    
            <section aria-label="Main content" role="main">
                <p>Content goes here.</p>
            </section>
    
    
    

Nun fügen wir der Startseite (home.html) unseres neuen HelloWorldWithPages-Projekts den Inhalt aus der App "Hello, world" hinzu.

JJ663505.wedge(de-de,WIN.10).gifSo fügen Sie den HTML- und CSS-Inhalt aus der App "Hello, world" hinzu

  1. Kopieren Sie den endgültigen HTML-Inhalt aus der default.html-Datei der App "Hello, world" in den Hauptinhaltsabschnitt von /pages/home/home.html in Ihrem neuen Projekt.
    
    <body>
        <!-- The content that will be loaded and displayed. -->
        <div class="fragment homepage">
            <header aria-label="Header content" role="banner">
                <button data-win-control="WinJS.UI.BackButton"></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle">Welcome to HelloWorldWithPages!</span>
                </h1>
            </header>
            <section aria-label="Main content" role="main">
    
                <!-- Copied from "Hello, world" -->
                <h1 class="headerClass">Hello, world!</h1>
                <div class="mainContent">
                    <p>What's your name?</p>
                    <input id="nameInput" type="text" />
                    <button id="helloButton">Say "Hello"</button>
                    <div id="greetingOutput"></div>
                    <label for="ratingControlDiv">
                        Rate this greeting: 
                    </label>
                    <div id="ratingControlDiv" data-win-control="WinJS.UI.Rating">
                    </div>
                    <div id="ratingOutput"></div>
                </div>
            </section>
        </div>
    </body>
    
    
  2. Verschieben Sie den Überschrifteninhalt, den Sie in das von home.html bereitgestellte h1-Element kopiert haben. Da home.html bereits einen Hauptinhaltsabschnitt besitzt, entfernen Sie das kopierte "mainContent" div-Element (behalten Sie jedoch den Inhalt).
    
    <body>
        <!-- The content that will be loaded and displayed. -->
        <div class="fragment homepage">
            <header aria-label="Header content" role="banner">
                <button data-win-control="WinJS.UI.BackButton"></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle">Welcome to HelloWorldWithPages!</span>
                </h1>
            </header>
            <section aria-label="Main content" role="main">
     
                <p>What's your name?</p>
                <input id="nameInput" type="text" />
                <button id="helloButton">Say "Hello"</button>
                <div id="greetingOutput"></div>
                <label for="ratingControlDiv">
                    Rate this greeting: 
                </label>
                <div id="ratingControlDiv" data-win-control="WinJS.UI.Rating">
                </div>
                <div id="ratingOutput"></div>
            </section>
        </div>
    </body>
    
    
  3. Wechseln Sie zum hellen Stylesheet. Ersetzen Sie den Verweis auf das dunkle Stylesheet:
    
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    
    
    

    Ersetzen Sie ihn durch Folgendes:

    
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
    
    
    
  4. Jedes PageControl-Element verfügt über eine eigene Cascading Style Sheets (CSS)-Datei.

    Kopieren Sie den greetingOutput-Stil aus der default.css-Datei, die Sie in Teil 1: Erstellen der App "Hello, world!" erstellt haben, in home.css.

    
    .homepage section[role=main] {
        margin-left: 120px;
        margin-right: 120px;
    }
    
    #greetingOutput {
        height: 20px; 
        margin-bottom: 40px;
    }
    
    
  5. Führen Sie die App aus.

    Die App "HelloWorldWithPages" mit Ihrem Inhalt aus der App "Hello, world"

    Sie haben den Inhalt aus der ursprünglichen App "Hello, world" neu erstellt. Als Nächstes fügen wir durch Kopieren der Ereignishandler von "Hello, world" Interaktivität hinzu.

Schritt 3: Kopieren der Ereignishandler

Jedes PageControl-Element besitzt eine eigene JavaScript-Datei. Sehen wir uns einmal die JavaScript-Datei an, die Visual Studio für das PageControl-Element unserer "Startseite" (home.js) generiert hat:


(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/home/home.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.
        }
    });
})();

Diese Datei unterscheidet sich etwas von Ihrer default.js-Datei. Sie ist viel kürzer. Das liegt daran, dass default.js bereits die Aktivierungs- und die zentrale App-Logik behandelt. Jedes PageControl-Element muss nur Logik für die Seite selbst enthalten.

Eine der ersten Codezeilen, ein Aufruf der WinJS.UI.Page.define-Funktion, erstellt das PageControl-Objekt. Diese Funktion verwendet zwei Parameter: den URI der Seite (in diesem Beispiel "/pages/home/home.html") und ein Objekt, das die Member der PageControl definiert. Sie können beliebige Membertypen hinzufügen. Sie können auch eine Reihe spezieller, von der IPageControlMembers-Schnittstelle beschriebene Member implementieren, die bei Verwendung der PageControl automatisch von der App aufgerufen werden.

Die von der Vorlage erstellte home.js-Datei definiert eines dieser speziellen Member, nämlich die ready-Funktion. Die ready-Funktion wird aufgerufen, nachdem die Seite initialisiert und gerendert wurde. Diese Stelle ist gut zum Anfügen von Ereignishandlern geeignet.

Ihnen ist vielleicht aufgefallen, dass der Code keinen Aufruf von WinJS.UI.processAll enthält. Das liegt daran, dass dieses Element von der PageControl automatisch aufgerufen wird. Wenn die ready-Funktion aufgerufen wird, wurde WinJS.UI.processAll bereits aufgerufen und die Verarbeitung ist abgeschlossen.

JJ663505.wedge(de-de,WIN.10).gifSo fügen Sie Ereignishandler hinzu

  1. In Teil 1: Erstellen der App "Hello, world!" und Teil 2: Verwalten von App-Lebenszyklus und -Zustand haben Sie drei Ereignishandler definiert: buttonClickHandler, ratingChanged und nameInputChanged. Kopieren Sie diese Ereignishandler in Ihre home.js-Datei, und legen Sie sie als Member der PageControl fest. Fügen Sie sie nach der von der Vorlage erstellten ready-Funktion hinzu.

    
        WinJS.UI.Pages.define("/pages/home/home.html", {
    
            // This function is called whenever a user navigates to this page. It
            // populates the page elements with the app's data.
            ready: function (element, options) {
                // TODO: Initialize the page here.
    
            },
    
            buttonClickHandler: function (eventInfo) {
    
                var userName = document.getElementById("nameInput").value;
                var greetingString = "Hello, " + userName + "!";
                document.getElementById("greetingOutput").innerText = greetingString;
    
                // Save the session data. 
                WinJS.Application.sessionState.greetingOutput = greetingString;
            },
    
            ratingChanged: function (eventInfo) {
    
                var ratingOutput = document.getElementById("ratingOutput");
                ratingOutput.innerText = eventInfo.detail.tentativeRating;
    
                // Store the rating for multiple sessions.
                var appData = Windows.Storage.ApplicationData.current;
                var roamingSettings = appData.roamingSettings;
                roamingSettings.values["greetingRating"] = eventInfo.detail.tentativeRating;
            },
    
            nameInputChanged: function (eventInfo) {
                var nameInput = eventInfo.srcElement;
    
                // Store the user's name for multiple sessions.
                var appData = Windows.Storage.ApplicationData.current;
                var roamingSettings = appData.roamingSettings;
                roamingSettings.values["userName"] = nameInput.value;
            }
    
    
        });
    
    
  2. Nun müssen Ihre Ereignishandler hinzugefügt werden. In den Teilen 1 und 2 haben wir eine then-Funktion für die von WinJS.UI.processAll zurückgegebene Promise erstellt. Nun ist es etwas einfacher, da wir die Ereignishandler mithilfe der ready-Funktion anfügen können. Die ready-Funktion wird aufgerufen, nachdem die PageControl automatisch WinJS.UI.processAll aufgerufen hat.

    Kopieren Sie den Code, mit dem die Ereignishandler an die ready-Funktion in home.js angefügt werden.

    
            // This function is called whenever a user navigates to this page. It
            // populates the page elements with the app's data.
            ready: function (element, options) {
                // TODO: Initialize the page here.
    
                // Retrieve the div that hosts the Rating control.
                var ratingControlDiv = document.getElementById("ratingControlDiv");
    
                // Retrieve the actual Rating control.
                var ratingControl = ratingControlDiv.winControl;
    
                // Register the event handler. 
                ratingControl.addEventListener("change", this.ratingChanged, false);
    
                // Retrieve the button and register our event handler. 
                var helloButton = document.getElementById("helloButton");
                helloButton.addEventListener("click", this.buttonClickHandler, false);
    
                // Retrieve the input element and register our
                // event handler.
                var nameInput = document.getElementById("nameInput");
                nameInput.addEventListener("change", this.nameInputChanged);
    
            },
    
    
  3. Führen Sie die App aus. Wenn Sie einen Namen eingeben und auf die Schaltfläche klicken, wird eine Begrüßung angezeigt. Wenn Sie die Begrüßung bewerten, wird die Bewertung als numerischer Wert angezeigt.

    Die App "HelloWorldWithPages" nach Auswählen einer Bewertung

Schritt 4: Wiederherstellen des App-Zustands

Wir haben nun beinahe die Funktionalität aus der App "Hello, world" neu erstellt. Jetzt müssen wir nur noch den Zustand der App wiederherstellen, wenn der Benutzer die App startet.

Sie erinnern sich wahrscheinlich, dass zwei App-Zustandstypen wiederhergestellt werden müssen:

  • Benutzername und Bewertung. Dieser Zustand wird unabhängig davon wiederhergestellt, wie die App heruntergefahren wurde.
  • Personalisierte Begrüßung. Dieser Zustand wird nur wiederhergestellt, wenn die App bei der letzten Ausführung erfolgreich beendet wurde.

JJ663505.wedge(de-de,WIN.10).gifSo stellen Sie den Zustand der App wieder her

  1. Kopieren Sie den Code aus der App "Hello, world", mit dem Benutzername und Bewertung wiederhergestellt werden. Fügen Sie den Code zur ready-Funktion in home.js hinzu.
    
            // This function is called whenever a user navigates to this page. It
            // populates the page elements with the app's data.
            ready: function (element, options) {
                // TODO: Initialize the page here.
    
                // Retrieve the div that hosts the Rating control.
                var ratingControlDiv = document.getElementById("ratingControlDiv");
    
                // Retrieve the actual Rating control.
                var ratingControl = ratingControlDiv.winControl;
    
                // Register the event handler. 
                ratingControl.addEventListener("change", this.ratingChanged, false);
    
                // Retrieve the button and register our event handler. 
                var helloButton = document.getElementById("helloButton");
                helloButton.addEventListener("click", this.buttonClickHandler, false);
    
                // Retrieve the input element and register our
                // event handler.
                var nameInput = document.getElementById("nameInput");
                nameInput.addEventListener("change", this.nameInputChanged);
    
                // Restore app data. 
                var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings;
    
                // Restore the user name.
                var userName =
                    Windows.Storage.ApplicationData.current.roamingSettings.values["userName"];
                if (userName) {
                    nameInput.value = userName;
                }
    
                // Restore the rating. 
                var greetingRating = roamingSettings.values["greetingRating"];
                if (greetingRating) {
                    ratingControl.userRating = greetingRating;
                    var ratingOutput = document.getElementById("ratingOutput");
                    ratingOutput.innerText = greetingRating;
                }
    
            },
    
    
  2. Die personalisierte Begrüßung soll nur wiederhergestellt werden, wenn die App bei der letzten Ausführung erfolgreich beendet wurde. Leider bietet das PageControl keine integrierte Möglichkeit, den vorherigen Ausführungszustand der App zu prüfen: Diese Information wird dem onactivated-Ereignishandler in der Datei default.js bereitgestellt. Es gibt aber eine einfache Lösung für das Problem: Wir müssen lediglich den vorherigen Ausführungszustand der App im sessionState-Objekt speichern, damit das PageControl darauf zugreifen kann.
    1. Fügen Sie in der Datei default.js Code zum onactivated-Handler hinzu, um den vorherigen Ausführungszustand zu speichern. Speichern Sie den Zustand, indem Sie dem sessionState-Objekt eine Eigenschaft namens previousExecutionState hinzufügen.
      
          app.addEventListener("activated", function (args) {
              if (args.detail.kind === activation.ActivationKind.launch) {
                  if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                      // TODO: This application has been newly launched. Initialize
                      // your application here.
                  } else {
                      // TODO: This application has been reactivated from suspension.
                      // Restore application state here.
                  }
      
                  // Save the previous execution state. 
                  WinJS.Application.sessionState.previousExecutionState = 
                      args.detail.previousExecutionState;
      
                  if (app.sessionState.history) {
                      nav.history = app.sessionState.history;
                  }
                  args.setPromise(WinJS.UI.processAll().then(function () {
                      if (nav.location) {
                          nav.history.current.initialPlaceholder = true;
                          return nav.navigate(nav.location, nav.state);
                      } else {
                          return nav.navigate(Application.navigator.home);
                      }
                  }));
              }
          });
      
      
    2. Fügen Sie in der Datei home.js Code zur ready-Methode hinzu, der die previousExecutionState-Daten prüft. Wenn der vorherige Ausführungszustand terminated ist, stellen Sie die personalisierte Begrüßung wieder her (Sie können den Code dazu aus der Datei default.js in der App "Hello, world" kopieren).
      
                  // If the app was terminated last time it ran, restore the personalized
                  // greeting. 
                  if (
                      WinJS.Application.sessionState.previousExecutionState
                      === Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
                      var outputValue = WinJS.Application.sessionState.greetingOutput;
                      if (outputValue) {
                          var greetingOutput = document.getElementById("greetingOutput");
                          greetingOutput.innerText = outputValue;
                      }
      
                  }
      
      

      Hier die vollständige ready-Methode.

      
              // This function is called whenever a user navigates to this page. It
              // populates the page elements with the app's data.
              ready: function (element, options) {
                  // TODO: Initialize the page here.
      
                  // Retrieve the div that hosts the Rating control.
                  var ratingControlDiv = document.getElementById("ratingControlDiv");
      
                  // Retrieve the actual Rating control.
                  var ratingControl = ratingControlDiv.winControl;
      
                  // Register the event handler. 
                  ratingControl.addEventListener("change", this.ratingChanged, false);
      
                  // Retrieve the button and register our event handler. 
                  var helloButton = document.getElementById("helloButton");
                  helloButton.addEventListener("click", this.buttonClickHandler, false);
      
                  // Retrieve the input element and register our
                  // event handler.
                  var nameInput = document.getElementById("nameInput");
                  nameInput.addEventListener("change", this.nameInputChanged);
      
                  // Restore app data. 
                  var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings;
      
                  // Restore the user name.
                  var userName =
                      Windows.Storage.ApplicationData.current.roamingSettings.values["userName"];
                  if (userName) {
                      nameInput.value = userName;
                  }
      
                  // Restore the rating. 
                  var greetingRating = roamingSettings.values["greetingRating"];
                  if (greetingRating) {
                      ratingControl.userRating = greetingRating;
                      var ratingOutput = document.getElementById("ratingOutput");
                      ratingOutput.innerText = greetingRating;
                  }
      
                  // If the app was terminated last time it ran, restore the personalized
                  // greeting. 
                  if (
                      WinJS.Application.sessionState.previousExecutionState
                      === Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
                      var outputValue = WinJS.Application.sessionState.greetingOutput;
                      if (outputValue) {
                          var greetingOutput = document.getElementById("greetingOutput");
                          greetingOutput.innerText = outputValue;
                      }
      
                  }
      
              },
      
      
  3. Führen Sie die App aus. Wir haben nun die Funktionalität aus der ursprünglichen App "Hello, world" dupliziert.

Schritt 5: Hinzufügen einer weiteren Seite

Die meisten Apps enthalten mehrere Seiten. Fügen wir unserer App eine weitere Seite hinzu. Mit der Vorlage Navigations-App ist das Hinzufügen zusätzlicher Seiten ganz einfach.

JJ663505.wedge(de-de,WIN.10).gifSo fügen Sie eine weitere Seite hinzu

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Ordner pages, und wählen Sie anschließend Hinzufügen > Neuer Ordner aus. Im Projekt wird ein neuer Ordner angezeigt.
  2. Benennen Sie den Ordner in "page2" um.
  3. 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.
  4. Wählen Sie in der Liste Seitensteuerung aus. Geben Sie im Textfeld Name den Namen "page2.html" ein.

  5. Klicken Sie auf Hinzufügen, um die PageControl hinzuzufügen. Die neue PageControl wird im Projektmappen-Explorer angezeigt.

    Das Projekt "HelloWorldWithPages"

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

  6. Suchen Sie in der Datei page2.html nach dem Verweis auf das dunkle Stylesheet:
    
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    
    
    

    Ersetzen Sie ihn durch Folgendes:

    
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
    
    
    

Sie haben eine neue Seite erstellt. Im nächsten Schritt erfahren Sie, wie Sie zur Seite navigieren.

Schritt 6: Verwenden der Navigationsfunktion, um zwischen Seiten zu wechseln

Jetzt ist zwar eine zweite Seite vorhanden, der Benutzer hat jedoch keine Möglichkeit, diese aufzurufen. Aktualisieren wir nun die Seite home.html, indem wir einen Link zu page2.html hinzufügen.

JJ663505.wedge(de-de,WIN.10).gifNavigation zwischen Seiten

  1. Öffnen Sie home.html, und fügen Sie einen Link zu page2.html hinzu.
    
    <body>
        <!-- The content that will be loaded and displayed. -->
        <div class="fragment homepage">
            <header aria-label="Header content" role="banner">
                <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle">Hello, world!</span>
                </h1>
            </header>
            <section aria-label="Main content" role="main">
     
                <p>What's your name?</p>
                <input id="nameInput" type="text" />
                <button id="helloButton">Say "Hello"</button>
                <div id="greetingOutput"></div>
                <label for="ratingControlDiv">
                    Rate this greeting: 
                </label>
                <div id="ratingControlDiv" data-win-control="WinJS.UI.Rating">
                </div>
                <div id="ratingOutput"></div>
    
                <!-- A hyperlink to page2.html. -->
                <p><a href="/pages/page2/page2.html">Go to page 2.</a></p>
            </section>
        </div>
    </body>
    
    
  2. Führen Sie die App aus, und klicken Sie auf den Link. Es scheint zu funktionieren: Die App zeigt page2.html an.

    Das Dialogfeld "Neues Element hinzufügen"

Es gibt jedoch ein Problem: Von der App wurde eine Navigation auf oberster Ebene ausgeführt. Anstatt von home.html zu page2.html zu navigieren, navigiert sie von default.html zu page2.html.

Ausführen einer Navigation auf oberster Ebene

Sie möchten aber, dass stattdessen der Inhalt von home.html durch page2.html ersetzt wird.

Empfohlene Navigation zu "page2.html"

Glücklicherweise kann mit dem PageControlNavigator-Steuerelement diese Art von Navigation recht leicht durchgeführt werden. Der PageControlNavigator-Code (in der Datei navigator.js der App) behandelt das WinJS.Navigation.navigated-Ereignis für Sie. Wenn das Ereignis auftritt, lädt das PageControlNavigator-Steuerelement die vom Ereignis angegebene Seite.

Das WinJS.Navigation.navigated-Ereignis tritt auf, wenn Sie die Funktionen WinJS.Navigation.navigate, WinJS.Navigation.back oder WinJS.Navigation.forward zum Navigieren verwenden.

Sie müssen WinJS.Navigation.navigate selbst aufrufen, statt das Standardverhalten des Links zu verwenden. Sie können den Link durch eine Schaltfläche ersetzen und mit dem Click-Ereignishandler für die Schaltfläche WinJS.Navigation.navigate aufrufen. Alternativ können Sie das Standardverhalten des Links ändern, sodass von der App WinJS.Navigation.navigate zum Navigieren zum Linkziel verwendet wird, wenn der Benutzer auf einen Link klickt. Behandeln Sie hierzu das click-Ereignis des Links, und beenden Sie mithilfe des Ereignisses das Standardnavigationsverhalten des Links. Rufen Sie anschließend die WinJS.Navigation.navigate-Funktion auf, und übergeben Sie ihr das Linkziel.

JJ663505.wedge(de-de,WIN.10).gifSo setzen Sie das Standardlinkverhalten außer Kraft

  1. Definieren Sie in der home.js-Datei einen click-Ereignishandler für Ihre Links, und fügen Sie ihn als Member der PageControl hinzu. Geben Sie ihm den Namen linkClickEventHandler, und fügen Sie ihn nach dem nameInputChanged-Handler hinzu.
    
    
            nameInputChanged: function (eventInfo) {
                var nameInput = eventInfo.srcElement;
    
                // Store the user's name for multiple sessions.
                var appData = Windows.Storage.ApplicationData.current;
                var roamingSettings = appData.roamingSettings;
                roamingSettings.values["userName"] = nameInput.value;
            },        
    
     
            linkClickEventHandler: function (eventInfo) {
    
            }
    
    
  2. Rufen Sie die preventDefault-Methode auf, um das Standardlinkverhalten (direkte Navigation zur angegebenen Seite) zu verhindern.
    
    
            linkClickEventHandler: function (eventInfo) {
                eventInfo.preventDefault();
    
            }
    
    
  3. Rufen Sie den Link ab, der das Ereignis ausgelöst hat.
    
    
            linkClickEventHandler: function (eventInfo) {
                eventInfo.preventDefault();
                var link = eventInfo.target;
    
            }
    
    
  4. Rufen Sie die WinJS.Navigation.navigate-Funktion auf, und übergeben Sie das Linkziel. (Optional können Sie auch ein Zustandsobjekt übergeben, das den Zustand für diese Seite beschreibt. Weitere Informationen finden Sie auf der WinJS.Navigation.navigate-Seite.)
    
    
            linkClickEventHandler: function (eventInfo) {
                eventInfo.preventDefault();
                var link = eventInfo.target;
                WinJS.Navigation.navigate(link.href);
            }
    
    
  5. Fügen Sie in der ready-Funktion der Datei home.js den Ereignishandler an die Links an.

    WinJS stellt eine WinJS.Utilities.query-Funktion zur Verfügung, die das Abrufen einer Reihe von Elementen auf der Seite erleichtert. Die WinJS.Utilities.query-Funktion gibt ein QueryCollection-Objekt zurück, das weitere Methoden zum Anfügen und Entfernen von Ereignishandlern bereitstellt. Verwenden wir nun die Sammlung WinJS.Utilities.query und die Methode listen, um den linkClickEventHandler anzufügen.

    
            // This function is called whenever a user navigates to this page. It
            // populates the page elements with the app's data.
            ready: function (element, options) {
                // TODO: Initialize the page here.
    
                WinJS.Utilities.query("a").listen("click", 
                    this.linkClickEventHandler, false);
    
    

    Das Schöne bei diesem Ansatz ist, dass er für eine beliebige Anzahl an Links auf der Seite funktioniert. Wir haben bis jetzt erst einen Link, mit diesem Ansatz könnten wir jedoch weitere Links hinzufügen, ohne dass dazu der Code geändert werden muss.

  6. Führen Sie die App aus, und klicken Sie auf den Link für page2.html.

    Nun zeigt die App "page2.html" auf die richtige Art und Weise an.

    Jetzt wird die Seite mit dem richtigen Navigationsmuster angezeigt.

    Inhaltsgliederung nach der Navigation zu "page2.html"

Schritt 7: Hinzufügen einer Navigationsleiste für zusätzliche Navigationsoptionen

Die NavBar ähnelt einer AppBar, die für Navigationsbefehle vorgesehen ist. (Die NavBar ist in Wirklichkeit eine Unterklasse der AppBar.) Sie kann eine einfache Liste mit Links und mehrere in Kategorien unterteilte Linkebenen enthalten. Sie können die NavBar auffüllen, indem Sie Einträge hartcodieren, sie programmgesteuert aktualisieren oder die Datenbindung verwenden.

Die NavBar wird oben im App-Bildschirm eingeblendet, wenn der Benutzer sie benötigt. Der Benutzer ruft die NavBar auf, indem er vom Rand aus streift, Windows-Logo-Taste+Z drückt oder mit der rechten Maustaste klickt.

Die NavBar unterstützt zudem vertikale Layouts und Elemente für die geteilte Navigation (Navigationselemente mit untergeordneten Navigationsoptionen). Die NavBar kann umfassend angepasst werden: Sie können mit CSS nahezu alle Bereiche der NavBar und ihre Inhalte gestalten. Darüber hinaus können Sie benutzerdefinierte Navigationselemente erstellen.

Die Navigationsleiste ist ein WinJS-Steuerelement. Sie verwenden zum Deklarieren einer Navigationsleiste in Ihrem HTML-Code die folgende Syntax:



<div id="navbar" data-win-control="WinJS.UI.NavBar">

</div>


Das NavBar-Steuerelement besteht aus drei Komponenten:

  • Der NavBar selbst.
  • Einem NavBarContainer-Objekt, das Navigationselemente (NavBarCommand-Objekte) enthält und Seitenaufteilung sowie Verschieben und Scrollen unterstützt. Eine NavBar kann mehrere NavBarContainer-Objekte enthalten. Mithilfe von NavBarContainer-Objekten definieren Sie Gruppen mit Navigationsoptionen.
  • Mindestens einem NavBarCommand-Objekt. Auf diese Objekte klickt der Benutzer zum Navigieren.

Im Folgenden finden Sie ein Beispiel für eine einfache NavBar:


<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',
                icon: WinJS.UI.AppBarIcon.home,
                location: '/html/home.html',
                splitButton: false
                }">
            </div>
            <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{
                label: 'Your apps',
                icon: WinJS.UI.AppBarIcon.favorite,
                location: '/html/yourapps.html',
                splitButton: false
                }">
            </div>
    </div>
</div>

Unsere App enthält mehrere Seiten. Wo sollte ich die Navigationsleiste hinzufügen?

  • Wenn die Navigationsleiste Befehle enthält, die auf jeder Seite verfügbar sein sollen, fügen Sie sie zur default.html-Datei hinzu.
  • Unterscheiden sich die Navigationsleisten der einzelnen Seiten, können Sie in den einzelnen PageControl-Objekten unterschiedliche Navigationsleisten definieren.
  • Sie können auch eine zentrale Navigationsleiste in default.html definieren und dann beim Laden verschiedener PageControl-Objekte anpassen.

Erstellen wir nun eine einfache Navigationsleiste, mit der der Benutzer zwischen home.html und page2.html navigieren kann. Wir definieren die Navigationsleiste in der Datei default.html.

JJ663505.wedge(de-de,WIN.10).gifSo fügen Sie eine Navigationsleiste hinzu

  1. Öffnen Sie die Datei default.html. Fügen Sie ein NavBar-Steuerelement als erstes untergeordnetes Element des body-Elements hinzu.

    
    
        <div id="navbar" data-win-control="WinJS.UI.NavBar">
    
        </div>
     
    
    
  2. Jede Navigationsleiste enthält mindestens ein NavBarContainer-Objekt. Mithilfe von NavBarContainer-Objekten definieren Sie Gruppen mit Navigationsoptionen. Fügen Sie Ihrer Navigationsleiste einen NavBarContainer hinzu.

    
    
        <div id="navbar" data-win-control="WinJS.UI.NavBar">
            <div id="globalNav" data-win-control="WinJS.UI.NavBarContainer">
                   
            </div>
        </div>
     
    
    
  3. Jeder NavBarContainer enthält mindestens ein NavBarCommand-Objekt. Auf diese Objekte klickt der Benutzer zum Navigieren. Fügen Sie dem NavBarContainerNavBarCommand-Objekte hinzu.

    Hier sehen Sie die Eigenschaften, die für die einzelnen NavBarCommand festgelegt werden sollen:

    • label: Die für den Befehl anzuzeigende Bezeichnung

    • icon: Das für den Befehl anzuzeigende Symbol oder der Pfad zu einer benutzerdefinierten PNG-Datei, (Eine Liste mit möglichen Werten für Symbole finden Sie unter AppBarIcon.)

    • location: Der gewünschte Zielort

    • splitButton: Gibt an, ob der Befehl ein Untermenü enthält. (Der Standard lautet false.)

    
    
        <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',
                        icon: WinJS.UI.AppBarIcon.home,
                        location: '/pages/home/home.html',
                        splitButton: false
                        }">
                    </div>
                    <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{
                        label: 'Page 2',
                        icon: WinJS.UI.AppBarIcon.page,
                        location: '/pages/page2/page2.html',
                        splitButton: false
                        }">
                    </div>
            </div>
        </div>
     
    
    

    (Dieses Beispiel zeigt, wie NavBarCommand-Objekte inline definiert werden. Sie können sie jedoch auch aus einer Datenquelle generieren. Ein Beispiel finden Sie unter Beispiel für eine HTML-Navigationsleiste.)

  4. Führen Sie die App aus. Streifen Sie zum Anzeigen der Leiste vom Rand aus, drücken Sie WINDOWS+Z, oder klicken Sie mit der rechten Maustaste.

    Einfache App-Leiste

    Beim Klicken auf eine Schaltfläche ruft die Navigationsleiste automatisch navigate und die entsprechende Seite auf.

    Sie haben eine Navigationsleiste deklariert. Als Nächstes wird sie formatiert.

  5. Öffnen Sie die Datei default.css, und erstellen Sie am Anfang der Datei einen CSS-Stil für die App-Leiste, mit dem die Hintergrundfarbe geändert wird.
    
    #navbar {
    
        background-color: #03abe2;
    }
    
    
    
  6. Führen Sie die App aus. Nun können Sie mithilfe der Navigationsleiste zwischen den beiden Seiten navigieren.

    Die App "HelloWorldWithPages" mit App-Leiste

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das dritte Lernprogramm vollständig durchgearbeitet! Sie haben gelernt, wie Sie ein Projekt erstellen, das die Vorlage Navigations-App verwendet, und wie Sie PageControl-Objekte verwenden. Darüber hinaus wissen Sie jetzt, wie Sie eine App-Leiste erstellen.

Herunterladen des Beispiels

Kommen Sie nicht voran, oder möchten Sie Ihre Arbeit überprüfen? Falls ja, laden Sie das Beispiel für die ersten Schritte mit JavaScript herunter.

Nächste Schritte

Im nächsten Teil dieser Lernprogrammreihe lernen Sie, wie Sie eine etwas komplexere App erstellen. Gehen Sie zu Teil 4: Layout und Ansichten

Verwandte Themen

Erste Schritte mit JavaScript: Vollständiger Code für die Lernprogrammreihe
Programmieren von Windows 8-Apps mit HTML, CSS und JavaScript (E-Book)
Für Designer
Navigationsmuster
Befehlsmuster
Layout
Hub
Untere App-Leiste
Obere App-Leiste
Zurück-Schaltfläche
Richtlinien für die Hubsteuerung
Richtlinien für App-Leisten (Windows Store-Apps)
Barrierefreie App-Leiste
Für Entwickler (HTML)
Beispiel für Navigation und Navigationsverlauf
Hinzufügen von App-Leisten
Hinzufügen von Navigationsleisten
Navigieren zwischen Seiten (HTML)
HTML-Beispiel für ein Hub-Steuerelement
HTML-Beispiel für ein AppBar-Steuerelement
HTML-Beispiel für ein NavBar-Steuerelement
WinJS.UI.Hub object
WinJS.UI.AppBar object
WinJS.UI.NavBar object
WinJS.UI.BackButton object

 

 

Anzeigen:
© 2014 Microsoft