Построение HTML5&JavaScript приложений для Windows 8

Охрименко Дмитрий Учебный центр CyberBionic Systematics MCP ID:

Введение. Построение Windows Store приложений с использованием JavaScript и HTML5 Layouts UI Surfaces Навигация Использование элементов управления Обработка событий Анимация

Введение

WinRT APIs Windows Core OS Services Application Model Internet Explorer Win32NET / SL Communica tion & Data Devices & Printing Graphics & Media HTML JavaScript C C++ C# VB C C++ C# VB JavaScript XAML HTML / CSS Windows Store Apps Desktop Apps Core System Services Model Controller View

Структура проекта Custom Styles Custom Scripts WinJS Styles & Scripts Page Config

Layouts

Типи компоновок Fixed Layout Grid Layout Используйте media queries для разных разрешений Используйте fluid layout для адаптации под разные экраны Избегайте использования fixed layout

UI Surfaces

Типы поверхностей интерфейса App BarContext Menu Message Dialog Flyout

Навигация

Типы навигации Fragment Navigation Загрузка HTML страницы в DIV IFrame Navigation Использование якорей для загрузки содержимого в iframe

Элементы управления

Использование стандартных HTML элементов управления

WinJS Controls Для создания контрола используется DIV с атрибутом data-win-control

WinJS Controls Для установки свойств WinJS элемента управления используется атрибут data-win-options

WinJS Controls Для использования WinJS элемента необходимо: 1.WinJS.UI.process(control) – создать контрол, который находится в DIV 2.control.winControl – получить объект для взаимодействия с контролом 3.Прикрепить обработчик события используя функцию addEventListener

Привязка данных

Создания источника данных

Привязка данных к элементу

Процесс привязки данных

Анимация

Разнообразные анимации для элементов UI Навигация и переход между страницами Отображение и скрывание контента Анимация элементов при выборе пользователя Анимация элементов коллекций при добавлении и удалении И много других

Анимация навигации enterPage transitionPage Анимация UI showPopup/hidePopUp showEdgeUI/hideEdgeUI showPanel/hidePanel fadeIn/fadeout Анимация контента transitionContent reveal/hide reposition expand/collapse Анимация коллекций add / delete drag & drop

WinJS.UI.Animation Nemaspace, который дает доступ к анимации Windows WinJS.UI.Animation.fadeIn(element)