Inicio rápido: agregar contenedores de elementos

Artículo
03/04/2016

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]

Aprende cómo agregar un objeto ItemContainer a la aplicación de la Tienda Windows con JavaScript. El ItemContainer crea un elemento simple interactivo sin mucho marcado HTML ni código JavaScript. Los elementos creados con este control tienen el mismo aspecto de Windows en las animaciones y las acciones de deslizar rápidamente, arrastrar y soltar y mantener el cursor.

En este artículo de inicio rápido, compilarás una sencilla presentación de datos de consumidor usando un control Repeater y un control ItemContainer. También aprenderás a crear un formulario de entrada de datos en una aplicación de la Tienda Windows con JavaScript usando un elemento HTML <form> que incorpora dos controles ItemContainer.

Requisitos previos

Crear un nuevo proyecto usando la plantilla Aplicación de navegación

Inicia Microsoft Visual Studio.
En la pestaña Página de inicio, haz clic en Nuevo proyecto. Se abre el cuadro de diálogo Nuevo proyecto.
En el panel Instalado, expande Plantillas y JavaScript, y haz clic en el tipo de plantilla Aplicación de la Tienda Windows. Las plantillas de proyecto disponibles para JavaScript se muestran en panel central del cuadro de diálogo.
En el panel central, selecciona la plantilla de proyecto Aplicación de navegación.
En el cuadro de texto Nombre, escribe ItemContainer demo.
Haz clic en Aceptar para crear el proyecto.

Agrega el HTML con los controles de ItemContainer

ItemContainer proporciona un control sólido y para varios propósitos que se usará cuando no sea adecuado usar otro control (por ejemplo, el control ListView). ItemContainer funciona bien como versión 'enriquecida' de un botón de alternancia. También se puede usar como destino para soltar, similar a la interfaz de usuario "carro de compra". Y, lo que es más importante, ItemContainer se puede usar junto con otros controles, sobre todo con Repeater. Puedes usar ItemContainer y Repeater juntos para enlazar datos dinámicos en ItemContainer.

ItemContainer se puede definir de manera declarativa en una página HTML o en tiempo de ejecución mediante JavaScript cargado con la página. Este ejemplo crea ItemContainer de manera declarativa en el marcado HTML, con un ejemplo hospedado dentro de un control Repeater.

Abre el archivo home.js (/pages/home/home.html) y agrega el siguiente marcado HTML.


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

Este marcado define dos partes de la interfaz de usuario dentro de la aplicación: un formulario de entrada de datos de clientes y una pantalla para los datos de clientes existentes. El formulario de entrada de datos de clientes contiene dos controles ItemContainer dentro de un elemento <form>, donde los controles ItemContainer actúan como controles de casilla enriquecidos. La sección de pantalla de datos de clientes contiene un objeto Repeater que incluye un ItemContainer para mostrar entradas de datos de clientes individuales.

Abre home.css (/pages/home/home.css) y agrega el siguiente 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 crea una cuadrícula que contiene la parte de entrada de datos de clientes y la parte de visualización de datos de clientes de la aplicación. El formulario de entrada de datos de clientes aparece en el lado izquierdo de la aplicación y la pantalla de datos de clientes aparece en el lado derecho.

Aplicar controladores de eventos de JavaScript en los controles

Esta aplicación toma la información introducida en el formulario y después la muestra en la lista de datos de clientes. Cuando se envía el formulario, los datos del formulario se convierten en un solo objeto de JavaScript. El objeto se agrega después a la lista de datos de clientes mostrados.

Haz clic con el botón derecho en la carpeta js y, después, haz clic en Agregar > Nuevo archivo JavaScript. En el cuadro de diálogo Agregar nuevo elemento, asigna el nombre data.js al archivo JavaScript y haz clic en Agregar. Agrega una referencia al nuevo script en default.html.
```
<script src='/js/data.js'></script>
```

Abre data.js (/js/data.js) y agrega el siguiente 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 un nuevo espacio de nombres, CustomerData, que expone dos miembros: Customer, un objeto para almacenar datos de clientes, y data, una List que almacena objetos Customer.

Abre home.js (/pages/home/home.js) y reemplaza el código existente por el siguiente.

(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 agrega controladores de eventos a los dos botones declarados en el elemento <form>. Al hacer clic en el botón Enviar, el código obtiene los datos del formulario de entrada de clientes, agrega un nuevo objeto Customer al origen de datos para el control Repeater y después vacía el formulario. El controlador de eventos aplicado al botón Restablecer borra la selección de los dos controles ItemContainer incluidos en el formulario.

Presiona F5 para ejecutar la muestra. Cuando se ejecute la aplicación, escribe datos en el formulario Entrada de clientes y haz clic en Enviar. Aparece un nuevo ItemContainer en la lista de clientes que muestra la información del cliente. Con la aplicación aún en funcionamiento, escribe más datos en el formulario y haz clic en Restablecer. El formulario se vacía y se quitan todas las selecciones de los dos controles ItemContainer del formulario.

Resumen y siguientes pasos

En este inicio rápido has aprendido a usar controles ItemContainer de dos maneras: como controles de casilla enriquecidos para las selecciones de usuarios y como controles anidados en un control Repeater. También has aprendido a usar un elemento HTML <form> en una aplicación de la Tienda Windows con JavaScript.

Los controles ItemContainer también se pueden usar como destinos para arrastrar y soltar. Sin embargo, en este artículo no se muestra cómo hacerlo.

Para obtener más información acerca del uso del control Repeater, consulta Inicio rápido: Agregar controles de repetición.

Para obtener más información acerca de cómo crear la funcionalidad de arrastrar y soltar, consulta Cómo habilitar funcionalidades para reordenar, arrastrar y colocar en un ListView.

Compartir a través de

Inicio rápido: agregar contenedores de elementos

Requisitos previos

Resumen y siguientes pasos

Recursos adicionales