Ajout d’un modèle d’élément Contrôle de page

  • Article

Cette rubrique explique comment ajouter un modèle d’élément Contrôle de page à une application du Windows Store qui vous permet de naviguer facilement entre les pages. Pour obtenir des descriptions des autres modèles d’élément, voir Modèles d’élément JavaScript. Dans le cas de la plupart des applications, vous pouvez utiliser des modèles d’élément inclus dans Microsoft Visual Studio 2013 pour simplifier le développement de votre application.

Le modèle d’élément Contrôle de page prend en charge le modèle de navigation sur une seule page, lequel est recommandé pour les applications du Windows Store comportant plusieurs pages. Les modèles de projet Hub, Grille, Fractionner et Navigation implémentent ce modèle de navigation. Le modèle de navigation fournit une page hôte de contenu unique (default.html) et permet la navigation entre des pages logiques qui sont chargées dans l’hôte de contenu. Pour plus d’informations, voir Modèle de navigation.

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

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

  • Ajoutez la nouvelle page à l’aide du modèle d’élément Contrôle de page Visual Studio.

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

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

Attention  Pour utiliser le modèle d’élément Contrôle de page avec le modèle Vide, vous devez ajouter navigator.js au projet et ajouter le code hôte du contenu à default.html (vous pouvez obtenir navigator.js et le code hôte du contenu à partir d’un autre modèle de projet, tel que Grille). Pour plus d’informations, voir Modèle de navigation.

Créer le projet

Dans un premier temps, nous allons créer une application à l’aide du modèle Navigation. Le modèle Navigation propose une application très simple dans laquelle le modèle de navigation multipage est déjà fourni.

Astuce  Si vous utilisez le modèle Hub, Grille ou Fractionner, les étapes sont similaires, mais les noms de fichiers diffèrent. Le code HTML et CSS ci-après devra être modifié pour correspondre au modèle.

Hh920268.wedge(fr-fr,WIN.10).gifPour créer le projet

  1. Dans Visual Studio, choisissez Fichier > Nouveau projet.

  2. Dans le volet gauche de la boîte de dialogue Nouveau projet, développez le nœud JavaScript.

  3. Dans le volet central, choisissez Application de navigation.

  4. Nommez le projet NavApp, puis cliquez sur OK.

    La solution est créée et les fichiers du projet apparaissent dans l’Explorateur de solutions. Pour plus d’informations sur les fichiers du projet, voir Modèles de projet JavaScript.

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

  5. Pour exécuter le programme, choisissez Déboguer > Démarrer le débogage, ou choisissez F5. Le contenu de page suivant apparaît : « Bienvenue dans NavApp ».

  6. Choisissez Maj +F5 pour interrompre le débogage et revenir à Visual Studio.

Ajouter le contrôle de page

Dans cette section, nous allons ajouter le modèle d’élément Contrôle de page. Nous ajouterons ensuite du code permettant de naviguer parmi les pages.

Hh920268.wedge(fr-fr,WIN.10).gifPour ajouter le contrôle de page

  1. Dans l’Explorateur de solutions, ouvrez le menu contextuel du dossier pages et choisissez Ajouter > Nouveau dossier.

  2. Nommez le nouveau dossier page2.

  3. Ouvrez le menu contextuel du dossier page2, puis choisissez 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.

    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", {
    // . . . 
},

Ajouter le code de navigation

Dans cette section, nous ajoutons du code permettant de naviguer entre les pages. L’application de navigation en cours de création utilise un événement ClickButton qui permet de se déplacer d’une page à une autre. La feuille de style de modèle pour l’application (ui.css) met à jour automatiquement le bouton en lui affectant l’apparence d’une application du Windows Store.

Hh920268.wedge(fr-fr,WIN.10).gifPour ajouter le code de navigation

  1. Dans l’Explorateur de solutions, ouvrez home.html.

  2. Dans l’élément SECTION, ajoutez un bouton, comme illustré ici.

    <section aria-label="Main content" role="main">
  <p>Content goes here.</p>
  <button class="navButton" title="Nav" >Next Page</button>
</section>

  3. Pour définir des caractéristiques de bouton propres à la page, ouvrez le fichier home.css.

  4. Ajoutez cette section à home.css.

    .navButton {
    width: 10%;
    height: 10%;
}

  5. Ouvrez home.js.

  6. Ajoutez le code de gestion d’événement qui utilise la fonction WinJS.Navigation.navigate pour accéder à la nouvelle page. La fonction nextPage devrait appartenir à la même étendue que la fonction ready. Le code ressemble alors à ce qui suit (avec l’ajout d’une virgule après ready).

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

    nextPage: function () {
        WinJS.Navigation.navigate("/pages/page2/page2.html");
    }
});

    Le code dans le fichier navigator.js est raccordé aux événements qui sont générés lorsque vous appelez WinJS.Navigation.navigate et charge le nouveau contenu de page.

  7. Dans home.js, ajoutez un détecteur d’événements pour le bouton à la fonction ready, comme illustré dans le code suivant. Pour plus d’informations sur l’utilisation de la méthode ready dans les modèles de projet et d’élément, voir Modèle de navigation.

    Pour récupérer l’élément, nous utiliserons querySelector au lieu de document.getElementByID.

    Astuce  Les modèles utilisent des noms de classe pour identifier les éléments dans les contrôles de page. Plusieurs instances d’un même contrôle de page peuvent cohabiter dans la page (bien que cela ne soit pas le cas dans cet exemple), et l’utilisation d’identifiants dans les contrôles de page peut aboutir à l’existence de plusieurs éléments portant le même identifiant. L’utilisation de querySelector et de noms de classe CSS empêche les conflits de noms éventuels tout en garantissant que les éléments DOM adéquats sont trouvés.

    Après avoir ajouté le code, la fonction se présente ainsi :

    ready: function(element, options) {
  // TODO: Initialize the fragment here.
  var elem = element.querySelector('.navButton');
  elem.addEventListener('click', this.nextPage.bind(this));
},

  8. Appuyez sur F5 pour exécuter l’application. Lorsque vous cliquez sur le bouton Page suivante, page2.html charge et affiche son contenu HTML par défaut.

Tester l’application

Hh920268.wedge(fr-fr,WIN.10).gifPour tester l’application

  1. Appuyez sur F5 pour exécuter l’application.

  2. Quand l’application se charge, cliquez sur le bouton Page suivante. page2.html se charge et affiche son contenu HTML par défaut.

    Page 2 de l’application de navigation

    Vous pouvez cliquer sur le bouton Précédent pour revenir à la première page de l’application.

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

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

Ajout d’un modèle d’élément Contrôle de page (C#, VB et C++)