Построение HTML5&JavaScript приложений для Windows 8. - презентация

1

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

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

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

5 Введение

6 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

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

8 Layouts

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

10 UI Surfaces

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

12 Навигация

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

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

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

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

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

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

19

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

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

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

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

24 Анимация

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

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

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

28