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

  1. Гаджеты на боковой панели
  2. Гаджеты для Windows Live
  3. Гаджеты SideShow
  4. Манифест
  5. Источник HTML
  6. Гаджеты и скрипты
  7. System.Gadget
  8. настройки
  9. Гаджеты и локализация

Windows Vista представила Боковая панель - закрепленная на рабочем столе Windows панель, на которой могут размещаться мини-приложения, известные как гаджеты. Эти гаджеты очень интересны в разработке и могут доставить реальную пользу рабочему столу пользователя. Windows Vista поставляется с гаджетами, которые могут отслеживать цены на акции, отображать новостные ленты и предоставлять прогнозы погоды. Гаджеты, которые пользователи найдут наиболее привлекательными, - это те гаджеты, которые предоставляют специализированную информацию, необходимую для выполнения своих повседневных задач. Эти гаджеты могут не обладать широкой привлекательностью гаджета погоды, но будут гаджетами, которые взаимодействуют с корпоративными веб-сервисами и внутренними системами для получения деловой информации внутри корпоративного брандмауэра.

В этой статье мы рассмотрим разработку гаджетов для Windows Vista с использованием DHTML, JavaScript и CSS. Мы представим объектную модель и аспекты безопасности разработки гаджетов. К концу статьи мы построим настоящий гаджет. Вы можете скачать код / ​​гаджет из OdeToCode , Примечание. Чтобы гаджет работал, вам нужно зарегистрироваться и получить Ключ API от Flickr , Введите этот apiKey в третьей строке ShowMeLife.js.

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

Существует три различных типа гаджетов, которые могут создать некоторую путаницу. Существуют гаджеты Windows Live, гаджеты Vista Sidebar и гаджеты Windows SideShow. Эта статья будет посвящена гаджетам на боковой панели. К сожалению, API между этими тремя платформами несовместимы, хотя Microsoft заявляет, что они работают над улучшением совместимости в будущем. В настоящее время написание кроссплатформенного гаджета требует некоторых компромиссов и тщательного планирования (см. «Донавон Уэст») Пиши один раз, беги везде "пост для получения дополнительной информации). Давайте кратко рассмотрим три платформы гаджетов.

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

Гаджеты боковой панели устанавливаются локально на компьютере пользователя, хотя они не отображаются в меню «Пуск». Приложение боковой панели Windows (sidebar.exe) отвечает за управление, размещение и выбор гаджетов боковой панели. Как мы увидим позже в этой статье, гаджеты боковой панели могут запускаться на рабочем столе или внутри самой области боковой панели. Эта боковая панель может занимать определенное количество места на экране или может скрываться за другими окнами. Мы создаем гаджеты на боковой панели, используя HTML, скрипт и объектную модель System.Gadget.

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

Гаджеты для Windows Live

Гаджеты Windows Live могут настраивать внешний вид домашней страницы Windows Live или пространства Windows Live. Мы также можем создавать эти гаджеты, используя комбинацию HTML и скрипта. Вместо того, чтобы появляться на боковой панели Vista, эти гаджеты появляются в веб-браузере, когда пользователь просматривает веб-страницу с установленным гаджетом. Эти гаджеты также доступны из Живая галерея для пользователей, чтобы нажать и добавить.

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

Гаджеты SideShow

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

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

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

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

Как только приложение Sidebar извлечет эти файлы, оно скопирует их в каталог гаджетов пользователя. Полный путь к каталогу гаджетов:% UserProfile% \ AppData \ Local \ Microsoft \ Windows Sidebar \ Gadgets, где% UserProfile% представляет домашний каталог пользователя, обычно что-то вроде C: \ Users \ Scott.

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

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

Я называю этот гаджет Show Me Life, потому что я часто смотрю фотографии из городов и стран, которые я никогда не посещал. Прелесть использования Flickr в том, что вы никогда не знаете, что будет дальше. Например, при просмотре фотографий с тегом «Норвегия» вы можете увидеть пейзажи, памятники и популярные туристические достопримечательности в Норвегии, но вы также можете увидеть фотографии, посвященные дням рождения, домашним блюдам и ценному улову охотника - изображения настоящая, повседневная жизнь.

Покажи мне жизнь состоит из:

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

Манифест

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

&lt;? xml version = "1.0&quot; encoding = "utf-8"?>
<гаджет>
<имя> Покажи мне жизнь </ name>
<namespace> OdeToCode.Gadgets </ namespace>
<версия> 1.0.0.0 </ версия>
<author name = "Скотт Аллен">
<info url = "odetocode.com/blogs/scott/" />
</ author>
<copyright> & # 169; 2006 </ copyright>
<description> Слайд-шоу Flickr </ description>
<хосты>
<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> является обязательным и определяет хост для гаджета. В настоящее время единственным допустимым значением для атрибута name является «sidebar».
  • Элемент <base> указывает тип гаджета. В настоящее время на боковой панели загружаются только типы "HTML", но в будущем боковая панель должна охватывать дополнительные типы. Атрибут src указывает файл, который боковая панель должна загрузить для запуска гаджета.

Источник HTML

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

<html xmlns = "http://www.w3.org/1999/xhtml">
<голова>
<title> Покажи мне жизнь </ 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" class = "messageOn"> Загрузка ... </ span>
<img id = "photo" class = "photoOff" onclick = "openPhoto (); return false;" />
</ body>
</ html>

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

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

Первые строки ShowMeLife.js заставят веб-программистов осознать некоторые различия в программировании гаджетов.

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

Это обработчик событий, который будет выполняться после завершения начальной загрузки гаджета (на форумах Microsoft было предложено, чтобы разработчики гаджетов использовали onreadystatechange вместо событий onload, поскольку события onload не являются надежными на 100%). Вы заметите, что мы создаем новый объект с именем Flickr, это класс, который мы определим позже в нашем скрипте, и мы также используем API, вращающийся вокруг System.Gadget. System.Gadget - это не объект, который мы определили, это новый API, предоставляемый средой для разработчиков гаджетов.

System.Gadget

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

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

функция resizeGadget ()
{
if (System.Gadget.docked == true)
{
mainBody.style.height = 130;
mainBody.style.width = 130;
photo.style.height = 128;
photo.style.width = 128;
}
еще
{
mainBody.style.height = 640;
mainBody.style.width = 640;
photo.style.height = 638;
photo.style.width = 638;
}
}

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

настройки

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

<html xmlns = "http://www.w3.org/1999/xhtml">
<голова>
<script type = "text / javascript" src = "Settings.js"> </ script>
<link href = "Settings.css" rel = "stylesheet" type = "text / css" />
</ head>
<тело>
Метки:
<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 (событие)
{
if (event .closeAction == event .Action.commit)
{
var searchTags = searchBox.value;
if (searchTags! = "")
{
System.Gadget.Settings.write ("searchTags", searchTags);
}
событие .cancel = false;
}
}

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

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

Настройки функции Закрыто (событие)
{
if (event .closeAction == event .Action.commit)
{
loadSettings ();
}
}
функция loadSettings ()
{
var searchTags = System.Gadget.Settings.read ("searchTags");
if (searchTags! = "")
{
flickr.applySearchTags (searchTags);
}
}

Большая часть кода в ShowMeLife.js работает с API веб-службы Flickr для извлечения фотографий и помещения этих фотографий в наш гаджет. Мы не будем раскрывать детали API Flickr в этой статье, но вы можете прочитать документацию на Сайт Flickr , В качестве примера следующий код отправляет запрос в службу Flickr на запрос списка фотографий с прикрепленными поисковыми тегами. Код использует встроенный объект XmlHttp IE7. Код запрашивает определенную страницу результатов и указывает ответ для использования 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;
вернуть фотографии;
}

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

Flickr.prototype.showNextPhoto = function ()
{
если (это .photos == null)
{
this .photos = this .makeRequest ();
}


if (this .photos! = null)
{
пытаться
{
var photoToShow = this .photos.photo [this .photoIndex];
это .photoOn ();
photo.filters.item (0) .Нанесите ();
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 ();
}
поймать
{
System.Debug.outputString (ERR);
}
this .movePhotoIndex ();
}
}

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

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

Эти элементы обеспечивают новое поведение сценариев и специальные свойства, которые мы можем использовать в гаджете боковой панели. Например, элемент g: Image может использовать новый протокол - (gImage). Протокол gImage автоматически создаст миниатюру из изображения. Например, если мы ссылаемся на изображение с помощью src = "MyPicture.png", мы будем использовать полное изображение. Если мы ссылаемся на изображение с помощью src = "gImage: ///MyPicture.png", мы вернемся к уменьшенному уменьшенному изображению. Мы можем использовать протокол gImage только для изображений на локальном компьютере, а не с удаленного сервера. Полная информация об этих трех новых элементах и ​​протоколе gImage доступны на MSDN ,

Когда мы будем готовы развернуть гаджет, мы можем использовать утилиту для создания архива в формате zip или cab, заполненного всеми нашими файлами гаджетов. Нам нужно переименовать файл архива с расширением .gadget, чтобы боковая панель распознала файл как пакет гаджетов.

После упаковки гаджета мы можем разместить файл .gadget на веб-сайте, отправить файл гаджета нашим друзьям по электронной почте или Отправить файл .gadget для веб-сайта live.com. Как мы упоминали ранее, приложение боковой панели Windows автоматически извлекает содержимое файла .gadget в папки пользовательских гаджетов. Например, ShowMeLife.gadget устанавливается в папку c: \ Users \ bitmask \ AppData \ Local \ Microsoft \ Windows Sidebar \ Gadgets \ ShowMeLife.gadget в моей установке Vista. Я мог бы создать этот каталог и скопировать мои файлы гаджетов здесь, если я хочу выполнить установку вручную.

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

Гаджеты и локализация

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

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

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

По умолчанию сценарии в зоне локального компьютера могут создавать локальные элементы управления ActiveX и загружать данные между доменами, но гаджеты не могут загружать и устанавливать новые элементы управления ActiveX. Помните, что при управлении учетными записями пользователей в Windows Vista гаджеты не должны запускаться с правами администратора. Для получения дополнительной информации см. " Безопасность боковой панели Windows Vista ».

Обычная техника в гаджетах - использовать API управления и инструментария Windows (WMI) для запроса и доступа к информации о локальном компьютере. WMI является мощным средством и может возвращать подробную информацию об аппаратных устройствах и процессах программного обеспечения. Опять же, при управлении учетными записями пользователей в Windows Vista у гаджета не будет административного доступа, и он не сможет использовать все возможности API WMI. Увидеть " Контроль учетных записей и WMI " Больше подробностей.

Гаджеты являются отличным средством доставки информации пользователям через легкие приложения, работающие на боковой панели Windows. Гаджеты легко создавать, особенно если вы уже знакомы с HTML и языками сценариев. Среда гаджетов включает в себя специальный API-интерфейс для гаджетов, который мы используем для запросов и взаимодействия с машиной и самой боковой панелью. Мы можем ожидать, что возможности гаджетов возрастут, поскольку Microsoft расширяет эту великолепную платформу для мини-приложений.

от К. Скотт Аллен Вопросы? Комментарии? Дайте мне знать в моем блоге ,

Lt;?
Quot; encoding = "utf-8"?
Комментарии?

Новости

Карта