App di Windows
Comprimi il sommario
Espandi il sommario

Controlli (HTML con JavaScript)

I nuovi controlli HTML e JavaScript disponibili in Windows 8.1 ti permettono di aggiungere nuove funzionalità a un'app di Windows Store, ad esempio comandi personalizzati e il supporto avanzato per gli spostamenti. Gli aggiornamenti per i controlli esistenti li rendono ancora più facili da usare, oltre ad aggiungere altre funzionalità come il supporto per il trascinamento della selezione. Grazie a questi controlli nuovi e aggiornati, creare un'app dotata di funzionalità complete è ancora più semplice.

Nuovi controlli e aggiornamenti dei controlli

Windows 8.1 e la libreria Windows per JavaScript 2.0 introducono i nuovi controlli e le nuove funzionalità seguenti:

Windows 8.1 e la libreria Windows per JavaScript 2.0 includono aggiornamenti per questi controlli esistenti:

Uso della libreria Windows per JavaScript 2.0

I nuovi progetti di Microsoft Visual Studio 2013 includono automaticamente la libreria Windows per JavaScript 2.0. Per usare la libreria Windows per JavaScript 2.0 in un progetto creato con Windows 8, sostituisci i riferimenti esistenti alla libreria Windows per JavaScript 1.


    <!-- WinJS style sheets (include one) -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet">
    <link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet">

    <!-- WinJS code -->
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

...con riferimenti alla libreria Windows per JavaScript 2.0:


    <!-- WinJS style sheets (include one) -->
    <link rel="stylesheet" href="//Microsoft.WinJS.2.0/css/ui-dark.css" />
    <link rel="stylesheet" href="//Microsoft.WinJS.2.0/css/ui-light.css" />

    <!-- WinJS code -->
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

Visual Studio 2013 supporta l'aggiornamento automatico di un progetto oppure puoi scegliere di eseguire manualmente questi aggiornamenti:

  • Aggiungere un riferimento alla libreria di Windows 8.1 per JavaScript al progetto.

  • Nel manifesto dell'app aggiorna i valori OSMinVersion e OSMaxVersionTested a 6.3.0:

    
      <Prerequisites>
        <OSMinVersion>6.3.0</OSMinVersion>
        <OSMaxVersionTested>6.3.0</OSMaxVersionTested>
      </Prerequisites>
    
    

AppBarCommand

[Accedi all'esempio del controllo HTML AppBar ora.]

In Windows 8.1 puoi creare comandi personalizzati per la barra dell'app nelle app di Windows Store con JavaScript tramite un nuovo tipo di contenuto denominato AppBarCommand.

Questa funzionalità semplifica il processo di creazione di una barra dell'app con contenuto personalizzato, consentendo l'inserimento di questo tipo di contenuto nel layout commands. Puoi sfruttare il supporto completo predefinito per i comandi della barra dell'app con contenuto personalizzato, che include la gestione della tastiera, l'allineamento dei comandi e animazioni associate alla visualizzazione e alla rimozione dinamiche dei comandi.

Se posizionato nel layout commands, il tipo di contenuto AppBarCommand supporta molte delle stesse funzionalità dei comandi predefiniti della barra dell'app.

  • La gestione della tastiera (usando i tasti di direzione, TAB, HOME e FINE) è abilitata tra i comandi della barra dell'app predefiniti e il controllo AppBarCommand personalizzato.

  • Il ridimensionamento della barra dell'app funziona correttamente con il nuovo tipo di contenuto AppBarCommand. Le etichette di testo dei comandi vengono rimosse in modo dinamico quando l'app viene ridimensionata e ridotta.

BackButton

Windows 8.1 e la libreria Windows per JavaScript 2.0 aggiungono ulteriore supporto per gli spostamenti nella piattaforma tramite controlli per le app. Uno di questi controlli è BackButton.

Il controllo BackButton ti permette di aggiungere facilmente la funzionalità di spostamento indietro nell'app. È facile creare un controllo BackButton.


<button data-win-control="WinJS.UI.BackButton" ></button>

Il nuovo controllo BackButton

BackButton controlla automaticamente lo stack di spostamento per stabilire se l'utente può tornare indietro. Se non c'è niente a cui tornare, il pulsante si disabilita da solo. Quando l'utente fa clic sul pulsante o usa tasti di scelta rapida (come ALT+freccia SINISTRA o i tasti BrowserBack), chiama automaticamente la funzione WinJS.Navigation.back per spostarsi indietro. Non devi scrivere codice.

Hub

[Accedi all'esempio del controllo HTML Hub ora.]

Windows 8.1 e la libreria Windows per JavaScript 2.0 aggiungono il controllo Hub per garantire un'esperienza di spostamento più uniforme.

Molte app di Windows Store usano il modello di spostamento basato su hub, un sistema di navigazione gerarchico. Questo modello è l'ideale per app con grandi quantità di contenuto o molte sezioni di contenuto distinte disponibili per l'esplorazione da parte degli utenti.

L'essenza della progettazione di hub è la separazione del contenuto in sezioni diverse e diversi livelli di dettaglio. Le pagine hub rappresentano il punto di ingresso dell'utente nell'app. I contenuti sono visualizzati in una panoramica orizzontale o verticale che consente agli utenti di individuare a colpo d'occhio le novità e gli elementi disponibili. L'hub è composto da diverse categorie di contenuto, ognuna mappata alle diverse pagine delle sezioni dell'app. Ogni sezione deve dare accesso a contenuti e funzionalità. L'hub deve essere visivamente vario, coinvolgere gli utenti e attirarli nelle diverse parti dell'applicazione.

Una pagina hub

 

Con Windows 8.1 è facile creare una pagina hub con il controllo Hub. Per iniziare rapidamente a creare un'app con una pagina Hub, usa il modello di app hub in Visual Studio 2013.

Creazione di un hub

Per creare un hub, devi aggiungere un controllo Hub e un oggetto HubSection per ogni sezione in esso contenuta. Ogni oggetto HubSection può includere qualsiasi tipo di contenuto, anche altri controlli della libreria Windows per JavaScript. Puoi usare la proprietà header per specificare l'intestazione della sezione. Le intestazioni delle sezioni possono essere statiche o interattive. Le intestazioni interattive presentano virgolette acute che possono essere nascoste e generano eventi in caso di interazione dell'utente.

Questo esempio definisce un controllo Hub che contiene tre sezioni.


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>hubPage</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>

    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/hub/hub.css" rel="stylesheet" />
    <script src="/js/data.js"></script>
    <script src="/pages/hub/hub.js"></script>
</head>
<body>
    <div class="hubpage fragment">
        <header aria-label="Header content" role="banner">
            <button data-win-control="WinJS.UI.BackButton"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Hub example</span>
            </h1>
        </header>

        <section class="hub" aria-label="Main content" role="main" data-win-control="WinJS.UI.Hub">
            <!-- Customize the Hub control by modifying the HubSection controls here. -->


            <div class="section1" data-win-control="WinJS.UI.HubSection" data-win-options="{ isHeaderStatic: true }" data-win-res="{ winControl: {'header': 'Section1'} }">
                <img src="/images/gray.png" width="420" height="280" />
                <div class="subtext win-type-x-large secondary-text" data-win-res="{ textContent: 'Section1Subtext' }"></div>
                <div class="win-type-medium" data-win-res="{ textContent: 'DescriptionText' }"></div>
                <div class="win-type-small secondary-text">
                    <span data-win-res="{ textContent: 'Section1Description' }"></span>
                    <span data-win-res="{ textContent: 'Section1Description' }"></span>
                    <span data-win-res="{ textContent: 'Section1Description' }"></span>
                </div>
            </div>

            <div class="section2" data-win-control="WinJS.UI.HubSection" data-win-res="{ winControl: {'header': 'Section2'} }"
                data-win-options="{ onheaderinvoked: HubPage.section2HeaderNavigate }">
                <div class="itemTemplate" data-win-control="WinJS.Binding.Template">
                    <img src="#" data-win-bind="src: backgroundImage; alt: title" />
                    <div class="item-text">
                        <div class="win-type-medium" data-win-bind="textContent: title"></div>
                        <div class="win-type-xx-small secondary-text" data-win-bind="textContent: subtitle"></div>
                        <div class="win-type-small secondary-text" data-win-bind="textContent: description"></div>
                    </div>
                </div>
                <div class="itemslist" data-win-control="WinJS.UI.ListView" data-win-options="{
                        layout: {type: WinJS.UI.ListLayout2},
                        selectionMode: 'none',
                        itemTemplate: select('.section2 .itemTemplate'),  
                        itemDataSource: HubPage.section2DataSource,
                        oniteminvoked: HubPage.section2ItemNavigate
                    }">
                </div>
            </div>

            <div class="section3" data-win-control="WinJS.UI.HubSection" data-win-options="{ isHeaderStatic: true }" data-win-res="{ winControl: {'header': 'Section3'} }">
                <div class="top-image-row">
                    <img src="/images/gray.png" />
                </div>
                <div class="sub-image-row">
                    <img src="/images/gray.png" />
                    <img src="/images/gray.png" />
                    <img src="/images/gray.png" />
                </div>
                <div class="win-type-medium" data-win-res="{ textContent: 'DescriptionText' }"></div>
                <div class="win-type-small secondary-text">
                    <span data-win-res="{ textContent: 'Section3Description' }"></span>
                    <span data-win-res="{ textContent: 'Section3Description' }"></span>
                </div>
            </div>


        </section>
    </div>
</body>
</html>

Il codice precedente crea questa pagina.

Una pagina hub

 

Facendo clic sulla seconda intestazione, l'app passa a una pagina di sezione.

Una pagina di sezione

 

Ecco il codice che esegue lo spostamento.


(function () {
    "use strict";

    var nav = WinJS.Navigation;
    var session = WinJS.Application.sessionState;
    var util = WinJS.Utilities;

    // Get the groups used by the data-bound sections of the hub.
    var section2Group = Data.resolveGroupReference("group1");
    var section5Group = Data.resolveGroupReference("group6");

    WinJS.UI.Pages.define("/pages/hub/hub.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            var hub = element.querySelector(".hub").winControl;
            hub.onloadingstatechanged = function (args) {
                if (args.srcElement === hub.element && args.detail.loadingState === "complete") {
                    this._hubReady(hub);
                    hub.onloadingstatechanged = null;
                }
            }.bind(this);

            hub.onheaderinvoked = function (args) {
                args.detail.section.onheaderinvoked(args);
            };

            // TODO: Initialize the page here.
        },

        unload: function () {
            // TODO: Respond to navigations away from this page.
            session.hubScroll = document.querySelector(".hub").winControl.scrollPosition;
        },

        updateLayout: function (element, viewState, lastViewState) {
            /// <param name="element" domElement="true" />

            // TODO: Respond to changes in viewState.
        },

        _hubReady: function (hub) {
            /// <param name="hub" type="WinJS.UI.Hub" />

            WinJS.Resources.processAll();
            if (typeof session.hubScroll === "number") {
                hub.scrollPosition = session.hubScroll;
            }

            // TODO: Initialize the hub sections here.
        },
    });

    function createHeaderNavigator(group) {
        return util.markSupportedForProcessing(function (args) {
            nav.navigate("/pages/section/section.html", { title: this.header, groupKey: group.key });
        });
    }

    function createItemNavigator(group) {
        var items = Data.getItemsFromGroup(group);
        return util.markSupportedForProcessing(function (args) {
            var item = Data.getItemReference(items.getAt(args.detail.itemIndex));
            nav.navigate("/pages/item/item.html", { item: item });
        });
    }

    function getItemsDataSourceFromGroup(group) {
        return Data.getItemsFromGroup(group).dataSource;
    }

    WinJS.Namespace.define("HubPage", {
        section2DataSource: getItemsDataSourceFromGroup(section2Group),
        section2HeaderNavigate: createHeaderNavigator(section2Group),
        section2ItemNavigate: createItemNavigator(section2Group),
        section5DataSource: getItemsDataSourceFromGroup(section5Group),
        section5ItemNavigate: createItemNavigator(section5Group)
    });
})();

Il controllo Hub può essere usato anche con il controllo SemanticZoom. Per altri esempi di questa e altre funzionalità, vedi l'esempio del controllo HTML Hub.

ItemContainer

[Accedi all'esempio del controllo HTML ItemContainer ora.]

Il nuovo controllo ItemContainer facilita la creazione di elementi interattivi che forniscono funzionalità di scorrimento rapido, trascinamento della selezione e sensibilità al passaggio del mouse. Devi semplicemente posizionare il contenuto all'interno del controllo ItemContainer. Il controllo ItemContainer può contenere elementi HTML standard e anche altri controlli della libreria WinJS.

Il controllo ItemContainer è flessibile, il che lo rende adatto a molti usi diversi, ad esempio la creazione di gruppi di caselle di controllo, pulsanti di spostamento e rappresentazioni di carrelli acquisti.

Oggetti ItemContainer in una barra di spostamento

 

Usa un controllo ItemContainer se vuoi visualizzare gli elementi senza tutte le funzionalità del controllo ListView.

Uso di ItemContainer

Questo esempio crea due oggetti ItemContainer e imposta la relativa proprietà tapBehavior su toggleSelect in modo che possano essere selezionati.


<div id="item1"
    data-win-control="WinJS.UI.ItemContainer"
    data-win-options="{tapBehavior: 'toggleSelect'}"
    style="width: 300px;">
    <div style="margin: 10px; padding: 10px; background-color: lightgray">
        <div class="win-type-x-large"
            style="margin-bottom: 5px;">
            Banana
        </div>
        <img src="/images/60banana.png">
        <div>Frozen yogurt</div>
    </div>
</div>
<div id="item2"
    data-win-control="WinJS.UI.ItemContainer"
    data-win-options="{tapBehavior: 'toggleSelect'}"
    style="width: 300px;">
    <div style="margin: 10px; padding: 10px; background-color: lightgray">
        <div class="win-type-x-large"
            style="margin-bottom: 5px;">
            Strawberry
        </div>
        <img src="/images/60Strawberry.png">
        <div>Ice cream</div>
    </div>
</div>

Due oggetti ItemContainer

 

Puoi anche usare un controllo ItemContainer con un controllo Repeater per generare elementi da un oggetto List. Basta inserire il controllo ItemContainer all'interno del controllo Template.


<div id="itemTemplate" data-win-control="WinJS.Binding.Template">
    <div  
        data-win-control="WinJS.UI.ItemContainer" 
        data-win-options="{tapBehavior: WinJS.UI.TapBehavior.toggleSelect}"
        style="width: 300px;">
            <div 
                 style=" margin: 10px; padding: 10px; background-color: lightgray">
                <div class="win-type-x-large" 
                    style="margin-bottom: 5px;" 
                    data-win-bind="textContent: title"></div>
                <img src="#" data-win-bind="src: image">
		        <div data-win-bind="textContent: desc"></div>
            </div>
    </div>
</div>

<div data-win-control="WinJS.UI.Repeater" 
    data-win-options="{data: ItemContainerExample.flavorList, 
    template: select('#itemTemplate')}">
</div>

Questo esempio definisce l'origine dati.


(function () {
    "use strict";

    var basicList = new WinJS.Binding.List(
        [
            { title: "Banana blast", desc: 'Frozen yogurt', image: '/images/60Banana.png'  },
            { title: "Strawberry swirl", desc: 'Ice cream', image: '/images/60Strawberry.png' },
            { title: "Magnificant mint", desc: 'Frozen yogurt', image: '/images/60Mint.png' },
            { title: "Lemon lift", desc: 'Frozen yogurt', image: '/images/60Lemon.png' }
        ]);

    WinJS.Namespace.define("ItemContainerExample",
        {
            flavorList: basicList

        });
})();

Oggetti ItemContainer generati da un Repeater

 

Gli elementi sono selezionabili per impostazione predefinita. Per disabilitare la selezione, imposta la proprietà selectionDisabled del controllo ItemContainer su true.

NavBar

[Accedi all'esempio del controllo HTML NavBar ora.]

Windows 8.1 e la libreria Windows per JavaScript 2.0 introducono un nuovo controllo utile per rendere disponibile un'esperienza coerente e prevedibile per gli spostamenti: il controllo WinJS.UI.NavBar.

Un controllo NavBar che contiene elementi di spostamento generati da un'origine dati

 

Il controllo NavBar è come un oggetto AppBar dedicato ai comandi di spostamento e in effetti NavBar è una sottoclasse dell'oggetto AppBar. Può contenere un semplice elenco di collegamenti o anche diversi livelli di collegamenti organizzati in categorie. Per popolare il controllo NavBar puoi usare voci di hard-coding, aggiornarlo a livello di programmazione oppure ricorrere al data binding.

L'oggetto NavBar viene visualizzato nella parte superiore della schermata dell'app quando serve all'utente. Per invocare l'oggetto NavBar l'utente può eseguire uno scorrimento rapido dai bordi, premere il tasto logo Windows + Z oppure fare clic con il pulsante destro del mouse.

NavBar inoltre supporta i layout verticali e gli elementi di esplorazione divisa, vale a dire gli elementi di esplorazione con opzioni di navigazione degli oggetti figlio. Il controllo NavBar è estremamente personalizzabile: puoi usare fogli di stile CSS per applicare uno stile praticamente a qualsiasi aspetto del controllo NavBar e dei relativi contenuti, inoltre puoi creare elementi di spostamento personalizzati.

Creazione di un controllo NavBar

Il controllo NavBar è composto da tre componenti:

  • Il controllo NavBar stesso.

  • Un oggetto NavBarContainer che contiene gli elementi di navigazione, vale a dire gli oggetti NavBarCommand, e supporta sia la paginazione, sia la panoramica e lo scorrimento. Un solo oggetto NavBarpuò contenere uno o più oggetti NavBarContainer. Usa gli oggetti NavBarContainer per definire gruppi di opzioni di navigazione.

  • Uno o più oggetti NavBarCommand. Questi sono gli oggetti su cui fa clic l'utente per spostarsi.

Per abilitare lo spostamento, puoi impostare la proprietà location dell'oggetto NavBarCommand. Quando l'utente fa clic sul comando, viene generato l'evento WinJS.Navigation.navigated. Usa questo evento per passare alla posizione specificata.

In alternativa puoi registrare l'evento oninvoked su NavBar e usare il gestore dell'evento per eseguire l'azione di spostamento.

Questo esempio mostra un controllo NavBar semplice contenente due elementi di spostamento.


<div id="NavBar" data-win-control="WinJS.UI.NavBar">
    <div id="GlobalNav" data-win-control="WinJS.UI.NavBarContainer">
            <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{
                label: 'Home',
                icon: WinJS.UI.AppBarIcon.home,
                location: '/html/home.html',
                splitButton: false
                }">
            </div>
            <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{
                label: 'Your apps',
                icon: WinJS.UI.AppBarIcon.favorite,
                location: '/html/yourapps.html',
                splitButton: false
                }">
            </div>
    </div>
</div>


E questo è l'aspetto del controllo NavBar.

Il controllo NavBar

 

Puoi creare un oggetto NavBarCommand contenente oggetti figlio NavBarCommand. A questo scopo, devi impostare la proprietà splitButton dell'oggetto padre NavBarCommand su true e quindi usare l'evento splittoggle per visualizzare un oggetto Flyout contenente gli oggetti figlio NavBarCommand. Ecco il codice di esempio per la prima parte di questa operazione.


<div id="useSplit" data-win-control="WinJS.UI.NavBar">
    <div class="globalNav" data-win-control="WinJS.UI.NavBarContainer">
        <div data-win-control="WinJS.UI.NavBarCommand" 
            data-win-options="{ label: 'Home', icon: 'url(../images/homeIcon.png)' }">
        </div>
        <div data-win-control="WinJS.UI.NavBarCommand" 
            data-win-options="{ label: 'Favorite', icon: WinJS.UI.AppBarIcon.favorite, splitButton: 'true' }">
        </div>
        <div data-win-control="WinJS.UI.NavBarCommand" 
            data-win-options="{ label: 'Your account', icon: WinJS.UI.AppBarIcon.people }">
        </div>
    </div>
</div>
<div id="contactFlyout" data-win-control="WinJS.UI.Flyout" 
    data-win-options="{ placement: 'bottom' }">
    <div id="contactNavBarContainer" data-win-control="WinJS.UI.NavBarContainer"}">
        <div data-win-control="WinJS.UI.NavBarCommand" 
            data-win-options="{ label: 'Family' }">
        </div>
        <div data-win-control="WinJS.UI.NavBarCommand" 
            data-win-options="{ label: 'Work' }">
        </div>
        <div data-win-control="WinJS.UI.NavBarCommand" 
            data-win-options="{ label: 'Friends' }">
        </div>
        <div data-win-control="WinJS.UI.NavBarCommand" 
            data-win-options="{ label: 'Blocked' }">
        </div>  
    </div>
</div>

Il prossimo esempio mostra il codice che inizializza la pagina HTML e aggiunge il gestore eventi splittoggle, che visualizza l'oggetto Flyout contenente gli oggetti figlio NavBarCommand.


(function () {
    "use strict";
    var navcontainer;

    var page = WinJS.UI.Pages.define("/html/6-UseSplitButton.html", {
        ready: function (element, options) {
            document.body.querySelector('#useSplit').addEventListener('invoked', this.navbarInvoked.bind(this));
            document.body.querySelector('#contactNavBarContainer').addEventListener('invoked', this.navbarInvoked.bind(this));

            var navBarContainerEl = document.body.querySelector('#useSplit .globalNav');
            if (navBarContainerEl) {
                this.setupNavBarContainer();
            } else {
                var navBarEl = document.getElementById('useSplit');
                navBarEl.addEventListener('childrenprocessed', this.setupNavBarContainer.bind(this));
            }
        },

        navbarInvoked: function (ev) {
            var navbarCommand = ev.detail.navbarCommand;
            WinJS.log && WinJS.log(navbarCommand.label + " NavBarCommand invoked", "sample", "status");
            document.querySelector('select').focus();
        },

        setupNavBarContainer: function () {
            var navBarContainerEl = document.body.querySelector('#useSplit .globalNav');

            navBarContainerEl.addEventListener("splittoggle", function (e) {
                var flyout = document.getElementById("contactFlyout").winControl;
                var navbarCommand = e.detail.navbarCommand;
                if (e.detail.opened) {
                    flyout.show(navbarCommand.element);
                    var subNavBarContainer = flyout.element.querySelector('.win-navbarcontainer');
                    if (subNavBarContainer) {
                        // Switching the navbarcontainer from display none to display block requires 
                        // forceLayout in case there was a pending measure.
                        subNavBarContainer.winControl.forceLayout();
                        // Reset back to the first item.
                        subNavBarContainer.currentIndex = 0;
                    }
                    flyout.addEventListener('beforehide', go);
                } else {
                    flyout.removeEventListener('beforehide', go);
                    flyout.hide();
                }
                function go() {
                    flyout.removeEventListener('beforehide', go);
                    navbarCommand.splitOpened = false;
                }
            });
        }
    });
})();

Per accedere al codice completo, vedi l'esempio di controllo NavBar HTML.

Ecco l'aspetto di NavBar con il pulsante di menu combinato aperto:

NavBarCommand con menu combinato

 

Puoi eseguire il binding di un oggetto NavBarContainer a un'origine dati. Per ottenere questo risultato, crea un controllo List contenente dati di descrizione dei comandi di spostamento e usalo per impostare la proprietà data dell'oggetto NavBarContainer. Questo esempio definisce i dati che verranno usati da NavBarContainer.



(function () {
    "use strict";
    var page = WinJS.UI.Pages.define("/html/2-UseData.html", {
        init: function (element, options) {
            var categoryNames = ["Picks for you", "Popular", "New Releases", "Top Paid", "Top Free",
            "Games", "Social", "Entertainment", "Photo", "Music & Video",
            "Sports", "Books & Reference", "News & Weather", "Health & Fitness", "Food & Dining",
            "Lifestyle", "Shopping", "Travel", "Finance", "Productivity",
            "Tools", "Secuirty", "Business", "Education", "Government"];

            var categoryItems = [];
            for (var i = 0; i < categoryNames.length; i++) {
                categoryItems[i] = {
                    label: categoryNames[i]
                };
            }

            Data.categoryList = new WinJS.Binding.List(categoryItems);
        },

        ready: function (element, options) {
            document.body.querySelector('#useTemplate').addEventListener('invoked', this.navbarInvoked.bind(this));
        },

        navbarInvoked: function (ev) {
            var navbarCommand = ev.detail.navbarCommand;
            WinJS.log && WinJS.log(navbarCommand.label + " NavBarCommand invoked", "sample", "status");
            document.querySelector('select').focus();
        }
    });
})();



Il prossimo esempio mostra il codice HTML per creare gli oggetti NavBar e NavBarContainer.



<div id="useTemplate" data-win-control="WinJS.UI.NavBar">
    <div class="globalNav" data-win-control="WinJS.UI.NavBarContainer">
        <div data-win-control="WinJS.UI.NavBarCommand" 
             data-win-options="{ label: 'Home', icon: 'url(../images/homeIcon.png)' }">
        </div>
        <div data-win-control="WinJS.UI.NavBarCommand" 
             data-win-options="{ label: 'Favorite', icon: 'favorite' }"></div>
        <div data-win-control="WinJS.UI.NavBarCommand" 
             data-win-options="{ label: 'Your account', icon: 'people' }"></div>
    </div>
    <div class="categoryNav" 
        data-win-control="WinJS.UI.NavBarContainer" 
        data-win-options="{ data: Data.categoryList, maxRows: 3 }">
    </div>
</div>



Per accedere al codice completo, vedi l'esempio di controllo NavBar HTML.

Quando esegui il codice viene creato questo oggetto NavBar.

Un controllo NavBar che contiene elementi di spostamento generati da un'origine dati

 

Anche se non è mostrato qui, puoi usare un oggetto WinJS.Binding.Template con un'origine dati per generare elementi della barra di spostamento.

Repeater

[Accedi all'esempio del controllo HTML Repeater ora.]

Il controllo Repeater è un semplice controllo della libreria WinJS che usa un modello per generare markup HTML da un set di dati. Il modello può contenere praticamente qualsiasi markup HTML e controllo della libreria WinJS. Puoi anche annidare controlli Repeater in altri controlli Repeater.

Usa il controllo Repeater per generare elenchi e tabelle personalizzati. Ecco un esempio di una previsione meteo creata da un controllo Repeater.

Controllo Repeater

 

Il controllo Repeater non sostituisce il controllo ListView. È più flessibile, ma non fornisce alcune delle funzionalità avanzate di ListView, ad esempio il controllo sul modo in cui vengono caricati gli elementi di dati.

Uso del controllo Repeater

Il controllo Repeater genera i dati da un oggetto List. Questo esempio crea un oggetto List che contiene alcuni semplici elementi.


(function () {
    "use strict";

    var basicList2 = new WinJS.Binding.List(
        [
            { title: "Item 1" },
            { title: "Item 2" },
            { title: "Item 3" },
            { title: "Item 4" }
        ]);

    WinJS.Namespace.define("RepeaterExample",
        {
            basicList: basicList2

        });
})();

Per specificare il markup generato da Repeater, devi definire una proprietà template. Puoi creare un modello nel markup o usare una funzione per la creazione di modelli. In questo esempio viene creato un modello nel markup. Esegue il data binding del campo del titolo dell'origine dati al contenuto di testo di un elemento li.


<div id="listTemplate" data-win-control="WinJS.Binding.Template">
    <li data-win-bind="textContent: title"></li>
</div>

Il prossimo esempio crea il controllo Repeater.


<ul data-win-control="WinJS.UI.Repeater" 
    data-win-options="{data: RepeaterExample.basicList, 
    template: select('#listTemplate')}">
</ul>

Quando esegui l'app, il controllo Repeater genera un elemento li per ogni elemento nell'elenco di dati.

Elenco generato dal controllo Repeater

 

WebView con SmartScreen

[Accedi all'esempio del controllo HTML WebView ora.]

In Windows 8 puoi usare l'elemento iframe per ospitare il contenuto basato sul Web, ma il contenuto non viene isolato né viene fornita la funzionalità di spostamento. In Windows 8.1 è stato introdotto il nuovo controllo WebView, che permette di ospitare in modo molto più facile nelle app il contenuto basato sul Web.

Ecco alcuni dei miglioramenti offerti da WebView rispetto all'uso di un iframe per visualizzare contenuto basato su Web:

  • Supporto di HTML5

    Le pagine ospitate in un controllo WebView possono accedere alla maggior parte delle funzionalità HTML5. Il controllo WebViewtuttavia non può accedere a un database IndexedDB, alla cache di app HTML5, all'API Geolocation o all'Clipboard API.

  • Supporto migliorato degli spostamenti

    Il controllo WebView ha uno stack della cronologia separato e offre diversi metodi per spostarsi avanti e indietro e per ricaricare la pagina corrente.

  • Supporto dei siti che non funzionano all'interno di frame

    Il controllo WebView supporta la visualizzazione di siti che non funzionano all'interno di elementi frame o iframe.

Uso di WebView per il caricamento di contenuto

Per creare un controllo WebView, devi creare un elemento x-ms-webview.


<x-ms-webview id="webview">
</x-ms-webview>


Esistono molti modi per caricare il contenuto usando il controllo WebView:

  • Usa la proprietà src del controllo WebView oppure il metodo navigate o navigateWithHttpRequestMessage per passare a un URI. In questo esempio viene usata la proprietà src per passare a un URI.

    
    <x-ms-webview id="webview" src="http://go.microsoft.com/fwlink/p/?LinkID=294155" 
        style="width: 400px; height: 400px;">
    </x-ms-webview>
    
    
    
  • Usa il metodo navigateToString per caricare una stringa arbitraria di HTML.

    
    var htmlString = "<!DOCTYPE html>" +
            "<html>" +
            "<head><title>Simple HTML page</title></head>" +
            "<body>" +
                "<h1>Hi!</h1>" +
                "<p>This is a simple HTML page.</p>" +
            "</body>" +
            "</html>";
    document.getElementById("webview").navigateToString(
        htmlString);
    
    
  • Puoi usare il metodo navigate con il protocollo ms-appdata:// per caricare contenuto HTML archiviato nelle cartelle di stato dell'app.

    
     document.getElementById("webview").navigate(
        "ms-appdata:///local/NavigateToState/simple_example.html");
    
    
  • Per i formati di file basati su HTML, a volte può essere utile inviare all'occorrenza tramite flusso riferimenti relativi, come nel caso di contenuto HTML crittografato di cui non è possibile eseguire il rendering in modalità nativa con il controllo WebView. Usa i metodi buildLocalStreamUri e navigateToLocalStreamUri per visualizzare contenuto da un flusso. Devi anche implementare un oggetto Windows Runtime personalizzato che usi l'interfaccia IUriToStreamResolver.

    
    var contentUri = document.getElementById("webview").buildLocalStreamUri(
        "NavigateToStream", "simple_example.html");
    var uriResolver = new SDK.WebViewSampleCS.StreamUriResolver();
    document.getElementById("webview").navigateToLocalStreamUri(contentUri, uriResolver);
    
    

Per esempi completi, vedi l'esempio di controllo WebVew HTML.

Supporto del trascinamento della selezione per il controllo ListView

[Accedi all'esempio delle funzionalità di trascinamento della selezione e riordinamento del controllo HTML ListView ora.]

Con la libreria Windows per JavaScript 2.0 è stato aggiunto per il controllo ListView il supporto per le operazioni di trascinamento della selezione. Questo nuovo supporto è compatibile con la funzionalità di trascinamento della selezione HTML 5. Il trascinamento della selezione può essere effettuato tra due controlli ListView, tra i controlli ItemContainer e ListView e tra qualsiasi elemento HTML e il controllo ListView. Puoi permettere all'utente di rilasciare elementi in una posizione specifica di ListView oppure controllare dove vengono inseriti gli elementi rilasciati, ad esempio riordinandoli nel controllo ListView dopo che è stato aggiunto un nuovo elemento.

Trascinamento di un elemento dal controllo ListView

Per abilitare il trascinamento di un elemento dal controllo ListView su un obiettivo di rilascio HTML 5, devi effettuare le operazioni seguenti:

  1. Impostare la proprietà itemsDraggable del controllo ListView su true.

  2. Gestire l'evento itemdragstart del controllo ListView. Nel gestore dell'evento ottieni un oggetto dataTransfer dalla proprietà detail dell'oggetto dell'evento. Usa il metodo setData dell'oggetto dataTransfer per specificare la modalità di trasferimento dei dati e quali dati trasferire.

  3. Gestire l'evento dragover dell'obiettivo di rilascio. Nel gestore dell'evento usa il metodo preventDefault dell'oggetto event per indicare al sistema che accetti il rilascio. In caso contrario, l'operazione di trascinamento non sarà accettata dalla destinazione di rilascio.

  4. Gestire l'evento drop dell'obiettivo di rilascio. Nel gestore dell'evento ottieni un oggetto dataTransfer dalla proprietà detail dell'oggetto dell'evento. Usa la proprietà getData dell'oggetto dataTransfer per recuperare i dati da trasferire. Usa questi dati per aggiornare l'obiettivo di rilascio. Fai attenzione a non accettare trascinamenti da elementi trascinabili intrinsecamente nell'app, ad esempio testo selezionato ed elementi img.

Ecco un set di esempi che mostrano come abilitare il trascinamento di un elemento dal controllo ListView. Il primo esempio definisce il markup HTML.


<div id="myDropTarget" class="DnDItem">
    <div id="myTargetContents">
        <p>
            HTML 5 Drop Target
        </p>
        <br />
        <div id="myPlusSign" class="drop-ready">+ </div>
        <br />
        <p>
            Drop Items Here
        </p>
    </div>
</div>

<!-- Simple template for the ListView instantiation  -->
<div id="smallListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
    <div class="smallListIconTextItem">
        <img src="#" class="smallListIconTextItem-Image" data-win-bind="src: picture" draggable="false" />
        <div class="smallListIconTextItem-Detail">
            <h4 data-win-bind="innerText: title"></h4>
            <h6 data-win-bind="innerText: text"></h6>
        </div>
    </div>
</div>

<!-- The declarative markup necessary for ListView instantiation -->
<!-- Call WinJS.UI.processAll() in your initialization code -->
<div id="listView"
    class="win-selectionstylefilled"
    data-win-control="WinJS.UI.ListView"
    data-win-options="{ 
        itemDataSource: myData.dataSource,
        selectionMode: 'none', 
        itemTemplate: smallListIconTextTemplate,
        itemsDraggable: true,
        layout: { type: WinJS.UI.GridLayout } 
    }">
</div>

Ecco il codice CSS per l'operazione di trascinamento della selezione.


.drop-ready #myPlusSign
{
    opacity: 1;
}

#myPlusSign
{
     font-size:100px;
     font-weight:bolder;
     color: blue;
     opacity: 0;
}

Il prossimo esempio mostra il codice per abilitare la funzionalità di trascinamento della selezione.


(function () {
    "use strict";
    var page = WinJS.UI.Pages.define("/html/scenario2.html", {
        ready: function (element, options) {

            listView.addEventListener("itemdragstart", function (eventObject) {
                eventObject.detail.dataTransfer.setData("Text", JSON.stringify(eventObject.detail.dragInfo.getIndices()));
            });

            var dropTarget = element.querySelector("#myDropTarget");
            dropTarget.addEventListener("dragover", function (eventObject) {
                // Allow HTML5 drops.
                eventObject.preventDefault();
            });

            dropTarget.addEventListener("dragenter", function (eventObject) {
                WinJS.Utilities.addClass(dropTarget, "drop-ready");
            });

            dropTarget.addEventListener("dragleave", function (eventObject) {
                WinJS.Utilities.removeClass(dropTarget, "drop-ready");
            });

            dropTarget.addEventListener("drop", function (eventObject) {
                // Get indicies -> keys of items that were trashed, and remove from datasource.
                WinJS.Utilities.removeClass(dropTarget, "drop-ready");
                var indexSelected = JSON.parse(eventObject.dataTransfer.getData("Text"));
                var listview = document.querySelector("#listView").winControl;
                var ds = listview.itemDataSource;

                ds.itemFromIndex(indexSelected[0]).then(function (item) {
                    WinJS.log && WinJS.log("You dropped the item at index " + item.index + ", "
                    + item.data.title, "sample", "status");
                });
            });

        }
    });

})();


Per vedere il codice completo, vedi l'esempio di trascinamento della selezione e riordinamento per un controllo ListView HTML.

Rilascio di un elemento nel controllo ListView

Per rilasciare un elemento in una posizione specifica nel controllo ListView, dovrai:

  1. Impostare la proprietà draggable dell'elemento HTML (origine di trascinamento) su true.

  2. Gestire l'evento dragstart dell'obiettivo di rilascio. Nel gestore dell'evento ottieni un oggetto dataTransfer dall'oggetto dell'evento. Usa il metodo setData dell'oggetto dataTransfer per specificare la modalità di trasferimento dei dati e quali dati trasferire.

  3. Gestire l'evento itemdragenter del controllo ListView. Nel gestore dell'evento, usa il metodo preventDefault dell'oggetto event per indicare al sistema che accetti il rilascio. In caso contrario, l'operazione di trascinamento potrebbe avere risultati imprevedibili.

  4. Gestire l'evento itemdragdrop del controllo ListView. Nel gestore dell'evento ottieni un oggetto dataTransfer dalla proprietà detail dell'oggetto dell'evento. Usa la proprietà getData dell'oggetto dataTransfer per recuperare i dati da trasferire. Usa questi dati per aggiornare il controllo ListView.

Ecco un set di esempi che mostrano come abilitare il rilascio di un elemento nel controllo ListView. Il primo esempio definisce il markup HTML.


<div id="myDragSource" class="DnDItem">
    <div id="mySourceContents">
        <p>
            HTML 5 Drag Source
        </p>
        <br />
        <br />
        <br />
        <div id="myDragContent" class="smallListIconTextItem" draggable="true">
            <img id="myImg" src="/images/60Tree.png" class="smallListIconTextItem-Image" draggable="false" />
            <div class="smallListIconTextItem-Detail">
                <h4 id="myItemTitle">Drag Me</h4>
            </div>
        </div>
    </div>
</div>

<!-- Simple template for the ListView instantiation  -->
<div id="smallListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
    <div class="smallListIconTextItem">
        <img src="#" class="smallListIconTextItem-Image" data-win-bind="src: picture" draggable="false" />
        <div class="smallListIconTextItem-Detail">
            <h4 data-win-bind="innerText: title"></h4>
            <h6 data-win-bind="innerText: text"></h6>
        </div>
    </div>
</div>

<!-- The declarative markup necessary for ListView instantiation -->
<!-- Call WinJS.UI.processAll() in your initialization code -->
<div id="listView"
    class="win-selectionstylefilled"
    data-win-control="WinJS.UI.ListView"
    data-win-options="{ 
        itemDataSource: myData.dataSource,
        selectionMode: 'none',
        itemTemplate: smallListIconTextTemplate,
        itemsReorderable: true,
        layout: { type: WinJS.UI.GridLayout } 
    }">
</div>

Il prossimo esempio mostra il codice per abilitare la funzionalità di trascinamento della selezione.


(function () {
    "use strict";
    var page = WinJS.UI.Pages.define("/html/scenario3.html", {
        ready: function (element, options) {

            myDragContent.addEventListener("dragstart", function (eventObject) {
                var dragData = { sourceElement: myDragContent.id, data: myItemTitle.innerText, imgSrc: myImg.src };
                eventObject.dataTransfer.setData("Text", JSON.stringify(dragData));
            });

            listView.addEventListener("itemdragenter", function (eventObject) {
                if (eventObject.detail.dataTransfer.types.contains("Text")) {
                    eventObject.preventDefault();
                }
            });

            listView.addEventListener("itemdragdrop", function (eventObject) {
                var dragData = JSON.parse(eventObject.detail.dataTransfer.getData("Text"));
                if (dragData && dragData.sourceElement === myDragContent.id) {
                    var newItemData = { title: dragData.data, text: ("id: " + dragData.sourceElement), 
                                        picture: dragData.imgSrc };
                    // insertAfterIndex tells us where in the list to add the new item.
                    // If we're inserting at the start, insertAfterIndex is -1. 
                    // Adding 1 to insertAfterIndex gives us the nominal index in the array to insert the new item.
                    myData.splice(eventObject.detail.insertAfterIndex + 1, 0, newItemData);
                } else {
                    // Throw error that illegal content was dropped.
                }
            });
        }
    });
})();


Per vedere il codice completo, vedi l'esempio di trascinamento della selezione e riordinamento per un controllo ListView HTML.

Riordinamento degli elementi in un controllo ListView

La possibilità di riordinare il contenuto è molto apprezzata dagli utenti. Con la nuova proprietà itemsReorderable è più facile permettere agli utenti di cambiare l'ordine degli elementi in un controllo ListView. Basta impostare itemsReorderable su true per permettere agli utenti di trascinare elementi all'interno del controllo ListView. Non è necessario altro codice.

Nota  Per abilitare completamente il riordinamento degli elementi in un controllo ListView raggruppato, devi anche rispondere all'evento itemdragdrop e inserire l'elemento correttamente nella posizione appropriata.
Nota  Perché funzioni, l'origine dati deve supportare il riordinamento.

Questo esempio crea un controllo ListView che supporta il riordinamento degli elementi.


<style type="text/css">
    .win-listview {
        margin: 20px;
        border: 2px solid gray;
        Width: 500px; 
    }

    .standardItem {
        width: 150px;
        height: 150px;
        background-color: #0aaddd;
        padding: 5px; 
    }

</style>

<div id="template" data-win-control="WinJS.Binding.Template">
    <div class="standardItem" data-win-bind="textContent: title" ></div>
</div>
<div
    id="reorderableListView"
    data-win-control="WinJS.UI.ListView"
    data-win-options="{
    itemDataSource: ListViewExamples.dataList.dataSource, 
    itemTemplate: select('#template'), 
    layout: {type: WinJS.UI.GridLayout},
    itemsReorderable: true 
    }">
</div>

Il prossimo esempio definisce l'origine dati usata dal controllo ListView.


(function () {
    "use strict";

    var dataList =
        new WinJS.Binding.List(
             [{ title: "Item 1" },
              { title: "Item 2" },
              { title: "Item 3" },
              { title: "Item 4" }]);

    WinJS.Namespace.define("ListViewExamples",
        {
            dataList: dataList
        })

})();


Quando viene eseguito il codice, l'utente può riordinare gli elementi ListView trascinandoli.

Riordinamento di ListView

Nuovo layout per ListView: CellSpanningLayout

Con la libreria Windows per JavaScript 1.0, per inserire elementi di varie dimensioni in un controllo ListView devi usare un controllo GridLayout. Per la libreria Windows per JavaScript 2.0 abbiamo aggiunto un nuovo layout per la creazione di griglie di più dimensioni, ovvero il layout CellSpanningLayout.

Questo esempio definisce l'origine dati e i metodi itemInfo e groupInfo per un controllo ListView che usa un CellSpanningLayout. Tutti gli elementi nel controllo ListView hanno dimensioni pari a 250 x 250 pixel, con l'eccezione del primo che ha un'altezza di 510 pixel.


(function () {
    "use strict";

    var unorderedList =
        new WinJS.Binding.List(
             [{ title: "Item 1", cssClass: "tallItem" },
              { title: "Item 2", cssClass: "standardItem" },
              { title: "Item 3", cssClass: "standardItem" },
              { title: "Item 4", cssClass: "standardItem" }]);

    function myItemInfo(itemIndex) {
        var size = { width: 250, height: 250 };
        if (itemIndex === 0) {
            size.height = 510;
        }

        return size;
    };

    function myGroupInfo(groupInfo) {
        return {
            enableCellSpanning: true,
            cellWidth: 250,
            cellHeight: 250
        };
    };

    WinJS.Utilities.markSupportedForProcessing(myItemInfo);
    WinJS.Utilities.markSupportedForProcessing(myGroupInfo);

    WinJS.Namespace.define("ListViewExamples",
        {
            unorderedList: unorderedList,
            myItemInfo: myItemInfo,
            myGroupInfo: myGroupInfo
        })


})();


Il prossimo esempio mostra il codice HTML per creare il controllo ListView e il WinJS.Binding.Template.


<style type="text/css">
    .win-listview {
        margin: 5px;
        border: 2px solid gray; 
    }

    .standardItem {
        width: 250px;
        height: 250px;
        background-color: #999999;
        padding: 5px; 
    }

    .tallItem {
        width: 250px;
        height: 510px;
        background-color: #0aaddd;
        padding: 5px; 
    }
</style>

<div id="template" data-win-control="WinJS.Binding.Template">
    <div data-win-bind="className: cssClass; textContent: title" ></div>
</div>

<div
    id="cellSpanningListView"
    data-win-control="WinJS.UI.ListView"
    data-win-options="{
    itemDataSource: ListViewExamples.unorderedList.dataSource, 
    itemTemplate: select('#template'), 
    layout: {type: WinJS.UI.CellSpanningLayout, 
    itemInfo: ListViewExamples.myItemInfo, 
    groupInfo: ListViewExamples.myGroupInfo}
    }">
</div>


Questo è l'aspetto del controllo ListView.

Controllo ListView che usa CellSpanningLayout

Altri aggiornamenti per ListView

Windows 8.1 include ancora altri miglioramenti per il controllo ListView.

Migliore accessibilità per le intestazioni

Le intestazioni in un controllo ListView raggruppato supportano ora gli spostamenti tramite tastiera e le interazioni con tastiera e mouse. Per accedere a queste funzionalità non devi modificare in alcun modo il tuo codice.

(Per altre info sulla creazione di gruppi, vedi Come raggruppare gli elementi in un controllo ListView.)

Nota  Se hai impostato l'intestazione come richiamabile nella libreria Windows per JavaScript 1.0 includendo un link o un pulsante nell'intestazione, gli utenti non riusciranno a richiamare l'intestazione con la tastiera quando passi alla libreria Windows per JavaScript 2.0. Per risolvere questo problema, gestisci l'evento ongroupheaderinvoked e usalo per eseguire l'azione dell'intestazione invece di usare un pulsante o un link.

Aggiornamenti delle interfacce di layout

Il controllo ListView presenta ora un nuovo set di interfacce di layout che facilita la creazione di un layout personalizzato, ovvero ILayout2 e ISiteLayout2. Quando implementi queste interfacce, puoi usare i layout CSS standard nella tua implementazione.

Aggiornamenti per ListLayout e GridLayout

Abbiamo aggiornato ListLayout e GridLayout per migliorarne le prestazioni generali, soprattutto quelle relative all'anteprima. Non dovrai apportare modifiche al tuo codice per sfruttare questi miglioramenti.

Altri aggiornamenti per WinJS

Aggiornamenti per l'associazione e per WinJS.Binding.Template

La libreria Windows per JavaScript 2.0 usa un nuovo sistema più efficiente per l'elaborazione degli oggetti Template, il che comporta un notevole miglioramento delle prestazioni. Con il nuovo sistema, l'associazione dati e la creazione di istanze dei controlli vengono gestiti con un processo parallelo più fluido, anziché in serie come avviene nella libreria Windows per JavaScript 1.0. Se il tuo codice dipende dal comportamento dell'elaborazione in serie legacy, ti consigliamo di modificarlo per poter sfruttare l'elaborazione di modelli più veloce. Se non puoi modificare il tuo codice, è comunque possibile usare la proprietà disableOptimizedProcessing per ripristinare il comportamento precedente.

API Dispose

Il modello Dispose è un nuovo schema che consente a elementi e controlli di rilasciare le risorse al termine del ciclo di vita per evitare perdite di memoria. L'implementazione di questo modello da parte di un elemento o di un controllo è facoltativa. I controlli della libreria Windows per JavaScript 2.0 con risorse da rilasciare implementano ora questa API.

Per poter usare il modello di eliminazione, chiama il metodo dispose del controllo quando il controllo non serve più, ad esempio quando esci da una pagina o alla chiusura dell'app.

 

 

Mostra:
© 2016 Microsoft