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

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 un contrôle Hub à votre application du Windows Store en JavaScript.

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 Microsoft Visual Studio Express 2013 pour Windows.
Sous l’onglet Page de démarrage, cliquez sur Nouveau projet. 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, choisissez le modèle de projet Application vide.
Dans la zone de texte Nom, tapez Hub demo.
Cliquez sur OK pour créer le projet.

2. Ajouter la définition de Hub au projet

Définissez un contrôle Hub de façon déclarative dans une page HTML ou au moment de l’exécution à l’aide de JavaScript chargé avec la page. Cet exemple crée le contrôle Hub de façon déclarative dans le balisage HTML.

Ouvrez default.html et insérez le code HTML suivant dans l’élément body. Le contrôle Hub doit être un enfant direct de l’élément body. Il est recommandé de placer les commandes globales avant les commandes contextuelles dans le modèle DOM (Document Object Model) de façon à obtenir la meilleure disposition quand des utilisateurs redimensionnent votre application.

Cet exemple ajoute un contrôle Hub de façon déclarative avec trois objets HubSection, où le deuxième objet HubSection est la première section visible dans le contrôle Hub. Utilisez les styles par défaut ou écrivez vos propres feuilles de style en cascade (CSS) pour les contrôles Hub et HubSection.


<div data-win-control="WinJS.UI.Hub" id="hub"
    data-win-options="{
        sectionOnScreen : '1',
    }">
    <div data-win-control="WinJS.UI.HubSection"
        data-win-options="{
            header: 'Ancient Greek authors',
            isHeaderStatic: true
        }">
        My favorite authors of Ancient Greek (Homeric, Attic, Ionic):
        <ul>
            <li>Homer</li>
            <li>Herodotus</li>
            <li>Thucydides</li>
            <li>Plato</li>
        </ul>
    </div>
    <div data-win-control="WinJS.UI.HubSection"
        data-win-options="{
            header: 'Latin authors'
        }">
        <div>
            My favorite authors of works in Classical Latin:
            <ul>
                <li>Marcus Tullius Cicero</li>
                <li>Caius Julius Caesar</li>
                <li>Publius Virgilius Maro (Virgil)</li>
                <li>Titus Livius Patavinus (Livy)</li>
            </ul>
        </div>
    </div>
    <div data-win-control="WinJS.UI.HubSection"
        data-win-options="{
            header: 'English authors',
            isHeaderStatic: false
        }">
        My favorite authors of works in Middle and Early Modern English: 
        <ul>
            <li>Geoffrey Chaucer</li>
            <li>William Shakespeare</li>
            <li>Christopher Marlowe</li>
        </ul>
    </div>
</div>

3. Ajouter du code pour gérer les événements Hub

Deux des objets HubSection de cet exemple ont des en-têtes dynamiques : si vous cliquez dessus, ils déclenchent l’événement Hub.onheaderinvoked par défaut. Pour définir des en-têtes dynamiques ou statiques, utilisez la propriété HubSection.isHeaderStatic, qui a la valeur false par défaut.

Dans le gestionnaire d’événements Hub.onheaderinvoked, l’objet HubSection ou l’index de l’objet HubSection appelé peut être extrait à partir des arguments d’événement (l’index est basé sur zéro).

L’exemple suivant ajoute un gestionnaire à l’événement Hub.onheaderinvoked. Le gestionnaire obtient l’index de l’objet HubSection appelé et définit la valeur Hub.sectionOnScreen.

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

Dans le fichier default.js, remplacez le code existant par le code suivant.


(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    var hub;

    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.
            }
            args.setPromise(WinJS.UI.processAll());
        }

        // Get the hub control from the HTML page and
        // add a handler to the headerInvoked event.
        hub = WinJS.Utilities.query("#hub")[0];
        hub.winControl.onheaderinvoked = onHeaderInvoked;
    };

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

    // When a HubSection header is clicked, call this code to
    // make the section completely visible within the hub.
    function onHeaderInvoked(args) {
        hub.winControl.sectionOnScreen = args.detail.index;
    }

    app.start();
})();

Affectez à l’environnement d’exécution la valeur Simulateur et appuyez sur F5 pour exécuter l’application.
Modifiez la résolution de la fenêtre du simulateur afin que la dernière section du concentrateur sorte en partie de l’écran quand la page Hub défile vers la gauche.
Cliquez sur l’en-tête de la dernière section partiellement visible dans le Hub pour faire défiler la page Hub afin que la section du concentrateur soit entièrement visible.

Les applications de concentrateur suivent un modèle de navigation hiérarchique. Pour plus d’informations sur les expériences utilisateur en matière de navigation dans les applications du Windows Store, voir Modèles de navigation.

Dans les applications comportant de grandes collections de contenus ou de nombreuses sections de contenu différentes que l’utilisateur peut explorer, vous voulez en général permettre aux utilisateurs de naviguer rapidement vers l’arrière de la même façon qu’ils sont arrivés. Les pages et titres de section dans une application de concentrateur peuvent héberger des contrôles BackButton. Chaque page peut héberger un bouton Précédent qui demeure masqué jusqu’à ce que vous naviguiez jusqu’à cette page à partir d’une autre, après quoi le bouton Précédent devient visible sur la page. Le contrôle BackButton peut être créé de façon déclarative dans le code HTML de la page ou au moment de l’exécution à l’aide de JavaScript.

Vous n’avez pas beaucoup de travail à faire en ce qui concerne le contrôle BackButton. En fait, la majeure partie du code associé à la fonctionnalité de navigation du bouton Précédent est intégrée à la plateforme de la bibliothèque Windows pour JavaScript (WinJS). Il vous suffit de déclarer le contrôle dans votre balisage HTML comme illustré ici.

<!DOCTYPE html>
<html>
<head>
    <title>home</title>
</head>
<body>
    <header role="banner">
        <button data-win-control="WinJS.UI.BackButton"></button>
        <h1 class="titlearea">Home</h1>
    </header>
</body>
</html>

Sans styles, le contrôle BackButton est affiché dans un bloc séparé au-dessus du titre de page. Pour obtenir le style Windows où le bouton Précédent apparaît inséré avec le titre, vous devez ajouter du code CSS personnalisé à votre projet. Plus particulièrement, vous devez créer une grille dans l’élément parent (la balise <section>) qui place les deux éléments côte à côte.

Dans default.css (dans le dossier css), ajoutez le code CSS suivant pour ajuster la disposition du contrôle BackButton et du titre sur les pages.

#contenthost {
    height: 100%;
    width: 100%;
}

header[role=banner] {
    display: -ms-grid;
    -ms-grid-columns: 37px 83px 1fr;
    -ms-grid-rows: 1fr;
}

    header[role=banner] button {
        -ms-grid-column: 2;
        margin-top: 57px;
    }

    header[role=banner] h1 {
        -ms-grid-column: 3;
        margin-top: 37px;
    }

Récapitulatif

Dans ce guide de démarrage rapide, vous avez ajouté un contrôle Hub avec trois objets HubSection. Vous avez également ajouté une fonction de gestionnaire simple à l’événement Hub.onheaderinvoked.

Vous avez également ajouté un contrôle BackButton à chaque page de l’application.