Создание приложений для Windows 8 с помощью HTML5 и JavaScript : подробное руководство

Штефен Вальтер

Москва, 2023

 
приложений 
для Windows 8 
с помощью 
HTML5 и JavaScript

ПОДРОБНОЕ РУКОВОДСТВО

Создание

 UNLEASHED 

 800 East 96th Street, Indianapolis, Indiana 46240 USA 

 Windows
® 8 Apps
with HTML5 and JavaScript  

 Stephen Walther  

 
приложений 
для Windows 8 
с помощью 
HTML5 и JavaScript

Москва, 2023

ПОДРОБНОЕ 
РУКОВОДСТВО

Штефен Вальтер

Создание

2-е издание, электронное

УДК 004.738.5:004.4Javascript+HTML5
ББК 32.973.202-018.2
В16

В16
Вальтер, Штефен.
Создание приложений для Windows 8 с помощью HTML5 и JavaScript : подробное 
руководство / Ш. Вальтер ; пер. с англ. А. А. Слинкина. — 2-е изд., эл. — 1 файл 
pdf : 345 с. — Москва : ДМК Пресс, 2023. — Систем. требования: Adobe Reader XI либо 
Adobe Digital Editions 4.5 ; экран 10". — Текст : электронный.

ISBN 978-5-89818-522-0

Уже освоили JavaScript и HTML? А Microsoft как раз вооружила вас средствами написания 
прорывных приложения для Windows 8. Это уникальная возможность — а автор бестселлеров 
по веб-разработке для Windows Штефен Вальтер покажет, как ей воспользоваться.
В книге наглядно демонстрируются достоинства Windows 8 с точки зрения веб-разработчиков. 
Подробно рассматривается новая библиотека WinJS, предназначенная для написания 
приложений под новейшую версию Windows. Вы узнаете о шаблонах JavaScript, элементах 
управления и привязке к данным. В этой книге вы найдете подробное изложение самых разных 
вопросов: отображение данных в элементе ListView, работа с облачным хранилищем SkyDrive, 
создание игр, использование базы данных IndexDB и форм HTML5. Автор рассказывает обо 
всем, что необходимо для разработки, тестирования и распространения выдающихся программ 
для Windows 8, написанных с применением JavaScript и HTML5. 
Если вы занимаетесь веб-разработкой, то Windows 8 может принести миллионы потенциальных 
пользователей — и вы уже владеете многими навыками, необходимыми, чтобы заинтересовать 
их. Покупайте эту книгу, овладевайте инструментами и приемами, которые вам еще 
неизвестны, — и вперед на завоевание этого гигантского рынка!

УДК 004.738.5:004.4Javascript+HTML5 
ББК 32.973.202-018.2

Электронное издание на основе печатного издания: Создание приложений для Windows 8 
с помощью HTML5 и JavaScript : подробное руководство / Ш. Вальтер ; пер. с англ. А. А. Слин-
кина. — Москва : ДМК Пресс, 2013. — 344 с. — ISBN 978-5-94074-921-9. — Текст : непосредственный.


Все права защищены. Любая часть этой книги не может быть воспроизведена в какой бы то ни было форме и какими бы 
то ни было средствами без  письменного разрешения владельцев авторских прав.
Материал, изложенный в данной книге, многократно проверен. Но поскольку вероятность технических ошибок все 
равно существует, издательство не может гарантировать абсолютную точность и правильность приводимых сведений. В связи 
с этим издательство не несет ответственности за возможные ошибки, связанные с использованием книги.

В соответствии со ст. 1299 и 1301 ГК РФ при устранении ограничений, установленных техническими средствами защиты авторских 
прав, правообладатель вправе требовать от нарушителя возмещения убытков или выплаты компенсации.

ISBN 978-5-89818-522-0
© 2013 by Pearson Education, Inc.
©  Оформление, перевод на русский язык 
ДМК Пресс, 2013

Посвящается Аде Ризон Вальтер, 
которая только-только научилась читать (мои поздравления!). 
И которая хочет золотую рыбку (я работаю над этим). 
И которая прямо сейчас лягнула свою старшую 
сестру Афину (прекрати немедленно!)

ОГЛАВЛЕНИЕ

Об авторе .................................................. 12
Благодарности ........................................... 13
Нам важно ваше мнение! ............................. 14
Введение .................................................. 15

ГЛАВА 1. Разработка приложений 
Магазина Windows ...................................... 18
Что такое приложение Магазина Windows? .............................. 19
Принципы стиля оформления Майкрософт ................................ 19
Общие характеристики приложений Магазина Windows ............. 21
Создаем первое приложение Магазина Windows ..................... 26
Создание проекта в Visual Studio ................................................ 27
Объявление возможностей приложения ..................................... 28
Создание HTML-страницы .......................................................... 30
Создание таблицы стилей .......................................................... 31
Создание JavaScript-файла ........................................................ 32
Запуск приложения .................................................................... 34
Из чего состоит приложение Магазина Windows ...................... 34
JavaScript ................................................................................... 35
HTML5 ........................................................................................ 35
CSS 3 ......................................................................................... 36
Среда выполнения Windows ....................................................... 36
Библиотека Windows для JavaScript ............................................ 37
А что с jQuery? ............................................................................ 37
Построение приложения Магазина Windows в Visual Studio ...... 39
Шаблоны проектов приложений Магазина Windows ................... 40
Запуск приложения Магазина Windows ....................................... 47
Отладка приложения Магазина Windows .................................. 48
Окно консоли JavaScript в Visual Studio ....................................... 49
Точки останова ........................................................................... 50
Работа с обозревателем модели DOM ........................................ 50
Публикация в Магазине Windows ............................................. 52
Регистрация в качестве разработчика Магазина Windows .......... 52
Отправка приложения ................................................................ 53
Сертификация приложения ........................................................ 54
Резюме ................................................................................... 56

Оглавление

ГЛАВА 2. Основы WinJS ................................ 57
Пространства имен, модули и классы ...................................... 57
Пространства имен .................................................................... 58
Модули ...................................................................................... 61
Классы ....................................................................................... 63
Асинхронное программирование с обещаниями ..................... 69
Обещания .................................................................................. 70
Сравнение методов then() и done() ............................................. 71
Создание обещаний ................................................................... 73
Создание обещания-таймаута ................................................... 74
Отмена обещания ...................................................................... 75
Композиция обещаний ............................................................... 75
Отбор элементов DOM с помощью селекторов запроса .......... 76
Выполнение запросов с помощью метода 
WinJS.Utilities.query() .................................................................. 77
Отбор одного элемента методом WinJS.Utilities.id() .................... 79
Использование метода WinJS.Utilities.children() .......................... 80
Работа с классом QueryCollection ............................................... 80
Выполнение Ajax-запросов с помощью функции xhr() .............. 82
Задание типа ответа .................................................................. 84
Задание свойств объекта XmlHttpRequest .................................. 85
Резюме ................................................................................... 87

ГЛАВА 3. Наблюдаемые объекты, привязки 
и шаблоны ................................................. 89
Наблюдаемые объекты ............................................................ 89
Создание наблюдаемого объекта ............................................... 90
Создание прослушивателей наблюдаемых объектов.................. 92
Объединение уведомлений ........................................................ 93
Обход отправки уведомлений .................................................... 95
Работа с объектом WinJS.Binding.List ......................................... 96
Создание наблюдаемой коллекции наблюдаемых объектов ....... 98
Привязка к данным .................................................................. 99
Декларативная привязка к данным и наблюдаемые объекты .... 102
Получение содержимого HTML-формы .................................... 104
Декларативная привязка к данным и элементы 
управления WinJS ..................................................................... 106
Декларативная привязка к данным и конвертеры привязки ...... 108
Шаблоны ............................................................................... 112
Императивное создание шаблона ............................................ 112
Декларативное создание шаблона ........................................... 114
Шаблоны и селекторы запросов ............................................... 116
Внешние шаблоны ................................................................... 117
Резюме ................................................................................. 119

Оглавление

ГЛАВА 4. Элементы управления WinJS ......... 120
Введение в элементы управления WinJS ................................ 121
Декларативное создание элемента управления WinJS ............. 122
Императивное создание элемента управления WinJS .............. 124
Задание параметров элемента управления .............................. 125
Извлечение элементов управления из HTML-документа........... 126
Элемент управления Tooltip ................................................... 127
Использование свойства contentElement .................................. 128
Стилизация всплывающей подсказки ....................................... 128
Элемент управления ToggleSwitch ......................................... 129
Определение состояния ToggleSwitch ...................................... 130
Элемент управления Rating ................................................... 131
Настройка элемента Rating ...................................................... 132
Отправка оценки ...................................................................... 132
Элемент управления DatePicker ............................................. 134
Форматирование даты ............................................................. 135
Показ только годов, месяцев или дней ..................................... 137
Получение выбранной даты ...................................................... 138
Элемент управления TimePicker ............................................ 139
Получение и установка текущего времени ................................ 141
Форматирование часа, минуты и времени суток ...................... 142
Элемент управления FlipView ................................................. 143
Отображение номеров страниц ................................................ 146
Создание нестандартных кнопок в элементе FlipView ............... 148
Резюме ................................................................................. 150

ГЛАВА 5. Создание форм ........................... 151
Средства контроля данных в формах HTML5.......................... 151
Атрибут required ....................................................................... 152
Атрибут pattern ......................................................................... 152
Нестандартный контроль данных ............................................. 153
Настройка стиля сообщения об ошибке ................................... 155
Сброс формы ........................................................................... 156
Элементы ввода данных в HTML5 .......................................... 157
Метки полей формы ................................................................. 158
Ввод чисел ............................................................................... 160
Ввод числа из заданного диапазона ......................................... 161
Ввод адресов электронной почты, URL, телефонов 
и поисковых запросов .............................................................. 161
Ввод значения из списка .......................................................... 163
Выбор файла ............................................................................ 164
Создание редактора обогащенного текста ............................ 166
Показ хода выполнения ......................................................... 167
Резюме ................................................................................. 169

Оглавление

ГЛАВА 6. Меню и всплывающие элементы .... 170
Элемент управления Flyout .................................................... 171
Элемент управления Menu .................................................... 173
Элемент управления AppBar .................................................. 176
Создание простой панели приложения .................................... 177
Команды панели приложения ................................................... 179
Показ контекстно-зависимых команд ....................................... 182
Задание настроек приложения .............................................. 184
Создание страницы «О программе» ......................................... 185
Создание персональных настроек ............................................ 187
Отображение диалоговых окон Windows ................................ 190
Резюме ................................................................................. 192
ГЛАВА 7. Элемент управления ListView ......... 194
Введение в элемент управления ListView ............................... 195
Списковый и сеточный макет ................................................... 199
Предотвращение перекрытия элементов списка ListView ......... 201
Выбор элементов в списке ListView ........................................ 205
Создание представления «основной/подробности» ................. 207
Выбор нескольких элементов ................................................... 210
Сортировка списка ListView ................................................... 213
Фильтрация списка ListView ................................................... 214
Группировка списка ListView .................................................. 216
Переключение представлений с помощью контекстного 
масштабирования ................................................................. 219
Динамическая замена шаблона ListView ................................ 224
Постепенная загрузка элементов списка ListView .................. 226
Резюме ................................................................................. 229

ГЛАВА 8. Создание источников данных ......... 230
Создание нестандартного источника данных ......................... 230
Создание класса источника данных .......................................... 231
Создание адаптера данных ...................................................... 231
Реализация метода getCount() ................................................. 232
Реализация метода itemsFromIndex() ....................................... 232
Реализация метода insertAtEnd() .............................................. 234
Реализация метода remove() .................................................... 234
Реализация метода change() .................................................... 235
Обработка ошибок ................................................................... 235
Реализация метода setNotificationHandler() .............................. 236
Файл как источник данных ..................................................... 237
Использование файлового источника данных .......................... 239
Веб-служба как источник данных ........................................... 242
Создание источника данных ..................................................... 243

Оглавление

Создание веб-службы .............................................................. 244
Использование веб-службы как источника данных ................... 246
База данных IndexedDB как источник данных ......................... 247
Общие сведения о IndexedDB ................................................... 248
Использование источника данных IndexedDB ........................... 252
Резюме ................................................................................. 258

ГЛАВА 9. События и состояния приложения ... 259
События приложения............................................................. 259
Обработка события activated .................................................... 261
Обработка события error .......................................................... 261
Откладывание событий с помощью обещаний ......................... 263
Создание нестандартных событий ........................................... 263
Приостановка, завершение и возобновление приложения .... 264
Определение того, что приложение приостановлено 
или завершено ......................................................................... 264
Определение предыдущего состояния выполнения ................. 265
Тестирование состояния приложения в Visual Studio ................ 266
Хранение состояния приложения в состоянии сеанса .............. 267
Состояния просмотра приложения ........................................ 269
Прикрепленное и заполняющее, альбомное и книжное ............ 269
Опрос носителя ........................................................................ 272
Использование метода mediaMatch в JavaScript ....................... 274
Определение окна просмотра .................................................. 275
Резюме ................................................................................. 278

ГЛАВА 10. Фрагменты страниц и навигация ... 279
Элемент управления HtmlControl ........................................... 279
Создание страничного элемента управления ........................ 282
Создание многостраничных приложений ............................... 285
Создание приложения с навигацией ........................................ 286
Страница default.html приложения с навигацией ...................... 287
Добавление страничных элементов управления 
в приложение с навигацией ...................................................... 288
Переход на другую страницу .................................................... 291
Структура API навигации .......................................................... 292
Элемент управления PageControlNavigator ............................... 293
Состояние навигации ............................................................... 293
Резюме ................................................................................. 297

ГЛАВА 11. Работа с Live Connect API ............. 298
Установка Live SDK ................................................................ 299
Добавление ссылки на Live SDK ............................................... 299
Регистрация приложения ......................................................... 300

Оглавление

Инициализация Live Connect SDK ............................................. 301
Задание различных контекстов ................................................ 301
Аутентификация пользователя .............................................. 304
Использование метода WL.login() ............................................. 304
Использование элемента управления SignIn ............................ 305
События аутентификации ......................................................... 307
Передача маркера аутентификации веб-службе .................... 308
Отправка маркера аутентификации из приложения 
Магазина Windows .................................................................... 308
Проверка маркера аутентификации веб-службой ..................... 311
Извлечение идентификатора пользователя .............................. 314
Получение основной пользовательской информации ............ 314
Скачивание и закачивание файлов в SkyDrive ........................ 317
Получение списка папок и файлов в SkyDrive ........................... 317
Скачивание файлов из SkyDrive ................................................ 320
Закачивание файлов в SkyDrive ................................................ 322
Резюме ................................................................................. 323

ГЛАВА 12. Графика и игры .......................... 325
Описание игры ...................................................................... 326
Создание плиток для игры ..................................................... 327
Звуковое сопровождение игры .............................................. 328
Создание холста для игры ..................................................... 329
Взаимодействие с пользователем ......................................... 331
Цикл обновления ................................................................... 333
Цикл рендеринга ................................................................... 334
Резюме ................................................................................. 336

ПРЕДМЕТНЫЙ УКАЗАТЕЛЬ ......................... 337

ОБ АВТОРЕ

Штефен Вальтер раньше работал старшим руководителем проектов 
в корпорации Майкрософт, а теперь владеет собственной компанией, 
оказывающей консультационные и образовательные услуги, – www.
SuperexpertTraining.com. Он ведет практические курсы по созданию 
приложений Магазина Windows прямо на территории компании-
заказчика.
Штефен заканчивал работу над кандидатской диссертацией в 
МТИ и там же вел занятия по метафизике, когда вдруг осознал, что 
метафизика никаких денег не принесет. Тогда он бросил учебу и 
принял участие в становлении двух успешных Интернет-стартапов. 
Он создал сайт Collegescape, которым более 200 колледжей, в том 
числе из Стэнфордского и Гарвардского университетов и из МТИ, 
пользуются для разработки онлайновых приложений для колледжей 
(позднее был продан компании ETS). Он также основал сайт CityAuc-
tion – один из первых и самых крупных аукционных сайтов (позднее 
продан компании CitySearch).

БЛАГОДАРНОСТИ

Ох, писать техническую книгу – тяжкий труд, даже не помышляйте 
об этом! Я хочу выразить порицание своему редактору Нилу Роуи 
(Neil Rowe), который уговорил меня взяться за очередную книгу. 
Хочу также упрекнуть свою жену, Рут Вальтер, которая не отговорила 
меня. И наконец, я обвиняю своего технического редактора Джеффа 
Бэртофта (Jeff Burtoft), который всеми силами стремился улучшить 
книгу и тем заставил меня потратить на нее еще больше времени. 
Честно – никогда и ни за что не соглашайтесь писать книгу…

НАМ ВАЖНО ВАШЕ 
МНЕНИЕ!

Вы, читатель этой книги, – наш самый важный критик и комментатор. 
Мы ценим ваше мнение и хотим знать, что мы сделали правильно, что 
могли бы улучшить, на какие темы нам стоило бы опубликовать книги. 
Да и вообще любые ваши мысли нам интересны.
Мы будем рады вашим замечаниям. Можете писать нам по обычной 
или электронной почте о том, что вам понравилось или не понравилось 
в этой книге. А также о том, что мы могли бы сделать, чтобы 
наши книги стали лучше.
Пожалуйста, имейте в виду, что мы не можем отвечать на технические 
вопросы по теме данной книги.
Если будете писать, не забудьте указать название и автора книги, а 
также свое имя и адрес электронной почты. Мы внимательно изучим 
ваши замечания и передадим их автору и редакторам, работавшим 
над книгой.

Электронная почта: consumer@samspublishing.com

Почтовый адрес: Sams Publishing
 
 
        ATTN: Reader Feedback
 
 
        800 East 96th Street
 
 
        Indianapolis, IN 46240 USA

В помощь читателям

Зайдите на наш сайт и зарегистрируйте свой экземпляр книги по адресу 
www.informit.com/register, чтобы получить доступ к обновлениям, 
загружаемым материалам и перечню замеченных опечаток.

ВВЕДЕНИЕ

Если вы разрабатываете программу, чтобы охватить максимально 
широкую аудиторию и выручить как можно больше денег, то 
имеет смысл задуматься о приложениях для Windows 8. Microsoft 
Windows – самая популярная операционная система в мире. На долю 
Windows приходится свыше 90 % рынка операционных систем. По 
состоянию на июнь 2012 года было продано более 600 миллионов лицензий 
на Windows 7. По сравнению с рынком Windows все остальные 
рынки программного обеспечения (включая приложения для 
iPhone и Android) кажутся карликами.
Да, не все пользователи предыдущих версий Windows перейдут на 
Windows 8. Но можно с большой долей уверенности предположить, 
что их будет очень много. Генеральный директор Майкрософт Стив 
Балмер – согласен, не самый непредвзятый человек – предсказывает, 
что к концу 2013 года на Windows 8 будут работать более 500 миллионов 
пользователей. Лично я хочу иметь золотой унитаз, самолет, 
как у Натана Мирволда, и спортивный электромобиль Tesla Roadster 
(оранжевый). Довольно скромные пожелания, уверен, что многие читатели 
этой книги хотят того же. А достичь этих целей вы и я (лучше 
я) можем, разрабатывая приложения для Windows 8, – это самый перспективный 
способ.
Написанное приложение для Windows 8 можно прямо из Windows 8 
и продать. В состав Windows 8 входит Магазин Windows (Windows 
Store), где вы можете выставить плоды своих трудов по цене от нуля 
до 999,99 долларов. Продавать можно самые разные приложения – от 
повышающих продуктивность (вспомните о программах учета времени 
и управления контактами) до игр (таких, например, как Angry 
Birds или Cut the Rope).
Эта книга посвящена приложениям Магазина Windows, то есть 
таким, которые можно продавать через этот магазин. Конкретно, вы 
научитесь писать приложения Магазина Windows Store с помощью 
JavaScript и HTML5.
Почему именно JavaScript и HTML5? Создавать приложения Магазина 
Windows можно и на языке C# в сочетании с XAML или на 

Введение

C++, но в этой книге мы будем говорить исключительно о разработке 
на JavaScript и HTML5.

Рис. В.1. Магазин Windows Store 

Преимущество такого подхода в том, что можно применить опыт 
создания веб-сайтов к разработке приложений для Windows. Если вы 
уверенно владеете JavaScript, HTML и каскадными таблицами стилей, 
то создание приложений Магазина Windows не вызовет затруднений.

В этой книге рассказано обо всем, что необходимо для разработки 
приложений Магазина Windows. Вы научитесь пользоваться библиотекой 
Windows для JavaScript (WinJS), предназначенной для разработки 
приложений на JavaScript, и, в частности, узнаете о таких элементах 
управления WinJS, как Rating, Menu и ListView.
Кроме того, вы узнаете, как работать со средой выполнения 
Windows (Windows Runtime). Эта среда открывает доступ к таким 
возможностям Windows 8, которые нельзя реализовать в веб-приложении 
иными средствами, например захват видео и звука.
Прочитав книгу до конца, вы будете понимать, как пишутся приложения 
Магазина Windows – в частности, игры и программы повышения 
продуктивности. Так, в главах 7 и 8 мы с помощью элемента 
управления ListView создадим простое приложение для ведения 
списка задач. А в главе 12 напишем несложную аркадную игру «Пожиратели 
мозга».