Сегодня мы с вами будем говорить об элементах управления библиотеки WinJS, об основных вещах, которые нужно знать при создании приложений с ее помощью.
Библиотека WinJS в
текущей версии состоит из двух частей: base.js и ui.js, отвечающих, соответственно, за ряд базовой функциональности и создание элементов управления и работу с ними. Для стилизации элементов управления к библиотеке также прилагаются наборы стилей ui-light.css и ui-dark.css.
Давайте познакомимся с ui-частью, с основными элементами управления, входящими в библиотеку WinJS, а также рассмотрим базовые вещи, необходимые для работы с WinJS.
Основные элементы управления, входящие в библиотеку WinJS
Элемент управления | Описание | Визуальное отображение |
AppBar | Панель приложения с набором команд. | ![*](/user_img/141130152836/c28f14272cfe4b499d3339fabeb4f78e.png) |
BackButton | Кнопка «Назад» для перехода к предыдущему экрану. В Windows Phone имеет встроенную аппаратную или программную реализацию. | ![*](/user_img/141130152836/b542a0fbdc1c4f9cb47bab3b11ea9e43.png) |
DatePicker | Элемент управления для выбора даты. Позволяет выбрать месяц, день и год. | ![*](/user_img/141130152836/ab810499edeb4047ae181c51ce0cf964.jpg) |
FlipView | Элемент управления FlipView используется для отображения коллекции элементов. В каждый момент времени отображается только один объект. | ![*](/user_img/141130152836/305016350b204e4a9461964a93b17dcb.png) |
Flyout | Элемент управления Flyout используется для отображения всплывающего окна на странице. Его можно также применять для вывода различных предупреждений, сообщений. | ![*](/user_img/141130152836/e0ddd6fa05e54a4dab636662c07afeb8.png) |
ListView | Элемент управления ListView является одним из основных элементов в библиотеке WinJS. С его помощью вы можете отображать различные списки объектов – файлы, фотографии, фильмы и т.д. | ![*](/user_img/141130152836/ff9b446ae1b34632a32c868653398676.png) |
ItemContainer | Создает элемент, по которому можно проводить пальцем, сжимать и перетаскивать. Используйте ItemContainer, когда необходимо отобразить элементы, но нет потребности во всех возможностях элемента управления ListView. | ![*](/user_img/141130152836/0d7783cf071242ca96b5b6a794364930.png) |
NavBar | Тип панели приложения AppBar, отображающий команды навигации. | ![*](/user_img/141130152836/d7eb2e16d0cb4fc4b89828eb0135aebc.jpg) |
Rating | Позволяет вводить и отображать поставленные оценки. По умолчанию можно выставлять оценки от 1 до 5 посредством выбора соответствующего количества звезд. | ![*](/user_img/141130152836/3a8f415b347a43699ddadc936e2099dc.png) |
Repeater | Формирует HTML-код на основе набора данных и шаблона. По сути – простой список без дополнительно функциональности ListView. | ![*](/user_img/141130152836/4d2e5d1cd2be41558a617301cedd1d61.png) |
SearchBox | Позволяет выполнять поисковые запросы и выбирать предлагаемые варианты. | ![*](/user_img/141130152836/23fedcd499b0447d857f6994cff4ea5a.png) |
SemanticZoom | Позволяет пользователям переключаться между двумя видами с разным масштабом, предоставляемыми дочерними элементами управления. Один дочерний элемент управления предоставляет вид с уменьшенным масштабом, другой — вид с увеличенным масштабом. | ![*](/user_img/141130152836/dc2013ee750e46cba865f0536e34fac9.png) |
TimePicker | Позволяет пользователям выбрать время. Позволяет выбрать часы, минуты и время суток (AM/PM) | ![*](/user_img/141130152836/151c7a792e5b4cd8974ec5c016512522.png) |
ToggleSwitch | Является аналогом элемента checkbox в HTML. Включает или отключает элемент. | ![*](/user_img/141130152836/73de7ad97808441fb2da328963ce56dd.png) |
Tooltip | Отображает подсказку с поддержкой форматированного содержимого (например, изображения и форматированный текст), чтобы предоставить больше информации об объекте. | ![*](/user_img/141130152836/abdcaf45c3b8439eb85d9df719cf878c.png) |
x-ms-webview | Отображает HTML-содержимое. С помощью этого элемента управления можно отображать веб-страницы приложения. | ![*](/user_img/141130152836/21db09f189b44cfdaffc94fa189748d7.png) |
Список всех доступных элементов управления можно найти
здесь.
С основными элементами управления мы познакомились, теперь пришло время разобраться с тем, как подключить библиотеку 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.
![*](/user_img/141130152836/747e8b091ad3410f8182cba6eec01f37.png)
Как добавить элемент управления в приложение
Все элементы управления в библиотеке 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.*.