Partager via

Démarrage rapide : ajout d’un contrôle SemanticZoom (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 ]

Apprenez à utiliser le contrôle SemanticZoom pour faire un zoom entre deux affichages du même contenu.

Prérequis

Qu’est-ce que le contrôle SemanticZoom ?

Le contrôle SemanticZoom permet à l’utilisateur de basculer entre deux affichages différents du même contenu. L’un de ces éléments est l’affichage principal du contenu. Le deuxième affichage représente le même contenu d’une manière qui permet aux utilisateurs de le parcourir rapidement. Par exemple, lorsque l’utilisateur affiche son carnet d’adresses, il peut faire un zoom avant sur une lettre pour voir tous les noms associés à cette lettre.

Pour fournir cette fonctionnalité de zoom de l’affichage, le contrôle SemanticZoom fait appel à deux autres contrôles : un pour le zoom avant et un pour le zoom arrière.

<div data-win-control="WinJS.UI.SemanticZoom">   
                
    <!-- The control that provides the zoomed-in view goes here. -->

    <!-- The control that provides the zoomed-out view goes here. -->

</div>

Ces deux contrôles peuvent être choisis parmi les contrôles qui mettent en œuvre l’interface IZoomableView. WinJS fournit un contrôle qui implémente l’interface IZoomableView : le contrôle ListView. Les exemples proposés dans ce guide de démarrage rapide illustrent l’utilisation de l’objet SemanticZoom avec deux contrôles ListView.

Ne confondez pas le zoom sémantique avec le zoom optique. Ces deux types de zoom interagissent et se comportent fondamentalement de la même façon (en affichant des données plus ou moins détaillées selon le facteur de zoom choisi), mais le zoom optique sert à ajuster le grossissement d’une zone de contenu ou d’un objet, tel qu’une photographie.

Créer vos données

Pour utiliser un objet SemanticZoom, vous avez besoin d’une interface IListDataSource qui contient des informations de groupe. L’un des moyens de créer un IListDataSource consiste à créer un WinJS.Binding.List. Chaque WinJS.Binding.List a une propriété dataSource qui retourne un IListDataSource contenant vos données.

  1. Ajoutez un nouveau fichier JavaScript dans votre projet qui contiendra vos données. Nommez-le "data.js".

  2. Dans le fichier data.js que vous venez de créer, créez la source de données sous-jacente destinée à alimenter vos contrôles ListView en données. L’exemple suivant crée un objet WinJS.Binding.List à partir d’un tableau d’objets JSON (myData) :

    
// Start of data.js
(function () {
    "use strict";



    var myData = [
    { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/60Lemon.png" },
    { title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/60Lemon.png" },
    { title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/60Lemon.png" },
    { title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/60Lemon.png" },
    { title: "Marvelous Mint", text: "Gelato", picture: "images/60Mint.png" },
    { title: "Marvelous Mint", text: "Gelato", picture: "images/60Mint.png" },
    { title: "Marvelous Mint", text: "Gelato", picture: "images/60Mint.png" },
    { title: "Marvelous Mint", text: "Gelato", picture: "images/60Mint.png" },
    { title: "Creamy Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Creamy Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Creamy Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Creamy Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Succulent Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
    { title: "Succulent Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
    { title: "Succulent Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
    { title: "Succulent Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
    { title: "Very Vanilla", text: "Ice Cream", picture: "images/60Vanilla.png" },
    { title: "Very Vanilla", text: "Ice Cream", picture: "images/60Vanilla.png" },
    { title: "Very Vanilla", text: "Ice Cream", picture: "images/60Vanilla.png" },
    { title: "Very Vanilla", text: "Ice Cream", picture: "images/60Vanilla.png" },
    { title: "Orangy Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Orangy Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Absolutely Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Absolutely Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Triple Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
    { title: "Triple Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
    { title: "Double Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Double Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Double Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Green Mint", text: "Gelato", picture: "images/60Mint.png" }
    ];

    // Create a WinJS.Binding.List from the array. 
    var itemsList = new WinJS.Binding.List(myData);

    Remarque  Ces données font référence à plusieurs images. Pour obtenir ces dernières, téléchargez l’Exemple de groupement de ListView et de SemanticZoom, puis copiez-les de l’exemple dans votre projet. Vous pouvez aussi faire appel à vos propres images — assurez-vous alors de bien mettre à jour la valeur de la propriété picture dans vos données.

     

    Astuce  

    Vous n’êtes pas limité à l’utilisation d’un objet WinJS.Binding.List : vous pouvez également utiliser un objet StorageDataSource ou un objet VirtualizedDataSource personnalisé. Pour plus d’informations sur la création d’une source de données personnalisée, voir Comment créer une source de données personnalisée.

     

  3. Créez une version de votre source de données qui contient des informations de groupe. Si vous utilisez un appel WinJS.Binding.List, vous pouvez appeler sa méthode createGrouped pour créer une version groupée de l’objet List. La méthode createGrouped possède trois paramètres :

    • getGroupKey : fonction qui retourne la clé de groupe à laquelle appartient un élément spécifique de la liste.
    • getGroupData : fonction qui retourne l’objet de données représentant le groupe auquel appartient un élément spécifique de la liste.
    • compareGroups : fonction qui compare deux groupes et retourne une valeur inférieure à zéro si le premier groupe est plus petit que le second groupe, zéro si les groupes sont les mêmes et une valeur positive si le premier groupe est plus grand que le second groupe.

    Cet exemple utilise la méthode List.createGrouped pour créer une version groupée de l’objet List. Il définit les groupes en fonction de la première lettre du titre de chaque élément.

        // Sorts the groups.
    function compareGroups(leftKey, rightKey) {
        return leftKey.charCodeAt(0) - rightKey.charCodeAt(0);
    }

    // Returns the group key that an item belongs to.
    function getGroupKey(dataItem) {
        return dataItem.title.toUpperCase().charAt(0);
    }

    // Returns the title for a group.
    function getGroupData(dataItem) {
        return {
            title: dataItem.title.toUpperCase().charAt(0)
        };
    }

    // Create the groups for the ListView from the item data and the grouping functions
    var groupedItemsList = itemsList.createGrouped(getGroupKey, getGroupData, compareGroups);

  4. Rendez vos données accessibles à d’autres parties de votre programme. Cet exemple utilise la fonction WinJS.Namespace.define pour rendre la liste groupée accessible publiquement.

        WinJS.Namespace.define("myData",
        {
            groupedItemsList: groupedItemsList
        }); 


})(); // End of data.js

Créer deux contrôles ListView

Comme indiqué précédemment, le contrôle SemanticZoom requiert deux contrôles supplémentaires qui implémentent l’interface IZoomableView : un pour la vue avec zoom avant, un autre pour la vue avec zoom arrière.

  1. Dans la section head de votre page HTML qui doit contenir le contrôle SemanticZoom, ajoutez une référence au fichier de données que vous avez créé à l’étape précédente.

    

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

  2. Définissez trois modèles pour vos objets ListView : un pour la vue des éléments avec zoom avant, un pour les en-têtes de groupe dans la vue avec zoom avant et un pour les en-têtes de groupe dans la vue avec zoom arrière.

    <!-- Template for the group headers in the zoomed-in view. -->
<div id="headerTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
    <div class="simpleHeaderItem">
        <h1 data-win-bind="innerText: title"></h1>
    </div>
</div>

<!-- Template for the ListView items in the zoomed-in view. -->
<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
    <div class="mediumListIconTextItem">
        <img class="mediumListIconTextItem-Image" data-win-bind="src: picture" />
        <div class="mediumListIconTextItem-Detail">
            <h4 data-win-bind="innerText: title"></h4>
            <h6 data-win-bind="innerText: text"></h6>
        </div>
    </div>
</div>

<!-- Template for the zoomed out view of the semantic view. -->
<div id="semanticZoomTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
    <div class="semanticZoomItem">
        <h1 class="semanticZoomItem-Text" data-win-bind="innerText: title"></h1>
    </div>
</div>

  3. Dans votre code HTML, définissez deux contrôles ListView. Le premier contrôle fournit la vue avec zoom avant, tandis que l’autre contrôle fournit la vue avec zoom arrière.

    • Affectez à la propriété itemDataSource de la ListView avec zoom avant la valeur myData.groupedItemList.dataSource, c’est-à-dire l’élément IListDataSource qui contient les éléments à afficher. Affectez à la propriété groupDataSource la valeur myData.groupedItemsList.groups.dataSource, c’est-à-dire l’élément IListDataSource qui contient les informations de groupe.
    • Pour l’élément ListView avec zoom arrière, affectez à sa propriété itemDataSource la valeur myData.groupedItemList.groups.dataSource, c’est-à-dire l’élément IListDataSource qui contient les informations de groupe. C’est à cet endroit que l’élément ListView obtient les titres de groupes à afficher.

    L’exemple suivant permet de créer deux contrôles ListView et de les configurer pour utiliser les modèles que vous venez de créer.

    

    <!-- The zoomed-in view. -->    
    <div id="zoomedInListView"
        data-win-control="WinJS.UI.ListView" 
        data-win-options="{ itemDataSource: myData.groupedItemsList.dataSource, itemTemplate: select('#mediumListIconTextTemplate'), groupHeaderTemplate: select('#headerTemplate'), groupDataSource: myData.groupedItemsList.groups.dataSource, selectionMode: 'none', tapBehavior: 'none', swipeBehavior: 'none' }"
    ></div>

    <!--- The zoomed-out view. -->
    <div id="zoomedOutListView"
        data-win-control="WinJS.UI.ListView"
        data-win-options="{ itemDataSource: myData.groupedItemsList.groups.dataSource, itemTemplate: select('#semanticZoomTemplate'), selectionMode: 'none', tapBehavior: 'invoke', swipeBehavior: 'none' }"
    ></div>

  4. Dans votre fichier CSS, définissez les styles souhaités pour vos modèles et vos contrôles ListView. Si vous ignorez cette étape, votre application s’exécutera quand même, mais elle ne sera pas aussi attrayante.

    /* Template for headers in the zoomed-in ListView */
.simpleHeaderItem
{
    width: 50px;
    height: 50px;
    padding: 8px;
}   

/* Template for items in the zoomed-in ListView */  
.mediumListIconTextItem
{
    width: 282px;
    height: 70px;
    padding: 5px;
    overflow: hidden;
    display: -ms-grid;
}

    .mediumListIconTextItem img.mediumListIconTextItem-Image 
    {
        width: 60px;
        height: 60px;
        margin: 5px;
        -ms-grid-column: 1;
    }

    .mediumListIconTextItem .mediumListIconTextItem-Detail
    {
        margin: 5px;
        -ms-grid-column: 2;
    }

/* Template for items in the zoomed-out ListView */
.semanticZoomItem
{
    width: 130px;
    height: 130px;
    background-color: rgba(38, 160, 218, 1.0);
}   

    .semanticZoomItem .semanticZoomItem-Text
    {
        padding: 10px;
        line-height: 150px;
        white-space: nowrap;
        color: white;
    }

/* CSS for the zoomed-in ListView */
#zoomedInListView
{
    width: 600px;
    height: 300px;
    border: solid 2px rgba(0, 0, 0, 0.13);
}

#semanticZoomDiv 
{
    width: 600px;
    height: 300px;
    border: solid 2px rgba(0, 0, 0, 0.13);
}

  5. Exécutez l’application. Vous voyez alors deux contrôles ListView :

    Deux contrôles ListView

Le premier ListView fournit l’affichage en zoom avant, tandis que l’autre fournit l’affichage en zoom arrière. Notez que ces contrôles utilisent tous deux une disposition horizontale. Nous vous conseillons d’utiliser toujours la même disposition pour l’affichage en zoom avant et l’affichage en zoom arrière des données.

Ajouter le contrôle SemanticZoom

Dans votre balisage, créez le contrôle SemanticZoom et placez-y les contrôles ListView.

<div id="semanticZoomDiv" data-win-control="WinJS.UI.SemanticZoom">   
            
    <!-- The zoomed-in view. -->    
    <div id="zoomedInListView"
        data-win-control="WinJS.UI.ListView" 
        data-win-options="{ itemDataSource: myData.groupedItemsList.dataSource, itemTemplate: select('#mediumListIconTextTemplate'), groupHeaderTemplate: select('#headerTemplate'), groupDataSource: myData.groupedItemsList.groups.dataSource, selectionMode: 'none', tapBehavior: 'none', swipeBehavior: 'none' }"
    ></div>

    <!--- The zoomed-out view. -->
    <div id="zoomedOutListView"
        data-win-control="WinJS.UI.ListView"
        data-win-options="{ itemDataSource: myData.groupedItemsList.groups.dataSource, itemTemplate: select('#semanticZoomTemplate'), selectionMode: 'none', tapBehavior: 'invoke', swipeBehavior: 'none' }"
    ></div>

</div>

Lorsque vous exécutez l’application, un seul objet ListView apparaît et vous pouvez maintenant effectuer un zoom entre les deux affichages que vous avez définis.

Affichage en zoom arrière et avant d’un contrôle SemanticZoom

Remarque  Ne définissez pas de bordure sur les contrôles enfants du contrôle SemanticZoom. Si vous définissez les bordures sur l’objet SemanticZoom et sur ses contrôles enfants, la bordure de l’objet SemanticZoom et celle de ses contrôles enfants se trouvant dans la vue sont alors toutes visibles. Lorsque vous effectuez un zoom avant ou arrière, les bordures des contrôles enfants sont redimensionnées avec le contenu, ce qui rend leur aspect moins agréable. Définissez uniquement une bordure sur le contrôle SemanticZoom.

 

Utilisation de SemanticZoom

Pour zoomer entre deux vues :

Mécanisme d’entrée Zoom arrière Zoom avant
Pavé tactile Geste de pincement en écartant les doigts Geste de pincement, action d’appuyer
Clavier Ctrl + signe moins, Entrée Ctrl + signe plus, Entrée
Souris Ctrl + rotation de la roulette de la souris vers l’arrière Ctrl + rotation de la roulette de la souris vers l’avant

 

Utilisation de SemanticZoom avec un contrôle personnalisé

Pour utiliser l’objet SemanticZoom avec un autre contrôle que ListView, vous devez implémenter l’interface IZoomableView. À titre d’illustration, voir l’exemple de SemanticZoom pour des contrôles personnalisés.

Réactivité du contrôle SemanticZoom

Il est important pour l’utilisateur d’être en mesure de passer rapidement de l’affichage zoom avant à l’affichage zoom arrière d’un SemanticZoom. Cela signifie que les contrôles enfants du contrôle SemanticZoom ne doivent pas faire patienter l’utilisateur lorsqu’il charge ses données. Lors de l’utilisation de l’objet ListView (ou d’une version de l’objet FlipView que vous avez personnalisé afin d’implémenter IZoomableView) avec l’objet SemanticZoom, utilisez une fonction de création de modèles afin de créer des espaces réservés lorsque le risque existe que les éléments soient indisponibles au moment où le contrôle s’affiche. Pour plus d’informations sur l’utilisation d’espaces réservés dans les modèles d’éléments, voir FlipView.itemTemplate. Si vous utilisez un contrôle personnalisé avec l’objet SemanticZoom, implémentez un anneau de progression et utilisez des espaces réservés si les éléments ne sont pas disponibles.

Exemples

Récapitulatif et étapes suivantes

Vous avez appris à créer un contrôle SemanticZoom qui fait appel à deux contrôles ListView pour effectuer le zoom avant et le zoom arrière des affichages.

À présent, découvrez quand et comment utiliser l’objet SemanticZoom en consultant les Recommandations et liste de vérification sur les contrôles SemanticZoom.

Rubriques associées

Recommandations et liste de vérification sur les contrôles SemanticZoom

SemanticZoom

Exemple de zoom sémantique

ListView