Создание Гаджета

Доделал что хотел.


Пользовался этим
http://timofeyeff.ru/sozdanie-gadjeta-dlya-windows7-part1.html
http://timofeyeff.ru/sozdanie-gadjeta-dlya-windows7-part2.html
Спасибо Максим.

Создание гаджета для Windows 7 на примере виджета онлайн-радио .Часть 1 — пишем код.

Гаджеты, by Timofeyeff.

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

В процессе работы я обычно слушаю радио через интернет. Одной из любимых радиостанций является «Наше радио». До недавней поры у них на сайте были ссылки на плейлисты, которые можно было загрузить в любимый проигрыватель. Позже они перешли на онлайн-плеер и ссылки прикрыли. Что бы не держать постоянно открытой вкладку браузера было решено написать гаджет для рабочего стола, который бы постоянно поддерживал трансляцию. В ходе поисков по интернету оказалось, что информации по написанию гаджетов не очень много, в основном она на английском языке и содержит примеры типа «Hello world». А переводы на русский зачастую грешат неточностями и неоднозначностями. Поэтому в данной статье я решил рассказать о процессе создания гаджета.

Создать гаджет для Windows не просто, а очень просто. В основе гаджет состоит из двух файлов: gadget.xml и main.html. Первый файл — файл манифест, который включает в себя все настройки и информацию о гаджете, описанную на языке XML. Второй файл — файл в котором описывается внешний вид гаджета, его основная функциональность, а так же поведение при определенных действиях пользователя. Дополнительно у гаджета могут быть файл настроек, файлы картинок и еще какие либо файлы, но основными являются эти два файла. Языком описания внешнего вида является HTML, да да, тот самый HTML на котором пишутся сайты, а языком, отвечающим за реакцию гаджета на действия пользователя может быть скриптовый язык от майкрософта или, как в нашем примере java-script. Все файлы помещаются в папку с расширением .gadget, в нашем случае в папку nashe.gadget. Внутри этой папки можно создавать другие папки, я создал папку  img для хранения картинок и иконок.

Ниже приведен код файла  gadget.xml для нашего виджета, а на скриншоте окна гаджетов показано где и какой из XML тегов показывается на панели гаджетов.

xml version="1.0" encoding="utf-8" ?>

Наше радио

1.0
name="Максим Тимофеев">
url="http://timofeyeff.ru" />

© 2012 Timofeyeff
Gadget for Nashe radio playing

width="64" height="64" src="img/icon.png" />


name="sidebar">
type="HTML" apiVersion="1.0.0" src="main.html" />
full
minPlatformVersion="1.0" />

Панель гаджетов

Рассмотрим каждый из элементов файла.

Элемент

Обязательный. Определяет версию XML и кодировку символов, используемых в документе. Наш манифест соотоветствует спецификации XML 1.0 и использует кодировку UTF-8 (юникод).

Элемент

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

Элемент представляет собой название гаджета, видимое пользователю. Его расположение на панели гаджетов показано на скриншоте.

Элемент определяет версию гаджета. Во время установки гаджета это значение используется для сравнения двух гаджетов с одинаковыми именами. Если версии различаются, то пользователю дается право выбора версии.

Элемент является контейнером для одного или более элементов . Элемент потомок:

Обязательный. Элемент идентифицирует гаджет как приложение. Его
элементы потомки определяют поведение гаджета как специфического приложения. Атрибуты:

Name. Обязательный. Необходимое значение – sidebar

Элементы потомки:

Элемент говорит Sidebar какой тип файла будет использоваться и обязательную информацией
о версии API для управлением гаджета. Атрибуты:

Type. Обязательный. Необходимое значение – HTML

Src. Обязательный. Указывает, какой файл должен загружать Sidebar для выполнения приложения.

apiVersion. Обязательный. Необходимое значение — 1.0.0

<permissions>

Необходимое значение – Full

<platform>

Элемент указывает боковой панели минимальную версию Windows, которая может управлять приложением. Атрибуты:

minPlatformVersion. Обязательный. Необходимое значение – 1.0

 Необязательные элементы:

<author>

Элемент  отображает информацию о разработчике гаджета. Атрибуты:

Name. Обязательный. Имя разработчика гаджета.

Элементы потомки:

<info>

Необязательный. Элемент  отображает более подробную информацию о разработчике гаджета. Атрибуты:

URL. Обязательный. Ссылка на сайт разработчика.

<logo>

Необязательный. Элемент  определяет графический файл или иконку, ассоциированную с разработчиком, которая отображается рядом с именем автора на панели управления гаджетами. Атрибуты:

Src. Обязательный. Путь к графическому файлу.

<copyright>

Элемент  отображает лицензионные права, принадлежащие разработчику. Может содержать любую строку символов.

<description>

Элемент  отображает описание гаджета. Его значение показывается на панели гаджетов.

<icons>

Элемент  определяет размер и графический файл иконки гаджета. Графическим файлом может быть любой файл, который поддерживается GDI+ 1.0. Атрибуты:

Height. Необязательный. Целое число которое указывает высоту в пикселях иконки графического файла.

Width. Необязательный. Целое число которое указывает ширину в пикселях иконки графического файла.

Src. Обязательный. Путь к графическому файлу.

Теперь создаем непосредственно файл main.html, отвечающий за функционал нашего гаджета. Его листитнг приведен ниже.

onload="ReadSettings();">
id="bg" src="img/online.png" alt = "online" onclick="SpeakerOnOff();" style="position:absolute; left:0px; top:0px; z-index:1"/>

По сути это обычный файл веб-страницы. Разберем его основные блоки.

В теге < title> прописано название нашего гаджета, а в теге < style> стиль его отображения на экране. Для более сложных гаджетов можно загружать отдельный файл каскадной таблицы стилей.

В теге < script> прописаны скрипты для управления гаджетом. Они написаны на языке java-script. Скрипты так же можно подгружать из внешнего файла средствами HTML. В скриптах описываются 3 функции:

GetSetting — позволяет получать настройки для гаджета;

readSettings - читает настройки по умолчанию при запуске гаджета;

SpeakerOnOff — запускает/останавливает трансляцию при щелчке по гаджету на экране.

Строчкой  < body onload=»readSettings();»> мы задаем чтение настроек по умолчанию при запуске гаджета.

А в основе гаджета лежит обычный медиаплеер виндовс. Его поведение прописано в теге < OBJECT>, а его настройки мы получили раньше.

Таким образом при запуске гаджета читаются настройки медиаплеера и он запускается в невидимом режиме, а щелчком по изображению гаджета мы запускаем/останавливаем воспроизведение потока, заданного ранее в настройках. О том, как менять эти настройки, а так же как запустить гаджет и сделать его инсталлятор мы поговорим в следующей статье.

Не стесняйтесь писать комментарии. С уважением, Максим.

ЧАСТЬ 2

Создание гаджета для Windows 7 на примере виджета онлайн-радио .Часть 2 — создаем ресурсы, отлаживаемся, делаем инсталлятор..

Гаджеты, by Timofeyeff.

В первой части статьи мы рассматривали исходный код гаджета. Мы создали файл манифеста gadget.xml и основной исполняемый файл main.html. Так же мы создали папку nashe.gadget в которой и разместили созданные файлы. В этой части статьи мы рассмотрим создание ресурсов для гаджета, отладку и запуск гаджета, а так же создание инсталлятора для удобной установки гаджета конечным пользователем.

Напомним, что наш гаджет работает следующим образом: при загрузке запускается медиаплеер в фоновом режиме и ему передаются параметры для потокового воспроизведения. При щелчке мышкой по гаджету воспроизведение останавливается, при повторном щелчке запускается. Для тогого что бы пользователь видел в каком режиме на данный момент находится наш гаджет нашему гаджету нужны 2 картинки: первая — медиаплеер находится в режиме воспроизведения, вторая — медиаплеер остановлен. Картинки рисуются в любом графическом редакторе. Для сохранения я использую формат png, можно использовать любой другой формат поддерживаемый библиотекой GDI+ версии 1.0, например jpeg или gif.

Нарисованные файлы рисунков приведены ниже:

Медиаплеер включен

Медиаплеер выключен

Размеры рисунков я принял 128х91 — по размеру стандартного гаджета производительности процессора и загрузки памяти Windows 7. Можно принять и другие размеры, главное при тестировании смотрите насколько стильно будет смотреться ваш гаджет вместе с другими гаджетами на рабочем столе. Так же я создал иконку нашего гаджета размером 64х64 пиксела и так же сохранил ее в формате png. Изображение иконки приведено ниже.

Иконка гаджета

В папке nashe.gadget создаем папку img куда и помещаем наши изображения. Создавать папку не обязательно, можно помещать файлы изображений и вместе с исполняемыми файлами, главное правильно указать путь к изображениям в коде, но правилом хорошего тона будет создание папки.

Пришло время тестирования нашего гаджета. Для тестирования достаточно папку с гаджетом, в моем случае nashe.gadget скопировать по одному из двух путей:

•  %USERPROFILE%\AppData\Local\Microsoft\Windows Sidebar\Gadgets (для пользовательских гаджетов);
• %SYSTEM_ROOT%\Program Files\Windows Sidebar\Gadgets (для глобальных гаджетов).

После чего можно открывать панель гаджетов и если все было сделано корректно наслаждаться изображением иконки нашего гаджета на панели, как это показано на рисунке ниже:

Панель гаджетов

Щелкаем дважды по иконке и видим наш гаджет на рабочем столе. Если все сделано корректно, то он должен сразу запуститься и начать воспроизведение потока. При щелчке по гаджету воспроизведение будет остановлено, а при повторном щелчке продолжено. Вроде все, но как сказать пользователю что он должен искать какую то папку, что то копировать? Непорядок. Необходимо сделать инсталлятор, который будет делать за пользователя все автоматически. Для создания инсатллятора гаджета нет необходимости искать сторонние программы, достаточно простого архиватора поддерживающего формат zip. Выделяем все файлы и папки в папке гаджета и сжимаем их архиватором в zip формат, как это показано на рисунке.

Сжатие файлов

Полученный архив называем nashe.gadget и в результате получаем файл nashe.gadget.zip (внимание: при выполнении следующей операции необходимо включить просмотр расширений файлов). Теперь удаляем расширение .zip, что бы получился файл nashe.gadget, после выполнениия этой операции иконка файла должна поменять вид. Полученный файл и есть файл инсталлятора. После его запуска система спросит, устанавливать ли этот гаджет и при положительном ответе пользователя сама разместит его в нужном месте. Данный файл можно загрузить на свой сайт или отдать друзьям на тестирование, в общем по вашему усмотрению.

Не стесняйтесь писать комментарии. С уважением, Максим.