Guida introduttiva: Aggiunta di un controllo FlipView (HTML)

  • Articolo

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

Molte app mostrano un elenco di elementi che l'utente può scorrere. I dati in questi elenchi possono provenire da un database, dal Web o da un'origine dati JSON. WinJS offre il controllo FlipView per questo scopo.

Controllo FlipView

Prerequisiti

Che cos'è un controllo FlipView?

FlipView è un controllo WinJS che ti permette di scorrere gli insiemi di elementi, uno alla volta. È ideale per visualizzare una raccolta di immagini.

Il controllo FlipView ottiene i dati da un oggetto IListDataSource. WinJS offre diversi tipi di oggetti IListDataSource:

  • Puoi usare un oggetto List per creare un oggetto IListDataSource da una matrice di dati.
  • Un oggetto StorageDataSource può essere usato per accedere a informazioni su file e directory.

Puoi inoltre creare un'origine dati personalizzata che si connette a un altro tipo di provider di dati, ad esempio un servizio Web o un database. Per istruzioni, vedi Come creare un'origine dati personalizzata.

Creazione di un semplice controllo FlipView

  1. Se non sono già inclusi, aggiungi al tuo file HTML i riferimenti a WinJS.

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

    Questo esempio illustra il codice HTML relativo al file default.html che viene generato quando crei un nuovo progetto Applicazione vuota in Microsoft Visual Studio. Come puoi notare include già i riferimenti a 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>

    In questo esempio viene usato il foglio di stile chiaro al posto di quello scuro. Se vuoi che la tua app sia simile a questi esempi, modifica questo riferimento:

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

    ...in:

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

  2. Nel file HTML, crea un elemento div e imposta la proprietà data-win-control su"WinJS.UI.FlipVie"

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

    .

  3. Nel codice JavaScript che accompagna il file HTML chiama la funzione WinJS.UI.processAll durante il caricamento del codice HTML.

    WinJS.UI.processAll();

    L'esempio successivo illustra il file default.js che accompagna quello default.html creato automaticamente durante la creazione di un nuovo progetto Applicazione vuota.

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

    Questo esempio funziona se intendi aggiungere l'oggetto FlipView alla tua pagina iniziale (default.html). Se intendi aggiungere l'oggetto FlipView a un controllo Page, non devi chiamare WinJS.UI.processAll perché la chiamata viene effettuata automaticamente dal controllo Page. Se intendi aggiungere l'oggetto FlipView al tuo codice HTML personalizzato, puoi usare l'evento DOMContentLoaded per chiamare WinJS.UI.processAll. Per altre informazioni sull'attivazione dei controlli, vedi Guida introduttiva: Aggiunta di controlli e stili WinJS.

  4. Importante: impostare l'altezza e la larghezza dell'oggettoFlipView. Per il rendering di un oggetto FlipView è necessario specificarne l'altezza con un valore assoluto. Aggiungere questo CSS al foglio di stile CSS per la pagina HTML contenente l'oggetto FlipView:

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

Con questo codice viene creato un oggetto FlipView vuoto. Eseguendo l'app, verrà visualizzato un controllo vuoto. Nella sezione successiva vengono creati alcuni dati da visualizzare con FlipView.

Definizione dei dati

Per gestire più facilmente il codice per creare la tua origine dati, puoi inserirlo in un file JavaScript distinto. In questa sezione imparerai a creare un file JavaScript per i dati, a creare un oggetto List e a usare la funzione WinJS.Namespace.define per rendere i dati accessibili alle altre parti dell'app.

  1. Usa Visual Studio per aggiungere un file di dati al tuo progetto. In Esplora soluzioni fai clic con il pulsante destro del mouse sulla cartella js del progetto e scegli Aggiungi > Nuovo elemento. Verrà visualizzata la finestra di dialogo Aggiungi nuovo elemento.

  2. Seleziona File JavaScript. Assegna al file il nome "dataExample.js". Fai clic su Aggiungi per creare il file. Visual Studio creerà un file JavaScript vuoto denominato dataExample.js.

  3. Apri dataExample.js. Crea una funzione anonima e attiva la modalità strict.

    Come abbiamo descritto in Codifica delle app di base, è consigliabile incapsulare il codice JavaScript eseguendone il wrapping all'interno di una funzione anonima, come pure usare la modalità strict.

    (function () {
    "use strict"; 





})();

  4. Crea una matrice di dati. Questo esempio crea una matrice dati. Ciascun oggetto dispone di tre proprietà: tipo, titolo e immagine.

    (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" }
    ];

})();

    Nota  Se stai proseguendo con il codice, puoi cambiare le immagini con file nel computer locale oppure ottenerle scaricando l'esempio di controllo FlipView HTML (non si tratta dello stesso esempio ma usa le stesse immagini). Puoi anche eseguire l'esempio senza aggiungere le immagini—verrà eseguito ugualmente.

     

  5. Usa la matrice per creare un oggetto 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. Esponi List dichiarando uno spazio dei nomi e aggiungendo List come membro pubblico.

    Poiché il codice che hai scritto è racchiuso un una funzione anonima, nessuno dei suoi elementi è accessibile pubblicamente. Si tratta, in parte, della motivazione dell'uso della funzione anonima: per mantenere privati i dati privati. Affinché FlipView possa accedere all'oggetto List, devi renderlo accessibile pubblicamente. A tale scopo, puoi usare la funzione WinJS.Namespace.define per creare uno spazio dei nomi e aggiungervi l'oggetto List come membro.

    La funzione WinJS.Namespace.define accetta due parametri: il nome dello spazio dei nomi da creare e un oggetto che contiene una o più coppie proprietà/valore. Ogni proprietà è il nome pubblico del membro, mentre ogni valore è la variabile, la proprietà o la funzione sottostante nel tuo codice privato che vuoi esporre.

    In questo esempio viene creato uno spazio dei nomi denominato DataExample che espone un membro pubblico denominato itemList che restituisce l'oggetto 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); 

})();

Hai creato un'origine dati accessibile dall'oggetto FlipView. Nella prossima sezione, imparerai a connettere i dati all'oggetto FlipView.

Connessione dei dati al controllo FlipView

  1. Nella sezione head del file HTML che contiene l'oggetto FlipView aggiungi un riferimento al file di dati appena creato (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. Usa i dati creati nella sezione precedente per impostare la proprietà itemDataSource del controllo FlipView.

    La proprietà itemDataSource accetta un oggetto IListDataSource. List non è un oggetto IListDataSource, ma include una proprietà dataSource che restituisce una versione IListDataSource dell'oggetto stesso.

    Per connettere i tuoi dati, imposta la proprietà itemDataSource del controllo FlipView su DataExample.itemDataList.dataSource:

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

Esegui l'app. L'oggetto FlipView visualizza le proprietà e i valori nell'origine dati:

Visualizzazione del contenuto dell'origine dati senza un modello.

Non è questo il risultato che volevamo ottenere. Desideravamo visualizzare solo i valori del campo titolo e le immagini effettive e non i percorsi delle immagini. Per ottenere il rendering che vogliamo, dobbiamo definire un oggetto Template. Scopri come fare nel passaggio successivo.

Definizione di un modello di elemento

A questo punto, l'oggetto FlipView include i dati necessari ma non sa come visualizzarli. Devi quindi definire un modello di elemento. Per creare un modello, puoi usare il markup per definire un oggetto WinJS.Binding.Template oppure creare un'apposita funzione. In questo esempio viene creato un modello nel markup. Per informazioni sulla creazione di una funzione modello, vedi la proprietà itemTemplate.

Creare un oggetto WinJS.Binding.Template è facilissimo: ti basta definire il markup da usare per visualizzare i singoli elementi dell'elenco e quindi indicare dove visualizzare i campi dei dati.

  1. Nel codice HTML crea un controllo WinJS.Binding.Template e assegna ad esso un ID. In questo esempio l'ID usato è "ItemTemplate".

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

</div>

    Nota  Devi definire il tuo modello prima di poterlo usare, pertanto aggiungi il codice HTML per il modello prima del codice HTML per l'oggetto FlipView.

     

  2. WinJS.Binding.Template deve avere un solo elemento radice. Crea un elemento div da usare come padre del contenuto del modello.

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

    </div>
</div>

  3. Crea il markup che l'oggetto FlipView produrrà per ogni elemento di dati in esso contenuto. I dati creati nella sezione precedente, contengono un percorso dell'immagine, un titolo e una parte di testo. È necessario quindi creare questi elementi.

    • Un elemento img per la visualizzazione del campo picture.
    • Un elemento per la visualizzazione del campo picture.

    In questo esempio viene inoltre aggiunto un elemento div extra per motivi di formattazione.

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

  4. Imposta l'attributo data-win-bind su ogni elemento che visualizza dati. La sintassi dell'attributo data-win-bind è:

    data-win-bind="propertyName: dataFieldName"

     

    Ad esempio, per associare la proprietà src di un oggetto img al campo "picture", usa la sintassi:

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

    Per impostare più proprietà, separale con un punto e virgola:

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

     

    Questo esempio associa gli elementi del modello ai campi dati corrispondenti.

    
<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. Per usare il modello di elemento, imposta la proprietà itemTemplate dell'oggetto FlipView sull'ID del tuo modello ("ItemTemplate" in questo esempio).

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

    Quando ora esegui l'app, l'elenco includerà i dati associati.

    FlipView associato a dati.

    Notare che esistono alcuni problemi di formattazione: il testo del titolo non viene visualizzato. Nella prossima sezione vedremo come risolvere questo problema applicando uno stile al modello.

Stile degli elementi

Per applicare uno stile al modello dell'elemento, puoi usare i fogli di stile CSS. Nel prossimo esempio vengono aggiunte alcune classi CSS al modello che hai definito nella sezione Definizione di un modello di elemento.

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

Nel foglio di stile CSS per il file HTML, aggiungi i seguenti stili per il modello:

#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);
        }

Ecco l'aspetto dell'oggetto FlipView:

Controllo FlipView con stile applicato.Nota  

Se si modificano i tipi di caratteri per i pulsanti di spostamento dell'oggetto FlipView, i pulsanti non conterranno più il glifo corretto.

 

Modifica dell'orientamento di un controllo FlipView

Per impostazione predefinita il controllo FlipView usa un orientamento orizzontale. Per visualizzare il controllo FlipView verticalmente, puoi impostare la proprietà orientation del controllo su "vertical".

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

FlipView con orientamento verticale.

Aggiunta di elementi interattivi a un modello di elemento

Il modello di elemento può contenere la maggior parte degli altri controlli, ma non può contenere ListView o un altro controllo FlipView.

In genere, quando l'utente interagisce con un elemento, FlipView acquisisce l'interazione e la usa per determinare se l'utente ha selezionato o richiamato un elemento oppure esegue una panoramica tra gli elementi Affinché un elemento interattivo, come un controllo, riceva input, devi collegare la classe win-interactive all'elemento stesso o a uno dei relativi elementi padre. L'elemento e gli elementi figlio ricevono l'interazione e non generano più eventi per FlipView.

Quando colleghi win-interactive a un elemento di un modello, assicurati di non riempire l'intero elemento, altrimenti l'utente non avrà la possibilità di selezionarlo o richiamarlo.

Per aggiungere elementi interattivi al modello di elemento, devi usare una funzione per la creazione di modelli anziché WinJS.Binding.Template. Per un esempio di questo genere, vedi l'esempio di controllo FlipView HTML. Per altre informazioni sulle funzioni di modello, vedi gli esempi di FlipView.itemTemplate.

Creazione di un controllo contestuale

L'oggetto FlipView espone metodi ed eventi che consentono di creare controlli personalizzati che offrono all'utente un'idea del percorso dell'elemento attuale e meccanismi alternativi di esplorazione della raccolta. La seguente immagine illustra un set di pulsanti di opzione con stile sincronizzati con l'oggetto FlipView tramite gli eventi pageselected e pagevisibilitychanged.

FlipView con controllo contestuale.

Per un esempio di codice che mostra come ottenere queste funzionalità, vedi l'esempio del controllo FlipView HTML.

Argomenti correlati

FlipView Reference

Esempio del controllo FlipView HTML