Guida introduttiva: Aggiunta di contenitori di elementi

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 ]

Informazioni su come aggiungere un oggetto ItemContainer alla tua app di Windows Store tramite JavaScript.ItemContainer crea un semplice elemento interattivo senza bisogno di molto markup HTML o codice JavaScript. Gli elementi creati con questo controllo sono coerenti con l'aspetto di Windows per quanto concerne animazioni, scorrimento rapido, trascinamento e posizionamento del puntatore.

In questa guida introduttiva creeremo una semplice visualizzazione di dati sui clienti mediante un controllo Repeater e un controllo ItemContainer. Apprenderemo inoltre come creare un modulo di immissione dati in un'app di Windows Store scritta in JavaScript mediante un elemento HTML <form> che incorpora due controlli ItemContainer.

Prerequisiti

Creare un nuovo progetto con il modello Applicazione di navigazione

Avvia Microsoft Visual Studio.
Nella scheda Pagina iniziale fai clic su Nuovo progetto. Verrà aperta la finestra di dialogo Nuovo progetto.
Nel riquadro Installato espandi Modelli e JavaScript e seleziona il tipo di modello App di Windows Store. I modelli di progetto disponibili per JavaScript vengono visualizzati nel riquadro centrale della finestra di dialogo.
Nel riquadro centrale scegli il modello di progetto Applicazione di navigazione.
Nella casella di testo Nome digita ItemContainer Demo.
Fai clic su OK per creare il progetto.

Aggiungere l'HTML con i controlli ItemContainer

ItemContainer offre un controllo affidabile adatto a diversi scopi da usare nei casi in cui altri controlli (ad esempio ListView) potrebbero non essere appropriati. ItemContainer è adatto a essere usato come una versione più avanzata di pulsante interruttore. È anche possibile usarlo come destinazione di rilascio, come nell'interfaccia utente di un carrello degli acquisti. L'aspetto ancora più importante è la possibilità di usare ItemContainer in combinazione con altri controlli, in particolare Repeater. Puoi usare ItemContainer e Repeater insieme per associare dati dinamici a ItemContainer.

ItemContainer può essere definito in modo dichiarativo in una pagina HTML o in fase di esecuzione tramite codice JavaScript caricato con la pagina. Questo esempio crea ItemContainer in modo dichiarativo nel markup HTML, con un esempio ospitato in un controllo Repeater.

Apri il file home.js (/pages/home/home.html) e aggiungi il markup HTML seguente.


<!-- Create an entry form for new customer data. -->
<div id="customerInput">
    <h2>Customer entry</h2><br />
    <form id="inputContainer"
        class="itemContainer">
        <input id="firstName" type="text" placeholder="First name" required /><br />
        <input id="lastName" type="text" placeholder="Last name" required /><br />
        <input id="phoneNumber" type="tel" placeholder="Phone number" /><br />
        <input id="email" type="email" placeholder="E-mail" required /><br /><br />
        <div id="contactByEmail"
            class="selectionItem"
            data-win-control="WinJS.UI.ItemContainer"
            data-win-options="{
                tapBehavior: directSelect
            }">Contact by e-mail</div><br />
        <div id="contactByPhone"
            class="selectionItem"
            data-win-control="WinJS.UI.ItemContainer"
            data-win-options="{
                tapBehavior: directSelect
            }">Contact by phone</div><br />
        <button type="submit">Submit</button>
        <button type="reset">Clear</button>
    </form>
</div>

<!-- Create a display for existing customer data -->
<div id="customerList">
    <h2>Customer list</h2><br />
    <div id="entryContainer"
        class="itemContainer"
        data-win-control="WinJS.UI.Repeater"
        data-win-options="{
            data: CustomerData.data
    }">
        <div class="customerListItem"
            data-win-control="WinJS.UI.ItemContainer">
            <b>Name:</b> <span data-win-bind="textContent: name"></span><br />
            <b>E-mail:</b> <span data-win-bind="textContent: email"></span><br />
            <b>Phone: </b> <span data-win-bind="textContent: phoneNumber"></span><br />
            <b>Contact by: </b><span data-win-bind="textContent: contactPreference"></span><br />
        </div> 
    </div>
</div>

Questo markup definisce due parti dell'interfaccia utente nell'app: un modulo di immissione dei dati sui clienti e una visualizzazione di dati esistenti. Il modulo per l'immissione dei dati sui clienti contiene due controlli ItemContainer in un elemento <form>, in cui i controlli ItemContainer operano come controlli casella di controllo avanzati. La sezione di visualizzazione dei dati sui clienti contiene un controllo Repeater che include un ItemContainer per la visualizzazione dei dati sui singoli clienti.

Apri home.css (/pages/home/home.css) e aggiungi il codice seguente.


/* Style the page so that the entry form and
display are in two separate parts of a grid. */
.maincontent {
    padding: 50px;
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr;
    -ms-grid-rows: inherit;
}

#customerInput {
    -ms-grid-column: 1;
}

#customerList {
    -ms-grid-column: 2;
}

#entryContainer {  
    overflow-y: auto;
}

.itemContainer {
    width: 500px;
    height: 350px;
}

.selectionItem {
    width: 300px;
    border: 10px;
    height: 50px;
}

/* Create a solid gray border around items
in the customer display list. */
.customerListItem {
    width: 450px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-style: solid;
    border-color: gray;
}

Questi stili creano una griglia in due parti contenente il modulo di immissione e la visualizzazione dei dati sui clienti nell'app. Il modulo di immissione dei dati si trova sul lato sinistro dell'app mentre la visualizzazione a destra.

Applicare gestori di eventi JavaScript ai controlli

Quest'app acquisisce le informazioni immesse nel modulo e quindi le visualizza nell'elenco di dati sui clienti. Quando si invia il modulo, i dati vengono convertiti in un singolo oggetto JavaScript. L'oggetto viene quindi aggiunto all'elenco di dati sui clienti visualizzati.

Fai clic con il pulsante destro del mouse sulla cartella js e quindi scegli Aggiungi > Nuovo file JavaScript. Nella finestra di dialogo Aggiungi nuovo elemento, assegna il nome data.js al file e fai clic su Aggiungi. Aggiungi un riferimento al nuovo script in default.html.
```
<script src='/js/data.js'></script>
```

Apri data.js (/js/data.js) e aggiungi il codice seguente.

(function () {
    "use strict";

    var customers = [];
    var customerList = new WinJS.Binding.List(customers);

    function Customer(customerInfo) {
        this.name = customerInfo.lastName + ", " + customerInfo.firstName;
        this.email = customerInfo.email;
        this.phoneNumber = customerInfo.phone;
        this.contactPreference = "Does not wish to be contacted";

        if (customerInfo.contactByPhone && customerInfo.contactByEmail) {
            this.contactPreference = "Contact by e-mail and phone"
        }
        else if (customerInfo.contactByPhone) {
            this.contactPreference = "Contact by phone only"
        }
        else if (customerInfo.contactByEmail) {
            this.contactPreference = "Contact by email only"
        }
    }

    WinJS.Namespace.define("CustomerData", {
        data: customerList,
        Customer: Customer
    });
})();

Questo codice definisce un nuovo spazio dei nomi, CustomerData, che espone due membri: Customer, un oggetto per archiviare i dati sui clienti e data, un List che archivia gli oggetti Customer.

Apri home.js (/pages/home/home.js) e sostituisci il codice esistente con il seguente.

(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/home/home.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) {

            // Apply an event handler to when the user
            // submits the form.
            var form = document.forms[0];
            form.onsubmit = function (evt) {

                // Prevent the form from refreshing the page.
                evt.preventDefault();

                // Get the customer input data from the form.
                var entryForm = evt.target;
                var entry = {
                    firstName: entryForm.firstName.value,
                    lastName: entryForm.lastName.value,
                    phone: entryForm.phoneNumber.value,
                    email: entryForm.email.value,
                    contactByEmail: entryForm.children.contactByEmail.winControl.selected,
                    contactByPhone: entryForm.children.contactByPhone.winControl.selected
                };

                // Submit the new Customer data to the list of customers.
                var customer = new CustomerData.Customer(entry);
                var entryList = document.querySelector("#entryContainer").winControl;
                entryList.data.push(customer);

                // Clear the entry form.
                entryForm.querySelector("button[type='reset']").click();
            }

            // Add additional clean-up work when the user 
            // clicks the Reset button.
            form.onreset = function (evt) {
                var entryForm = evt.target;

                // Remove any selection from the item containers.
                entryForm.children.contactByEmail.winControl.selected = false;
                entryForm.children.contactByPhone.winControl.selected = false;
            }

            // Release memory from the 'form' variable after 
            // event handlers have been applied.
            form = null;
        }
    });
})();

Questo codice aggiunge gestori di eventi ai due pulsanti dichiarati nell'elemento <form>. Quando si fa clic sul pulsante Submit, il codice acquisisce i dati dal modulo di immissione, aggiunge un nuovo oggetto Customer all'origine dati per il controllo Repeater e quindi cancella il contenuto del modulo. Il gestore di eventi applicati al pulsante Reset cancella la selezione dei due controlli ItemContainer inclusi nel modulo.

Premi F5 per eseguire l'esempio. Quando l'app viene eseguita, immetti dati nel modulo Customer entry e quindi fai clic su Submit. Verrà visualizzato un nuovo ItemContainer sotto Customer list, in cui vengono visualizzate le informazioni per il cliente in questione. Con l'app ancora in esecuzione, immetti altri dati nel modulo e fai clic su Reset. Il modulo verrà cancellato e tutte le selezioni verranno rimosse dai due controlli ItemContainer.

Riepilogo e passaggi successivi

In questa guida rapida hai scoperto come usare i controlli ItemContainer in un paio di modi, ossia come caselle di controllo avanzate per le selezioni degli utenti e come controlli annidati in un controllo Repeater. Hai anche appreso come usare un elemento HTML <form> in un'app di Windows Store scritta in JavaScript.

I controlli ItemContainer possono essere usati anche come destinazioni sia di trascinamento sia di rilascio. Questo aspetto non è tuttavia illustrato in questo articolo.

Per ulteriori informazioni su come usare il controllo Repeater, vedi Guida introduttiva: Aggiunta di controlli Repeater.

Per ulteriori informazioni su come creare funzionalità di trascinamento e rilascio, vedi Come abilitare il riordinamento, il trascinamento e il rilascio per un controllo ListView.

Condividi tramite

Guida introduttiva: Aggiunta di contenitori di elementi

Prerequisiti

Riepilogo e passaggi successivi

Risorse aggiuntive