Весной компания Microsoft объявила о новой платформе Windows Mobile 6.5,
которая должна прийти на смену Windows Mobile 6.1. Производители уже вовсю
готовят новые модели под эту платформу и скоро пользователи увидят их на
прилавках наших магазинов. А мы с вами поговорим о новинке, которая появится в
данной платформе – поддержка виджетов. В последнее время поддержка виджетов
стала модным течением для многих компаний, выпускающих программное обеспечение.
Например, наш отечественный производитель Яндекс недавно выпустил свой API для
создания виджетов для своей главной страницы. Microsoft также была замечена в
этом деле. Вспомним о гаджетах для SideBar, которые появились в Windows Vista.
Кстати, многие удивлялись, почему разработчики из Редмонда назвали свою новинку
гаджетом, а не виджетом, как это сделали Google, Yahoo, Opera, Яндекс и др.
Впрочем, мы не будем разбираться в правильности терминов. А рассмотрим лучше
примеры создания виджетов для Windows Mobile 6.5.
Сначала чуть-чуть теории. Вы может рассматривать виджет, как мобильную версию
веба. При этом виджет загружается как установочный пакет и запускается локально
на мобильном устройстве. При запуске ведет себя как обычное приложение,
написанное на C++, C# или VB. Устанавливается в списке программ, работает как в
Professional (сенсорные экраны) так и в Standard (смартфоны с обычными экранами)
версиях. Виджет обладает всеми возможностями веб-страницы: полная поддержка AJAX,
плагинов типа Flash. Устанавливается в списке программ. Использование виджетов
может значительно сократить трафик при получении данных из интернета по
сравнению с обычным браузером, например, получать данные о товаре из
интернет-магазин без дополнительной рекламы или прогноз погоды в нужном городе.
На этом теория заканчивается.
Первая радостная весть с полей Родины – поддержка виджетов уже встроена в
платформу Windows Mobile 6.5 и нам не придется уговаривать пользователей своего
самого крутого виджета (а других виджетов мы разрабатывать не умеем), качать с
сайтов Microsoft и устанавливать какие-то программные модули. Второе радостное
событие – для создания виджета не нужно быть программистом языков высокого
уровня типа C++, C# или Visual Basic. Вполне достаточно базовых знаний
JavaScript и XML. Естественно, если вы обладаете более широкими знаниями в языке
сценариев (например, AJAX), то и виджеты вы сможете создавать более
профессиональными.
Если нам не нужно знать языки программирования, то мы можем обойтись даже без
Visual Studio, а писать в любимом инструменте хакеров - обычном текстовом
редакторе типа "Блокнот". Но с другой стороны, использование Visual Studio
позволяет быстрее писать код, используя подсказки Intellisense и другие
возможности интегрированной среды разработки. Мы совместим оба подхода. Сам
виджет напишем в Блокноте, а для отладки воспользуемся Visual Studio.
Если вы уже имеете хоть небольшой опыт разработки приложений для устройств
под управлением Windows Mobile (на страницах журнала
затрагивалась эта тема),
то знаете, что для тестирования программ в Visual Studio используются эмуляторы
устройств разных типов и размеров (КПК, смартфоны, коммуникаторы с разными
разрешениями экранов).
В Visual Studio 2008 уже имеются эмуляторы для платформы Windows Mobile 5.0,
но нам нужно скачать отдельно специальный SDK для Windows Mobile 6. Наверное, вы
это уже давно сделали. А теперь внимание – недавно Microsoft выложила Developer
ToolKit (DTK) для Windows Mobile 6.5. Не вдаваясь в технические подробности
скажу, что DTK является что-то вроде дополнения к SDK. В нашем случае, в этот
набор разработчика были добавлены новые эмуляторы для Windows Mobile, новые
Gesture API и примеры. После установки данного набора вы сможете запускать свои
старые проекты, написанные еще для Windows Mobile 5.0, на новых эмуляторах
Windows Mobile 6.
Но наша цель – разработка собственного виджета. Давайте для начала запустим
новый эмулятор. Есть несколько способов, я расскажу о своем привычном способе,
который использует разработчик для мобильных устройств. Я поступил следующим
образом. Нашел на своем компьютере проект для Smart Device и в Visual Studio
2008 вызвал менеджер эмуляторов через меню Tools | Device Emulator Manager...
В менеджере эмуляторов выберите любой из WM 6.5-эмуляторов и в контекстном
меню выберите пункт Connect. Для своего примера я решил выбрать USA Windows
Mobile 6.5 Professional WVGA Emulator, у которого разрешение экрана составляет
800 на 480 пикселей.
В результате у вас должен запуститься эмулятор. Для удобства мы настроим
эмулятор следующим образом. В меню самого эмулятора выберите File | Configure...
и на вкладке General найдите поле Shared folder:. Выберите любую папку на вашем
компьютере, которая будет играть роль карточки памяти. В этой папке мы будет
создавать примеры виджетов и нам не придется мучиться переносом файлов с
компьютера на эмулятор. На этом наши приготовления закончены, и мы можем
приступать к разработке виджета. Напоминаю, что писать код мы будем в Блокноте,
хотя это можно делать и в Visual Studio или в другом удобном для вас
инструменте.
Разработки виджета состоит из трех частей.
Первая часть - написание кода для виджета. Напишем простейший пример
html-документа (widget.htm):
<html>
<head>
<link href="xakep.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="convert.js"></script>
<title>Наш первый хакерский виджет!</title>
</head>
<body>
<h2>Хакер</h2>
<p>Наш первый хакерский виджет для Windows Mobile 6.5, который позволяет
узнать, сколько рублей содержится в долларах и евро.</p>
<table>
<tr>
<td><input type="text" id="fromVal"" style="width:80px" onfocus="watchChanges()"
onblur="watchChanges()" />
</td>
<td>
<select id="fromSystem" onchange="convert()" />
<option selected="selected" value="ru">рублей</option>
<option value="do">долларов</option>
<option value="eu">евро</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center">=</td>
</tr>
<tr>
<td><input type="text" disabled="true" id="toVal" style="width:80px"/></td>
<td>
<select id ="toSystem" onchange="convert()" />
<option value="ru">рубли</option>
<option value="eu">евро</option>
<option selected="selected" value="do">доллары</option>
</select>
</td>
</tr>
</table>
</body>
</html>
Создание html-документа для виджета ничем не отличается от стандартных
веб-страниц для сайта. Вы также можете использовать внешние файлы для каскадных
стилей CSS и сценариев JavaScript, как это сделано в моем примере. Исходный код
для примера можно скачать отдельно.
Сохраните все документы в одной папке и переходите ко второму этапу.
Следующим шагом будет создание установочного пакета для распространения виджета.
Для этого необходимо создать манифест-файл используя стандарт W3C Widget
Standard (Windows Mobile 6.5 поддерживает драфт от 22 декабря 2008). Приятно
отметить, что Microsoft не стала изобретать велосипед и придумывать свой
стандарт, а использовала общепринятый стандарт для создания виджетов. Для
упрощения нашей задачи, воспользуемся следующим небольшим манифестом (скопируйте
текст в config.xml и поместите в ту же папку, что и widget.htm):
<widget version="1.0"
xmlns="http://www.w3.org/ns/widgets"
id="">
<name>Хакерский виджет</name>
<author href="developer.alexanderklimov.ru" email="terminator2@mail.ru">Александ
Климов</author>
<content src="widget.htm" type="text/html" />
<access network="true" />
<icon src="icon.png"/>
<description>Хакерский виджет, специально разработанный для журнала Хакер</description>
</widget>
Не забудьте поместить в папку с виджетом файл значка под названием icon.png.
Итак, у нас уже имеется 5 файлов (config.xml, icon.png, widget.htm, xakep.css,
convert.js), которые нам необходимо запаковать. Выделите файлы в проводнике,
нажмите правую кнопку мыши и выберите Отправить | Сжатая Zip-папка. Имейте в
виду, что запаковывать необходимо именно файлы, а не папку с ними, так как
важно, чтобы config.xml находился в корне zip-контейнера. Полученный zip-файл
просто переименуйте в widget.wgt. Естественно, вы можете воспользоваться другими
ZIP-архиваторами, к которым вы привыкли, например WinRAR.
Последняя часть - установка и запуск виджета. Откройте проводник в эмуляторе
и войдите в папку Storage Card. Так как мы уже настроили эмулятор таким образом,
что папка с примерами является по совместительству карточкой памяти для
эмулятора, то нам нужно просто найти свой файл widget.wgt и щелкнуть на нем
мышью. Соответственно, на реальном устройстве вам нужно переместить файл удобным
вам способом (записать на карточку, передать через Bluetooth, скачать через
интернет).
Начнётся несложный процесс установки.
Сразу же после установке наш виджет запустится и появится на экране.
Поздравляю, вы сделали это!
Вы можете найти свой виджет на экране через кнопку Пуск. Он будет находиться
в самой нижней части экрана и вам придется прокрутить экран до конца. При
желании через контекстное меню вы можете переместить виджет в начало экрана.
Если вы решите удалить виджет, то это можно через команду Start | Settings |
System | Remove Programs.
Мы рассмотрели простейший пример виджета. Для написания более сложных
примеров вам придется изучить документацию по Widget API. Я расскажу о некоторых
дополнительных возможностях, которые вас могут заинтересовать. Обратите
внимание, что помимо стандартной объектной модели JavaScript, виджеты
поддерживают дополнительный объект widget со своими специфичными свойствами.
Например, через данный объект можно получить доступ к данным манифест-файла.
Скажем, свойство authorEmail позволяет получить электронный адрес разработчика
виджета, который указан в атрибуте email элемента <author> файла config.xml. Вот
пример, как получить из манифеста описание виджета:
<div id="divData"></div>
<script type="text/javascript">
divData.innerHTML = "Описание виджета: " + widget.description;
</script>
Кроме того, есть еще интересный объект SystemState со следующими свойствами:
CradlePresent
DisplayRotation
PhoneHomeService
PhoneOperatorName
PhoneRoaming
PhoneSignalStrength
PowerBatteryState
PowerBatteryStrength
Программисты с опытом разработки для мобильных устройств несомненно узнают в
этих свойствах знакомые элементы SNAPI (брокер состояний и оповещений). Желающие
ознакомиться с подробностями этой технологии, могут прочитать о ней в моей книге
"Программирование для мобильных устройств под управлением Windows Mobile",
выпущенной издательством Питер.
Дополнительные материалы (создание собственного меню, работа с AJAX и т.д.)
можно найти на специальной странице MSDN по адресу
http://msdn.microsoft.com/en-us/library/dd721906(loband).aspx, а также на
моей странице
http://developer.alexanderklimov.ru/winmobile/widget.php.
| 
