Démarrage rapide : ajout de conteneurs d’éléments

Article
03/04/2016

[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Découvrez comment ajouter un objet ItemContainer à votre application du Windows Store en JavaScript. L’objet ItemContainer crée un élément interactif simple dans une grande quantité de balises HTML ou de code JavaScript. Les éléments créés avec ce contrôle reflètent l’apparence de Windows dans les animations, les mouvements de balayage, de glisser-déplacer et de pointage.

Dans cet article de démarrage rapide, vous allez créer un affichage de données clients simple en utilisant un contrôle Repeater et un contrôle ItemContainer. Vous découvrirez également comment créer un formulaire de saisie de données dans une application du Windows Store en JavaScript au moyen d’un élément <form> HTML incorporant deux contrôles ItemContainer.

Prérequis

Créer un projet à l’aide du modèle Application de navigation

Démarrez Microsoft Visual Studio.
Sous l’onglet Page de démarrage, cliquez sur Nouveau projet. La boîte de dialogue Nouveau projet s’ouvre.
Dans le volet Installé, développez Modèles et JavaScript, puis sélectionnez le type de modèle Application du Windows Store. Les modèles de projets proposés pour JavaScript s’affichent dans le volet central de la boîte de dialogue.
Dans le volet central, choisissez le modèle de projet Application de navigation.
Dans la zone de texte Nom, tapez Démonstration ItemContainer.
Cliquez sur OK pour créer le projet.

Ajouter le code HTML avec les contrôles ItemContainer

Conçu pour être robuste et répondre à de multiples objectifs, le contrôle ItemContainer peut être utilisé quand un autre contrôle (par exemple le contrôle ListView) ne convient pas. Le contrôle ItemContainer offre de bons résultats en tant que version enrichie d’un bouton bascule. Il peut également faire office de cible de dépôt, comme dans le cadre d’une interface utilisateur de type panier. Plus important encore, vous pouvez utiliser le contrôle ItemContainer en l’associant à d’autres contrôles, notamment à Repeater. Vous pouvez également exploiter conjointement les contrôles ItemContainer et Repeater pour associer des données dynamiques au contrôle ItemContainer.

Le contrôle ItemContainer peut être défini de façon déclarative dans une page HTML ou au moment de l’exécution à l’aide d’un code JavaScript chargé avec la page. L’exemple qui suit crée le contrôle ItemContainer de manière déclarative dans le balisage HTML avec un exemple hébergé dans un contrôle Repeater.

Ouvrez le fichier home.js (/pages/home/home.html) et ajoutez le balisage HTML suivant.


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

Ce balisage définit deux parties de l’interface utilisateur au sein de l’application : un formulaire de saisie de données clients et un affichage pour les données clients existantes. Le formulaire de saisie de données clients comprend deux contrôles ItemContainer placés dans un élément <form>, où les contrôles ItemContainer agissent en qualité de contrôles de case à cocher enrichis. La section d’affichage des données clients contient un contrôle Repeater qui inclut un contrôle ItemContainer pour l’affichage des entrées de données clients individuelles.

Ouvrez le fichier home.css (/pages/home/home.css) et ajoutez le code suivant.


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

Ce style crée une grille composée de deux parties afin d’y accueillir les données clients saisies et les données clients affichées de l’application. Le formulaire de saisie des données clients apparaît sur le côté gauche de l’application et les données clients affichées sont visibles à droite.

Appliquer des gestionnaires d’événements JavaScript aux contrôles

Cette application s’empare des informations saisies dans le formulaire, puis les affiche dans la liste des données clients. Au moment où le formulaire est soumis, les données qu’il contient sont converties en un objet JavaScript unique. L’objet est ensuite ajouté à la liste des données clients affichées.

Cliquez avec le bouton droit sur le dossier js, puis cliquez sur Ajouter > Nouveau fichier JavaScript. Dans la boîte de dialogue Ajouter un nouvel élément, nommez le fichier data.js, puis cliquez sur Ajouter. Ajoutez une référence au nouveau script dans le fichier default.html.
```
<script src='/js/data.js'></script>
```

Ouvrez le fichier data.js (/js/data.js) et ajoutez le code suivant.

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

Ce code définit un nouvel espace de noms (CustomerData) qui dévoile deux membres : un objet Customer utile au stockage des données clients et data, objet List servant au stockage des objets Customer.

Ouvrez le fichier home.js (/pages/home/home.js) et remplacez le code existant par le code suivant.

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

Ce code ajoute des gestionnaires d’événements à deux boutons déclarés dans l’élément <form>. Lorsque vous cliquez sur le bouton Envoyer, le code extrait les données du formulaire de saisie des données clients, ajoute un nouvel objet Customer à la source de données pour le contrôle Repeater, puis efface le formulaire. Le gestionnaire d’événements appliqué au bouton Réinitialiser supprime la sélection des deux contrôles ItemContainer insérés dans le formulaire.

Appuyez sur la touche F5 pour exécuter l’exemple. Au moment d’exécuter l’application, entrez les données dans le formulaire de saisie des données clients, puis cliquez sur Envoyer. Un nouveau contrôle ItemContainer apparaît sous la liste des clients et affiche les informations du client concerné. Toujours avec l’application en cours d’exécution, entrez des données supplémentaires dans le formulaire et cliquez sur Réinitialiser. Le formulaire est effacé et toutes les sélections sont supprimées des deux contrôles ItemContainer dans le formulaire.

Récapitulatif et étapes suivantes

Dans ce guide de démarrage rapide, vous avez appris à manipuler deux contrôles ItemContainer de différentes manières : en tant que contrôles de case à cocher enrichis pour faciliter les choix des utilisateurs et sous la forme de contrôles imbriqués dans un contrôle Repeater. Vous avez également vu comment utiliser un élément <form> HTML dans une application du Windows Store en JavaScript.

Les contrôles ItemContainer peuvent aussi servir de cible à la fois pour des opérations de glissement et de dépôt. Cet article n’aborde pas la procédure à suivre dans ce cas.

Pour en savoir plus sur l’utilisation du contrôle Repeater, voir Démarrage rapide : ajout de contrôles Repeater.

Pour en savoir plus sur la fonctionnalité glisser-déplacer, voir Comment activer les fonctionnalités de réorganisation, de glissement et de déplacement d’éléments dans un contrôle ListView.

Démarrage rapide : ajout de conteneurs d’éléments

Prérequis

Récapitulatif et étapes suivantes

Ressources supplémentaires