What is a FlipView?
The FlipView control allows you to add multiple images. The user can navigate them by scrolling with the mouse wheel or using the arrows on either side of the control.
The FlipView is not limited to images though, you can add any XAML control to the FlipView. Therefore, you can make some really interesting things.
Where is best to use FlipViews
The most obvious way to use…
Давайте посмотрим, как создать галерею изображений, используя элемент управления FlipView из библиотеки WinJS. Мы будем делать галерею фотографий и коллекцию карточек товаров в интернет магазине в рамках универсального приложения для Windows и Windows Phone, а также рассмотрим использование библиотеки WinJS в вебе.
Создание простой галереи
У элемента управления FlipView есть два ключевых свойства - itemDataSource и itemTemplate. Свойство itemDataSource ссылается на источник данных IListDataSource, который можно создать при помощи WinJS.Binding.List, а свойство itemTemplate - на шаблон для данных ItemTemplate (WinJS.Binding.Template).
Для создания FlipView, вам нужно выполнить три простых действия:
1) Создать элемент управления FlipView.
2) Добавить источник данных.
3) Определить шаблон для отображения.
Создание FlipView
Для того, чтобы создать FlipView — элемент, необходимо добавить на страницу блок div с атрибутом «data-win-control», и присвоить ему значение WinJS.UI.FlipView:
<div data-win-control="WinJS.UI.FlipView"></div>
Добавление данных в элемент управления Flipview
Для добавления данных в элемент управления FlipView, вам нужно создать источник данных IListDataSource и определить шаблон WinJS.Binding.Template для каждой карточки. Вы можете воспользоваться объектом WinJS.Binding.List, а, при необходимости, создать свой источник данных. В качестве примера, посмотрим, как создать источник данных при помощи объекта WinJS.Binding.List. Для этого добавьте в JavaScript файл массив данных с несколькими свойствами. В данном примере это тип элемента, название и изображение.
var dataList = new WinJS.Binding.List([ { type: "item", title: "Горы", picture: "images/1.jpg" }, { type: "item", title: "Гроза", picture: "images/2.jpg" }, { type: "item", title: "Замок", picture: "images/3.jpg" }, … ]); // Делаем dataList видимым глобально WinJS.Namespace.define("DataExample", { itemList: dataList }); Для того, чтобы связать ваш список данных с элементом управления FlipView, используйте свойство itemDataSource: var flipView = document.getElementById("basicFlipView").winControl; flipView.itemDataSource = DataExample.itemList.dataSource;
Обратите внимание:
Можно объявить те же самые данные декларативно в HTML коде. Для этого внутри атрибута data-win-options присвойте свойству itemDataSource значение, равное DataExample.itemDataList.dataSource, в блоке div элемента управления FlipView.
Далее, для корректного отображения данных нужно задать шаблон WinJS.Binding.Template. Это можно сделать двумя способами: определить WinJS.Binding.Template с помощью ручной разметки или же реализовать функцию, которая сделает это автоматически. Посмотрим, как создать шаблон вручную.
Добавьте блок div и присвойте атрибуту data-win-control значение WinJS.Binding.Template, в него добавьте дополнительные классы с описанием разметки для каждого свойства элемента - типа элемента, названия и изображения.
Для того, чтобы применить шаблон элемента, внутри атрибута data-win-options присвойте свойству itemTemplate значение, равное ItemTemplate, в блоке div элемента управления FlipView.
Готово! У нас получилось создать галерею для отображения фотографий.
Стилизация FlipView
Элемент управления FlipView вы можете стилизовать с помощью шаблона WinJS.Binding.Template, а для кнопок навигации существует отдельный набор CSS классов.
Ниже дана схема компонентов элемента управления FlipView, к которым можно применить стили.
· .win-navbottom Задает стиль кнопки навигации вниз.
· .win-navbutton Задает стиль всех кнопок навигации.
· .win-navleft Задает стиль кнопки навигации влево.
· .win-navright Задает стиль кнопки навигации вправо.
· .win-navtop Задает стиль кнопки навигации вверх.
Например, для того, чтобы задать стиль правой кнопки навигации для элемента управления FlipView, нужно переопределить класс CSS win-navright.
Создание галереи для отображения товаров в интернет магазине
Мы уже познакомились с тем, как добавлять изображения в элемент управления FlipView. Давайте посмотрим, как создать галерею для отображения товаров в интернет магазине. Сделать это очень просто. Создайте файл с данными, где у каждого элемента будет четыре свойства – тип, картинка, название и описание. Основное изменение по сравнению с предыдущим шаблоном связано с определением CSS стилей.
Разделите экран на несколько частей – для этого определите для объекта overlaidItemTemplate свойство -ms-grid-rows. Обратите внимание, что для относительного позиционирования элементов в FlipView удобно использовать Grid Layout.
В своем примере я предпочла разделить экран на две равные части. На одной будет отображаться картинка с названием, на другой – описание товара. Для того, чтобы задать CSS стили нижней части экрана, я определила класс для .overlaidItemTemplate .ItemDescription. Все ограничивается только вашей фантазией! У меня, например, получился макет интернет магазина по продаже телевизоров.
Для того, чтобы сделать страницу, на которой элементы будут иди списком, просто добавьте в атрибут data-win-option свойство orientation со значением 'vertical'.
Вот такие настройки использовались для стилизации мини-магазина.
Давайте немного модифицируем задачу. Пусть теперь нам необходимо каким-то образом отметить некоторые товары, допустим, выделить новые модели. Разберемся с тем, как это сделать.
· Добавляем в массив данных новое свойство - isNew, принимающее значение true или false в зависимости от того, является товар «новым» или нет:
Очень часто элементы управления, аналогичные FlipView, используются на страницах веб-сайтов для того, чтобы реализовать с отображение текущей позиции и навигации по элементам. Посмотрим, как сделать тоже самое при помощи FlipView.
В элементе управления FlipView есть методы и события, которые дают пользователю представление о текущей позиции в галерее и об общем количестве элементов. Давайте добавим кнопки, с помощью которых можно реализовать возможность перехода к любому элементу. Синхронизация кнопок переключения с FlipView поддерживается с помощью событий pageselected и pagevisibilitychanged.
Вам нужно описать события нажатия на кнопку и перелистывания страницы в javascript файле вашего проекта. Общий план такой:
1. Создание элемента управления переключением страниц.
2. Создание кнопок переключения между страницами и добавление событий нажатия на кнопку.
3. Определение начала переключения страницы и блокировка последующих переключений до завершения перемещения на соседнюю страницу.
4. Описание события переключения страницы.
5. Добавление созданного элемента управления в DOM.
Полный код реализации навигации по элементу управления FlipView смотрите здесь:
(function () { "use strict"; var myFlipview = null; var page = WinJS.UI.Pages.define("default.html", { processed: function (element, options) { myFlipview = document.getElementById("contextControl_FlipView").winControl; myFlipview.count().done(countRetrieved); } }); function countRetrieved(count) { // 1) Создаем элемент управления переключением страниц var contextControl = document.createElement("div"); contextControl.className = "contextControl"; var isFlipping = false; // 2) Создаем radio кнопки для каждой страницы в FlipView и добавляем «флаг» var radioButtons = []; for (var i = 0; i < count; ++i) { // Создаем radio-кнопку var radioButton = document.createElement("input"); radioButton.setAttribute("type", "radio"); // Задаем имя для группы radio кнопок radioButton.setAttribute("name", "flipperContextGroup"); // Присваиваем каждой кнопке номер страницы radioButton.setAttribute("value", i); // Установка маркера доступности radioButton.setAttribute("aria-label", (i + 1) + " of " + count); // Добавлем обработчик события radioButton.onclick = radioButtonClicked; // Добавляем кнопки в нашу коллекцию radioButtons.push(radioButton); // Добавляем кнопки в элемент управления переключением страниц contextControl.appendChild(radioButton); } // 3) Устанавливаем связь между выбранным элементом и элементом, на котором //находится FlipView if (count > 0) { radioButtons[myFlipview.currentPage].checked = true; } // 4) Описываем события для radio кнопок function radioButtonClicked(eventObject) { if (isFlipping) { var currentPage = myFlipview.currentPage; radioButtons[currentPage].checked = true; } else { var targetPage = eventObject.srcElement.getAttribute("value"); myFlipview.currentPage = parseInt(targetPage, 10); } } // 5) Определяем начало переключения страницы для того, чтобы предотвратить // переключения страницы до завершения предыдущего переключения myFlipview.addEventListener("pagevisibilitychanged", function (eventObject) { if (eventObject.detail.visible === true) { isFlipping = true; } }, false); // 6) Подсвечиваем элемент, на котором мы находимся myFlipview.addEventListener("pageselected", function () { // Перемещение закончено, «опускаем» флаг isFlipping = false; // Устанавливаем выбранную страницу var currentPage = myFlipview.currentPage; radioButtons[currentPage].checked = true; }, false); // 7) Добавляем элемент управления в DOM var contextContainer = document.getElementById("ContextContainer"); contextContainer.appendChild(contextControl); } })();
Обратите внимание, что для стилизации кнопок переключения будем использовать radio кнопки. Для того, чтобы сделать симпатичные круглые кнопки, достаточно задать CSS свойство border-radius и указать, насколько процентов мы хотим закруглить края (по умолчанию radio кнопки прямоугольные)
WinJS доступен для веб-проектов в виде открытой библиотеки, а также вы можете его использовать на своих веб-страницах. Вы можете посмотреть, как выглядит элемент управления FlipView в вебе, просто перейдя по этой ссылке.
Обратите внимание на третий пример с использованием динамичного шаблона. Такую возможность мы рассмотрим в одной из следующих статей.
Дополнительные ссылки:
Краткое руководство: добавление элемента управления FlipView (HTML)
Пример использования элемента управления FlipView, написанный на HTML
Microsoft updates Windows Phone App Studio with Fast Resume, FlipView, NFC, native phone functions, and Ad SDK
Microsoft today updated the Windows Phone App Studio, its free Web-based tool designed to help anyone create an app without coding. This release, which is still in beta, improves development workflow, adds various new features, and integrates the Windows Phone …
Read this limk on the original site »
The limk Microsoft updates Windows Phone App Studio with Fast Resume, FlipView, NFC, native phone functions, and Ad SDK appeared first on Limk.
