Share via

Modèle de navigation

  • Article

Le modèle de navigation utilisé dans les modèles de projet Grille, Fractionner et Application de navigation est le modèle recommandé pour les applications du Windows Store comportant plusieurs pages pour Windows en JavaScript. Dans ce modèle, les pages HTML logiques, chargées par l’intermédiaire de l’URI de la page, sont chargées dans un contexte unique couvrant l’ensemble de l’application. Les pages logiques sont chargées dans le contexte de l’application selon les besoins, en général en réponse à des actions de l’utilisateur. Les développeurs Web parlent souvent de « navigation sur une seule page » pour faire référence à ce type de modèle de navigation. Le fichier navigator.js implémente le modèle de navigation. Le modèle de navigation sur une seule page fournit une transition plus fluide (de type application) entre les pages et facilite également la gestion de l’état car les scripts ne sont jamais déchargés.

D’autres modèles de projet, tels que le modèle Vide, n’incluent pas de fichier navigator.js. Pour ce modèle, vous devez implémenter une navigation personnalisée si vous n’ajoutez pas le fichier de projet navigator.js manuellement. Si vous utilisez WinJS.Navigation.navigate pour naviguer entre les pages, gardez à l’esprit que WinJS.Navigation.navigate n’effectue pas la navigation directement, mais cette fonction est une fonction de wrapper qui stocke un objet d’état associé à votre emplacement actuel, puis appelle l’événement WinJS.Navigation.onnavigated. Pour plus d’informations sur la navigation et pour obtenir un exemple d’utilisation de la navigation sur une seule page dans les applications du Windows Store générées pour Windows en JavaScript, voir Démarrage rapide : utilisation de la navigation sur une seule page.

Pour vous aider à choisir le meilleur modèle de navigation pour votre application, voir Modèles de navigation. En outre, voir le Modèle de navigation plat en action dans le cadre de notre série Fonctionnalités d’application de A à Z.

Dans le modèle de navigation sur une seule page utilisé dans les modèles Grille, Fractionner et Application de navigation, 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 de la bibliothèque Windows pour JavaScript 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. L’élément, représenté ici, est inclus dans default.html, au sein du modèle Fractionner.

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

Le contrôle de navigation PageControlNavigator, illustré ici, 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 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 DIV de contenthost, 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);

Les pages chargées dans l’hôte de contenu sont des contrôles de page, qui sont définis dans l’espace de noms WinJS.UI.Pages. Un contrôle de page est une unité HTML, CSS et JavaScript modulaire qui fonctionne comme une page logique. Lorsque vous utilisez des contrôles de page, la bibliothèque appelle automatiquement un jeu de méthodes prédéfinies dans un ordre prédéfini. La fonction WinJS.UI.Pages.define expose ces méthodes à des fins d’implémentation. Voici une partie de la fonction define dans split.js (modèle Application fractionnée).

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

Les modèles de projet implémentent la dernière des méthodes de contrôle de page interne, à savoir la fonction ready et, pour certains modèles, la fonction init. (Les autres fonctions définies dans split.js sont spécifiques au modèle.) La fonction ready est appelée lorsque la page est chargée et entièrement traitée. Cette fonction doit contenir le code d’initialisation pour chaque page. Le code est unique pour chaque page.

Astuce  Les fonctions de contrôle de page interne sont appelées dans l’ordre suivant : load, init, processed et ready. En règle générale, seules les fonctions ready et init sont implémentées dans une application du Windows Store. Pour plus d’informations, voir IPageControlMembers.init.

Pour naviguer vers une nouvelle page, chaque application de modèle appelle WinJS.Navigation.navigate. Ces appels forcent le contrôle de navigation à charger le fichier HTML en tant que page logique dans l’élément DIV de l’hôte de contenu. Plusieurs fonctions dans les pages du modèle appellent la fonction navigate WinJS :

  • La fonction _itemInvoked, qui gère la sélection d’un élément dans une vue de liste. Selon la page active et le contexte, la sélection peut se trouver dans un élément individuel ou un groupe.
  • La fonction _selectionChanged, qui gère la sélection d’un élément dans split.html (modèle Fractionner).

Dans certains modèles, des fonctions particulières au sein des fichiers JavaScript des pages HTML peuvent modifier l’historique du bouton Retour, selon l’état d’affichage actuel. Par exemple, dans le modèle Application fractionnée, l’application modifie l’historique du bouton Retour si l’application est dans un état d’affichage spécial défini par le modèle (appelé affichage maître/détail). Pour plus d’informations, voir la section « Gestion de l’état d’affichage » dans Modèles de projet JavaScript pour les applications du Windows Store.

Rubriques associées

Modèles de projet JavaScript pour les applications du Windows Store

Modèles d'élément JavaScript pour les applications du Windows Store