Démarrage rapide : ajout d’un contrôle FlipView (HTML)

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

Nombreuses sont les applications qui affichent une liste d’éléments que l’utilisateur peut parcourir. Les données de ces listes proviennent d’une base de données, du Web ou d’une source de données JSON. WinJS propose le contrôle FlipView à cette seule fin.

Contrôle FlipView.

Conditions préalables

Qu’est-ce que FlipView ?

Le contrôle FlipView est un contrôle WinJS qui vous permet de parcourir une collection d’éléments un par un. Il est parfait pour afficher une galerie d’images.

FlipView se procure ses données auprès d’un objet IListDataSource. WinJS fournit plusieurs types d’objets IListDataSource :

  • Vous pouvez utiliser un objet List pour créer un objet IListDataSource à partir d’un tableau de données.
  • Vous pouvez utiliser un objet StorageDataSource pour accéder aux informations relatives aux fichiers et répertoires.

Vous pouvez également créer votre propre source de données personnalisée qui se connecte à un autre type de fournisseur de données, tel qu’un service Web ou une base de données. Pour obtenir des instructions, voir Comment créer une source de données personnalisée.

Création d’un contrôle FlipView simple

  1. Ajoutez des références à WinJS dans votre fichier HTML, si elles ne s’y trouvent pas déjà.

    
<!-- WinJS references -->
<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    Cet exemple montre le code HTML pour le fichier default.html qui est généré lorsque vous créez un projet Application vide dans Microsoft Visual Studio. Notez qu’il contient déjà les références à WinJS.

    
<!-- default.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>FlipViewExample</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- FlipViewExample references -->
    <link href="/css/default.css" rel="stylesheet">
    <script src="/js/default.js"></script>
</head>
<body>
    <p>Content goes here</p>
</body>
</html>

    Cet exemple utilise la feuille de style clair à la place de la feuille de style foncé. Si vous voulez que votre application utilise ces exemples, remplacez cette référence :

        <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">

    ...par :

         <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet">

  2. Dans votre fichier HTML, créez un élément div et attribuez à sa propriété data-win-control la valeur « WinJS.UI.FlipView ».

    <div id="basicFlipView" 
    data-win-control="WinJS.UI.FlipView"
></div>

  3. Dans le code JavaScript qui accompagne votre fichier HTML, appelez la fonction WinJS.UI.processAll lorsque votre code HTML est chargé.

    WinJS.UI.processAll();

    L’exemple suivant montre le fichier default.js qui accompagne le fichier default.html créé automatiquement lorsque vous créez un projet Application vide.

    
// default.js
(function () {
    "use strict";

    var app = WinJS.Application;

    // This function responds to all application activations.
    app.onactivated = function (eventObject) {
        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            // TODO: Initialize your application here.
            WinJS.UI.processAll();
        }
    };

    app.start();
})();

    Cet exemple fonctionne si vous ajoutez l’objet FlipView à votre page de démarrage (default.html). Si vous ajoutez FlipView à un contrôle de page, vous n’avez pas besoin d’appeler WinJS.UI.processAll dans la mesure où le contrôle de page s’en charge à votre place. Si vous ajoutez FlipView à vos fichiers HTML personnalisés, vous pouvez utiliser l’événement DOMContentLoaded pour appeler WinJS.UI.processAll. Pour plus d’informations sur l’activation des contrôles, voir Démarrage rapide : ajout de contrôles et de styles WinJS.

  4. Important : définissez la hauteur et la largeur de votre contrôle FlipView. Pour assurer le rendu d’un contrôle FlipView, vous devez spécifier sa hauteur avec une valeur absolue. Ajoutez ce code CSS à la feuille de styles CSS de la page HTML qui contient le contrôle FlipView :

    #basicFlipView
{
    width: 480px;
    height: 270px;
    border: solid 1px black;    
}

Ce code crée un contrôle FlipView vide. Si vous exécutez l’application, vous verrez un contrôle vide. Dans la section suivante, vous créez des données que FlipView affichera.

Définition de vos données

Le fait de placer dans un fichier JavaScript distinct le code qui sert à créer votre source de données peut faciliter sa mise à jour. Dans cette section, découvrez comment créer un fichier JavaScript pour vos données, comment créer un objet List et comment utiliser la fonction WinJS.Namespace.define pour rendre les données accessible à l’ensemble de votre application.

  1. Utilisez Visual Studio pour ajouter un fichier de données dans votre projet. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le dossier js du projet, puis sélectionnez Ajouter > Nouvel élément. La boîte de dialogue Ajouter un nouvel élément s’ouvre.

  2. Sélectionnez Fichier JavaScript. Attribuez-lui le nom de "dataExample.js". Cliquez sur Ajouter pour créer le fichier. Visual Studio crée un fichier JavaScript vide nommé dataExample.js.

  3. Ouvrez dataExample.js. Créez une fonction anonyme et activez le mode strict.

    Comme indiqué dans Codage d’applications de base, il est judicieux d’encapsuler votre code JavaScript en l’incluant dans une fonction anonyme, qui plus est en mode strict.

    (function () {
    "use strict"; 





})();

  4. Créez un tableau de données. Cet exemple permet de créer un tableau d’objets. Chaque objet a trois propriétés : type, title et image.

    (function () {
    "use strict";

    var dataArray = [
    { type: "item", title: "Cliff", picture: "images/Cliff.jpg" },
    { type: "item", title: "Grapes", picture: "images/Grapes.jpg" },
    { type: "item", title: "Rainier", picture: "images/Rainier.jpg" },
    { type: "item", title: "Sunset", picture: "images/Sunset.jpg" },
    { type: "item", title: "Valley", picture: "images/Valley.jpg" }
    ];

})();

    Remarque  Si vous souhaitez personnaliser votre code, vous pouvez remplacer les images par des fichiers stockés sur votre ordinateur local, ou vous pouvez obtenir les images en téléchargeant l’exemple de contrôle FlipView HTML (ce n’est pas le même exemple, mais il utilise les mêmes images). Vous pouvez également exécuter l’exemple sans ajouter les images—il fonctionnera quand même.

     

  5. Utilisez le tableau pour créer un objet List.

    (function () {
    "use strict";

    var dataArray = [
    { type: "item", title: "Cliff", picture: "images/Cliff.jpg" },
    { type: "item", title: "Grapes", picture: "images/Grapes.jpg" },
    { type: "item", title: "Rainier", picture: "images/Rainier.jpg" },
    { type: "item", title: "Sunset", picture: "images/Sunset.jpg" },
    { type: "item", title: "Valley", picture: "images/Valley.jpg" }
    ];

    var dataList = new WinJS.Binding.List(dataArray); 

})();

  6. Exposez l’objet List en déclarant un espace de noms et en ajoutant List comme membre public.

    Le code que vous venez d’écrire étant englobé dans une fonction anonyme, il n’est pas accessible publiquement. (C’est une des raisons pour lesquelles vous utilisez la fonction anonyme : pour protéger les données confidentielles.) Pour que votre objet FlipView puisse accéder à l’objet List, vous devez le rendre accessible publiquement. Pour ce faire, vous pouvez par exemple utiliser la fonction WinJS.Namespace.definepour créer un espace de noms et ajouter l’objet List comme un de ses membres.

    La fonction WinJS.Namespace.define prend les deux paramètres suivants : le nom de l’espace de noms à créer et un objet contenant une ou plusieurs paires propriété/valeur. La propriété indique le nom public du membre, tandis que la valeur désigne la variable, propriété ou fonction sous-jacente dans votre code privé que vous souhaitez exposer.

    Cet exemple crée un espace de noms nommé DataExample qui expose un membre public nommé itemList, qui retourne votre List.

    (function () {
    "use strict";

    var dataArray = [
    { type: "item", title: "Cliff", picture: "images/Cliff.jpg" },
    { type: "item", title: "Grapes", picture: "images/Grapes.jpg" },
    { type: "item", title: "Rainier", picture: "images/Rainier.jpg" },
    { type: "item", title: "Sunset", picture: "images/Sunset.jpg" },
    { type: "item", title: "Valley", picture: "images/Valley.jpg" }
    ];

    var dataList = new WinJS.Binding.List(dataArray);

    // Create a namespace to make the data publicly
    // accessible. 
    var publicMembers =
        {
            itemList: dataList 
        };
    WinJS.Namespace.define("DataExample", publicMembers); 

})();

Vous avez créé une source de données à laquelle votre contrôle FlipView peut accéder. Dans la section suivante, vous allez connecter les données au contrôle FlipView.

Connexion des données au contrôle FlipView

  1. Dans la section head du fichier HTML qui contient votre FlipView, ajoutez une référence au fichier de données que vous venez de créer (dataExample.js) :

    <head>
    <meta charset="utf-8">
    <title>FlipViewExample</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet">
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- FlipViewExample references -->
    <link href="/css/default.css" rel="stylesheet">
    <script src="/js/default.js"></script>

    <!-- Your data file. -->
    <script src="/js/dataExample.js"></script>

</head>

  2. Utilisez les données que vous avez créées dans la dernière section pour définir la propriété itemDataSource du contrôle FlipView.

    La propriété itemDataSource prend un objet IListDataSource. L’objet List n’est pas un objet IListDataSource, mais il possède une propriété dataSource qui retourne une version IListDataSource de lui-même.

    Pour connecter vos données, attribuez à la propriété itemDataSource du contrôle FlipView la valeur DataExample.itemDataList.dataSource :

    
<div id="basicFlipView"
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ itemDataSource : DataExample.itemList.dataSource }">
</div>

Exécutez l’application. FlipView affiche les propriétés et les valeurs de la source de données :

Affichage du contenu de la source de données sans modèle.

Le résultat ne ressemble pas à l’apparence recherchée. Nous voulons uniquement afficher les valeurs du champ de titre et nous voulons afficher les images elles-mêmes et non le chemin qui permet d’y accéder. Pour obtenir le rendu souhaité, nous devons définir un objet Template. La prochaine étape vous montre comment procéder.

Définition d’un modèle d’élément

À ce stade, FlipView dispose des données dont il a besoin, mais il ne sait pas comment les afficher. Pour ce faire, vous avez besoin d’un modèle d’élément. Il existe deux façons de créer un modèle : en utilisant un balisage pour définir un WinJS.Binding.Template, ou en créant une fonction de création de modèles. Cet exemple crée un modèle dans le balisage. (Pour plus d’informations sur la création d’une fonction modèle, voir la propriété itemTemplate.)

Il est facile de créer un WinJS.Binding.Template : vous définissez le balisage que vous voulez utiliser pour afficher chaque élément de liste, puis vous indiquez où s’affiche chaque champ de données.

  1. Dans votre code HTML, créez un contrôle WinJS.Binding.Template et assignez-lui un ID. Cet exemple utilise l’ID "ItemTemplate".

    <div id="ItemTemplate" data-win-control="WinJS.Binding.Template">

</div>

    Remarque  Le modèle devant être défini avant d’être utilisé, il convient d’ajouter le code HTML du modèle avant celui du contrôle FlipView.

     

  2. WinJS.Binding.Template doit avoir un élément racine unique. Créez un élément div qui servira de parent au contenu du modèle.

    <div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
    <div>

    </div>
</div>

  3. Créez le balisage que le FlipView produira pour chaque élément de données qu’il contient. Les données que vous avez créées dans la section précédente contiennent un emplacement d’image, un titre et du texte. Il convient donc de créer les éléments suivants :

    • Un élément img qui permet d’afficher le champ d’image.
    • Un élément h2 qui permet d’afficher le champ de titre.

    (Cet exemple ajoute également un élément div supplémentaire pour des raisons de mise en forme.)

    <div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
    <div>
        <img src="#"  />
        <div>
            <h2></h2>
        </div>
    </div>
</div>

  4. Définissez l’attribut data-win-bind pour chaque élément qui affiche des données. L’attribut data-win-bind utilise la syntaxe suivante :

    data-win-bind="propertyName: dataFieldName"

     

    Par exemple, pour lier la propriété src d’un élément img au champ "picture", utilisez la syntaxe suivante :

    <img data-win-bind="src : picture" />

    Pour définir plusieurs propriétés, vous les séparez par un point-virgule :

    data-win-bind="property1Name: dataField1Name; property2Name: dataField2Name"

     

    Cet exemple lie les éléments du modèle à leurs champs de données correspondants.

    
<div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
    <div>
        <img src="#" data-win-bind="src: picture; alt: title" />
        <div>
            <h2 data-win-bind="innerText: title"></h2>
        </div>
    </div>
</div>

  5. Pour utiliser le modèle d’élément, affectez à la propriété itemTemplate du FlipView l’ID de votre modèle d’élément ("ItemTemplate" dans cet exemple).

    <div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
    <div>
        <img src="#" data-win-bind="src: picture; alt: title" />
        <div>
            <h2 data-win-bind="innerText: title"></h2>
        </div>
    </div>
</div>    

<div id="basicFlipView" 
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ itemDataSource : DataExample.itemList.dataSource, itemTemplate : ItemTemplate }"
></div>

    Désormais, lorsque vous exécutez l’application, les données liées apparaissent dans la liste.

    Contrôle FlipView lié à des données.

    Notez qu’il y a des problèmes de mise en forme : le texte du titre ne s’affiche pas. La section suivante montre comment régler le problème en appliquant un style au modèle.

Stylisation d’éléments

Vous pouvez utiliser le code CSS pour appliquer un style à votre modèle d’élément. Dans l’exemple suivant, des classes CSS sont ajoutées au modèle que vous avez défini à la section Définition d’un modèle d’élément.

<div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
    <div class="overlaidItemTemplate">
        <img class="image" src="#" data-win-bind="src: picture; alt: title" />
        <div class="overlay">
            <h2 class="ItemTitle" data-win-bind="innerText: title"></h2>
        </div>
    </div>
</div>

<div id="basicFlipView" 
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ itemDataSource : DataExample.itemList.dataSource, itemTemplate : ItemTemplate }"
></div>

Dans la feuille de style CSS de votre fichier HTML, ajoutez ces styles pour le modèle :

#basicFlipView
{
    width: 480px;
    height: 270px;
    border: solid 1px black;    
}

/**********************************************/
/*                                            */
/* Styles used in the item template           */
/*                                            */
/**********************************************/
.overlaidItemTemplate
{
    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr;
    width: 480px;
    height: 270px;
}

    .overlaidItemTemplate img
    {
        width: 100%;
        height: 100%;
    }
    
    .overlaidItemTemplate .overlay
    {
        position: relative;
        -ms-grid-row-align: end;
        background-color: rgba(0,0,0,0.65);
        height: 40px;
        padding: 20px 15px;
        overflow: hidden;
    }

        .overlaidItemTemplate .overlay .ItemTitle
        {
            color: rgba(255, 255, 255, 0.8);
        }

Voici à quoi ressemble désormais le contrôle FlipView :

Contrôle FlipView avec des styles.Remarque  

Si vous modifiez la famille de polices des boutons de navigation du contrôle FlipView, ces derniers ne contiendront plus le glyphe adéquat.

 

Changement de l’orientation du contrôle FlipView

Par défaut, le contrôle FlipView présente une orientation horizontale. Vous pouvez afficher le contrôle FlipView à la verticale en attribuant à sa propriété orientation la valeur "vertical".

<div id="basicFlipView" 
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ itemDataSource : DataExample.itemList.dataSource, itemTemplate : ItemTemplate, orientation: 'vertical' }"
></div>

Contrôle FlipView orienté à la verticale.

Ajout d’éléments interactifs à un modèle d’élément

Le modèle d’élément peut contenir la plupart des contrôles, sauf un contrôle ListView ou un contrôle FlipView.

Normalement, lorsque l’utilisateur interagit avec un élément, le contrôle FlipView prend en compte cette interaction et l’utilise pour déterminer si l’utilisateur a sélectionné ou invoqué un élément ou fait défiler les éléments. Pour qu’un élément interactif, tel qu’un contrôle, reçoive des informations, vous devez joindre la classe win-interactive à cet élément interactif ou à l’un de ses éléments parents. Cet élément et ses enfants reçoivent l’interaction et ne déclenchent plus d’événements pour le contrôle FlipView.

Lorsque vous joignez la classe win-interactive à un élément dans un modèle d’élément, veillez à ce que l’élément en question ne remplisse pas entièrement le modèle d’élément, sinon l’utilisateur ne pourra pas sélectionner ou invoquer ce dernier.

Pour ajouter des éléments interactifs à un modèle d’élément, utilisez une fonction de création de modèle et non un modèle WinJS.Binding.Template. Pour savoir comment procéder, voir l’exemple de contrôle FlipView HTML. Pour plus d’informations sur les fonctions de création de modèles, voir les exemples dans le modèle FlipView.itemTemplate.

Création d’un contrôle de contexte

Le contrôle FlipView expose des méthodes et des événements qui vous permettent de créer des contrôles personnalisés qui donnent à l’utilisateur une idée de l’emplacement de l’élément sélectionné, ainsi que d’autres mécanismes pour naviguer dans la collection. L’image suivante montre une série de cases d’option avec des styles, qui sont synchronisées avec FlipView via les événements pageselected et pagevisibilitychanged.

Contrôle FlipView avec contrôle de contexte.

Le code permettant de réaliser cette opération est fourni dans l’exemple de contrôle FlipView HTML.

Rubriques associées

FlipView Reference

Exemple de contrôle FlipView HTML