#winjs

Основные шаблоны навигации

Плоский шаблон

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

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

Посмотрим, как реализовать плоский шаблон в приложении Windows.

Навигация в Windows приложениях при помощи панели навигации

Реализовать плоский шаблон в приложении вы можете при помощи элементов управления NavBar, NavBarCommand и NavBarContainer, которые являются частью библиотеки WinJS.

Создайте пустое приложение Windows в Visual Studio и не забудьте добавить ссылки на библиотеку WinJS. Если вы не знакомы с WinJS, можете прочитать основную информацию об этой библиотеке здесь.

Для примера, посмотрим, как создать панель навигации с двумя страницами. В основной html файл вашего приложения добавьте блок div и атрибуту data-win-control присвойте значение WinJS.UI.NavBar. Внутри этого блока определите объект NavBarContainer с элементами управления NavBarCommand.

<div id="navBar" data-win-control="WinJS.UI.NavBar"> <div id="globalNav" data-win-control="WinJS.UI.NavBarContainer"> <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Home', tooltip: 'Take me home', id:'homeButton', icon: WinJS.UI.AppBarIcon.home, location: '/pages/home/home.html', }"> </div> … </div> </div>

Обратите внимание: для каждого элемента управления NavBarCommand мы задаем его название, подсказку, которая отображается при наведении на элемент, иконку кнопки - WinJS.UI.AppBarIcon и адрес страницы, на которую будет осуществлен переход при нажатии на кнопку.

Также нам необходимо добавить код обработки событий Navigation.onnavigating и Navigation.onnavigated. Приведем пример кода обработки события Navigation.onnavigated. Обработчик получает URL-адрес расположения, куда выполняется переход, от объекта события (определенного в свойстве location атрибута data-win-options объекта NavBarCommand). Затем обработчик очищает узел содержимого (элемент управления страницей) и отрисовывает новую страницу в узле.

nav.onnavigated = function (evt) { var contentHost = document.body.querySelector("#contenthost"), url = evt.detail.location; // Очищение элемента управления страницей WinJS.Utilities.empty(contentHost); // Оторбражение новой страницы в узле WinJS.UI.Pages.render(url, contentHost); }

Иерархический шаблон

Этот шаблон используется, когда содержимое приложения можно представить в виде отдельных, но взаимосвязанных разделов или категорий с разным уровнем детализации. Также удобно применять его, если в приложении содержится структурированное содержимое.

При использовании иерархического шаблона, в приложении создается начальная страница – концентратор, а также разделы, элементы и сведения. На начальной странице представлены все основные возможности и компоненты приложения. Вторым уровнем приложения является страница (страницы) разделов приложения. На страницах разделов отображаются образцы, сводка или краткий обзор элементов, связанных с разделом. Каждый элемент страницы имеет ссылку на страницу сведений, являющеюся третьим уровнем приложений. На странице сведений отображается большая часть содержимого или функций для конкретного элемента, выбранного на страницах предыдущих уровней – концентратора и раздела.

Реализовать иерархический шаблон можно при помощи элемента управления Hub, являющегося элементом управления библиотеки WinJS.

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

Навигация в Windows приложениях при помощи элемента управления Hub

Создайте проект, в котором будет содержаться 3 страницы – html, js, css. На странице html определите элемент управления Hub и несколько главных разделов – объекты HubSection. Если вы не знакомы с тем, как добавлять элементы управления библиотеки WinJS, ознакомьтесь с инструкцией. Свойство элемента управления Hub - sectionOnScreen определяет индекс первой видимой вкладки. Дополнительно воспользуемся следующими свойствами объекта HubSection – свойством header, при помощи которого задается заголовок раздела и свойством isHeaderStatic, которое определяет, является заголовок статическим или динамическим.

<div data-win-control="WinJS.UI.Hub" id="hub" data-win-options="{ sectionOnScreen : '1', }"> <div data-win-control="WinJS.UI.HubSection" data-win-options="{ header: 'Ancient Greek authors', isHeaderStatic: true }"> </div> </div> 

После добавления объектов Hub и HubSection нам необходимо инициализировать их. Обратите внимание, что если какие-то из объектов имеют динамические заголовки, то необходимо обработать событие Hub.onheaderinvoked. Обработчик получает индекс вызванного объекта HubSection и устанавливает значение Hub.sectionOnScreen.

// Получаем индекс вызванного объекта // обрабатываем событие headerInvoked hub = WinJS.Utilities.query("#hub")[0]; hub.winControl.onheaderinvoked = onHeaderInvoked; }; app.oncheckpoint = function (args) { }; // Обработка события нажатия на заголовок секции // делаем секцию полностью видимой. function onHeaderInvoked(args) { hub.winControl.sectionOnScreen = args.detail.index; }

Можно добавить дополнительные элементы управления, например, кнопку BackButton и определить стили страницы.

Навигация в Windows приложениях при помощи элемента управления Pivot

Элемент управления Pivot позволяет реализовать простой способ управления, представления и быстрой навигации по разделам содержимого в вашем приложении путем сдвига влево или вправо — непрерывным вращением подобно карусели. Его можно использовать для фильтрации больших наборов данных, просмотра нескольких наборов данных или переключения между представлениями приложения.

Поддержка элемента управления Pivot в приложениях Windows была анонсирована в качестве новой функции библиотеки WinJS 3.0. На момент написания статьи библиотеку WinJS 3.0 можно собрать самостоятельно при помощи диспетчера пакетов (Bower, npm, или NuGet), с помощью CDN ссылки, загружая zip архив с нашего веб сайта или копируя репозиторий для сборки собственной копии с GitHub’а. О том, как работать с элементом управления Pivot в Windows Phone, я рассказывала в этой статье, разница для приложений Windows – в ссылках на библиотеку и в определении стилей для устройств.

Обратите внимание: на GitHub'e вы можете найти все файлы библиотеки WinJS.

Для сборки библиотеки установите git и Node.js. После установки этих пакетов, не забудьте перезагрузить компьютер.

Запустите git и в командную строку вставьте следующий код:

git clone https://github.com/winjs/winjs.git

Далее, вам необходимо изменить директорию winjs. Пишем следующее:

cd winjs

Затем устанавливаем интерфейс командной строки grunt глобально:

npm install -g grunt-cli

и и последовательно выполняем эти команды

1) npm install 2) grunt

Библиотека собрана! Ее файлы располагаются по адресу: C:\Users\your_user_name\winjs

Как вставить собранную библиотеку в проект

Откройте свой JavaScript проект в Visual Studio и в Solution Explorer’e добавьте новую папку, которая и будет содержать файлы библиотеки.

В ней, в свою очередь, создайте еще 3 папки – css, fonts, js. В них добавьте файлы из папки C:\Users\your_user_name\winjs\bin.

В html файл вашего проекта добавьте ссылки на только что добавленные файлы:

<link href="/WinJS/css/ui-dark.css" rel="stylesheet"/> <script src="/WinJS/js/base.js"></script> <script src="/WinJS/js/ui.js"></script>

Готово! Теперь можно добавлять элементы управления и запускать приложение!

У меня получилось добавить элемент управления Pivot в Windows приложение (в предыдущих библиотеках он был не доступен).

Основные элементы управления, входящие в библиотеку WinJS

AppBar Панель приложения с набором команд.

BackButton Кнопка «Назад» для перехода к предыдущему экрану. В Windows Phone имеет встроенную аппаратную или программную реализацию.

DatePicker Элемент управления для выбора даты. Позволяет выбрать месяц, день и год.

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

Flyout Элемент управления Flyout используется для отображения всплывающего окна на странице. Его можно также применять для вывода различных предупреждений, сообщений.

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

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

NavBar Тип панели приложения AppBar, отображающий команды навигации.

Rating Позволяет вводить и отображать поставленные оценки. По умолчанию можно выставлять оценки от 1 до 5 посредством выбора соответствующего количества звезд.

Repeater Формирует HTML-код на основе набора данных и шаблона. По сути – простой список без дополнительно функциональности ListView.

SearchBox Позволяет выполнять поисковые запросы и выбирать предлагаемые варианты.

SemanticZoom Позволяет пользователям переключаться между двумя видами с разным масштабом, предоставляемыми дочерними элементами управления. Один дочерний элемент управления предоставляет вид с уменьшенным масштабом, другой — вид с увеличенным масштабом.

TimePicker Позволяет пользователям выбрать время. Позволяет выбрать часы, минуты и время суток (AM/PM)

ToggleSwitch Является аналогом элемента checkbox в HTML. Включает или отключает элемент.

Tooltip Отображает подсказку с поддержкой форматированного содержимого (например, изображения и форматированный текст), чтобы предоставить больше информации об объекте.

x-ms-webview Отображает HTML-содержимое. С помощью этого элемента управления можно отображать веб-страницы приложения.

Список всех доступных элементов управления можно найти здесь. С основными элементами управления мы познакомились, теперь пришло время разобраться с тем, как подключить библиотеку WinJS и добавить элементы управления в приложение.

Как подключить библиотеку WinJS

Для того, чтобы подключить библиотеку WinJS, достаточно указать на нее 3 ссылки в главном HTML файле приложения.

Ссылки на библиотеку для Windows:

<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet"> <script src="//Microsoft.WinJS.2.0/js/base.js"></script> <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

Ссылки на библиотеку для Windows Phone: <link href="/css/ui-themed.css" rel="stylesheet"/> <script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script> <script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>

Обратите внимание: Ссылки на WinJS для Windows и Windows Phone приложений различаются, в том числе версией. Одна из ссылок, которую нужно указывать в HTML файле определяет тему, которая будет использоваться в приложении. В состав библиотеки WinJS для Windows включены две темы оформления – темная (ui-dark.css) и светлая (ui-light.css). Вам необходимо выбрать тему для своего приложения вручную. В случае работы с Windows Phone, Вы можете предоставить выбор пользователю, указав ui-themed, или явно задав тему аналогично подходу в Windows.

Как добавить элемент управления в приложение

Все элементы управления в библиотеке WinJS задаются через атрибут data-win-control с нужным значением (WinJS.UI.****) в соответствующем элементе разметки. Например, чтобы добавить FlipView, присвойте атрибуту data-win-control значение WinJS.UI.FlipView.

<div id="basicFlipView" data-win-control="WinJS.UI.FlipView"></div>

Библиотека WinJS автоматически создаст на базе этого блока элемент с необходимыми стилями и разметкой. Также, через атрибут data-win-options в разметке можно указать параметры создания элемента.

<div id="basicFlipView" data-win-control="WinJS.UI.FlipView" data-win-options="{…}"></div>

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

Как добавить данные в элемент управления

За определение данных, которые хранятся в элементе управления, отвечает свойство itemDataSource. Для того, чтобы указать, какие данные будут использоваться, присваиваем атрибуту data-win-options значение itemDataSource.

<div data-win-control="WinJS.UI.FlipView" data-win-options="{ itemDataSource : value}"> </div>

К примеру, если для работы элемента управления требуются картинки, то для их представления можно использовать объект WinJS.Binding.List. Обратите внимание, что при декларативном описании переменная с данными должна быть видна в глобальном контексте. Для корректного отображения данных необходимо определить шаблон. Посмотрим, как это сделать.

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

Для того, чтобы определить, как будут отображаться данные, задайте шаблон WinJS.Binding.Template для каждого элемента. Создайте блок div и присвойте атрибуту data-win-control значение WinJS.Binding.Template. Например, определим шаблон для отображения картинки с заголовком.

<div id="Template" data-win-control="WinJS.Binding.Template"> <!—- Задаем шаблон для отображения картинки. --> <img data-win-bind="alt: title; src: picture" /> <div> <!-- Задаем шаблон для отображения заголовка. --> <h4 data-win-bind="innerText: title"></h4> </div> </div>

Обратите внимание, что мы определяем привязку данных при помощи атрибута data-win-bind.

Инициализация WinJS.UI.

Итак, мы научились создавать элементы управления, теперь нам нужно разобраться с тем, как их инициализировать. После того, как приложение запущено, наступает событие activated. После этого можно инициализировать элементы управления WinJS. Это происходит внутри функции WinJS.UI.processAll. В самом простом случае функция обработки запуска приложения выглядит следующим образом:

(function () { "use strict"; var app = WinJS.Application; app.addEventListener("activated", function (args) { WinJS.UI.processAll(); }); app.start(); })();

Если вы хотите обработать только конкретный DOM-узел, то используйте функцию WinJS.UI.process. Также вы можете создавать элементы управления напрямую в коде на JavaScript, используя соответствующие объекты из WinJS.UI.*.

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

Кроссплатформенные возможности и улучшения дизайна

Последние пять месяцев команда WinJS была сосредоточена на том, чтобы библиотека без проблем работала на различных платформах и браузерах. Это означает, что теперь вы можете использовать WinJS не только для ваших универсальных Windows-приложений, но также для ваших веб сайтов и при создании мобильных приложений, основанных на HTML, при помощи различных платформ, использующих технологии, аналогичные Apache Cordova. Смотрите полную таблицу браузеров и операционных систем, поддерживаемых библиотекой WinJS. Основное, на чем мы акцентируем внимание в релизе 3.0 — улучшение кросс-платформенной инфраструктуры для композиции интерфейса, работы с клавиатурой, локализации строк и поддержки языков, которые пишутся справа налево, а также на исчерпывающем наборе юнит-тестов, работающих на наших компонентах для основных операционных систем и браузеров; на обновлении дизайна для стандартных элементов управления WinJS и встроенных элементов управления HTML, обеспечивая единый пользовательский интерфейс на многих платформах и браузерах.

Обновления дизайна

Добавление в репозиторий WinJS шрифта, содержащего символы, используемые в AppBar, NavBar, FlipView, Ratings, Hub, и SearchBox; так что теперь они отображаются на многих операционных системах и браузерах. Например, вот как выглядит элемент управления Ratings:

ListView теперь поддерживает шаблоны Grid и List на всех платформах. Зависимость шаблона от CSS Grid была убрана, таким образом теперь поддерживается ListView с группировкой элементов.

AppBar теперь имеет визуальное представление для скрытия и вызова панели, благодаря этому панель больше на зависит только от жестов с краев.

Кнопки навигации по FlipView всегда отображаются на платформах, которые не поддерживают точки привязки прокрутки в CSS.

Элементы управления диапазоном ввода (Input range), встроенный элемент управления HTML — слайдер, и другие встроенные элементы управления получили обновление внешнего вида на разных платформах.

После того, как была убрана зависимость от CSS Grid, у элемента управления NavBar обновилась композиция интерфейса.

Поисковые подсказки в элементе управления Searchbox стали отображаться на различных платформах (после того, как была создана прослойка для поддержки API подсказок).

Элемент управления Toggle switch больше не зависит от встроенного HTML слайдера и является полнофункциональным и визуально привлекательным на всех платформах.

 Теперь у элемента управления Pivot есть кнопки по обе стороны от заголовка, поэтому его можно использовать при помощи мыши. Также он красиво отображается на экранах всех размеров (раньше он отображался только на небольших экранах мобильных телефонов).

Модульность

Теперь WinJS 3.0 разделена на несколько десятков модулей. Вы можете продолжить использовать библиотеку со всеми модулями, как в раньше или вы можете сделать кастомную сборку WinJS только с теми модулями, которые вам нужны. Это дает вам возможность контроля над оптимизации вашей производительности и размером загружаемых ресурсов. Это особенно удобно при использовании WinJS для веб-сайта или при использовании ее вместе с другими популярными библиотеками, как AngularJS или Knockout. WinJS была разработана с нуля для того, чтобы иметь хорошую внутреннюю архитектуру и совместимость с другими библиотеками. Теперь легко делать такие сборки WinJS, которые будут включать только те слои, которые вы используете. Например, если вы хотите использовать только AppBar в вашем приложении, вы можете сделать кастомную сборку WinJS, которая будет содержать подходящие модули для Appbar, исключая всю остальную библиотеку WinJS, а, затем, использовать ее вместе с библиотекой вроде Knockout, включая связывание данных. Инструкцию по сборке кастомной библиотеки WinJS смотрите на вики-странице на GitHub'е. Мы сделали нашу собственную сборку для того, чтобы улучшить быстродействие сайта try.buildwinjs.com. В таблице ниже представлены данные о некоторых кастомных сборках, которые вы можете сделать, а также соответствующие размеры JavaScript кода

Улучшенный дизайн универсальных элементов управления

В дополнении к кроссплатформенным изменениям, мы начали процесс объединения нашей библиотеки. Таким образом, телефоны, планшеты и компьютеры будут поддерживаться одним единственным релизом WinJS. Для достижения этой цели, анимации, которые до этого были доступны только для телефона, сейчас доступны для всех форм-факторов в WinJS 3.0. Элемент управления Pivot, ранее доступный только на телефоне, теперь также поддерживается на всех форм-факторах. Он был усовершенствован таким образом, что им можно управлять при помощи мыши и клавиатуры, а также масштабировать на все размеры экранов. Оставайтесь с нами для того, чтобы быть в курсе дальнейших улучшений в этом направлении!

Двигаясь вперед

Члены команды проекта WinJS MS Open Tech хотят искренне поблагодарить за теплый прием, который мы получили от GitHub сообщества, а также за проявленный интерес и поддержку. Вместе мы можем продолжать собирать WinJS как большую открытую JavaScript библиотеку, которая приспосабливается к нуждам веб разработчиков по всему миру и помогает всем нам создать восхитительную, основанную на опыте пользователей библиотеку, которая может совместно использовать код между сайтами и приложениями. Мы призываем вас присылать pull запросы и проблемы с файлами через GitHub или при помощи ссылок «задать вопрос» на нашем сайте. Проверяйте нашу страницу в фейсбуке и подписывайтесь на нас в твиттере @buildwinjs, там мы размещаем крупные анонсы о нашем проекте.

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

WinJS на GitHub'е. Основные элементы управления библиотеки WinJS здесь. Протестируйте основные элементы управления на сайте try.buildwinjs.com. Про использование FlipView в универсальных приложениях можно почитать тут. MVA курс по мобильной разработке для веб-разработчиков. Скачать Microsoft Visual Studio можно здесь.

  Создание простой галереи

  У элемента управления 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.

<div id="basicFlipView" data-win-control="WinJS.UI.FlipView" data-win-options="{ itemDataSource : DataExample.itemList.dataSource }"></div>

Создание шаблона для отображения данных

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

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

<div id="ItemTemplate" data-win-control="WinJS.Binding.Template"> <div class="overlaidItemTemplate"> <img class="image" src="#" data-win-bind="src: picture; alt: title" /> <div class="overlay"> <h2 class="ItemTitle" data-win-bind="innerText: title"></h2> </div> </div> </div>

Для того, чтобы применить шаблон элемента, внутри атрибута data-win-options присвойте свойству itemTemplate значение, равное ItemTemplate, в блоке div элемента управления FlipView.

<div id="basicFlipView" data-win-control="WinJS.UI.FlipView" data-win-options="{ itemDataSource : DataExample.itemList.dataSource, itemTemplate : ItemTemplate }"></div>

Готово! У нас получилось создать галерею для отображения фотографий.

  Стилизация FlipView

  Элемент управления FlipView вы можете стилизовать с помощью шаблона WinJS.Binding.Template, а для кнопок навигации существует отдельный набор CSS классов.

Ниже дана схема компонентов элемента управления FlipView, к которым можно применить стили.

· .win-navbottom Задает стиль кнопки навигации вниз.

· .win-navbutton Задает стиль всех кнопок навигации.

· .win-navleft Задает стиль кнопки навигации влево.

· .win-navright Задает стиль кнопки навигации вправо.

· .win-navtop Задает стиль кнопки навигации вверх.

Например, для того, чтобы задать стиль правой кнопки навигации для элемента управления FlipView, нужно переопределить класс CSS win-navright.

.win-flipview .win-navright { background-color: rgba(0,0,255, 0.8); width: 50px; height: 650px; margin-left: -50px; margin-top: -402px; margin-right: 10px; }

Создание галереи для отображения товаров в интернет магазине

  Мы уже познакомились с тем, как добавлять изображения в элемент управления FlipView. Давайте посмотрим, как создать галерею для отображения товаров в интернет магазине. Сделать это очень просто. Создайте файл с данными, где у каждого элемента будет четыре свойства – тип, картинка, название и описание. Основное изменение по сравнению с предыдущим шаблоном связано с определением CSS стилей.

Разделите экран на несколько частей – для этого определите для объекта overlaidItemTemplate свойство -ms-grid-rows. Обратите внимание, что для относительного позиционирования элементов в FlipView удобно использовать Grid Layout.

В своем примере я предпочла разделить экран на две равные части. На одной будет отображаться картинка с названием, на другой – описание товара. Для того, чтобы задать CSS стили нижней части экрана, я определила класс для .overlaidItemTemplate .ItemDescription. Все ограничивается только вашей фантазией! У меня, например, получился макет интернет магазина по продаже телевизоров.

Для того, чтобы сделать страницу, на которой элементы будут иди списком, просто добавьте в атрибут data-win-option свойство orientation со значением 'vertical'.

Вот такие настройки использовались для стилизации мини-магазина.

/*CSS стили для всего шаблона*/ .overlaidItemTemplate { display: -ms-grid; -ms-grid-columns: 1fr; -ms-grid-rows: 1fr 1fr; width: 100%; height: 100%; } /*CSS стили для нижней части шаблона */ .overlaidItemTemplate .ItemDescription { color: black; font-family: 'Segoe UI Mono'; font-size: 15pt; padding-top: 8px; padding-left: 8px; -ms-grid-row-align: stretch; background-color: rgba(255, 255, 255, 0.4863); background-position-y: 50%; position: relative; z-index: 2; -ms-grid-row: 2; }

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

· Добавляем в массив данных новое свойство - isNew, принимающее значение true или false в зависимости от того, является товар «новым» или нет:

var dataArray = [ { type: "item", title: "Feel", picture: "images/Cliff.jpg", description: "Тип экрана", isNew: true }, … { type: "item", title: "Grape", picture: "images/Grapes.jpg", description: "Тип экрана", isNew: false }, ];

· Используя WinJS.Binding.converter, создаем конвертер, при помощи которого мы добавляем поверх значок со стикером.

var converters = { convertToPic: WinJS.Binding.converter(function(showSticker) { if (showSticker) return '/images/star.png'; else return ""; }) }; WinJS.Namespace.define("Data", {"Converters": converters });

· Вставляем изображение в шаблон

<div class="imageBackgroundnew"><img data-win-bind="src: isNew Data.Converters. convertToPic" /></div>

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

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

В элементе управления FlipView есть методы и события, которые дают пользователю представление о текущей позиции в галерее и об общем количестве элементов. Давайте добавим кнопки, с помощью которых можно реализовать возможность перехода к любому элементу. Синхронизация кнопок переключения с FlipView поддерживается с помощью событий pageselected и pagevisibilitychanged.

Вам нужно описать события нажатия на кнопку и перелистывания страницы в javascript файле вашего проекта. Общий план такой:

1. Создание элемента управления переключением страниц.

2. Создание кнопок переключения между страницами и добавление событий нажатия на кнопку.

3. Определение начала переключения страницы и блокировка последующих переключений до завершения перемещения на соседнюю страницу.

4. Описание события переключения страницы.

5. Добавление созданного элемента управления в DOM.

Полный код реализации навигации по элементу управления FlipView смотрите здесь:

HTML код:

<div data-win-control="ContextControl"> <div class="contextControlScenario"> <div id="contextControl_ItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none"> <div class="overlaidItemTemplate"> <img class="image" data-win-bind="src: picture; alt: title" /> <div class="overlay"> <h2 class="ItemTitle" data-win-bind="innerText: title"></h2> </div> </div> </div> <div> <div id="contextControl_FlipView" class="flipView" data-win-control="WinJS.UI.FlipView" data-win-options="{ itemDataSource: DefaultData.bindingList.dataSource, itemTemplate: contextControl_ItemTemplate }"> </div> <div id="ContextContainer"></div> </div> </div> </div>

JavaScript код:

(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 кнопки прямоугольные)

input[type="radio"] { margin: 10px 5px; width: 15px; height: 15px; padding: 0px; border-radius: 50%; }

FlipView в вебе

WinJS доступен для веб-проектов в виде открытой библиотеки, а также вы можете его использовать на своих веб-страницах. Вы можете посмотреть, как выглядит элемент управления FlipView в вебе, просто перейдя по этой ссылке.

Обратите внимание на третий пример с использованием динамичного шаблона. Такую возможность мы рассмотрим в одной из следующих статей.

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

Краткое руководство: добавление элемента управления FlipView (HTML)

Пример использования элемента управления FlipView, написанный на HTML