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

Article
12/11/2015

[ 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 comment ajouter une barre de navigation (également appelée "NavBar" ou "barre d’application supérieure") à votre application du Windows Store en JavaScript. La bibliothèque Windows pour JavaScript (WinJS) inclut des contrôles NavBar, NavBarCommand et NavBarContainer pour vous aider à créer une application de navigation sur une seule page.

Remarque Les contrôles NavBar, NavBarCommand et NavBarContainer sont nouveaux dans Windows 8.1. Dans Windows 8, utilisez le contrôle AppBar et la propriété placement pour fournir une barre de navigation.

La plupart des modèles Microsoft Visual Studio 2013 pour les applications du Windows Store implémentant l’infrastructure de navigation, vous n’avez pas à le faire. Ces modèles, notamment le modèle d’élément Contrôle de page (voir Ajout de contrôles de page), incluent le contrôle BackButton qui vous permet de fournir la navigation vers l’arrière aux utilisateurs.

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.

L’exemple abordé ici utilise le modèle Application vide Microsoft Visual Studio. Si vous utilisez les styles et le balisage par défaut, les commandes que vous placez dans le contrôle NavBar seront correctement stylisées. Cela comprend à la fois les sprites d’image et glyphes de police pour les icônes des commandes.

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

Instructions

1. Créer un projet à l’aide du modèle Application vide

Démarrez Visual Studio 2013.

Remarque Lorsque vous exécutez Visual Studio pour la première fois, vous êtes invité à vous procurer une licence de développeur.
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.
Dans le volet Installé, développez Modèles et JavaScript, puis sélectionnez le type de modèle Application du Windows Store. Les modèles de projets proposés pour JavaScript s’affichent dans le volet central de la boîte de dialogue.
Dans le volet central, sélectionnez le modèle de projet Application vide.
Dans la zone de texte Nom, tapez un nom pour votre projet. Les exemples dans cette rubrique utilisent Nav bar demo.
Cliquez sur OK pour créer le projet.

Votre barre de navigation peut être définie de manière déclarative dans une page HTML ou au moment de l’exécution dans un fichier JavaScript chargé avec la page. Cet exemple crée la barre de navigation de manière déclarative dans le balisage HTML.

Ouvrez default.html et insérez le code HTML suivant dans l’élément body. La barre de navigation doit être un enfant direct de l’élément body.

Nous déclarons ici un contrôle NavBar qui contient un objet NavBarContainer avec deux contrôles NavBarCommand.

Remarque Bien que cela soit possible, nous vous recommandons de ne pas ajouter de contrôles NavBarCommand en tant qu’éléments enfants immédiats de NavBar. La disposition des boutons et l’accessibilité du clavier sont compromises.


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

Les objets NavBarCommand déclarés dans le balisage génèrent de manière inhérente des événements de navigation (Navigation.onnavigating et Navigation.onnavigated). Il n’est donc pas nécessaire d’ajouter du code de gestionnaire aux objets NavBarCommand. Au lieu de cela, vous devez ajouter du code de gestionnaire aux événements Navigation.onnavigating ou Navigation.onnavigated dans le fichier default.js associé au fichier default.html.

L’exemple ici ajoute un gestionnaire à l’événement Navigation.onnavigated. Le gestionnaire obtient l’URL de l’emplacement cible à partir de l’objet d’événement (défini dans la propriété location de l’attribut data-win-options de NavBarCommand). Le gestionnaire vide ensuite l’hôte de contenu (contrôle de page) du contenu existant, puis affiche la nouvelle page dans l’hôte.

Dans l’Explorateur de solutions, ouvrez default.js à partir du dossier js.

Dans default.js, remplacez le code par défaut par le code suivant.


(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    var nav = WinJS.Navigation;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // Add your initialization code here.
            } else {
                // Restore app state here.
            }

            var start = WinJS.UI.processAll().
                then (function () {
                    return nav.navigate("/pages/home/home.html");
                                                                });

            args.setPromise(start);
        }
    };

    app.oncheckpoint = function (args) {
        // Add app suspension code here.
    };

    nav.onnavigated = function (evt) {
        var contentHost = 
            document.body.querySelector("#contenthost"),
            url = evt.detail.location;

        // Remove existing content from the host element.
        WinJS.Utilities.empty(contentHost);

        // Display the new page in the content host.
        WinJS.UI.Pages.render(url, contentHost);
    }

    app.start();
})();

4. Ajouter deux pages entre lesquelles naviguer

Vous pouvez ajouter ces pages manuellement ou par l’intermédiaire du modèle d’élément Contrôle de page Visual Studio, qui fournit l’ensemble du code JavaScript et du balisage requis.

Dn376409.wedge(fr-fr,WIN.10).gif Ajouter manuellement de nouvelles pages au projet

Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le nom du projet (Nav bar demo), puis sélectionnez Ajouter, Nouveau dossier. Nommez le nouveau dossier "pages".
Cliquez avec le bouton droit sur le dossier pages que vous venez de créer et choisissez Ajouter, Nouveau dossier. Nommez le nouveau dossier "home".
Créez un second dossier sous pages. Nommez ce dossier "page2".
Cliquez avec le bouton droit sur le dossier home et choisissez Ajouter, Nouveau fichier HTML. Dans la boîte de dialogue Ajouter un nouvel élément, nommez ce fichier "home.html" et choisissez Ajouter.

Remplacez le code HTML par défaut par le code suivant.
```
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <p>Home</p>
</body>
</html>
```
Répétez l’étape précédente pour le dossier page2. Nommez le fichier "page2.html".

Remplacez le code HTML par défaut par le code suivant.
```
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <p>Page2</p>
</body>
</html>
```

Vous pouvez également utiliser les modèles d’élément JavaScript pour les applications du Windows Store dans Visual Studio.

Dn376409.wedge(fr-fr,WIN.10).gif Utiliser le modèle d’élément Contrôle de page pour ajouter de nouvelles pages au projet

Créez le dossier pages avec les sous-dossiers home et page2 comme décrit précédemment.
Cliquez avec le bouton droit sur le dossier home, puis sélectionnez Ajouter > Nouvel élément... La boîte de dialogue Ajouter un nouvel élément s’ouvre.
Sélectionnez Contrôle de page dans la liste. Dans la zone de texte Nom, tapez "home.html".
Cliquez sur Ajouter. Un nouvel objet PageControl s’affiche ensuite dans l’Explorateur de solutions.

Le nouvel objet PageControl contient trois fichiers : home.css, home.html et home.js.

Remarque Les fichiers HTML ajoutés de cette manière incluent du code pour le contrôle BackButton. Comme mentionné précédemment, si vous utilisez un modèle de navigation plat, nous vous conseillons de ne pas utiliser l’objet BackButton. Vous pouvez ainsi supprimer ce code en toute sécurité. Pour plus d’informations, voir Modèles de navigation.
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.
Sélectionnez Contrôle de page dans la liste. Dans la zone de texte Nom, tapez "page2.html".
Cliquez sur Ajouter. Un nouvel objet PageControl s’affiche ensuite dans l’Explorateur de solutions.

Le nouvel objet PageControl contient trois fichiers : page2.css, page2.html et page2.js.

5. Tester l’application

Appuyez sur F5 pour exécuter l’application. L’application affiche la page Home.
Pendant que l’application s’exécute, cliquez avec le bouton droit n’importe où dans l’application pour afficher la barre de navigation, puis sélectionnez Page2.

La page Page2 apparaît dans le contrôle de page de l’application.
Cliquez une nouvelle fois avec le bouton droit pour afficher la barre de navigation, puis choisissez Home.

La page Home apparaît dans le contrôle de page de l’application.

Récapitulatif et étapes suivantes

Dans ce guide de démarrage rapide, vous avez ajouté un objet NavBar avec un objet NavBarContainer et quatre objets NavBarCommand à votre application. Vous avez également ajouté une fonction de gestionnaire simple pour l’événement Navigation.onnavigated.

Pour obtenir un exemple de disposition et de navigation hiérarchique plus complexe, voir notre didacticiel suivant sur le contrôle Hub.

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