В случае, если вы пропустили громкое объявление , Microsoft открыла свои библиотеки Windows для JavaScript, иначе известный как WinJS . Многие из вас, возможно, не заметили этого, потому что, как и я, вы предполагали, что WinJS — это просто оболочка для доступа к среде выполнения Windows из JavaScript. Если бы этот блог был на год старше, это было бы правдой, но это уже не так. Хотя библиотека была изначально построена для создания Windows 8 опыта, команда упорно трудились , чтобы расширить этот опыт к Windows Phone и , наконец , в самом браузере. Это означает, что он обеспечивает действительно кросс-платформенный, кросс-браузерный опыт. Вы можете создать веб-приложение с помощью библиотеки и буквально запустить его в браузере Android. Это так просто.
Я рассмотрел некоторые основные моменты в своем приложении // Build WinJS Windows Store, которое я написал в виде слайд-презентации с использованием HTML и JavaScript. Это приложение было специально разработано для работы в Windows 8.1, поэтому я не адаптировал его для Интернета. Чтобы создать веб-пример, мне пришлось выгрузить библиотеку WinJS из GitHub (инструкции по ее разархивированию и сборке находятся на главной странице ). Было немного странно тянуть проект Microsoft с помощью git, а затем компилировать его с помощью grunt, но все готово. Времена меняются! Я скопировал сборку в новый каталог и приступил к работе над очень простым примером, который я творчески назвал «Книги Джереми» . Вы можете поиграть с примером онлайн или встроенный Вы сможете прокручивать и нажимать / касаться своего списка (нажмите на ссылку, чтобы открыть его). Не забудьте обновить, чтобы вы могли видеть анимацию.
Есть действительно шесть вещей, которые я показываю здесь:
- Как создать базовое приложение WinJS
- Привязка данных через шаблоны
- Использование WinJS предоставленных таблиц стилей
- Анимация входа на страницу
- Нажмите анимации
- Элемент управления ListView
Для более подробного ознакомления вы можете проверить все элементы управления и поэкспериментировать на сайте Try WinJS .
Основной шаблон для подключения приложения выглядит следующим образом (найдите его в исходном файле app.js)
WinJS.Application.onready = function () {
WinJS.UI.processAll();
};
WinJS.Application.start();
Призыв к обработке всего — это то, что запускает разбор декларативной разметки и создание экземпляров фактических элементов управления. После обработки элементов управления я запускаю анимацию ввода страницы, чтобы анимировать элементы справа. Когда анимация заканчивается, я нахожу элементы управления, которые были сгенерированы в результате привязки данных к проводу в обработчиках кликов для эффекта касания (коснитесь обложки книги, и вы увидите, как она реагирует).
WinJS.UI.Animation.enterPage(document.getElementById('mainDiv'), null).then(function () {
var controls = document.getElementsByClassName("book"), i;
for (i = 0; i < controls.length; i+=1) {
addPointerDownHandlers(controls[i]);
addPointerUpHandlers(controls[i]);
}
});
Каждый элемент получает несколько обработчиков для разных типов ввода:
function addPointerUpHandlers(target) {
target.addEventListener("pointerup", onPointerUp, false);
target.addEventListener("touchend", onPointerUp, false);
target.addEventListener("mouseup", onPointerUp, false);
}
И срабатывает соответствующая анимация:
function onPointerUp(evt) {
WinJS.UI.Animation.pointerUp(evt.target);
evt.preventDefault();
}
Для списка книг я создаю простой массив JSON и затем связываю его со списком. Я использую соглашение WinJS о присвоении его пространству имен, чтобы было легче ссылаться из разметки:
WinJS.Namespace.define("Book.ListView", {
data: new WinJS.Binding.List(books)
});
Теперь, когда он подключен, давайте посмотрим на HTML. Базовый HTML просто включает в себя базу для WinJS и пользовательского интерфейса, а также несколько таблиц стилей. Я использую «светлую» тему, но вы можете поменять ее на темную, чтобы увидеть, как она меняется (я предпочитаю темную, но уже привыкла к темным темам для презентации). Я использую атрибут specialdata-win-control для определения шаблона элемента:
<div id="bookTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
<div class="book">
<img src="#" data-win-bind="src: img; alt: title"/>
<h4><a href="#" target="_blank"
data-win-bind="href: link; textContent: title"></a></h4>
</div>
</div>
Обратите внимание на тег изображения, что атрибуты не связаны напрямую. Вместо этого атрибут привязки используется для предоставления списка атрибутов родительского элемента и свойств, с которыми они связывают свои значения (в этом случае атрибут src связан со свойством img, а атрибут alt связан со свойством title данные). Далее я объявляю представление списка с опциями. Мне особенно нравится, что WinJS сокращает пробелы, так что я могу форматировать свои параметры в несколько строк. Эти опции предоставляют шаблон для представления в виде списка, показывают, как обрабатывать касания и пролистывания, предоставляют шаблон элемента, а также откуда данные извлекаются. Некоторые могут утверждать, что слишком много императивного кода заключено в декларативный атрибут; однако параметры также могут быть установлены программно.
<div class="bookList" data-win-control="WinJS.UI.ListView"
data-win-options="{
itemDataSource: Book.ListView.data.dataSource,
itemTemplate: bookTemplate,
selectionMode: 'none',
tapBehavior: 'none',
swipeBehavior: 'none',
layout: { type: WinJS.UI.GridLayout }
}"></div>
Вы должны заметить, что я передал обычный JSON опции связывания списка. Я не привязываю напрямую к объекту, а привязываю к открытому свойству dataSource. Как видите, было очень просто соединить удобное взаимодействие с пользователем с выбором, анимированной обратной связью и прокруткой. Хотя я с оптимизмом смотрю на использование этой библиотеки в будущем, сейчас ее размер очень важен. Размер несжатого JavaScript для пользовательского интерфейса составляет почти 3 мегабайта, затем добавьте еще один мегабайт для базы. Кроме того, добавьте таблицы стилей по 150 КБ, и вы посмотрите на многое для загрузки в браузере. Я надеюсь, что в будущем появятся варианты для создания определенных элементов управления и предоставления урезанной версии, которая содержит только самые необходимые элементы для того, что будет использоваться в приложении.
Очевидно, что есть пути, но реальное обещание — это возможность создавать впечатления, которые действительно могут делиться как кодом, так и разметкой между несколькими целями, будь то платформы и браузеры, или нативные приложения, такие как приложения Магазина Windows. Я буду пристально следить за этой структурой по мере ее развития и с нетерпением жду возможности поделиться в следующих постах.