Мы рады представить вам предварительную версию библиотеки Windows для JavaScript 4.0 (WinJS 4.0).
В нашей предыдущей версии (WinJS 3.0) мы сосредоточились на обеспечении кросс-браузерной совместимости.
В WinJS 4.0 мы начали добавлять новые функции, чтобы гарантировать, что библиотека останется хорошей платформой для разработки как Windows, так и веб-приложений.
При подготовке к этому выпуску мы полагались на отзывы сообщества и ваш вклад, которые помогли нам сосредоточиться на нескольких важных областях:
- Универсальный опыт – люди хотят, чтобы их приложения работали там, где они работают: на телефонах, планшетах, компьютерах и даже на телевизоре в своей комнате.
Форм-факторы устройств постоянно развиваются, чтобы лучше соответствовать потребностям человека: где-то это клавиатура, которая подключается к планшету, чтобы сделать работу более продуктивной, где-то — это подключение телефона к телевизору, чтобы вы могли сесть на диван и исследовать мир.
контент и так далее.
Элементы управления WinJS упрощают создание адаптивных приложений, которые не только могут работать на экранах разных размеров, но и поддерживают различные методы ввода.
Мы хотим помочь вам адаптировать возможности для каждого устройства и форм-фактора, чтобы вы могли сосредоточиться на создании самих приложений.
- Отличное взаимодействие с другими – WinJS разработан с учетом совместимости.
Мы считаем, что вы сможете легко использовать WinJS и ваши любимые JS-фреймворки вместе.
Например, WinJS-оболочка для AngularJS позволит вам прозрачно использовать WinJS в ваших проектах AngularJS.
- Мощный ListView — WinJS должен поддерживать разработку вашего приложения, предоставляя лучший контроль.
Наша реализация ListView была сильно оптимизирована по производительности и поддерживает широкий спектр сценариев.
Мы добавили новые функции, такие как поддержка вращения стилей, верхних и нижних колонтитулов для списков, а также улучшенное выделение.
Если у вас возникли трудности, пожалуйста отправьте нам запрос на вытягивание или сообщить о проблеме через ГитХаб.
Ты можешь начните использовать предварительную версию WinJS 4.0 сегодня через ваш любимый менеджер пакетов (Bower, npm или NuGet), ссылку CDN, загрузив Zip-архив с нашего веб-сайта или путем клонирования репозитория чтобы создать свою собственную копию на GitHub. Далее в статье мы расскажем вам подробнее об упомянутых выше направлениях деятельности.
Мы надеемся, что вам также понравятся новые возможности WinJS 4.0.
Универсальный опыт
Форм-факторы вычислительных устройств продолжают развиваться.Успешный опыт применения в современной экосистеме включает, среди прочего:
- Хорошо работает на любом размере экрана
- Поддержка всех методов ввода (клавиатура, мышь, сенсорный экран и т. д.)
Мы считаем, что отличный адаптивный дизайн должен учитывать и второй момент. Универсальный дизайн элементов управления WinJS включает в себя этот второй шаг.
В WinJS 4.0 мы добавили новые элементы управления, учитывающие текущий форм-фактор, а также сделали существующие элементы управления более отзывчивыми.
WinJS остается совместимым со всеми методами ввода, полностью работая с клавиатурой, мышью, сенсорным экраном и даже геймпадом (с нашей новой функцией XYFocus).
Новые универсальные элементы управления
Обычно разработка приложения, адаптирующегося к размеру экрана и форм-фактору, не является тривиальной задачей.По мере изменения размера экрана и соотношения сторон приложение претерпевает ряд изменений как в общем составе, так и в отдельных элементах управления.
Все это требует специального кода.
В WinJS 4.0 мы добавили ряд важных элементов управления, которые сокращают объем работы, необходимой для достижения такого универсального опыта.
WinJS Сплитвиев
Разделенное представление — это адаптивная композиция элементов, ставшая чем-то вроде отраслевого стандарта.Мы описываем приложение с комбинированным представлением как приложение с панелью навигации слева и основным контентом справа, как показано на снимке экрана ниже.
Обычно эту панель навигации можно открыть или свернуть, нажав на какую-нибудь кнопку в левом верхнем углу.
Стандартная композиция универсального приложения с использованием SplitView, Toolbar и ListView.
Новый элемент управления WinJS SplitView позволяет быстро реализовать такое поведение в вашем приложении.
Гибкость и возможности этого элемента позволят вашему приложению легко адаптироваться к текущему размеру экрана, поддерживая, таким образом, телефоны, планшеты, компьютеры и все, что между ними.
На скриншотах ниже вы увидите, что SplitView работает в разных режимах и поддерживает три разных диапазона размеров экрана.
SplitView в фиксированном режиме 
SplitView в режиме наложения 
SplitView в «мобильной» конфигурации
Элемент управления SplitView — это мощный и эффективный способ добавить универсальности вашим приложениям.
Вы можете попробовать это в действии для меню и содержимого веб-сайта.
buildwinjs.com И в Пример разделения представления .
Панель инструментов WinJS
Еще одним сложным аспектом создания универсального приложения является командный интерфейс.В WinJS 4.0 мы добавили адаптивную командную поверхность под названием ToolBar. ToolBar включает в себя ряд замечательных функций, которые делают его уникальным для разработки приложений для различных форм-факторов.
Вы можете попробовать все эти функции на пример страницы .
Команды масштабирования и перекрытия
WinJS ToolBar автоматически отображает правильное количество команд в соответствии с текущим размером экрана.Это делается с помощью команды, скрывающей приоритет (по умолчанию или по вашему выбору).
Это позволяет без особых усилий добиться впечатляющей гибкости.
Вы можете судить об этом сами на сайт с примером ToolBar .
Пример нового элемента управления WinJS ToolBar
Диалог содержания
Прошли те времена, когда человек нажимал клавишу Tab в вашем диалоговом окне и попадал на случайный элемент вашего приложения.В новом элементе управления WinJS Content Dialog нажатие клавиши Tab просто переключает доступные параметры, как и должно быть.
Кроме того, элемент управления адаптируется и позиционирует контент в соответствии с размером экрана.
Вы также можете разместить внутри произвольный контент, что является приятным бонусом.
Поиграйтесь с нашим новым элементом «Диалог контента», чтобы оценить все самостоятельно.
XYФокус
Новая функция XYFocus позволяет легко перемещаться между определенной группой HTML-элементов в четырех направлениях.Это особенно полезно с точки зрения поддержки модели ввода, типичной для геймпада.
Эту функцию можно легко сопоставить с любой подходящей комбинацией клавиш, например стрелками на клавиатуре или клавишами w, a, s, d. Как вы уже могли догадаться, это упрощает добавление поддержки геймпада, требует минимальных усилий и доступно в предварительной версии WinJS 4.0. Следите за демонстрацией на Пример страницы XYFocus .
Улучшено сенсорное управление для Pivot.
Элемент управления Pivot в WinJS с самого начала реализовал эффективную парадигму организации навигации по приложениям, однако расширенные возможности управления с помощью жестов были доступны только для приложений Windows и Internet Explorer. В релизе 4.0 элемент получит как обновления визуального стиля и, в частности, адаптивные заголовки, так и эквивалентный функционал в разных браузерах.Вы можете попробовать это сами на страница с примером Pivot .
Отличное взаимодействие с другими
WinJS предназначен для беспрепятственного взаимодействия с другими платформами.Раньше это можно было сделать с помощью созданных сообществом уровней совместимости с популярными фреймворками, такими как РеактJS И НокаутJS .
Чтобы продемонстрировать совместимость, мы также разработали новый Фреймворк WinJS для AngularJS .
Мы надеемся, что этот скрипт станет довольно популярным, поскольку все больше пользователей Angular узнают о возможностях библиотеки WnJS. Благодаря WinJS 4.0 ваши проекты Angular могут легко получить большой список новых функций.
Давайте рассмотрим, что позволяет нам делать наша обвязка, немного подробнее.
ЭУправление WinJS как директивы Angular
Angular предоставляет мощный способ расширения HTML путем создания пользовательских элементов DOM с помощью директив.Платформа Angular-WinJS предоставляет элементы управления платформы WinJS через директивы, что позволяет разработчикам использовать их так же, как в Angular.
Управление рейтингом WinJS как угловая директива<win-rating max-rating=”5”></win-rating>
Интеграция с привязкой данных от Angular
Angular предлагает мощный механизм двунаправленной привязки данных.Новые директивы для элементов управления WinJS, включенные в привязку, позволяют использовать знакомые вам возможности привязки.
Другими словами, новые директивы для WinJS прозрачно интегрируются в систему привязок Angular. Если вы работаете с Angular, вы только что получили новый набор элементов управления и функций от WinJS. <div ng-app="sample" ng-controller="sampleController">
<win-rating user-rating="rating"></win-rating>
<p>Rating: {{rating}}</p>
</div>
angular.module('sample', ['winjs']).
controller("sampleController", function ($scope) {
$scope.rating = 3;
});
Мощный просмотр списка
ListView — это элемент управления сигнатурой для WinJS. Мы всегда гордились тем, что предоставляем виртуализированный контент с встроенной поддержкой клавиатуры, отличной производительностью, гибкими стилями и широкими возможностями настройки.В версии 4.0 мы упростили доступные варианты взаимодействия и добавили функции, о которых просили разработчики.
Обновления ListView
Упрощение модели выбора
Оптимизация как для мыши, так и для сенсорного управления была ключевой частью ListView с момента создания WinJS. Поскольку многие жесты пальцами стали стандартизированы во всей отрасли, мы внесли некоторые изменения в модель взаимодействия ListView. Одним из этих изменений стал переход к перетаскиванию в WinJS 2.0. В WinJS 4.0 мы еще раз упрощаем и улучшаем модель взаимодействия ListView. Новый набор режимов описан ниже, он концептуально проще и включает новый набор экранов выбора.
Сценарии выбора
Только чтение: Полностью отключить подсветку Одиночный выбор: Пользователи выбирают из группы взаимоисключающих вариантов.Множественный выбор (Multi): Пользователи выбирают один или несколько элементов из группы вариантов.
Расширенный выбор: Способ, знакомый продвинутым пользователям при работе с клавиатурой; в режиме «только пальцем» или «только мышью» без клавиш-модификаторов он ведет себя как одиночный выбор, описанный выше.
Клавиши Shift и Ctrl позволяют выбирать несколько вариантов с помощью клавиш со стрелками или мыши.
Чтобы добиться такого дизайна, мы удалили свойство swipeBehavior. Это означает, что жест «проведите пальцем по экрану, чтобы выбрать», а также жест «щелкните правой кнопкой мыши, чтобы выбрать», больше не поддерживаются в ListView. Это значительно упрощает работу с режимами выбора ListView.
Новая опция для отображения выбора в ListView.
Вы можете попробовать это в работе в Пример представления списка .
Чередование
Нас часто спрашивают, существует ли простой способ стилизации элементов ListView в зависимости от того, является ли элемент четным или нечетным.Это улучшает читаемость элементов и, как правило, может использоваться по эстетическим соображениям.
Теперь это можно легко сделать с помощью классов «win-container-ever» и «win-container-add».
Использование этих классов существенно упрощает реализацию этой нетривиальной задачи.
Прогрессивная загрузка с новым нижним колонтитулом ListView
Распространенной парадигмой, встречающейся в виртуализации контента, является возможность списка элементов автоматически загружать дополнительный контент, когда пользователь приближается к концу списка.Это снижает нагрузку на использование и сокращает время, необходимое для загрузки больших объемов данных.
Такой подход часто используется при работе с новостными потоками, списками, отсортированными по релевантности, результатами поиска и т.п.
С момента появления WinJS мы внутренне спорили о лучшей реализации этого шаблона.
С добавлением возможностей верхнего и нижнего колонтитула реализовать это стало еще проще.
Пример прогрессивной загрузки доступно на нашем сайте .
Двигаемся дальше
Команда проекта WinJS хотела бы выразить искреннюю благодарность за вашу поддержку и отзывы, которые мы получаем через сообщество GitHub. Полная версия WinJS 4.0 будет доступна.Мы смотрим в будущее с видением развития WinJS как великолепной открытой библиотеки JavaScript, отвечающей потребностям веб-разработчиков во всем мире.
Пожалуйста, отправьте нам свои запросы на извлечение И сообщать о трудностях через ГитХаб.
Давайте вместе сделаем версию 4.0 лучше.
Теги: #Разработка Windows #windows 10 #Разработка веб-сайтов #JavaScript #angular #WinJS #WinJS 4.0 #ListView #Universal Apps #Universal Experience
-
Лучшие Нетбуки На Рынке
19 Oct, 24 -
Обзор Сканера Документов Epson
19 Oct, 24 -
Советы По Выбору Автоответчика
19 Oct, 24 -
Клавиатура, Идея, Две Руки
19 Oct, 24 -
Будущее Веб 2.0
19 Oct, 24 -
Mitm-Атаки От Дом.ру
19 Oct, 24 -
Сеть «Эльдорадо» Открыла Интернет-Магазин.
19 Oct, 24
