Início rápido: Adicionando contêineres de item

Artigo
03/04/2016

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]

Saiba mais sobre como adicionar um objeto ItemContainer ao seu aplicativo da Windows Store em JavaScript. O ItemContainer cria um elemento interativo simples sem muita marcação HTML ou código JavaScript. Os itens criados com esse controle correspondem em aparência e estilo à personalidade do Windows para animações, movimentos, deslizar e soltar e focar.

Neste artigo de início rápido, você criará uma simples exibição de dados de cliente usando um controle Repeater e um controle ItemContainer. Você também saberá como criar um formulário de entrada de dados em um aplicativo da Windows Store em JavaScript usando um elemento HTML <form> que incorpora dois controles ItemContainer.

Pré-requisitos

Crie um novo projeto ao usar o modelo de Aplicativo de Navegação

Inicie o Microsoft Visual Studio.
Na guia Página Inicial, clique em Novo Projeto. A caixa de diálogo Novo Projeto é aberta.
No painel Instalado, expanda Modelos e JavaScript, e clique no tipo de modelo Aplicativo da Windows Store. Os modelos de projeto disponíveis para JavaScript são exibidos no painel central da caixa de diálogo.
No painel central, selecione o modelo de projeto de Aplicativo de Navegação.
Na caixa de texto Nome, digite Demo ItemContainer.
Clique em OK para criar o projeto.

Adicione o HTML aos controles ItemContainer

O ItemContainer fornece um controle robusto multiuso para ser usado em situações em que outro controle (por exemplo, o controle ListView) pode não ser apropriado. O ItemContainer funciona bem como uma versão 'turbinada' de um botão de alternância. Ele também pode ser usado como um alvo de soltar, semelhante à interface do usuário do 'carrinho de compras'. Mais importante, o ItemContainer pode ser usado combinado com outros controles, principalmente o Repeater. Você também pode usar o ItemContainer e o Repeater juntos para vincular dados dinâmicos ao ItemContainer.

O ItemContainer pode ser definido declarativamente em uma página HTML ou em um tempo de execução usando o JavaScript carregado com a página. Este exemplo cria o ItemContainer declarativamente na marcação HTML com um exemplo hospedado dentro de um controle Repeater.

Abra o arquivo home.js (/pages/home/home.html) e adicione a marcação HTML a seguir.


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

Esta marcação define duas partes para a interface do usuário dentro do aplicativo: um formulário de entrada de dados do cliente e uma exibição para os dados do cliente existentes. O formulário de entrada de dados de cliente contém dois controles ItemContainer dentro de um elemento <form>, onde os controles ItemContainer atuam como controles de caixa de seleção 'enriquecidos'. A seção de exibição de dados do cliente contém um Repeater que inclui um ItemContainer para exibição das entradas de dados do cliente individuais.

Abra o arquivo home.css (/pages/home/home.css) e adicione o seguinte código.


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

Este estilo cria uma grade de duas partes para abrigar os dados do cliente e as partes de exibição de dados do cliente do aplicativo. O formulário de entrada de dados do cliente aparece no lado esquerdo do aplicativo e a exibição de dados do cliente do lado direito.

Aplique manipuladores de evento JavaScript aos controles

Este aplicativo extrai informações inseridas no formulário e depois as exibe na lista de dados do cliente. Quando o formulário é enviado, os dados do formulário são convertidos em um único objeto JavaScript. O objeto é então adicionado à lista de dados de cliente exibidos.

Clique com o botão direito do mouse na pasta js e escolha Adicionar > Novo Arquivo JavaScript. Na caixa de diálogo Adicionar Novo Item, nomeie o arquivo data.js e depois clique em Adicionar. Adicione uma referência ao novo script em default.html.
```
<script src='/js/data.js'></script>
```

Abra o arquivo data.js (/js/data.js) e adicione o seguinte código.

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

Este código define um novo namespace, CustomerData, que expõe dois membros: Customer, um objeto para armazenar dados do cliente; e data, um List que armazena objetos Customer.

Abra o arquivo home.js (/pages/home/home.js) e substitua o código existente pelo seguinte.

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

Este código adiciona manipuladores de evento aos dois botões declarados no elemento <form>. Quando o botão Enviar é clicado, o código obtém os dados do formulário de entrada do cliente, adiciona um novo objeto Customer para a origem de dados para o controle Repeater e depois limpa o formulário. O manipulador de evento aplicado ao botão Redefinir limpa a seleção de dois controles ItemContainer incluídos dentro do formulário.

Pressione F5 para executar o exemplo. Quando o aplicativo é executado, insira os dados no formulário Entrada do cliente e depois clique em Enviar. Um novo ItemContainer aparece na Lista de Clientes, exibindo as informações daquele cliente. Com o aplicativo ainda em execução, insira mais alguns dados no formulário e depois clique em Redefinir. O formulário é limpo e todas as seleções são removidas dos dois controles ItemContainer no formulário.

Resumo e próximas etapas

Neste Início rápido, você aprendeu como usar os controles ItemContainer de algumas maneiras: como controles de caixa de seleção 'enriquecidos' para seleções de usuário e como controles aninhados dentro de um controle Repeater. Você também aprendeu como usar um elemento HTML <form> dentro de um aplicativo da Windows Store usando JavaScript.

Os controles ItemContainer também podem ser usados como alvos de arrastar e soltar. No entanto, este artigo não demonstra como fazer isso.

Para saber mais sobre como usar o controle Repeater, consulte Início rápido: adicionando controles repetidores.

Para saber mais sobre como criar a funcionalidade arrastar e soltar, consulte Como habilitar o reordenamento, arrastar e soltar na ListView.

Compartilhar via

Início rápido: Adicionando contêineres de item

Pré-requisitos

Resumo e próximas etapas

Recursos adicionais