Démarrage rapide : ajout de contrôles Repeater

  • Article

[ Cet article est destiné aux développeurs 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 utiliser le contrôle Repeater dans des applications du Windows Store en JavaScript qui affiche un ensemble discret de données sous la forme d’un balisage HTML répétitif.

Bien que similaire au contrôle ListView en ce sens qu’il vous permet de lier des données au code HTML de votre application, le contrôle Repeater se distingue par plusieurs particularités. Il est idéal pour les jeux de données restreints, finis et statiques qui proposent moins de fonctionnalités aux utilisateurs. S’il est connecté à un jeu de données dynamiques, le contrôle Repeater convient mieux aux modifications mineures et peu fréquentes qui sont contrôlées par le développeur. Par ailleurs, vous pouvez facilement appliquer un style au contrôle Repeater au moyen d’un jeu restreint de règles CSS (Cascading Style Sheets).

Prérequis

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

  1. Démarrez Microsoft Visual Studio Express 2013 pour Windows.

  2. Sous l’onglet Page de démarrage, cliquez sur Nouveau projet. La boîte de dialogue Nouveau projet s’ouvre.

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

  4. Dans le volet central, choisissez le modèle de projet Application vide.

  5. Dans la zone de texte Nom, tapez Repeater demo.

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

Ajouter la définition de Repeater au projet

Le contrôle Repeater peut être défini 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 Repeater de façon déclarative dans le balisage HTML.

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

    <div id="main-content">
    <h1>Great literature of Ancient Athens</h1>
    <div id="repeater" data-win-control="WinJS.UI.Repeater"
        data-win-options="{ data: Books.data }">
        <section>
            <h2 data-win-bind="textContent: bookTitle"></h2>
            <p><i data-win-bind="textContent: author"></i></p>
            <p data-win-bind="textContent: synopsis"></p>
        </section>
    </div>
</div>

  2. Dans default.html, à l’intérieur des balises <head>, ajoutez les balises <script> suivantes.

    <script src="/js/books.js"></script>

  3. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le dossier js, puis cliquez sur Ajouter > Nouveau fichier JavaScript. Dans la boîte de dialogue Ajouter un nouvel élément, nommez le nouveau fichier JavaScript "books.js", puis cliquez sur Ajouter.

  4. Ouvrez le fichier books.js (js/books.js), puis ajoutez le code JavaScript suivant.

    (function () {
    "use strict";

    // Define a data set as an array of objects.
    var books = [
        {
            bookTitle: "Anabasis",
            author: "Xenophon",
            synopsis: "10,000 Greek mercenaries, lost in Persia, work together to make their way home."
        },
        {
            bookTitle: "History of the Peloponnesian War",
            author: "Thucydides",
            synopsis: "The mighty cities Sparta and Athens war for supremacy over the Hellenes."
        },
        {
            bookTitle: "Antigone",
            author: "Sophocles",
            synopsis: "A young woman defies the king of the city by giving her father a proper burial."
        }
    ];

    // Convert the array into a List object.
    var booksList = new WinJS.Binding.List(books);

    // Expose the list globally in the 'Books' namespace.
    WinJS.Namespace.define("Books",
        { data: booksList });

})();

  5. Appuyez sur F5 pour exécuter l’exemple.

    L’application affiche trois sections, chacune d’entre elles contenant des données issues de l’objet List exposé par la propriété Books.data.

Dans cet exemple, le fragment HTML à répéter est contenu dans le contrôle Repeater déclaré dans le balisage HTML. (Vous pouvez également utiliser un contrôle WinJS.Binding.Template pour définir le fragment HTML à répéter.) Le contrôle Repeater figurant dans l’exemple présente les éléments contenus dans la liste Books.data, chaque élément de l’objet List étant affiché dans son propre fragment HTML.

Récapitulatif et étapes suivantes

Dans cette rubrique de démarrage rapide, vous avez ajouté un contrôle Repeater avec trois fragments HTML répétés à l’aide d’une source de données statique simple.

Pour plus d’informations sur la façon d’ajouter dynamiquement des données à un contrôle Repeater ou de les supprimer, voir Exemple de contrôle Repeater HTML.