Краткое руководство: добавление контейнеров элементов

Статья
03/04/2016

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. В случае разработки приложений для Windows 10 см. раздел последняя документация]

Сведения о том, как добавить объект ItemContainer в приложение Магазина Windows на JavaScript. Объект ItemContainer создает простой интерактивный элемент, не требуя большого объема разметки HTML или кода JavaScript. Элементы, созданные с помощью этого объекта, соответствуют стилю и функциям Windows в анимации, прокрутке, перетаскивании и наведении.

В этом кратком руководстве будет продемонстрировано создание простого раздела для отображения данных о клиентах при помощи элементов управления Repeater и ItemContainer. Вы также научитесь создавать форму ввода данных в приложении Магазина Windows на JavaScript при помощи элемента HTML <form>, содержащего два элемента управления ItemContainer.

Необходимые условия

Создание нового проекта с помощью шаблона "Приложение навигации"

Запустите Microsoft Visual Studio.
На вкладке Начальная страница выберите команду Создать проект. Откроется диалоговое окно Создание проекта.
На панели Installed (Установлено) разверните узлы Templates (Шаблоны) и JavaScript, а затем выберите шаблон Windows Store app (Приложение Магазина Windows). Шаблоны проектов для JavaScript отображаются на центральной панели диалогового окна.
На центральной панели выберите шаблон проекта Приложение навигации.
В текстовом поле Имя введите ItemContainer demo.
Чтобы создать проект, нажмите кнопку ОК.

Добавление HTML с использованием элементов управления ItemContainer

ItemContainer предоставляет эффективный универсальный элемент управления, который можно использовать в тех случаях, когда другой элемент управления (например, ListView) не годится. Объект ItemContainer работает как расширенная версия выключателя. Его также можно использовать как цель перетаскивания, аналогично пользовательскому интерфейсу корзины для покупок. Что более важно, ItemContainer можно применять в сочетании с другими элементами управления, прежде всего с Repeater. Вы можете использовать ItemContainer и Repeater вместе, чтобы привязать динамические данные к ItemContainer.

Элемент управления ItemContainer можно определить либо декларативно на HTML-странице, либо во время выполнения в файле JavaScript, загружаемом со страницей. В данном примере ItemContainer создается декларативно в разметке HTML, с одним примером размещения в элементе управления Repeater.

Откройте файл home.js (/pages/home/home.html) и добавьте в него следующую разметку 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>

Эта разметка определяет две части пользовательского интерфейса в приложении: форму ввода данных о клиентах и окно для отображения существующих данных о клиентах. Форма ввода данных о клиентах содержит два элемента управления ItemContainer в <form>, где элементы управления ItemContainer функционируют как расширенные версии флажков. Раздел отображения данных о клиентах содержит объект Repeater, который включает ItemContainer для отображения отдельных записей.

Откройте файл home.css (/pages/home/home.css) и добавьте в него следующий код.


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

В результате применения этого стиля в приложении будет создана сетка из двух частей для размещения формы ввода данных о клиентах и раздела отображения этих данных. Форма ввода данных о клиентах отображается в левой части приложения, а окно отображения данных — в правой.

Применение обработчиков событий JavaScript к элементам управления

Это приложение использует данные, введенные в форму, а затем отображает их в списке данных о клиентах. После отправки формы данные из нее преобразуются в один объект JavaScript. Затем этот объект добавляется в список отображаемых данных о клиентах.

Щелкните правой кнопкой мыши папку js и выберите пункты Добавить > Новый файл JavaScript. В диалоговом окне Добавление нового элемента присвойте этому файлу имя data.js и нажмите кнопку Добавить. Добавьте ссылку на новый сценарий в файле default.html.
```
<script src='/js/data.js'></script>
```

Откройте файл data.js (/js/data.js) и добавьте в него следующий код.

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

Этот код определяет новое пространство имен CustomerData, которое предоставляет два члена: Customer, объект для хранения данных о клиентах, и data — List для хранения объектов Customer.

Откройте файл home.js (/pages/home/home.js) и замените имеющийся код следующим.

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

Этот код добавляет обработчики событий для двух кнопок, объявленных в элементе <form>. При нажатии кнопки Отправить код получает данные из формы ввода данных о клиентах, добавляет новый объект Customer в источник данных для элемента управления Repeater и затем очищает форму. Обработчик событий, применяемый к кнопке Сброс, отменяет выбор двух элементов управления ItemContainer в форме.

Чтобы запустить пример, нажмите клавишу F5. Когда приложение запустится, введите данные в форму ввода данных о клиенте и нажмите кнопку Отправить. В разделе Список клиентов появится новый объект ItemContainer, отображающий информацию о данном клиенте. Не закрывая приложение, введите дополнительные данные в форму и нажмите кнопку Сброс. Форма будет очищена, и все выбранные параметры будут удалены из двух элементов управления ItemContainer в форме.

Краткая сводка и дальнейшие действия

При помощи данного краткого руководства вы научились использовать элементы управления ItemContainer двумя способами: как расширенные версии флажков для пользовательского выбора и как вложенные элементы управления в Repeater. Вы также научились использовать элемент HTML <form> в приложении Магазина Windows на JavaScript.

Элементы управления ItemContainer можно также применять в качестве целей перетаскивания. В данной статье эта тема не рассматривается.

Подробнее об использовании элемента управления Repeater см. в разделе Краткое руководство: добавление элементов управления "Повторение".

Подробнее о реализации функции перетаскивания см. в разделе Добавление переупорядочения и перетаскивания в ListView.

Поделиться через

Краткое руководство: добавление контейнеров элементов

Необходимые условия

Краткая сводка и дальнейшие действия

Дополнительные ресурсы