Как создать виджет на рабочий стол. Создание собственных гаджетов

Недавно мне понадобилось создать гаджет для Windows Sidebar. Навыков в этом у меня не было, поэтому, немного погуглив и почитав документацию , приступаем.

Сразу покажу то, что получилось в итоге

Гаджет будет получать информацию с сайта в виде xml, парсить и, собственно, отображать. Также гаджет будет проверять наличие новых версий, и в случае их присутствия, отказываться работать:)
Изначально, ради получения опыта, хотел написать гаджет полностью на VBScript (так как с ним еще не имел дела), но в конечном итоге пришлось делать вставки на JavaScript.
Перейдем непосредственно к коду. Весь код здесь я рассматривать не буду, покажу лишь основные моменты. Ссылка на готовый гаджет – в конце статьи.
Главный файл гаджета – его манифест – файл Gadget.xml. Он должен называться именно так и располагаться в корне нашего архива (гаджет есть ни что иное, как архив ZIP с расширением.gadget).

Weather from Info.Denms.Ru 1.0.1232 Full Weather Widget (Info.Denms.Ru)

Рассмотрим его более подробно.
Элемент должен содержать apiVersion, равный 1.0.0 (на данный момент), а также атрибут src, в котором указан главный файл нашего гаджета;
Разрешения для гаджета. Устанавливаем равным full;
Минимальная версия Widows Sidebar. На данный момент – 1.0;
Параметры - имя гаджета, - версия, - информация об авторе, - ссылка на страницу с гаджетом, - иконка гаджета и будут отображаться на панели установленных гаджетов.

Файл main.html – обычный html файл, приводить его полностью не буду, остановлюсь лишь на некоторых моментах.
С помощью элемента g:background задается фон гаджета. Сделаем его прозрачным.

Гаджет может находиться в двух состояниях – docked (слева на скрине выше), и undocked (справа). Будем хранить текущее состояние гаджета в переменной JavaScript docked.

Функция-обертка isDocked потребуется нам в дальнейшем, чтобы из VBScript узнать текущее состояние гаджета (как я не старался, но реализовать это на чистом VBScript не смог). Еще одно замечание – скрипты корректно работают именно в этом порядке, т.е. сначала описываем скрипты VBScript, потом JavaScript.

Остальные элементы в main.html представлены элементами DIV с абсолютным позицированием. Впоследствии из скриптов мы будем обращаться к ним по их id.

С помощью JavaScript зададим состояния docked и undocked для гаджета, а так же укажем файл настроек (main.js)

System.Gadget.onDock = resize; System.Gadget.onUndock = resize; System.Gadget.settingsUI = "settings.html"; System.Gadget.onSettingsClosed = SettingsClosed; docked=0; //начальное состояние гаджета resize(); //инициализация

Как видно из листинга выше, при смене состояний гаджета будет вызываться функция resize().

Function resize() { bd = document.body.style; System.Gadget.beginTransition(); if (System.Gadget.docked) { // small state bd.width=148; //устанавливаем размеры гаджета bd.height=201; docked = 1; bd.background="url(images/gadget.png) no-repeat"; //устанавливаем фон //далее следует перенос значений из состояния undocked в docked и обнуление элементов для состояния undocked document.getElementById("small_needupdate").innerHTML = document.getElementById("big_needupdate").innerHTML; document.getElementById("big_needupdate").innerHTML = ""; //... } else { // big state bd.width=230; bd.height=160; bd.background="url(images/gadgeth.png) no-repeat"; docked=0; //перенос значений из состояния docked в undocked и обнуление элементов для состояния docked document.getElementById("big_needupdate").innerHTML = document.getElementById("small_needupdate").innerHTML; document.getElementById("small_needupdate").innerHTML = ""; //... } System.Gadget.endTransition(System.Gadget.TransitionType.morph,1); }

Также можно описать функцию сохранения настроек. В моем гаджете их нет, но для примера покажу как это делается

Function SettingsClosed(event) { if (event.closeAction == event.Action.commit) { //alert System.Gadget.Settings.readString("test"); } }

ReadString – читает ранее сохраненную строку, writeString, соответственно, записывает.
Методы System.Gadget.beginTransition(); и System.Gadget.endTransition(); нужны для “плавного» изменения размера гаджета. В Windows Seven они игнорируются , но я все же оставил их для обратной совместимости.

Как уже говорилось выше, сервер предоставляет нам информацию о погоде в формате xml.

1.7 41 пасмурно снег 87 Ю-З 5 -3 -1 -1 26 1 -9 41 0 …

Скачивать и парсить xml будем на VBScript.

Sub DownloadXML2 Set objXML = CreateObject("Microsoft.XmlHttp") objXML.Open "GET", "http://info.kovonet.ru/weather.xml", True objXML.OnReadyStateChange = GetRef("objXML_onreadystatechange") objXML.setRequestHeader "If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT" objXML.Send iTimeoutID = window.SetTimeout("mySleep", 1000) End Sub

Функция mySleep будет проверять наше соединение на таймаут.

Sub mySleep if bRespReceived = "false" then "ответ еще не получен iTimeout = iTimeout + 1 if (iTimeout > 30) then "таймаут timerFirstRun = window.SetTimeout("Update", 60000) "попытка повторного обновления через минуту else "таймаут еще не достигнут, продолжаем считать секунды iTimeoutID = window.SetTimeout("mySleep", 1000) end if end if End Sub

В случае успешного скачивания objXML.readyState будет равен четырем, а статус (objXML.status) вернет значение 200.

Function objXML_onreadystatechange() If (objXML.readyState = 4) Then "msgbox objXML.statusText If (objXML.status = 200) Then bRespReceived=true SaveFile(objXML.responseText) else timerFirstRun = window.SetTimeout("Update", 60000) "попытка повторного обновления через минуту End If End If End Function

В этом случае сохраняем файл во временную папку Windows

Function SaveFile(what) Set fso = CreateObject("Scripting.FileSystemObject") tempFolder = fso.GetSpecialFolder(2) filepath = tempFolder+"\weather.xml" Dim fso1, tf Set fso1 = CreateObject("Scripting.FileSystemObject") Set tf = fso1.CreateTextFile(filepath, True, True) "rewrite, unicode tf.Write(what) tf.Close ParseXML End Function

И начинаем парсить файл.

Sub ParseXML Set fso = CreateObject("Scripting.FileSystemObject") tempFolder = fso.GetSpecialFolder(2) filepath = tempFolder+"\weather.xml" Set xmlDoc = CreateObject("Msxml2.DOMDocument") xmlDoc.async="false" xmlDoc.load(filepath) "главная нода – в нашем случае Set currNode = xmlDoc.documentElement "дни недели – Set dayNode = currNode.firstChild While Not dayNode Is Nothing Set currNode = dayNode.firstChild While Not currNode Is Nothing if currNode.parentNode.getAttribute("id") = "today" then "сегодняшний день if currNode.nodeName = "temp" then document.getElementById(prefix+"maintemp").innerHTML = currNode.childNodes(0).text+Chr(176) "отображаем остальные элементы Else "не сегодняшний день, отображаем более мелко "... end If Set currNode = currNode.nextSibling Wend Set dayNode = dayNode.nextSibling Wend End Sub

Проверка на новые версии производится точно таким же способом.
Не забываем создать файл настроек - settings.html, о существовании которого мы объявили выше.

Настройки

Вот, собственно, и все. Буду рад, если моя (первая:)) статья оказалась кому-то полезной.

Использованные источники.

Можно регулировать. Если непрозрачность гаджета составляет менее 100%, он становится полностью непрозрачным при наведении курсора. Казалось бы, таким способом можно сделать гаджет вовсе невидимым, чтобы он появлялся только при наведении курсора. Проблема в том, что значение непрозрачности 0% для гаджетов не предусмотрено. Тем не менее, сделать гаджет полностью прозрачным вполне возможно, и в этой статье я расскажу, как именно.

Добавление гаджетов на рабочий стол

На случай, если вы до сих пор не пользовались гаджетами, объясню, как добавлять их на рабочий стол. Чтобы сделать все гаджеты видимыми, нажмите на столе правой кнопкой мыши и выберите опцию «Вид | Отображать гаджеты рабочего стола» (View | Show Desktop Gadgets, рис. A).

Рисунок A. Это единственный способ включать/отключать гаджеты. Вместо того, чтобы делать гаджеты полностью прозрачными, их все можно скрыть, воспользовавшись данной опцией.

Чтобы добавить гаджеты на рабочий стол, нажмите на нем правой кнопкой мыши и выберите опцию «Гаджеты» (Gadgets). Появится новое окно (рис. B), из которого гаджеты можно перетаскивать на рабочий стол.

Рисунок B. Нет нужного гаджета? Нажмите ссылку «Найти гаджеты в Интернете» (Get More Gadgets Online).

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

Чтобы изменить прозрачность гаджета, нажмите на нем правой кнопкой мыши и выберите опцию «Непрозрачность | X%» (Opacity | X%), где X - числовое значение (рис. C).

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

Настройка

Теперь давайте посмотрим, как делать гаджеты полностью прозрачными. Нажмите на нужном гаджете правой кнопкой мыши и присвойте ему значение непрозрачности 20%. После этого проделайте следующие действия:

Шаг первый. Завершите работу боковой панели Windows. Для этого нажмите правой кнопкой мыши на панели задач, выберите опцию «Запустить Диспетчер задач» (Start Task Manager), найдите в списке процесс «sidebar.exe» и завершите его. При этом все гаджеты с рабочего стола пропадут. Если этого не сделать, вам не удастся отредактировать конфигурацию.

Шаг второй. Найдите файл настроек гаджетов рабочего стола «Settings.ini». Как правило, он хранится в папке «C:\Пользователи\{имя пользователя}\AppData\Local\Microsoft\WindowsSidebar\» («C:\Users\{имя пользователя}\AppData\Local\Microsoft\WindowsSidebar\» для англоязычного интерфейса). Откройте этот файл в Блокноте (Notepad), отыщите в нем строку «PrivateSetting_GadgetOpacity=”{20}”» и замените “20” на “1”. Должно получиться так: «PrivateSetting_GadgetOpacity=”{1}”». После этого сохраните изменения и закройте Блокнот.

Шаг третий. Теперь снова запустите процесс, отвечающий за отображение гаджетов. Для этого введите «sidebar.exe» (без кавычек) в строке поиска меню «Пуск» (Start) и нажмите . На рабочем столе появятся все гаджеты, за исключением того, для которого было выставлено значение непрозрачности 20%. Но на самом деле он никуда не делся: подведите курсор туда, где должен размещаться этот гаджет, и он тут же станет видимым. Поставленная задача решена!

Таким же способом можно скрыть все остальные гаджеты. Только не забудьте выставить для каждого из них значение непрозрачности 20% и обязательно завершите процесс «sidebar.exe», чтобы отредактировать файл настроек, а потом запустите его снова.

В заключение

Я очень люблю мини-приложения и в

Сразу покажу то, что получилось в итоге

Weather from Info.Denms.Ru 1.0.1232 Full Weather Widget (Info.Denms.Ru)

С помощью JavaScript зададим состояния docked и undocked для гаджета, а так же укажем файл настроек (main.js)

Как видно из листинга выше, при смене состояний гаджета будет вызываться функция resize().

Function SettingsClosed(event) { if (event.closeAction == event.Action.commit) { //alert System.Gadget.Settings.readString("test"); } }

Как уже говорилось выше, сервер предоставляет нам информацию о погоде в формате xml.

1.7 41 пасмурно снег 87 Ю-З 5 -3 -1 -1 26 1 -9 41 0 …

Скачивать и парсить xml будем на VBScript.

Функция mySleep будет проверять наше соединение на таймаут.

В случае успешного скачивания objXML.readyState будет равен четырем, а статус (objXML.status) вернет значение 200.

В этом случае сохраняем файл во временную папку Windows

И начинаем парсить файл.

Настройки

Вот, собственно, и все. Буду рад, если моя (первая:)) статья оказалась кому-то полезной.

Использованные источники.

– это HTML или скриптовые приложения, которые отображают какую либо информацию из сторонних источников или выполняют определенную функцию.

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

Чаще всего гаджеты можно увидеть на боковой панели Windows (Sidebar), которая обычно расположена на правой стороне рабочего стола. Гаджеты в Windows 7 могут быть расположены не только на боковой панели. Для этого достаточно просто их поместить в любое место рабочего стола. Гаджеты – это часть рабочего стола так же, как и кнопка Start и область уведомлений.

Из чего состоит гаджет для windows 7?

Как правило, простейший гаджет в Windows 7 состоит из 2-х файлов:

html файл (gadget.html) – в этом файле описан внешний вид гаджета и его функциональность.

xml файл (gadget.xml) – конфигурационный файл или еще его называют файл манифеста, который включает в себя всю информацию о гаджете и его настройках.

Как создать гаджет в Windows 7? Этап №1

Для начала надо создать директорию, в которой будет находиться гаджет. По мнению специалистов Microsoft, очень удобным является директория разделенная точкой. Например: first. gadget. Но на самом деле не имеет значения, как будет называться папка. Главное чтобы было понятно.

Разместить папку можно где угодно, но при создании и тестировании гаджета удобней всего размещать в системных папках. Например:

%USERPROFILE%\AppData\Local\Microsoft\Windows Sidebar\Gadgets (для текущего пользователя)
%SYSTEM_ROOT%\Program Files\Windows Sidebar\Gadgets (для всех пользователей)

На рис. 1 можно увидеть, что директория с гаджетом расположена в %USER_DATA%\Local\Microsoft\Windows Sidebar\Gadgets

Этап №2

Затем создаем файл манифеста в директории гаджета.

"Манифест” гаджетов – это XML файл, который содержит общую конфигурацию и информацию для ассоциированного гаджета. Информация, указанная манифестом, включает мета-информацию, которая передается пользователю в диалоге информации о гаджетах таких как: иконка для гаджета, разработчика гаджета и т.п. Вся эта информация определяется в манифесте. Имя манифеста всегда должно быть gadget.xml .

Пример файла gadget.xml:

Ivanov Ivan Test

IvanovIvan.gadget

0.0.1

Возможно вас заинтересует