Démarrage rapide : utilisation de la navigation sur une seule page (HTML)

  • Article

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Découvrez le modèle de navigation sur une seule page et comment l’implémenter dans votre propre application à l’aide des objets PageControl et des fonctionnalités WinJS.Navigation.

Pour vous aider à choisir le meilleur modèle de navigation pour votre application, voir Modèles de navigation.

Vous pouvez également consulter le modèle de navigation plat et le modèle de navigation hiérarchique en action dans le cadre de notre série Fonctionnalités d’application de A à Z.

Prérequis

Création d’un lien de base

L’une des formes de navigation les plus simples et les plus couramment utilisées est le lien hypertexte. Voici le code HTML qui crée un lien hypertexte qui accède à page2.html.

<p><a href="page2.html">Go to page 2</a></p>

Étant donné qu’il s’agit d’un lien relatif, le système présume que page2.html est une page locale qui fait partie de votre application, relative à l’URL de base du document actif. Par exemple, si le lien apparaît dans /folder/default.html, un clic dessus vous amène à /folder/page2.html.

Remarque  Si vous avez optimisé votre application en vue de sa localisation (ce qui est toujours une bonne idée), ce comportement varie en fonction des dossiers de contenu localisé situés sous /folder/. Voir Globalisation de votre application.

 

Si vous voulez spécifier explicitement l’URI complet pour un fichier local dans votre application, utilisez le nouveau modèle d’URL du contenu empaqueté (ms-appx) comme ceci :

  • **ms-appx://package name/**file path

Vous pouvez omettre le nom du package si vous le souhaitez.

  • **ms-appx:///**file path

Voici un exemple :

<p><a href="ms-appx:///page2.html">Go to page 2</a></p>

Vous pouvez utiliser le modèle d’URL ms-appx pour faire référence à un fichier qui est inclus dans le package de l’application. Toutefois, nous vous recommandons d’utiliser des URL relatives, car elles sont résolues automatiquement d’après l’URL de base du document.

Navigation sur une seule page : modèle recommandé

Dans l’exemple précédent, vous avez vu comment créer un lien qui effectue une navigation de niveau supérieur. Si cette méthode convient aux pages Web, il est déconseillé d’effectuer des navigations de niveau supérieur dans une application pour plusieurs raisons :

  • L’écran devient noir pendant que l’application charge la page suivante.
  • Le contexte de script est détruit et doit être réinitialisé. L’application risque de recevoir des événements système mais de ne pas les gérer car le contexte de script est détruit et réinitialisé.

La navigation sur une seule page génère de meilleures performances et offre une expérience plus typique que la navigation de niveau supérieur. Les contrôles de navigation ne sont pas automatiquement fournis dans les nouveaux projets Microsoft Visual Studio. De ce fait, une navigation de niveau supérieur vers une nouvelle page signifie qu’il n’y a aucun moyen de revenir à la première page à moins de créer manuellement un lien ou un autre mécanisme de navigation pour revenir en arrière. Par ailleurs, votre page de démarrage est l’emplacement où vous pouvez définir la façon dont votre application gère son cycle de vie — à savoir comment elle se comporte au démarrage, à l’arrêt ou en cas d’interruption. Si vous avez plusieurs pages de niveau supérieur, chacune d’entre elles doit contenir la logique nécessaire pour gérer le cycle de vie et l’état de l’application.

Quel contrôle devez-vous utiliser pour introduire du contenu dans votre page principale ?

  • Vous pouvez utiliser le modèle DOM (Document Object Model) pour charger des documents d’une autre source.
  • Pour du contenu HTML simple (contenu qui n’est pas interactif et qui ne contient pas de références à un script), utilisez un objet HtmlControl.
  • Pour du contenu Web externe, utilisez le contrôle x-ms-webview chaque fois que possible. Comparé à un objet iframe, ce contrôle offre un meilleur isolement, une meilleure navigation, la possibilité d’utiliser le filtre SmartScreen et la prise en charge de sites qui ne peuvent pas être hébergés dans un objet iframe.
  • Pour tout autre contenu, utilisez un contrôle Page.

Visual Studio fournit plusieurs modèles de projets JavaScript pour applications qui peuvent faciliter la gestion de la navigation. Ces modèles de projets proposent un contrôle de navigation, appelé PageControlNavigator, que vous pouvez utiliser pour naviguer entre des objets PageControl. La classe PageControlNavigator illustre une façon d’utiliser le contrôle PageControl pour faciliter la navigation sur une seule page.

Les étapes suivantes décrivent comment créer une application qui contient plusieurs objets PageControl et comment utiliser le modèle de navigation sur une seule page pour naviguer entre ces pages.

Étape 1 : créer un projet Application de navigation

  1. Démarrez Microsoft Visual Studio 2013 Update 2.

    Remarque  Lorsque vous exécutez Visual Studio pour la première fois, vous êtes invité à vous procurer une licence de développeur.

     

  2. Choisissez Fichier > Nouveau projet ou cliquez sur Nouveau projet à partir de l’onglet Page de démarrage. La boîte de dialogue Nouveau projet s’ouvre.

  3. Dans le volet de gauche Modèles, développez Installé => Modèles => JavaScript => Applications de Store.

  4. Sélectionnez le type de modèle Applications universelles. Les modèles de projets proposés pour JavaScript s’affichent dans le volet central de la boîte de dialogue.

  5. Dans le volet central, sélectionnez le modèle de projet Application de navigation (Applications universelles).

  6. Dans la zone de texte Nom, tapez un nom pour votre projet. Les exemples de cette rubrique utilisent "NavigationAppExample".

    La boîte de dialogue Nouveau projet affichant les modèles Applications universelles JavaScript.

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

    Votre nouveau projet Application de navigation contient une page de démarrage, une page d’accueil et quelques fichiers de prise en charge supplémentaires. Il se présente comme suit dans l’Explorateur de solutions.

    Fichiers dans le nouveau projet Application de navigation.

    Votre nouveau projet Application de navigation comprend un certain nombre de fichiers : Certains sont spécifiques à une application Windows, d’autres spécifiques à une application Windows Phone et d’autres encore sont partagés.

    Le projet comprend les fichiers HTML suivants :

    • default.html—page de démarrage. Ce fichier est chargé en premier. Il contient une instance du contrôle PageControlNavigator (qui charge chaque page dans la fenêtre principale). C’est aussi là que vous pouvez créer un objet AppBar si votre application en utilise un.Remarque  Les pages HTML sont chargées dans un seul hôte de contenu, un élément div déclaré dans default.html. Dans default.html, l’élément div de l’hôte de contenu est déclaré en tant que contrôle de type PageControlNavigator à l’aide de l’attribut data-win-control qui est fourni par la bibliothèque Windows pour JavaScript (WinJS).  
    • home.html—page d’accueil. Elle affiche le titre « Bienvenue ».

    Le projet comprend les fichiers JavaScript suivants :

    • default.js—spécifie comment l’application se comporte au démarrage.
    • home.js—spécifie le comportement associé à la page d’accueil.
    • navigator.js—implémente l’objet PageControlNavigator qui prend en charge le modèle de navigation pour les modèles d’application du Windows Store en JavaScript.

    Le projet comprend les fichiers CSS suivants :

    • default.css—spécifie les styles CSS de la page d’hôte de contenu et de l’application dans son ensemble.
    • home.css—spécifie les styles CSS de la page d’accueil.

    Le projet comprend également le fichier package.appxmanifest qui décrit le package d’application. Enfin, le projet contient plusieurs fichiers image, tels que splashscreen.png pour l’image de l’écran de démarrage et storelogo.png qui est utilisé pour le Windows Store.

  8. Exécutez l’application. Choisissez Déboguer > Démarrer le débogage, ou choisissez F5 (choisissez Maj +F5 pour interrompre le débogage et revenir à Visual Studio).

    Voici une capture d’écran de l’application Windows.

    La nouvelle application de navigation Windows.

    Voici une capture d’écran de l’application Windows Phone.

    La nouvelle application de navigation Windows Phone.

    Notez que le contenu que vous voyez n’est pas défini dans le fichier default.html. Il est défini dans le fichier home.html, une page séparée. C’est le contrôle PageControlNavigator qui récupère le contenu de la page d’accueil et qui l’affiche dans default.html.

    Le contrôle de navigation, PageControlNavigator, est présenté ici. Il définit plusieurs fonctions qui sont utilisées pour la navigation. Ce contrôle est implémenté dans navigator.js.

    
WinJS.Namespace.define("Application", {
    PageControlNavigator: WinJS.Class.define(
        // Define the constructor function for the PageControlNavigator.
        function PageControlNavigator(element, options) {
            // Initialization code.
            }, {
                // Members specified here.
            }
    ), // . . .
});

    La fonction constructeur effectue l’initialisation pour le contrôle de navigation. Parmi les tâches d’initialisation importantes, citons la définition des gestionnaires pour les événements WinJS, notamment l’événement WinJS.Navigation.onnavigating, et la définition de la page d’accueil de l’application. (La valeur d’accueil est spécifiée dans l’élément contenthost de DIV, dans un attribut data-win-options.)

    
// Initialization code.
this.home = options.home;
// . . .
// The 'nav' variable is set to WinJS.Navigation.
addRemovableEventListener(nav, 'navigating', this._navigating.bind(this), false);
addRemovableEventListener(nav, 'navigated', this._navigated.bind(this), false);

    Un élément DIV qui est déclaré comme contrôle de navigation de l’application (dans default.html) fournit l’hôte de contenu pour toutes les pages de l’application. L’élément DIV utilise l’attribut data-win-control WinJS pour se déclarer comme contrôle de navigation, lequel fournit le modèle de navigation pour l’application. Tout le contenu de la page est chargé dans cet élément DIV.

    Voici le code complet de la page default.html.

    
<!-- default.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>NavigationAppExample</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>

    <!-- NavigationAppExample 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'}">
        </button>
    </div> -->
</body>
</html>

    Cette illustration présente les différentes unités du contenu qui apparaissent dans la fenêtre de l’application :

    Répartition du contenu pour une application de navigation.

Dans les étapes suivantes, vous allez découvrir plus en détail l’ajout de pages avec le contrôle PageControlNavigator et l’objet PageControl.

Étape 2 : créer une page

Un PageControl est une unité HTML, CSS et JavaScript modulaire qui fonctionne comme une page logique.

Quand vous ajoutez une nouvelle page à un projet Visual Studio 2013, vous devez procéder comme suit :

  1. Ajoutez la nouvelle page à l’aide du modèle d’élément Contrôle de page dans Visual Studio.
  2. Ajoutez du code permettant d’accéder à la nouvelle page à l’aide de la fonction WinJS.Navigation.navigate. Astuce  Cette fonction n’effectue pas la navigation directement, mais appelle l’événement WinJS.Navigation.onnavigated, lequel est géré dans navigator.js. Le code inclus dans navigator.js appelle la fonction ready dans votre nouvelle page. Habituellement, il n’est pas nécessaire de modifier navigator.js.  
  3. Ajoutez l’interface utilisateur et les gestionnaires d’événements appropriés à votre application, si besoin, pour appeler le code de navigation de la page.

Une page comprend un ensemble de méthodes prédéfinies que la bibliothèque appelle automatiquement, dans un ordre prédéfini. La fonction WinJS.UI.Pages.define expose ces méthodes à des fins d’implémentation.

Hh452768.wedge(fr-fr,WIN.10).gifAjouter une page

  1. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le dossier pages, puis sélectionnez Ajouter > Nouveau dossier.Remarque  Pour cet exemple, nous ajoutons une page partagée. Vous pouvez ajouter des pages uniques aux projets Windows ou Windows Phone, si nécessaire.

     

  2. Nommez le nouveau dossier page2.

  3. Cliquez avec le bouton droit sur le dossier page2 et sélectionnez Ajouter > Nouvel élément.

  4. Dans la boîte de dialogue Ajouter un nouvel élément, choisissez Contrôle de page dans le volet du milieu.

  5. Nommez la page page2.html, puis choisissez Ajouter.

    Le fichier page2.html est créé dans le dossier page2, ainsi que deux autres fichiers de projet : page2.css et page2.js. Ensemble, ces fichiers forment une page logique.

    Astuce  Si vous ajoutez le modèle d’élément ailleurs dans le projet, vous devrez peut-être mettre à jour les références de script et CSS dans page2.html.

     

  6. Ouvrez le fichier page2.js et vérifiez que l’URI est correct dans la fonction define. Il doit se présenter comme suit.

    WinJS.UI.Pages.define("/pages/page2/page2.html", {
    // . . .
    ready: function (element, options) {
        // ready function implementation.
    },
    // . . .
});

Étape 3 : personnaliser votre page

À présent, modifiez votre nouvelle page de manière à ce qu’elle affiche un message différent et le jour de la semaine.

  1. Ouvrez page2.html. Le modèle d’élément Contrôle de page crée une page HTML qui contient une section d’en-tête (où figure un bouton Précédent) et une section pour le contenu principal de la page.

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>page2</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="page2.css" rel="stylesheet" />
    <script src="page2.js"></script>
</head>
<body>
    <div class="page2 fragment">
        <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 page2</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <p>Content goes here.</p>
        </section>
    </div>
</body>
</html>

  2. Remplacez la section de contenu principal par celle-ci.

    
        <section aria-label="Main content" role="main">
            <p>Page controls make it easy to divide your app 
                into modular portions.</p>
            <p>Today is <span id="dayPlaceholder"></span>.</p>
        </section>

    Votre fichier page2.html doit maintenant ressembler à ceci :

    
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>page2</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="page2.css" rel="stylesheet" />
    <script src="page2.js"></script>
</head>
<body>
    <div class="page2 fragment">
        <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 page2</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <p>Page controls make it easy to divide your app 
                into modular portions.</p>
            <p>Today is <span id="dayPlaceholder"></span>.</p>
        </section>
    </div>
</body>
</html>

  3. Ouvrez page2.js. Le contrôle PageControl comprend un ensemble de fonctions prédéfinies qui sont appelées automatiquement, dans un ordre prédéfini. Les modèles d’élément Contrôle de page incluent la fonction ready ainsi que les fonctions updateLayout et unload pour vous.

    PageControlNavigator appelle la fonction updateLayout quand l’utilisateur passe de l’orientation portrait à l’orientation paysage (ou inversement) ou modifie la taille de la fenêtre d’application. Cette rubrique ne vous explique pas comment définir la fonction updateLayout, mais chaque application doit le faire. Voir Recommandations en matière de redimensionnement des fenêtres vers des dispositions hautes et étroites et Conception dynamique (101) des applications de plateforme Windows universelle (UWP).

    La fonction ready est appelée lorsque le modèle DOM de la page est chargé, les contrôles activés et la page chargée dans le modèle DOM principal.

    (Le contrôle PageControl prend en charge des fonctions supplémentaires pour le cycle de vie de la page. Pour plus d’informations, voir Ajout de contrôles Page.)

    Voici le fichier page2.js que le modèle d’élément Contrôle de page a créé.

    
// page2.js
(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/page2/page2.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.
        },

        unload: function () {
            // TODO: Respond to navigations away from this page.
        },

        updateLayout: function (element) {
            /// <param name="element" domElement="true" />

            // TODO: Respond to changes in layout.
        }
    });
})();

  4. Modifiez la fonction ready pour qu’elle récupère la période que vous avez créée à l’étape 2 ("dayPlaceholder") et pour qu’elle attribue à sa propriété innerText le jour actuel.

    
// page2.js
(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/page2/page2.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.

            var dayPlaceholder = document.querySelector("#dayPlaceholder");
            var calendar = new Windows.Globalization.Calendar();
            dayPlaceholder.innerText =
                calendar.dayOfWeekAsString();
        },

        unload: function () {
            // TODO: Respond to navigations away from this page.
        },

        updateLayout: function (element) {
            /// <param name="element" domElement="true" />

            // TODO: Respond to changes in layout.
        }
    });
})();

Vous venez de créer et de personnaliser une page. Dans l’étape suivante, vous allez permettre à l’utilisateur exécutant l’application d’accéder à votre page.

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

Lorsque vous exécutez l’application, celle-ci affiche home.html. L’utilisateur n’est pas en mesure d’accéder à page2.html. Une façon simple d’aider l’utilisateur à accéder à page2.html consiste à établir un lien à partir de home.html.


<!-- home.html -->
<!DOCTYPE html>
<html>
<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>
<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 NavigationAppExample!</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <p>Content goes here.</p>

            <!-- A hyperlink to page2.html. -->
            <p><a href="/pages/page2/page2.html">Go to page 2.</a></p>
        </section>
    </div>
</body>
</html>

Si vous exécutez l’application et cliquez sur le lien, cela semble fonctionner : l’application affiche page2.html. Cependant l’application effectue une navigation de niveau supérieur. Au lieu de passer de home.html à page2.html, l’application 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.onnavigated 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 au lieu d’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, quand l’utilisateur clique dessus, 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. Voici comment effectuer cette opération :

  1. Dans le fichier home.js, définissez un gestionnaire d’événements click pour vos liens hypertexte.

    
function linkClickEventHandler(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).

    function linkClickEventHandler(eventInfo) {
    eventInfo.preventDefault(); 
}

  3. Récupérez le lien hypertexte ayant déclenché l’événement.

    function linkClickEventHandler(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 WinJS.Navigation.navigate.)

    function linkClickEventHandler(eventInfo) {
    eventInfo.preventDefault(); 
    var link = eventInfo.target;
    WinJS.Navigation.navigate(link.href); 
}

  5. Dans la fonction ready dans home.js, attachez le gestionnaire d’événements à vos liens hypertexte.

        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.
            WinJS.Utilities.query("a").listen("click", linkClickEventHandler, false); 

        }
    });

C’est la dernière étape. Voici le code complet du fichier home.js.


// 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.
            WinJS.Utilities.query("a").listen("click", linkClickEventHandler, false); 
        
        }
    });

    function linkClickEventHandler(eventInfo) {
        eventInfo.preventDefault();
        var link = eventInfo.target;
        WinJS.Navigation.navigate(link.href);
    }


})();

Exécutez l’application, puis cliquez sur le lien pour page2.html. Voici ce que vous voyez.

L’écran page2.html avec un bouton Précédent

Cette fois, la page est affichée à l’aide du modèle de navigation approprié.

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

Le modèle de contrôle Page inclut un bouton Précédent qui est activé quand vous utilisez les fonctions WinJS.Navigation pour naviguer. Lorsque vous utilisez les fonctions WinJS.Navigation, l’application stocke l’historique de navigation pour vous. Vous pouvez utiliser cet historique pour naviguer vers l’arrière (en appelant WinJS.Navigation.back) ou vers l’avant (en appelant WinJS.Navigation.forward).

Remarque  Les applications du Windows Store utilisent en général l’un des deux modèles de navigation (plat et hiérarchique). Nous vous conseillons de ne pas utiliser l’objet BackButton dans les applications de navigation plates. Pour plus d’informations, voir Modèles de navigation.

 

Enregistrement de l’historique de navigation lorsque votre application est suspendue

L’historique de navigation n’est pas automatiquement stocké lorsque votre application s’arrête ou est suspendue mais vous pouvez aisément stocker ces informations vous-même. Servez-vous de la propriété WinJS.Navigation.history pour récupérer l’historique de navigation et utilisez l’objet WinJS.Application.sessionState pour le stocker. Pour garantir une interruption et une reprise en douceur, il est préférable de stocker ces informations à chaque navigation de l’utilisateur.

Au moment où votre application reprend, extrayez les données de l’historique à partir de l’objet WinJS.Application.sessionState et servez-vous en pour définir la propriété WinJS.Navigation.history.

Pour obtenir un exemple d’utilisation de l’objet WinJS.Application.sessionState pour stocker et restaurer des données de session, voir Deuxième partie : gérer le cycle de vie et l’état d’une application. Pour plus d’informations sur l’interruption et la reprise, voir Lancement, reprise et multitâche.

Récapitulatif

Vous avez appris à utiliser des objets et méthodes de l’espace de noms WinJS.UI.Pages pour prendre en charge le modèle de navigation sur une seule page.

Vous avez appris à créer des applications utilisant le modèle de navigation sur une seule page. Vous avez utilisé la classe PageControlNavigator, fournie par les modèles, pour implémenter ce modèle dans votre propre application à l’aide des objets PageControl et des fonctionnalités WinJS.Navigation.

Rubriques associées

Pour les développeurs

Votre première application - Troisième partie : objets PageControl et navigation

Ajout de barres d’application

Démarrage rapide : ajout d’une barre de navigation (NavBar)

Démarrage rapide : utilisation d’un contrôle Hub pour la disposition et la navigation

WinJS.Navigation Namespace

WinJS.UI.Hub object

WinJS.UI.AppBar object

WinJS.UI.NavBar object

WinJS.UI.BackButton object

Exemple de contrôle Hub HTML

Exemple de contrôle AppBar HTML

Exemple de contrôle NavBar HTML

Exemple de navigation et d’historique de navigation

Pour les concepteurs

Modèles de navigation

Modèles de commandes

Disposition

Bouton Précédent

Recommandations en matière de contrôle Hub

Recommandations en matière de barres d’application (applications du Windows Store)

Rendre la barre de l’application accessible