Guida introduttiva: Aggiunta di un controllo SemanticZoom (HTML)

Articolo
03/04/2016

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

Scopri come usare il controllo SemanticZoom per eseguire lo zoom tra due visualizzazioni dello stesso contenuto.

Prerequisiti

Partiamo dal presupposto che tu sappia come creare una semplice app di Windows Store in JavaScript che usi i controlli della Libreria Windows per JavaScript. Per istruzioni di base sui controlli della WinJS, vedi Guida introduttiva: Aggiunta di controlli e stili WinJS.
Per seguire questa guida introduttiva, devi sapere usare il controllo ListView. Per istruzioni di base sul controllo ListView, vedi Guida introduttiva: Aggiunta di un controllo ListView.
Per usare il controllo SemanticZoom, devi sapere creare un controllo ListView raggruppato. Per altre informazioni, vedi Come raggruppare gli elementi in un controllo ListView.

Che cos'è il controllo SemanticZoom?

Il controllo SemanticZoom consente all'utente di eseguire lo zoom alternando due diverse visualizzazioni dello stesso contenuto. Una di queste è la visualizzazione principale del contenuto. La seconda è una visualizzazione dello stesso contenuto rappresentata in modo da consentire spostamenti rapidi agli utenti. Durante la visualizzazione di una rubrica, ad esempio, l'utente potrebbe usare lo zoom su una lettera per visualizzare i nomi associati.

Per offrire questa funzionalità di zoom, il controllo SemanticZoom usa altri due controlli: uno per fornire la visualizzazione ingrandita e l'altro per quella ridotta.

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

Questi due controlli possono essere rappresentati da qualsiasi controllo che implementi l'interfaccia IZoomableView. WinJS include un controllo che implementa l'interfaccia IZoomableView: il controllo ListView. Gli esempi in questa guida introduttiva ti mostrano come puoi usare il controllo SemanticZoom con due controlli ListView.

Non confondere lo zoom semantico con lo zoom ottico. Anche se le interazioni e il comportamento di base sono gli stessi (visualizzare più o meno dettagli in base a un fattore di zoom), lo zoom ottico fa riferimento alla regolazione dell'ingrandimento o della riduzione di un'area di contenuto o un oggetto, come una fotografia.

Creare i dati personali

Per usare un controllo SemanticZoom, ti serve un'interfaccia IListDataSource che contenga informazioni di gruppo. Un modo per creare IListDataSource è di creare WinJS.Binding.List. Ogni WinJS.Binding.List ha una proprietà dataSource che restituisce IListDataSource che contiene i tuoi dati.

Aggiungi un nuovo file JavaScript al progetto per includervi i tuoi dati. Assegnagli il nome "data.js".

Nel file data.js appena creato, crea l'origine dati sottostante che fornirà i dati ai tuoi controlli ListView. Questo esempio crea un oggetto WinJS.Binding.List da una matrice di oggetti 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);

Nota Questi dati fanno riferimento a diverse immagini. Per ottenere le immagini, scarica l'esempio di raggruppamento del controllo ListView e SemanticZoom, poi copia le immagini dall'esempio nel tuo progetto. Puoi anche usare le tue immagini — assicurandoti solo di aggiornare il valore della proprietà picture nei tuoi dati.

Suggerimento

Non sei obbligato a usare un oggetto WinJS.Binding.List: puoi usare anche un oggetto StorageDataSource o un oggetto VirtualizedDataSource personalizzato. Per altre informazioni sulla creazione di un'origine dati personalizzata, vedi Come creare un'origine dati personalizzata.

Crea una versione dell'origine dati che contenga info sul raggruppamento. Se usi un oggetto WinJS.Binding.List, puoi chiamare il metodo createGrouped per creare una versione raggruppata dell'oggetto List. Il metodo createGrouped accetta 3 parametri:
- getGroupKey: funzione che, dato un elemento nell'elenco, restituisce la chiave del gruppo a cui appartiene l'elemento.
- getGroupData: funzione che, dato un elemento nell'elenco, restituisce l'oggetto dati che rappresenta il gruppo a cui appartiene l'elemento.
- compareGroups: funzione che mette a confronto due gruppi e restituisce un valore minore di zero se il primo gruppo è più piccolo del secondo, zero se i gruppi sono uguali e un valore positivo se il primo gruppo è più grande del secondo.
Questo esempio usa il metodo List.createGrouped per creare una versione raggruppata dell'oggetto List. I gruppi vengono definiti basandosi sulla prima lettera del titolo di ogni elemento.
```
    // 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);
```
Rendi i dati accessibili per altre parti del programma. Questo esempio usa WinJS.Namespace.define per rendere pubblicamente accessibile l'elenco raggruppato.
```
    WinJS.Namespace.define("myData",
        {
            groupedItemsList: groupedItemsList
        }); 


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

Creare due controlli ListView

Come detto in precedenza, il controllo SemanticZoom richiede due controlli aggiuntivi che implementano l'interfaccia IZoomableView: uno per la visualizzazione ingrandita e l'altro per la visualizzazione ridotta.

Nella sezione head della tua pagina HTML che contiene SemanticZoom, aggiungi un riferimento al file di dati creato nel passaggio precedente.
```
    
    <script src="/js/data.js"></script>
```

Definisci 3 modelli per i tuoi oggetti ListView: uno per la visualizzazione degli elementi ingranditi, uno per le intestazioni dei gruppi nella visualizzazione ingrandita e uno per le intestazioni dei gruppi nella visualizzazione ridotta.

<!-- 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>

Nel tuo codice HTML definisci due controlli ListView. Il primo controllo fornisce la visualizzazione ingrandita e il secondo fornisce la visualizzazione ridotta.

Imposta l'itemDataSource per il ListView ingrandito su myData.groupedItemList.dataSource, l'IListDataSource che contiene gli elementi da visualizzare. Imposta il relativo groupDataSource su myData.groupedItemsList.groups.dataSource, l'IListDataSource che contiene le informazioni sui gruppi.
Per il ListView ridotto, imposta il relativo itemDataSource su myData.groupedItemList.groups.dataSource, l'IListDataSource che contiene le informazioni sui gruppi. È qui che il ListView recupera i titoli dei gruppi da visualizzare.

Questo esempio crea due controlli ListView e li configura perché usino i modelli che hai appena creato.



    <!-- 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>

Nel tuo file CSS, definisci gli stili per i tuoi modelli e i tuoi controlli ListView. Se non esegui questo passaggio, la app funzionerà, ma il suo aspetto non sarà così piacevole.

/* 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);
}

Esegui l'app. Vedrai due controlli ListView:

Il primo elemento ListView fornisce la visualizzazione ingrandita e il secondo fornisce la visualizzazione ridotta. Notare che entrambi usano un layout orizzontale. Ti consigliamo di usare sempre lo stesso layout per la visualizzazione ingrandita e ridotta dei dati.

Aggiungere il controllo SemanticZoom

Nel tuo markup crea il controllo SemanticZoom e sposta i tuoi controlli ListView al suo interno.

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

Quando esegui l'app, ora vedi un solo controllo ListView e puoi eseguire lo zoom alternando le due visualizzazioni che hai definito.

Visualizzazioni ingrandite e ridotte di un controllo SemanticZoom

Nota Non impostare un bordo sui controlli figlio del controllo SemanticZoom. Se imposti bordi sia per il controllo SemanticZoom che per i controlli figlio, il bordo del controllo SemanticZoom e il bordo del controllo figlio incluso nella visualizzazione saranno entrambi visibili. Quando esegui lo zoom in avanti o indietro, i bordi del controllo figlio vengono ridimensionati insieme al contesto e non hanno un aspetto gradevole. Imposta un bordo solo sul controllo SemanticZoom.

Usare il controllo SemanticZoom

Per eseguire lo zoom tra le due visualizzazioni:

Meccanismo di input	Zoom indietro	Zoom avanti
Tocco	Allontanare le dita	Avvicinare le dita, toccare
Tastiera	CTRL + segno meno, INVIO	CTRL + segno più, INVIO
Mouse	CTRL + far scorrere la rotellina del mouse all'indietro	CTRL + far scorrere la rotellina del mouse in avanti

Usare SemanticZoom con un controllo personalizzato

Per usare SemanticZoom con un controllo diverso da ListView, devi necessariamente implementare l'interfaccia IZoomableView. Per studiare un campione, vedi l'Esempio di SemanticZoom per controlli personalizzati.

Mantenere invariati i tempi di risposta di SemanticZoom

È importante consentire agli utenti di passare rapidamente e senza sforzo dalla visualizzazione ingrandita alla visualizzazione ridotta di SemanticZoom e viceversa. A questo scopo occorre che i controlli figlio del controllo SemanticZoom non facciano attendere l'app durante il caricamento dei dati. Quando usi ListView (o una versione di FlipView personalizzata per implementare IZoomableView) con SemanticZoom, fai ricorso a una funzione di creazione modelli per creare segnaposto quando esiste la possibilità che gli elementi non siano disponibili nel momento in cui il controllo viene visualizzato. Per altre informazioni sull'uso dei segnaposto nei modelli di elemento, vedi FlipView.itemTemplate. Se usi un controllo personalizzato con SemanticZoom, implementa un indicatore di stato circolare e usa i segnaposto se gli elementi non fossero disponibili.