В предыдущей ^[1] статье я рассказала о том, как создавать галерею изображений при помощи элемента управления FlipView. Сегодня мы рассмотрим элемент управления ListView, который позволяет не только отображать различные данные в виде списка, но и работать с ними – группировать, перетаскивать и переупорядочивать.

Для начала посмотрим, какие возможности для отображения данных доступны в элементе управления ListView. Если вы не знакомы с библиотекой WinJS, то можете почитать об элементах управления, входящих в библиотеку здесь ^[2].

Отображение и связывание данных в элементе управления ListView

Для того, чтобы добавить ListView, добавьте на страницу блок div с атрибутом «data-win-control», и присвойте ему значение WinJS.UI.ListView ^[3].

<div id="myListView" data-win-control="WinJS.UI.ListView"></div>

Для работы с ListView вам необходимо:

• Добавить источники данных
• Задать шаблон для отображения данных
• Определить макеты для отображения данных

Добавление источника данных

Для того, чтобы подготовить данные для добавления в элемент управления ListView, создайте массив:

(function () {
    "use strict";

    var myData = [
    { title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" },
    { title: "Banana blast", text: "Ice cream", picture: "images/60banana.png" },
    { title: "Brilliant banana", text: "Frozen custard", picture: "images/60banana.png" },
  ...
    ];

})();

Каждый из объектов имеет три свойства: заголовок, текст и изображение. В данном примере изображения хранятся локально. Составим из нашего массива объектов список Binding.List:

var dataList = new WinJS.Binding.List(myData);

Чтобы список был доступен глобально (это требуется для декларативного описания), не забываем создать пространство имен (в данном случае DataExample), которое предоставляет открытый элемент itemList, возвращающий список. Используя функцию WinJS.Namespace.define ^[4]:

 var publicMembers =
        {
            itemList: dataList 
        };
WinJS.Namespace.define("DataExample", publicMembers);

Функция WinJS.Namespace.define принимает два параметра: имя создаваемого пространства имен и объект, содержащий одну или несколько пар свойство-значение. Каждое свойство — это открытое имя элемента, а каждое значение — это базовая переменная, свойство или функция в вашем частном коде, к которым вы хотите открыть доступ.

Для того, чтобы добавить созданный список в элемент управления ListView, необходимо присвоить атрибуту «itemDataSource» значение DataExample.itemList.dataSource.

Не забудьте создать шаблон для отображения данных. О том, как создавать шаблон, вы можете почитать здесь ^[2].

На заметку: Для того, чтобы применить шаблон элемента, используйте синтаксис select для задания свойства itemTemplate ^[5] вашему шаблону элемента объекта ListView ^[3].
Помимо шаблона для каждого объекта в отдельности, вам необходимо определить один из доступных макетов шаблона для отображения данных элемента управления ListView.

Стандартные макеты для отображения данных элемента управления ListView

У элемента ListView ^[3] есть три стандартных макета для отображения данных — список, сетка и ячейка. Чтобы использовать один из макетов, добавьте для свойства layout ^[6] значение WinJS.UI.ListLayout ^[7], WinJS.UI.GridLayout< ^[8] или WinJS.UI.CellSpanningLayout ^[9]. Макеты WinJS.UI.ListLayout ^[7] WinJS.UI.GridLayout ^[8] используются для создания списка и сетки элементов, соответственно. Что касается макета WinJS.UI.CellSpanningLayout ^[9] – он предназначен для того, чтобы создавать сетку с несколькими различными размерами.

<div id="myListView"
         data-win-control="WinJS.UI.ListView"
         data-win-options="{ itemDataSource : DataExample.itemList.dataSource,
            itemTemplate: select('#mediumListIconTextTemplate'),
            layout: {type: WinJS.UI.GridLayout}}">
    </div>

Обратите внимание: Макет отображения в виде ячейки доступен только для Windows.

Аналогично для Windows:

Макет Список (ListLayout)

Макет Сетка (GridLayout)

Макет Ячейка (Макет CellSpanningLayout)

Стилизация элемента управления ListView

Дизайн элемента управления ListView очень легко менять. Для того, чтобы стилизовать элемент управления ListView, можно:

• Использовать WinJS.Binding.Template ^[10] для описания шаблона отдельного элемента
• Описать CSS стили для элементов ListView, к примеру:
  • win-listview задает стиль всего объекта ListView ^[3]
  • win-viewport задает стиль окна просмотра. Здесь при необходимости отображается полоса прокрутки
  • win-surface задает стиль прокручиваемой области ListView ^[3]. Если окно просмотра меньше прокручиваемой области, в нем появляются полосы прокрутки

С полным списком классов можно ознакомиться на ListView reference page ^[3].

Например, можно добавить фоновое изображение и рамку для элемента ListView:

#myListView .win-listview {
    background-image: url('../images/icecream.png'); 
    border: 2px solid red;
}

Отлично! Мы познакомились с элементом управления ListView, рассмотрели создание и добавление данных, а также посмотрели доступные макеты для отображения. Теперь научимся работать с элементами внутри ListView.

Изменение порядка элементов в списке ListView

Представьте, что у вас есть список данных, которые вы хотите каким-то образом переупорядочить, поменять строки списка местами. Давайте решим эту задачу.

В элементе управления Listview есть свойство itemsReorderable, которое позволяет менять элементы местами. Свойство itemsReorderable принимает два значения: true и false. В случае, если мы хотим разрешить перестановку элементов, присваиваем свойству itemsReorderable значение true.

Обратите внимание: Свойство itemsReorderable недоступно для Windows Phone.

Декларативное задание возможности переупорядочивания элементов

<div id="listView"
            class="win-selectionstylefilled"
            data-win-control="WinJS.UI.ListView"
            data-win-options="{ 
                itemDataSource: myData.dataSource, 
                itemTemplate: smallListIconTextTemplate,
                <B>itemsReorderable: true,</B>
                layout: { type: WinJS.UI.GridLayout } 
            }">
</div>

Программное задание возможности переупорядочивания элементов

(function () {

    // Получаем ссылку на элемент управления ListView
    var listView = 
        document.querySelector('#listView').winControl;

    // Присваиваем значение для itemsReorderable
    listView.itemsReorderable = true;

})();

Задачу работы со списком мы решили – теперь мы можем вручную переупорядочить элементы. А что же делать, если мы хотим каким-то образом сгруппировать их? Например, распределить их по группам, в зависимости от первой буквы названия элемента.

Группировка элементов в ListView

Рассмотрим пример группировки данных по первой букве названия каждого элемента. Для реализации группировки создайте версию вашего источника данных, которая будет содержать информацию о группировке элементов. Процесс группировки будет следующим: мы сначала отсортируем заголовки групп путем сравнения юникодов начальных букв в строке, а затем приведем заголовки всех групп к одному виду и создадим сами группы.

// Сравнение групп по ключам
    function compareGroups(leftKey, rightKey) {
        return leftKey.charCodeAt(0) - rightKey.charCodeAt(0);
    }
    // Определяем, ключ группы для элемента
    function getGroupKey(dataItem) {
        return dataItem.title.toUpperCase().charAt(0);
    }
    // Возвращаем заголовок для группы
    function getGroupData(dataItem) {
        return {
            title: dataItem.title.toUpperCase().charAt(0)
        };
    }
    // Создаем новые отсортированные группы 
    var groupedItemsList = itemsList.createGrouped(getGroupKey, getGroupData, compareGroups);

Мы научились распределять элементы по группам. А что же делать, если элементов и групп слишком много и перемещение по списку становится затруднительным? Для этого в библиотеке WinJS предусмотрен элемент управления Semantic Zoom.

Реализуем навигацию в ListView с помощью элемента управления SemanticZoom

Элемент управления SemanticZoom позволяет реализовать переключение между двумя различными представлениями элементов. Одно из этих представлений – непосредственно представление содержимого. Второе позволяет реализовать быструю навигацию между содержимым, например, отображать заголовки групп для быстрого доступа к содержимому каждой группы.

Для того, чтобы добавить элемент управления SemanticZoom, необходимо создать блок div и присвоить атрибуту data-win-control значение WinJS.UI.SemanticZoom.

<div data-win-control="WinJS.UI.SemanticZoom"></div>

Определите три шаблона для объектов ListView: один — для детализированного представления элементов, другой — для заголовков групп в детализированном представлении элементов, а третий — для заголовков групп в общем представлении. Также необходимо добавить 2 элемента управления ListView. Первый будет определять детализированное представление, а второй — общее представление.

Перейдем непосредственно к добавлению элемента управления SemanticZoom. Для этого просто добавьте в блок элемента управления SemanticZoom элементы управления ListView для детализированного и общего представления.

Обратите внимание на:

• Источники данных (itemDataSource)
• Шаблоны для отображения данных

<div id="semanticZoomDiv" data-win-control="WinJS.UI.SemanticZoom">   
            
    <!--- Детализированное представление. -->    
    <div id="zoomedInListView"
        data-win-control="WinJS.UI.ListView" 
        data-win-options="{ itemDataSource: myData.groupedItemsList.dataSource, itemTemplate: select('#mediumListIconTextTemplate'), groupHeaderTemplate: select('#headerTemplate'), groupDataSource: myData.groupedItemsList.groups.dataSource, selectionMode: 'none', tapBehavior: 'none', swipeBehavior: 'none' }"
    ></div>

    <!--- Общее представление. -->
    <div id="zoomedOutListView"
        data-win-control="WinJS.UI.ListView"
        data-win-options="{ itemDataSource: myData.groupedItemsList.<B>groups</B>.dataSource, itemTemplate: select('#semanticZoomTemplate'), selectionMode: 'none', tapBehavior: 'invoke', swipeBehavior: 'none' }"
    ></div>

</div>

Важно! Не забудьте определить собственные стили для общего представления.

С тем, какие возможности можно реализовать внутри одного списка в элементе управления ListView мы познакомились. Следующий этап – работа с несколькими списками, а именно – перемещение элементов из одного списка в другой.

Поддержка перетаскивания в элементе управления ListView

Представьте ситуацию, когда у вас есть два списка, и вы хотите переместить элементы из одного списка в другой. Для решения этой задачи вы можете воспользоваться операциями перетаскивания, доступными для элемента управления ListView. Эти операции совместимы с функцией перетаскивания в HTML5. Перетаскивание можно выполнять между двумя элементами управления ListView, между ItemContainer ^[11] и ListView, а также между любым элементом HTML и ListView. Можно позволить пользователю перетаскивать элементы на определенное место в ListView, а также можно управлять тем, куда вставляются перетаскиваемые элементы. Подробнее об обработке событий перетаскивания в HTML5 можно почитать здесь ^[12].

Обратите внимание: Перетаскивание элементов недоступно для Windows Phone.
Для того, чтобы разрешить перетаскивание элементов из ListView, обработаем его с помощью специальных событий перетаскивания, которые были добавлены в HTML5. Условно всю обработку перетаскивания элемента можно разбить на два шага:
Сохранение данных перетаскиваемого элемента в начале операции перетаскивания с помощью метода setData.
Извлечение ранее сохраненных данных после того, как перетаскиваемый элемент будет перемещен в принимающий его элемент с помощью метода getData.

Рассмотрим случай, при котором перетаскиваемый элемент добавляется в любое место списка. Обработаем события для перетаскивания элемента.

(function () {
    "use strict";
    var page = WinJS.UI.Pages.define("/html/drag.html", {
        ready: function (element, options) {
            var dragging = false;
// Обработка события начала перетаскивания
            myDragContent.addEventListener("dragstart", function (eventObject) {
                var dragData = { sourceId: myDragContent.id, data: myItemTitle.innerText, imgSrc: myImg.src };
// Сохранение данных перетаскиваемого элемента
                eventObject.dataTransfer.setData("Text", JSON.stringify(dragData));
// Разрешаем перетаскивание элемента
                dragging = true;
            });
// Обработка события конца перетаскивания
            myDragContent.addEventListener("dragend", function (eventObject) {
                dragging = false;
            });
// Обработка события, при котором перетаскиваемый элемент наведен на тот, который может его принять
            listView.addEventListener("itemdragenter", function (eventObject) {
                if (dragging && eventObject.detail.dataTransfer.types.contains("Text")) {
                    eventObject.preventDefault();
                }
            });
// Обработка события перетаскивания
            listView.addEventListener("itemdragdrop", function (eventObject) {
// Извлечение ранее сохраненных данных после перемещения элемента
var dragData = eventObject.detail.dataTransfer && JSON.parse(eventObject.detail.dataTransfer.getData("Text"));
                if (dragData && dragData.sourceId === myDragContent.id) {
                    var newItemData = { title: dragData.data, text: ("Dragged Item"), picture: dragData.imgSrc };
//Удаляем часть массива и добавляем новые элементы, присваиваем индекс добавленному элементу
                    myData.splice(eventObject.detail.insertAfterIndex + 1, 0, newItemData);
                }
            });
        }
    });
})();

Таким образом мы реализовали функцию перетаскивания элемента из одного списка в любое место другого списка. На скриншоте переносимый элемент выделен красным.

Итоги

Итак, мы познакомились с элементом управления ListView. Он предоставляет вам возможности работы с элементами списка. Мы рассмотрели различные макеты отображения данных, познакомились со способом реализации изменения порядка элементов в списке, а также с группировкой элементов по первой букве названия каждого элемента. На примере работы с двумя списками, мы реализовали возможность перетаскивания элементов из одного списка в другой. В качестве примера работы ListView с другими элементами управления была рассмотрена возможность реализации навигации при помощи элемента управления Semantic Zoom.

Дополнительные ссылки:

Краткое руководство: добавление элемента управления ListView (HTML) ^[13]
Краткое руководство: добавление элемента управления Semantic Zoom (HTML) ^[14]
Элементы управления (HTML с JavaScript) ^[15]
Creating a unique ListView layout using cell-spanning in HTML ^[16]
MVA курс по мобильной разработке для веб-разработчиков ^[17]
Скачать Microsoft Visual Studio можно здесь ^[18]

Автор: a_bogdanova

Источник ^[19]