Разработка гаджетов для боковой панели Windows 7

Впервые боковая панель появилась в Windows Vista. Главной и единственной её функцией являлась возможность запуска миниприложений, более известных под названием «гаджеты». Возможность использования гаджетов была добавлена в операционную систему для того, чтобы сделать работу с рабочим столом более удобной и функциональной, а их самостоятельная разработка не представляет особой сложности, особенно если вы знакомы с такими языками программирования, как DHTML, JavaScript и CSS.

По-умолчанию в поставку Windows 7 входят гаджеты, которые могут следить за курсом акций, выводить на экран новости, прогноз погоды и прочие мелочи. Однако наиболее интересными для пользователя окажутся те приложения, которые предоставляют узко специализированную информацию, интересную именно ему и имеющие удобный для него вид (корпоративные или индивидуальные веб-сервисы).

В этой статье мы рассмотрим процесс разработки гаджетов для боковой панели с использованием DHTML, JavaScript и CSS, а также немного углубимся в теорию: обсудим объектную модель и аспекты безопасности разработки. В качестве примера, мы сами создадим работающий гаджет, работающий с фото-сервисом фликр. Его кстати можно сразу скачать отсюда.

Чтобы гаджет заработал, вам нужно зарегистрироваться и получить ключ API от Flickr. Этот ключ нужно будет ввести в третью строку исходного кода ShowMeLife.js.

Прежде, чем начнём сами писать код давайте взглянем на мир разработки гаджетов.

Платформа для гаджетов

Сразу надо уточнить, что есть три различных типа гаджетов (что может создать некоторую путаницу): гаджеты Windows Live, гаджеты боковой панели Vista/7 и гаджеты Windows SideShow. В этой статье мы рассмотрим лишь гаджеты для боковой панели. К сожалению, API  этих трёх платформ на сегодняшний день не совместим, хотя Microsoft говорит, что работает над этим. В настоящий момент написание кросс-платформенного гаджета требует принятия некоторых компромиссов и грамотного планирования. Давайте в начале бегло рассмотрим все три платформы.

Гаджеты боковой панели

Гаджеты боковой панели устанавливаютcя на компьютер пользователя и их нельзя увидеть в меню ‘Пуск’. Гаджетами можно управлять через приложение Windows Sidebar. Как мы далее увидим, гаджеты боковой панели могут работать на рабочем столе или непосредственно в области боковой панели. Боковая панель в свою очередь может или постоянно занимать некоторое пространство рабочего стола, или скрываться другими окнами. Гаджеты создаются с помощью HTML, JavaScript и объектной модели System.Gadget.

Windows 7 идёт в комплекте с определённым набором гаджетов, который может быть легко расширен с помощью галереи Windows Live или соответствующего раздела этого сайта. Боковая панель, запущенная на машине локально, имеет ряд преимуществ перед своими веб-коллегами. Например, такие гаджеты могут получить доступ к некоторым локальным ресурсам компьютера.

Гаджеты Windows Live

Гаджеты Windows Live ограничены домашней страницей или пространством Windows Live. Их также можно создавать с помощью комбинации из HTML и JavaScript. Вместо боковой панели эти гаджеты используют веб-браузер. Они тоже доступны в галерее Live.

Гаджеты Windows Live работают в отдельном <iframe> на странице, в которой они запускаются. Это не относится к сайтам Microsoft и сайтам её партнёров. Эти гаджеты не имеют доступа к DOM или cookie live.com и работают на базе более сложных настроек безопасности чем гаджеты боковой панели.

Гаджеты SideShow

Гаджеты SideShow передают информацию вспомогательным дисплеям платформы Windows SideShow. Такие дисплеи можно увидеть на клавиатурах, сумках для ноутбуков, пультах дистанционного управления и сотовых телефонах. Идея состоит в том, что пользователь может просмотреть важную информацию, не включая ноутбук или не открывая крышку раскладного телефона.

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

Работа гаджетов боковой панели

Гаджет представляет собой файл с расширением .gadget. Файл .gadget сжимается в архивный формат ZIP или CAB. Когда пользователь откроет файл .gadget, боковая панель извлечёт ресурсы гаджета, находящиеся внутри.
Файл .gadget включает в себя:

• файл gadget.xml. Этот XML-файл содержит конфигурационную информацию и другие метаданные вроде имени автора и ссылки на его домашнюю страницу;
• по крайней мере один файл HTML, в котором описан пользовательский интерфейс;
• другие вспомогательные файлы (JavaScript, таблицы стилей, изображения, дополнительные файлы HTML, изображения).

После извлечения файлов из архива, они копируются в каталог пользователя. Полный путь до каталога с гаджетами — %UserProfile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets, где %UserProfile% — корневой каталог пользователя, например C:\Пользователи\w7q.

Когда установка гаджета закончится, он появится в галерее боковой панели. Пользователь теперь сможет добавить этот гаджет на рабочий стол двойным щелчком мыши или просто перетащив его мышкой. Удаление гаджета приведёт к удалению его файлов с диска. Как разработчики, мы можем написать свой гаджет прямо в соответствующем каталоге или использовать инструмент MSBuild, чтобы скопировать гаджет в папку во время сборки. Давайте взглянем на гаджет, который мы будем создавать.

Гаджет «Show Me Life»

В этой статье мы будем делать гаджет, который будет выводить на экран слайд-шоу из фотографий сервиса Flickr. Гаджет будет искать фотографии по определённым ключевым словам. Мы сделаем графический интерфейс, чтобы пользователь сам смог задавать ключевые слова. После того, как Flickr возвратит список соответствий, гаджет начнёт выводить изображения на экран по одному.

Что мне нравится в этом подходе, так это то, что при использовании Flickr, вы никогда не сможете предсказать какая картинка появится следующей. Например, при просмотре фотографий с тегом «Россия» вы будете наблюдать фотографии памятников и популярных достопримечательностей в России.

Наш гаджет будет состоять из:

• Gadget.xml — необходимый файл описания;
• ShowMeLife.htm — разметка для интерфейса;
• ShowMeLife.css — стили, используемые в пользовательском интерфейсе;
• ShowMeLife.js — скрипт, который связывается с Flickr и обновляет интерфейс;
• Settings.htm, Settings.css и Setting.js — отдельный набор файлов с настройками диалогового окна, с помощью которого пользователь будет вводить поисковые слова.

Описание
Следующий листинг показывает содержание нашего файла с описанием гаджета: gadget.xml. Каждый гаджет требует такого файла.

<?xml version="1.0" encoding="utf-8" ?>
<gadget>
<name>Show Me Life</name>
<namespace>w7q.ru</namespace>
<version>1.0.0.0</version>
<author name="w7q">
<info url="w7q.ru" />
</author>
<copyright>&#169; 2006</copyright>
<description>A Flickr Slideshow</description>
<hosts>
<host name="sidebar">
<base type="HTML" apiVersion="1.0.0" src="ShowMeLife.htm" />
<permissions>Full</permissions>
<platform minPlatformVersion="1.0" />
</host>
</hosts>
</gadget>

Подробнее об файлах описания вы можете прочитать в документации MSDN.

Давайте отметим основные теги в gadget.xml:
Тег <name> описывает имя гаджета. Пользователь будет использовать это имя для идентификации гаджета в панели управления и галерее боковой панели.
Тег <author> предоставляет информацию о создателе гаджета. В дополнение к <info> в него может входить элемент <icon> с атрибутом src, указывающим на иконку гаджета.
Тег <host> является обязательным и определяет место для гаджета. В данном случае имеется только один правильный атрибут «sidebar».
Тег <base> определяет тип гаджета. В нашем случае это тип «HTML». Атрибут src определяет файл формата html, который должна загрузить боковая панель, чтобы запустить гаджет.

Код HTML
Описание гаджета гласит о том, что файл ShowMeLife.htm является основной страницей гаджета. Боковая панель загрузит этот файл, используя движок Internet Explorer. Наш Show Me Life не требует сложной разметки. Самым важным тегом в нашем HTML, будет img. Чтобы на экране появлялись различные картинки Flickr, мы будет корректировать атрибут src тега img. Вот исходный код ShowMeLife.htm:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Show Me Life</title>
<link href="ShowMeLife.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="ShowMeLife.js"></script>
</head>
<body id="mainBody" >
<span id="message">Загрузка...</span>
<img id="photo" onclick="openPhoto(); return false;"  />
</body>
</html>

Даже при том, что мы программируем гаджет, наш HTML в принципе похож на разметку типичной веб-страницы (хоть и очень небольшой). Мы подключаем некий сценарий и таблицу стилей, используем теги div и img. Важно иметь в виду, что это всё таки не веб-страница. Гиперссылка в веб-странице направит браузер на новый URL. В действительности гаджет «не перемещается» по страницам — гиперссылка в гаджете откроет новое окно с данной ссылкой. Основная часть функционала гаджета будет реализована с помощью скрипта.

Гаджет и скрипт

document.onreadystatechange = function()
{
if(document.readyState=="complete")
{
flickr = new Flickr();
System.Gadget.settingsUI = "Settings.htm";
System.Gadget.onSettingsClosed = settingsClosed;
System.Gadget.onUndock = resizeGadget;
System.Gadget.onDock = resizeGadget;
showPhotos();
}
}

Это обработчик событий, который запускается, когда выполнится первоначальная загрузка гаджета. Можно заметить, что мы создаем новый объект под именем Flickr, являющийся классом, который определим позже в нашем сценарии. Также мы используем API System.Gadget (это не объект, который мы определяем, а новый API для разработчиков гаджетов).

System.Gadget
API гаджета позволяет нам взаимодействовать с локальной машиной, оболочкой Windows и боковой панелью. Например, объект System.Network.Wireless позволяет проверять мощность сигнала и соединение с беспроводной сетью. Можно использовать объект System.Machine.Powerstatus, чтобы узнать оставшийся заряд батареи. Остальные функции можно найти в документации MSDN.

Мы используем объекты System.Gadget для того, чтобы «наладить общение» нашего гаджета и боковой панели. Например, мы можем сделать пользовательский интерфейс с настройками. Этот интерфейс появится как только пользователь щёлкнет по маленькому ключу возле гаджета. HTML код окна с настройками находится в файле Settings.htm и нам нужно сделать так, чтобы System.Gadget.settingsUI ссылался на этот файл как показано в листинге кода выше. Мы также можем настроить прилипание к боковой панели (когда пользователь подводит гаджет к боковой панели) и отстыковку (когда пользователь отводит гаджет от боковой панели). Мы привязываем эти события с помощью функции resizeGadget.

function resizeGadget()
{
if(System.Gadget.docked == true)
{
mainBody.style.height = 130;
mainBody.style.width = 130;
photo.style.height = 128;
photo.style.width = 128;
}
else
{
mainBody.style.height = 640;
mainBody.style.width = 640;
photo.style.height = 638;
photo.style.width = 638;
}
}

Здесь мы используем System.Gadget API, чтобы определить, находится ли гаджет в прикрепленном состоянии или наоборот отсоединён от боковой панели. Идеальная ширина для гаджета в прикрепленном состоянии — 130 пикселей, таким образом, мы можем корректировать ширину и высоту нашего приложения. Когда гаджет отсоединён от боковой панели, можно его немного увеличить, тем самым увеличив масштаб фотографии.

Настройки
Ранее мы говорили об использовании settingsUI для настройки нашего гаджета. Если бы наш гаджет отображал котировки акций, мы могли бы использовать settingsUI, чтобы вводить названия акций. В нашем случае гаджет отображает фотографии с Flickr, поэтому нам нужно вводить поисковый запрос. Вот наш файл settings.htm.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script type=»text/javascript» src=»Settings.js»></script>

<link href=»Settings.css» rel=»stylesheet» type=»text/css» />
</head>
<body>
Теги:
<br />
<input name=»searchBox» type=»text» maxlength=»50″ />
</body>
</html>

Так мы выделили текстовое поле для ввода поискового запроса. Боковая панель уже сама дополнит интерфейс кнопками Ок и Отмена. Код только загружает и сохраняет результаты поиска.

document.onreadystatechange = function()
{
if(document.readyState=="complete")
{
var searchTags = System.Gadget.Settings.read("searchTags");
if(searchTags != "")
{
searchBox.value = searchTags;
}
}
}

System.Gadget.onSettingsClosing = function(event)
{
if (event.closeAction == event.Action.commit)
{
var searchTags = searchBox.value;
if(searchTags != «»)
{
System.Gadget.Settings.write(«searchTags», searchTags);
}
event.cancel = false;
}
}

Здесь можно увидеть как работает чтение и запись объекта System.Gadget.Settings. Эти методы можно использовать, чтобы сохранять и восстанавливать простые пары имя-значение во время работы гаджета. Важно знать, что эти настройки работают только, когда гаджет присоединен к боковой панели. Другими словами, если пользователь убирает гаджет из боковой панели, любые настройки сбрасываются и в следующий раз, когда пользователь вновь вернёт гаджет на боковую панель, все настройки вернуться к значению по умолчанию.

Когда пользователь закрывает окно с настройками, гаджет сможет прочитать эти настройки с помощью onSettingsClosed. Следующий код содержится в файле ShowMeLife.js.

function settingsClosed(event)
{
if(event.closeAction == event.Action.commit)
{
loadSettings();
}
}

function loadSettings()
{
var searchTags = System.Gadget.Settings.read(«searchTags»);
if(searchTags != «»)
{
flickr.applySearchTags(searchTags);
}
}

Вставляем картинки Flickr в гаджет
Большая часть кода в ShowMeLife.js работает с API веб-службы Flickr — берёт фотографии и помещает в наш гаджет. В этой статье мы не будем подробно рассматривать API Flickr, подробности вы можете найти в документации Flickr . Этот код обращается к сервису Flickr с просьбой выдать список фотографий с соответствующими тегами. Код используется встроенный объект XmlHttp от уставленного у вас IE. Код запрашивает определённую страницу с результатами и обрабатывает ответ используя формат JSON для простого парсинга.

Flickr.prototype.makeRequest = function()
{
this.xmlHttp.open("GET",
"http://www.flickr.com/services/rest/" +
"?method=flickr.photos.search" + "
"&api_key=" + this.apiKey +
"&tags=" + this.searchTags +
"&page=" + this.pageIndex +
"&format=json", false);
this.xmlHttp.send();
var photos = eval(this.xmlHttp.responseText);
this.photoIndex = 0;
this.totalPages = photos.pages;
return photos;
}

Все, что нужно сделать, это создать метод для обновления фото каждые 10 секунд. Таймер управляется с помощью метода setInterval в JavaScripts.

Flickr.prototype.showNextPhoto = function()
{
if(this.photos == null)
{
this.photos = this.makeRequest();
}

if(this.photos != null)
{
try
{
var photoToShow = this.photos.photo[this.photoIndex];
this.photoOn();
photo.filters.item(0).Apply();
if(photoToShow.title != null)
{
photo.alt = photoToShow.title;
}
photo.src = «http://static.flickr.com/» + photoToShow.server +
«/» + photoToShow.id + «_» +
photoToShow.secret + «.jpg»;
photo.filters.item(0).Play();
}
catch(err)
{
System.Debug.outputString(err);
}
this.movePhotoIndex();
}
}

Другие особенности гаджета
В дополнение к System.Gadget API есть несколько других функций. Они находятся в форме новых HTML элементов.

• g:background — определяет фоновое изображение для гаджета
• g:image — указывает на изображение для гаджета
• g:text — предоставляет возможность манипулировать текстом в гаджете

Эти элементы обеспечивают новые модели поведения скриптов и специальные свойства, которые мы можем использовать в боковой панели. Наример, элемент g:Image может использовать новый протокол (gImage). Протокол gImage автоматически создаёт эскиз основного изображения. Например, если мы ссылаемся на изображение с помощью using src=»Картинка.png», используется всё изображение полностью. Если же мы ссылаемся на изображение с помощью src=»gImage:///Картинка.png», появится миниаютра изображения.

Протокол gImage можно использовать только на локальной машине, то есть подгружать изображение с удалённого сервера нельзя. Полную информацию об этих трех элементах можно изучить на сайте MSDN.

Упаковываем гаджет
На конечном этапе разработки мы можем упаковать все файлы нашего гаджета в zip или cab архив. После этого нужно поменять расширение архива на .gadget.
Как упоминалось ранее, приложение Windows Sidebar автоматически извлечет содержимое файла .gadget в папку с гаджетами пользователя. Например, на моей машины файлы распаковались в папку c:\Пользователи\w7q\AppData\Local\Microsoft\Windows Sidebar\Gadgets. Можно также обойтись без установочного файла, а просто скопировать в эту директорию необходимые файлы.

После всех этих манипуляций гаджет должен отобразиться в галерее боковой панели.

Гаджеты и локализация
Если вы хотите включить в свой гаджет поддержку локализации, нужно будет создать подпапки в архиве, которые соответствуют идентификатору локализации Windows. Например, подпапка en-US может содержать локализация для американского английского языке. Нелокализованные файлы можно оставить в корневом каталоге.

Гаджеты и безопасность

Сейчас все пользователи уделяют большое внимание безопасности использования разных программ. Если мы хотим распространить наш гаджет в сети, то нужно позаботиться о безопасности.

Гаджеты будут работать в Explorer в «Local Machine Zone». Эта зона не появляется на вкладке безопасности Internet Explorer, но в действительности существует как неявная пятая зона безопасности. Администраторы могут редактировать настройки в этой зоне, изменяя записи в реестре. Настройки безопасности для всех пользователей компьютера находятся в реестре HKEY_LOCAL_MACHINE\Software\Microsoft\Windows\CurrentVersion\Internet Settings\Zones\0.

По умолчанию сценарии в зоне на локальной машине могут создавать локальные элементы управления ActiveX и загружать данные через домены, однако гаджеты не могут загружать и устанавливать новые элементы управления ActiveX. Гаджеты ни в коем случае не должны работать с правами администратора.

Для получения доступа к информации о локальной машине гаджет должен использовать API Windows Management and Instrumentation (WMI). WMI — мощный инструмент и может выдать подробную информацию об устройствах и программных процессах. С User Account Control гаджет не может на полную использовать API WMI из-за правовых ограничений.

Эпилог

Гаджеты — замечательный механизм, способный предоставить пользователю нужную информацию через простые приложения, работающие в Windows Sidebar. Гаджеты легко создавать, особенно если вы знакомы с языком разметки HTML и языком программирования сценариев. Возможности гаджетов постоянно расширяются, поскольку Microsoft улучшает платформу для миниприложений.

И еще раз, получившийся гаджет можно скачать отсюда.

0

Комментариев: 3

Задайте вопрос или оставьте отзыв: