Troisième partie : objets PageControl et navigation (HTML)

L’application "Hello, world!" que vous avez créée dans les précédents didacticiels ne contient qu’une seule page de contenu. La plupart des applications réelles comprennent plusieurs pages.

Divers modèles de navigation sont utilisables dans une application du Windows Store. Grâce aux modèles de navigation, vous pouvez choisir le meilleur modèle de navigation pour votre application.

Remarque  

Vous pouvez voir les deux principaux modèles de navigation (modèle de navigation plat et modèle de navigation hiérarchique) en action dans le cadre de notre série Fonctionnalités d’application de A à Z.

Dans ce didacticiel, vous copiez le code de votre application "Hello, world!" dans une nouvelle application qui utilise le modèle Navigation App, puis vous ajoutez une page supplémentaire.

Découvrez comment :

  • utiliser le modèle de projet Navigation App pour créer une application comprenant plusieurs pages de contenu ;
  • utiliser des objets PageControl pour placer votre code dans des unités modulaires distinctes ;
  • utiliser le modèle de navigation sur une seule page pour naviguer entre les pages ;
  • utiliser un NavBar pour fournir des commandes de navigation.
Astuce  

Pour passer directement au code sans suivre le didacticiel, voir Prise en main de JavaScript : code complet pour la série de didacticiels.

Avant de commencer...

Informations relatives à la navigation dans les applications du Windows Store

Presque tous les sites Web proposent une forme de navigation, généralement sous forme de liens hypertexte sur lesquels vous cliquez pour accéder à une autre page. Chaque page a son propre jeu de fonctions et de données JavaScript, un nouveau jeu de code HTML à afficher, des informations de style, etc. Ce modèle de navigation est appelé navigation multipage. Cette conception convient à la plupart des sites Web, mais peut poser des problèmes pour une application, car elle rend difficile le maintien de l’état entre les différentes pages.

Un autre modèle de navigation est la navigation sur une seule page, qui vous permet d’utiliser une seule page pour votre application et de charger d’autres données dans cette page selon vos besoins. Vous fractionnez toujours votre application en plusieurs fichiers, mais au lieu de vous déplacer de page en page, votre application charge d’autres documents dans la page principale. Comme la page principale de votre application n’est jamais déchargée, vos scripts ne le sont pas non plus, ce qui facilite la gestion des états, des transitions ou des animations. Nous vous recommandons d’utiliser le modèle de navigation sur une seule page pour les applications du Windows Store.

Pour vous aider à créer des applications qui utilisent le modèle de navigation sur une seule page, la Bibliothèque Windows pour JavaScript fournit l’objet WinJS.UI.Pages.PageControl. Le modèle de projet Navigation App fournit également une infrastructure de navigation supplémentaire. Lors de la prochaine étape, vous utilisez ce modèle pour créer un nouveau projet.

Étape 1 : créer une application de navigation dans Visual Studio

Créons une application appelée HelloWorldWithPages qui utilise le modèle Navigation App. Voici comment procéder :

  1. Lancez Microsoft Visual Studio Express 2013 pour Windows.
  2. Dans le menu Fichier, sélectionnez Nouveau projet.

    La boîte de dialogue Nouveau projet s’affiche. Le volet gauche de la boîte de dialogue vous permet de choisir le type de modèle à afficher.

  3. Dans le volet gauche, développez Installé, puis Modèles et JavaScript, puis sélectionnez le type de modèle Windows Store. Le volet central de la boîte de dialogue affiche une liste de modèles de projet pour JavaScript.

    Pour ce didacticiel, nous utiliserons le modèle Navigation App.

  4. Dans le volet central, sélectionnez le modèle Navigation App.
  5. Dans la zone de texte Name, entrez "HelloWorldWithPages".
  6. Désactivez la case à cocher Créer le répertoire pour la solution.

    Fenêtre Nouveau projet

  7. Cliquez sur OK pour créer le projet.

    Visual Studio crée votre projet et l’affiche dans l’Explorateur de solutions.

    L’Explorateur de solutions pour le projet HelloWorldWithPages

Notez que votre nouvelle Navigation App contient plus de fichiers que votre application "Hello, world!". Examinons maintenant ces nouveaux fichiers :

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

    Ces trois pages définissent un contrôle PageControl pour la page d’accueil de l’application. Un contrôle PageControl est constitué d’un fichier HTML, d’un fichier JavaScript et d’un fichier CSS. Un contrôle PageControl représente une unité modulaire HTML, CSS et JavaScript qu’il est possible d’atteindre (comme une page HTML) ou d’utiliser comme un contrôle personnalisé. Vous pouvez utiliser des objets PageControl pour fractionner une application importante en parties plus petites et simples à gérer.

    Les objets PageControl prennent en charge plusieurs méthodes qui rendent leur utilisation dans votre application plus simple qu’en utilisant une collection de pages HTML, CSS et JavaScript isolées. Vous en saurez plus sur ces méthodes lors d’une étape ultérieure.

  • /js/navigator.js

    Ce fichier fournit la classe d’assistance PageControlNavigator qui vous permet d’afficher des objets PageControl et de naviguer entre eux. Vous n’en avez pas besoin pour afficher un contrôle PageControl, mais elle peut faciliter leur utilisation.

Examinons la page default.html de votre nouvelle application :


<!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>

Le body du fichier contient deux éléments : un élément div pour le PageControlNavigator et un élément commenté div pour un AppBar. Ignorons la app bar pour le moment et examinons de plus près le premier élément div.



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

Cet élément div crée un contrôle PageControlNavigator. Le PageControlNavigator charge et affiche automatiquement votre page d’accueil. Vous utilisez l’attribut data-win-options qui lui indique la page à charger (/pages/home/home.html).

Poursuivez et exécutez l’application.

L’application HelloWorldWithPages

Bien que ce ne soit pas évident, l’application affiche actuellement à la fois default.html et home.html. Cela revient à utiliser un iframe pour afficher une page HTML à l’intérieur d’une autre page HTML.

L’élément home.html PageControl est affiché à partir de la page default.html

Étape 2 : copier votre contenu HTML et CSS de votre application « Hello, world! »

Votre nouvelle application comprend deux pages HTML : default.html et home.html. Où placez-vous votre contenu ?

  • Utilisez default.html pour l’interface utilisateur qui doit toujours être présente, quelle que soit la page de l’application qui s’affiche. Par exemple, vous pouvez utiliser default.html pour héberger une barre de navigation.

  • Utilisez des pages, par exemple home.html, pour le contenu qui constitue un écran individuel de l’application.

Ouvrons home.html et observons une partie du balisage qu’il contient.

  • Il comprend un élément head qui contient des références à du code et des feuilles de style WinJS. Il contient également des références à la feuille de style par défaut de l’application (default.css) et aux autres fichiers qui composent la page d’accueil (home.css et home.js).

    
    
    <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>
    
    
    
  • Il comprend une zone d’en-tête de page qui inclut un bouton BackButton pour la navigation vers l’arrière et une zone de titre. Le modèle contient du code qui active automatiquement le bouton Back lorsque vous pouvez naviguer vers l’arrière. Ce bouton n’est visible qu’une fois que vous avez ajouté une deuxième page et que vous y avez accédé.

    
    
            <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>
    
    
    
  • Il comprend une section pour votre contenu principal.

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

Ajoutons le contenu de l’application "Hello, world!" à la page d’accueil (home.html) de votre nouveau projet HelloWorldWithPages.

JJ663505.wedge(fr-fr,WIN.10).gifPour ajouter le contenu HTML et CSS de votre application "Hello, world!"

  1. Copiez votre contenu HTML final du fichier default.html de votre application "Hello, world!" vers la section de contenu principal de /pages/home/home.html dans votre nouveau projet.
    
    <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. Déplacez le contenu d’en-tête que vous avez copié dans l’élément h1 fourni automatiquement par home.html. Étant donné que home.html contient déjà une section de contenu principal, supprimez l’élément "mainContent" div que vous avez copié (mais laissez son contenu).
    
    <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. Passez à la feuille de style à dominante claire. Remplacez la référence à la feuille de style à dominante foncée :
    
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    
    
    

    par celle-ci :

    
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
    
    
    
  4. Chaque PageControl a son propre fichier CSS (Cascading Style Sheets).

    Copiez le style greetingOutput du fichier default.css que vous avez créé dans la Première partie : créer une application « Hello, world! » vers home.css.

    
    .homepage section[role=main] {
        margin-left: 120px;
        margin-right: 120px;
    }
    
    #greetingOutput {
        height: 20px; 
        margin-bottom: 40px;
    }
    
    
  5. Exécutez l’application.

    L’application HelloWorldWithPages avec votre contenu provenant de l’application Hello, world!

    Vous avez créé le contenu à partir de votre application "Hello, world!" d’origine. Vous ajoutez ensuite de l’interactivité en copiant vos gestionnaires d’événements "Hello, world!".

Étape 3 : copier vos gestionnaires d’événements

Chaque PageControl a son propre fichier JavaScript. Examinons le fichier JavaScript que Visual Studio a créé pour votre PageControl"home" , home.js :


(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.
        }
    });
})();

Ce fichier est assez différent de votre fichier default.js. D’abord, il est beaucoup plus court. En effet, default.js gère déjà l’activation et la logique principale de l’application. Chaque PageControl a uniquement besoin de contenir une logique pour la page elle-même.

L’une des premières lignes de code, un appel à la fonction WinJS.UI.Page.define, crée l’objet PageControl. Cette fonction prend deux paramètres : l’URI de la page ("/pages/home/home.html" dans cet exemple) et un objet qui définit les membres du PageControl. Vous pouvez ajouter n’importe quel type de membre souhaité. Vous pouvez également implémenter un ensemble de membres spéciaux, décrits par l’interface IPageControlMembers, lesquels sont automatiquement appelés par l’application lorsque vous utilisez PageControl.

Le fichier home.js créé par le modèle définit l’un de ces membres spéciaux, la fonction ready. La fonction ready est appelée une fois votre page chargée et affichée. C’est un bon endroit pour attacher des gestionnaires d’événements.

Vous pouvez remarquer que le code n’inclut pas d’appel à WinJS.UI.processAll. En effet, le PageControl l’appelle automatiquement. À l’issue de l’appel à la fonction ready, WinJS.UI.processAll a déjà été appelé et a fini son traitement.

JJ663505.wedge(fr-fr,WIN.10).gifPour ajouter vos gestionnaires d’événements

  1. Dans la Première partie : créer une application « Hello, world! » et la Deuxième partie : gérer le cycle de vie et l’état d’une application, vous avez défini trois gestionnaires d’événements : buttonClickHandler, ratingChanged et nameInputChanged. Copiez ces gestionnaires d’événements dans votre fichier home.js et faites-en des membres de votre PageControl. Ajoutez-les après la fonction ready que le modèle a automatiquement créé.

    
        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. Il faut maintenant attacher vos gestionnaires d’événements. Dans la Première partie et la Deuxième partie, vous avez créé une fonction then pour le Promise retourné par WinJS.UI.processAll. Les choses sont un peu plus simples maintenant, car vous pouvez utiliser la fonction ready pour attacher vos gestionnaires d’événements. La fonction ready est appelée après l’appel automatique de WinJS.UI.processAll par le PageControl.

    Copiez le code qui attache vos gestionnaires d’événements à la fonction ready dans home.js.

    
            // 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. Exécutez l’application. Lorsque vous entrez un nom et que vous cliquez sur le bouton, une formule de salutation s’affiche. Lorsque vous évaluez la formule de salutation, la valeur d’évaluation numérique s’affiche.

    L’application HelloWorldWithPages après la sélection d’une évaluation

Étape 4 : restaurer l’état de l’application

Vous avez presque recréé la fonctionnalité que vous aviez dans votre application "Hello, world!". La seule chose que vous devez maintenant faire est de restaurer l’état de l’application lorsque l’utilisateur la lance.

Vous vous souvenez probablement que vous aviez deux types d’état d’application à restaurer :

  • Le nom et l’évaluation de l’utilisateur. Vous restaurez cet état quelle que soit la façon dont l’application a été arrêtée.
  • La formule de salutation personnalisée. Vous ne restaurez cet état que si l’application a été correctement arrêtée lors de sa dernière exécution.

JJ663505.wedge(fr-fr,WIN.10).gifPour restaurer l’état de l’application

  1. Copiez le code de l’application "Hello, world!" qui restaure le nom et l’évaluation de l’utilisateur. Ajoutez le code à la fonction ready dans home.js.
    
            // 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. Nous voulons uniquement restaurer la salutation personnalisée si l’application a été correctement arrêtée pendant sa dernière exécution. Malheureusement, notre PageControl n’intègre pas la possibilité de vérifier l’état d’exécution précédent de l’application : cette information est fournie au gestionnaire d’événements onactivated dans notre fichier default.js. Mais il existe une solution simple à ce problème : il nous suffit d’enregistrer l’état d’exécution précédent de l’application dans l’objet sessionState pour que notre PageControl puisse y accéder.
    1. Dans votre fichier default.js, ajoutez du code à votre gestionnaire onactivated pour enregistrer l’état d’exécution précédent. Enregistrez l’état en ajoutant une propriété à l’objet sessionState nommé previousExecutionState.
      
          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. Dans votre fichier home.js, ajoutez du code à votre méthode ready pour vérifier les données previousExecutionState. Si l’état d’exécution précédent est terminated, restaurez la salutation personnalisée (vous pouvez copier votre code correspondant à partir du fichier default.js de votre application "Hello, world").
      
                  // 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;
                      }
      
                  }
      
      

      Voici la méthode ready dans son intégralité.

      
              // 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. Exécutez l’application. Vous avez maintenant dupliqué la fonctionnalité que vous aviez dans votre application "Hello, world!" d’origine.

Étape 5 : ajouter une autre page

La plupart des applications comprennent plusieurs pages. Ajoutons une autre page à votre application. Comme vous utilisez le modèle Application de navigation, il est facile d’ajouter des pages supplémentaires.

JJ663505.wedge(fr-fr,WIN.10).gifPour ajouter une autre page

  1. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le dossier pages, puis sélectionnez Ajouter > Nouveau dossier. Un nouveau dossier apparaît dans le projet.
  2. Renommez le dossier "page2".
  3. Cliquez avec le bouton droit sur le dossier page2, puis sélectionnez Ajouter > Nouvel élément... La boîte de dialogue Ajouter un nouvel élément s’ouvre.
  4. Sélectionnez Contrôle de page dans la liste. Dans la zone de texte Nom, entrez "page2.html".

  5. Cliquez sur Ajouter pour ajouter le PageControl. Le nouveau PageControl s’affiche dans l’Explorateur de solutions.

    Le projet HelloWorldWithPages

    Le nouveau PageControl a trois fichiers : page2.css, page2.html et page2.js.

  6. Dans le fichier page2.html, remplacez la référence à la feuille de style à dominante foncée :
    
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    
    
    

    par celle-ci :

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

Vous avez créé une nouvelle page. Dans l’étape suivante, vous allez apprendre à naviguer vers cette page.

Étape 6 : utiliser la fonction de navigation pour se déplacer entre les pages

Pour le moment, vous avez une deuxième page mais l’utilisateur n’a aucun moyen d’y accéder. Mettons à jour votre page home.html en ajoutant un lien vers page2.html.

JJ663505.wedge(fr-fr,WIN.10).gifPour naviguer entre les pages

  1. Ouvrez votre home.html et ajoutez un lien vers page2.html.
    
    <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. Exécutez l’application, puis cliquez sur le lien. Cela semble fonctionner : l’application affiche page2.html.

    La boîte de dialogue Ajouter un nouvel élément

Il y a toutefois un problème : l’application a effectué une navigation de niveau supérieur. Au lieu de passer de home.html à page2.html, elle passe de default.html à page2.html.

Navigation de niveau supérieur

Ce que vous voulez faire, c’est remplacer le contenu de home.html par page2.html.

Navigation vers page2.html de la manière recommandée

Heureusement, le contrôle PageControlNavigator rend ce type de navigation assez facile à mettre en œuvre. Le code PageControlNavigator (dans le fichier navigator.js de votre application) gère l’événement WinJS.Navigation.navigated pour vous. Lorsque l’événement se produit, le contrôle PageControlNavigator charge la page spécifiée par l’événement.

L’événement WinJS.Navigation.navigated se produit lorsque vous utilisez les fonctions WinJS.Navigation.navigate, WinJS.Navigation.back ou WinJS.Navigation.forward pour naviguer.

Vous devez appeler WinJS.Navigation.navigate vous-même plutôt qu’utiliser le comportement par défaut du lien hypertexte. Vous pouvez remplacer le lien par un bouton et utiliser le gestionnaire d’événements click du bouton pour appeler WinJS.Navigation.navigate. Vous pouvez aussi modifier le comportement par défaut du lien hypertexte de telle sorte que, lorsque l’utilisateur clique sur un lien, l’application utilise WinJS.Navigation.navigate pour accéder à la cible du lien. Pour cela, gérez l’événement click du lien hypertexte et utilisez l’événement pour arrêter le comportement de navigation par défaut du lien hypertexte, puis appelez la fonction WinJS.Navigation.navigate et passez-lui la cible du lien.

JJ663505.wedge(fr-fr,WIN.10).gifPour remplacer le comportement par défaut du lien hypertexte

  1. Dans votre fichier home.js, définissez un gestionnaire d’événements click pour vos liens hypertexte et faites-en un membre de votre PageControl. Nommez-le linkClickEventHandler et ajoutez-le après le gestionnaire nameInputChanged.
    
    
            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. Appelez la méthode preventDefault pour empêcher le comportement du lien par défaut (accès direct à la page spécifiée).
    
    
            linkClickEventHandler: function (eventInfo) {
                eventInfo.preventDefault();
    
            }
    
    
  3. Récupérez le lien hypertexte ayant déclenché l’événement.
    
    
            linkClickEventHandler: function (eventInfo) {
                eventInfo.preventDefault();
                var link = eventInfo.target;
    
            }
    
    
  4. Appelez la fonction WinJS.Navigation.navigate et passez-lui la cible du lien. (Vous pouvez éventuellement passer un objet d’état qui décrit l’état de cette page. Pour plus d’informations, voir la page WinJS.Navigation.navigate.)
    
    
            linkClickEventHandler: function (eventInfo) {
                eventInfo.preventDefault();
                var link = eventInfo.target;
                WinJS.Navigation.navigate(link.href);
            }
    
    
  5. Dans la fonction ready du fichier home.js, attachez le gestionnaire d’événements à vos liens hypertexte.

    La bibliothèque WinJS fournit une fonction WinJS.Utilities.query qui permet de récupérer facilement un certain nombre d’éléments sur la page. La fonction WinJS.Utilities.query retourne un QueryCollection, lequel fournit des méthodes supplémentaires pour attacher et supprimer des gestionnaires d’événements. Utilisons la collection WinJS.Utilities.query et la méthode listen pour attacher votre linkClickEventHandler.

    
            // 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);
    
    

    L’aspect intéressant de cette approche est qu’elle fonctionne pour n’importe quel nombre de liens sur la page. Pour le moment, vous n’avez qu’un seul lien, mais, avec cette approche, vous pourriez ajouter d’autres liens sans avoir à modifier votre code.

  6. Exécutez l’application, puis cliquez sur le lien pour page2.html.

    Maintenant, l’application affiche page2.html de la façon appropriée

    La page s’affiche maintenant à l’aide du modèle de navigation approprié.

    Répartition du contenu après la navigation vers page2.html

Étape 7 : ajouter un objet NavBar pour une navigation supplémentaire

L’objet NavBar s’apparente à un objet AppBar qui est dédié aux commandes de navigation. (En réalité, l’objet NavBar est une sous-classe de l’objet AppBar.) Il contient une liste simple de liens et il peut contenir plusieurs niveaux de liens organisés en catégories. Vous pouvez remplir l’objet NavBar en codant en dur les entrées, en les mettant à jour par programmation ou en utilisant la liaison de données.

L’objet NavBar apparaît en haut de l’écran de l’application quand l’utilisateur en a besoin. Pour appeler l’objet NavBar, l’utilisateur effectue un balayage latéral, appuie sur la touche Windows + Z, ou effectue un clic droit.

L’objet NavBar prend également en charge les dispositions de texte verticales et les éléments de navigation fractionnés (les éléments de navigation qui comportent des options de navigation enfant). L’objet NavBar est particulièrement personnalisable : vous pouvez utiliser CSS pour appliquer un style à quasiment tous les aspects de l’objet NavBar et son contenu. Vous pouvez également créer des éléments de navigation personnalisés.

La barre de navigation est un contrôle WinJS. Pour en déclarer une dans votre code HTML, vous utilisez la syntaxe suivante :



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

</div>


L’objet NavBar comporte trois composants :

  • L’élément NavBar lui-même.
  • Un objet NavBarContainer, qui contient des éléments de navigation (objets NavBarCommand) et qui prend en charge la pagination ainsi que le défilement simple et panoramique. Vous pouvez avoir un ou plusieurs objets NavBarContainerdans un seul objet NavBar. Vous utilisez des objets NavBarContainerpour définir des groupes d’options de navigation.
  • Un ou plusieurs objets NavBarCommand. L’utilisateur clique sur ces objets pour naviguer.

Voici un exemple d’objet NavBar simple :


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

Votre application comprend plusieurs pages. Où devez-vous ajouter votre barre de navigation  ?

  • Si votre barre de navigation contient des commandes qui doivent être disponibles pour chaque page, ajoutez-la dans votre fichier default.html.
  • Si votre barre de navigation est différente d’une page à l’autre, vous pouvez définir une barre de l’application différente dans chacun de vos objets PageControl.
  • Vous pouvez également définir une barre de navigation centrale dans default.html, puis la modifier quand vous chargez des objets PageControl différents.

Créons une barre de navigation simple qui permet à l’utilisateur de naviguer entre home.html et page2.html. Vous allez définir votre barre de navigation dans votre fichier default.html.

JJ663505.wedge(fr-fr,WIN.10).gifPour ajouter une barre de navigation

  1. Ouvrez votre fichier default.html. Ajoutez un contrôle NavBar en tant que premier enfant de l’élément body.

    
    
        <div id="navbar" data-win-control="WinJS.UI.NavBar">
    
        </div>
     
    
    
  2. Chaque barre de navigation contient un ou plusieurs objets NavBarContainer. Vous utilisez des objets NavBarContainerpour définir des groupes d’options de navigation. Ajoutez un objet NavBarContainerà votre barre de navigation.

    
    
        <div id="navbar" data-win-control="WinJS.UI.NavBar">
            <div id="globalNav" data-win-control="WinJS.UI.NavBarContainer">
                   
            </div>
        </div>
     
    
    
  3. Chaque objet NavBarContainer contient un ou plusieurs objets NavBarCommand. L’utilisateur clique sur ces objets pour naviguer. Ajoutez des objets NavBarCommandà votre objet NavBarContainer.

    Voici les propriétés à définir pour chaque objet NavBarCommand :

    • label : étiquette à afficher pour la commande.

    • icon : icône à afficher pour la commande, ou chemin d’accès à un fichier PNG personnalisé. (Pour obtenir la liste des valeurs d’icônes, voir AppBarIcon.)

    • location : emplacement auquel accéder.

    • splitButton : si la commande dispose d’un sous-menu. (La valeur par défaut est 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>
     
    
    

    (Cet exemple montre comment définir des objets NavBarCommand insérés, mais vous pouvez également les générer à partir d’une source de données. Pour obtenir un exemple, voir Exemple NavBar HTML.)

  4. Exécutez l’application. Pour afficher la barre, effectuez un mouvement de balayage latéral, appuyez sur la touche Windows + Z ou cliquez avec le bouton droit de la souris.

    Une barre de l’application simple

    Quand vous cliquez sur un bouton, la barre de navigation appelle automatiquement la méthode navigate et vous fait accéder à la page.

    Vous avez déclaré une barre de navigation. Affectons-lui maintenant un style.

  5. Ouvrez votre fichier default.css et, au début de ce fichier, créez, pour la barre de l’application, un style CSS qui change sa couleur d’arrière-plan.
    
    #navbar {
    
        background-color: #03abe2;
    }
    
    
    
  6. Exécutez l’application. Vous pouvez maintenant utiliser la barre de navigation pour naviguer entre les deux pages.

    L’application HelloWorldWithPages, maintenant avec une barre de l’application

Récapitulatif

C’est ici que prend fin le troisième didacticiel. Vous avez appris à créer un projet qui utilise le modèle Application de navigation et à utiliser des objets PageControl. Vous avez également appris à créer une barre de l’application.

Télécharger l’exemple

Avez-vous rencontré des problèmes ou voulez-vous vérifier votre travail ? Si c’est le cas, téléchargez l’exemple Prise en main de JavaScript.

Étapes suivantes

Dans la prochaine partie de cette série de didacticiels, vous allez apprendre à créer une application plus complexe. Accédez à la Quatrième partie : disposition et vues.

Rubriques associées

Prise en main de JavaScript : code complet pour la série de didacticiels
Programmation d’applications Windows 8 avec HTML, CSS et JavaScript (livre électronique)
Pour les concepteurs
Modèles de navigation
Modèles de commandes
Disposition
Recommandations en matière de boutons Précédent
Recommandations en matière de contrôles hub
Recommandations en matière de barres d’application (applications du Windows Store)
Rendre la barre de l’application accessible
Pour les développeurs (HTML)
Exemple de navigation et d’historique de navigation
Ajout de barres d’application
Ajout de barres de navigation
Navigation entre les pages (HTML)
Exemple de contrôle Hub HTML
Exemple de contrôle AppBar HTML
Exemple de contrôle NavBar HTML
WinJS.UI.Hub object
WinJS.UI.AppBar object
WinJS.UI.NavBar object
WinJS.UI.BackButton object

 

 

Afficher:
© 2015 Microsoft