Создание собственных гаджетов. Комментарии (7) к “Гаджеты для рабочего стола”

Гаджеты (Виджеты) – одна из самых противоречивых функций в оконной ОС. Некоторые пользователи устанавливают их и даже не представляют, как можно полноценно использовать ПК без их помощи. Другие даже не знают, что это такое, и вполне успешно справляются. Есть ли гаджеты для Windows 10, что это такое и как их установить - ответ на эти вопросы мы подробно разберем далее в статье.

Почему виджеты пропали из Виндовс 10?

С приходом сначала 8, а затем и десятой версии, этот вопрос был решен, потому что Microsoft решила полностью убрать функцию из системы по некоторым причинам:

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

Теперь гаджеты для виндовс 10 на официальном сайте не найти.

Тем не менее, виджетов больше нет, и причины приведены. Большая часть пользователей просто согласилась и начала использовать плитки, но есть и те, кто не хочет лишать себя столь удобной возможности и задались вопросом, как поставить гаджеты на Windows 10. Ради них и постарались сторонние разработчики, создавшие ПО, которое максимально похоже копирует функциональность виджетов и подсказывает, как установить гаджеты на рабочий стол в Windows 10.

Как установить гаджеты на рабочий стол Windows 10 с помощью программ 8GadgetPack

• Медиа-центр;
• Movie Maker;
• .NetFramework;
• DirectX 9 версии и многое другое.

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

Если вы ищете способы, как удалить гаджеты на Виндовс 10 – то это делается , которые добавляют их в ОС.

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

Краткое введение в гаджеты Microsoft
Windows Vista содержит в себе множество новых компонентов, и одним из самых нужных и наиболее ожидаемых, несомненно, является Windows Sidebar. Sidebar - область экрана, которая отведена специально для гаджетов также, как раньше была сделана панель быстрого запуска - специально для важных ярлыков. Гаджеты - минипрограммы, они занимают мало места и могут сделать ни больше ни меньше того, что реализует в них создатель. Например, сейчас в Windows Vista входят несколько гаджетов: небольшой калькулятор, программа чтения RSS лент и пара других. Вам не понадобится много времени, чтобы понять, насколько удобно использовать гаджеты.

Но давайте быть честными: мир заполнен вещами, которые могут сделать далеко не все люди. Но с появлением гаджетов положение вещей координально изменяется. Это делает гаджеты действительно интересными для нас: новые технологии были разработаны для людей, которые пишут скрипты. Не поймите нас неправильно: да, гаджеты могут иметь ультрасовременный интерфейс и выполнять некоторые очень сложные задачи, но все же это оказывается не что иное, как миниатюрные HTML страницы, содержащие в себе небольшой код VBScript (включая код WMI) или Java Script. Немного старания, и вы сделаете свой первый гаджет.

Научиться разработке на каком-либо языке программирования не так сложно, как это может показаться. К примеру, в данном видео https://itvdn.com/ru/video/php_start можно легко изучить основы PHP и потом написать свой первый код.

Начинам творить
Очень многие люди критиковали Microsoft за то, что многие из продуктов корпорации очевидно были разработаны для использования роботами или жителями планеты Омикрон IV; во всяком случае они не были разработаны для использования людьми. Теперь такие выражение не имеют места, т.к. создавать гаджеты смогут все. Хотя, если Вы вдруг робот или житель планеты Омикрон IV, будьте уверены, что Вы можете с легкостью создать гаджет.

Для создания гаджета, Вы нуждаетесь только в двух вещах:

1) Файл-manifest c именем Gadget.xml. Этот файл содержит все параметры настройки для вашего устройства, включая название гаджета, автора и информацию авторского права, информацию о странице HTML, которая составляет фактический код гаджета.
2) Файл HTML (например, Test.htm). Гаджеты - действительно не что иное, как HTML файлы. Вы просто создаете HTML файл, добавляете соответствующие признаки и код, и Вы увидите гаджет.
Да, мы знаем, что Вы понятия не имеете, что мы подразумеваем под "соответствующими признаками и кодом". Расслабьтесь; этому посвящается остальная часть статьи.
Это единственное, что требуются чтобы создать гаджет. Но, также нам понадобится графический файл, например icon.png. Это будет логотип вашего гаджета.

От теории к практике
1. Поместите все файлы в папку гаджета.
Внимание: поместив все файлы в папку и Вы получите гаджет. Не требуется никакого компилирования, никаких компиляторов за.95, ничего более утомительного или технического. Просто копирование файлов в указанную папку.
На всякий случай, если Вы вдруг захотите послать нам.95, то мы будем очень счастливы:).

Специальная папка для гаджетов
Для начала зайдём в папку с предустановленными гаджетами от Microsoft.
Нажмите Windows + R и в появившемся окне введите:

%userprofile %\appdata\local\microsoft\windows sidebar\gadgets

Примечание: если вы используете Windows Sidebar, портированный на Windows XP из Windows Vista build 5342, загруженный с сайт то введите:

%program files%\Windows Sidebar\Gadgets

Всё ещё с нами? Отлично. Далее идёт долгожданная практика/
В этой папке создайте новую папку. Дайте этой папке любое название, но обязательно с.gadget в конце имени (например, Test.gadget). Очевидно, вам будет удобнее, если название папки будет иметь некоторое сходство с функциями гаджета. Однако операционная система просто использует эту папку, чтобы идентифицировать файлы, содержащиеся в ней; название гаджета будет получено из информации, найденной в файле gadget.xml, а не из названия папки.

Все, что Вы должны сделать сейчас - создать файлы Gadget.xml и Test.htm в папке. Это означает, что Вы теперь имеете гаджет Microsoft.

Файл gadget.xml
Этот файл написан на XML языке, об этом можно сразу догадаться из-за расширения.xml. Фактически gadget.xml является особым manifest файлом, но в тоже время простым текстовым файлом, который содержит конфигурацию гаджета.
Вот код gadget.xml, который мы подразумеваем (по началу используйте его):

My First Gadget
The Microsoft Scripting Guys
2006 Microsoft Corporation
Sample gadget that returns the name of the installed operating system.

icon.png



html
full
test.htm

Прежде, чем Вы спросите меня, можно ли просто скопировать этот файл и использовать его в значительной степени как есть - да, только делая необходимые изменения в нескольких тегах. (И не забывайте, Вы обязательно должны назвать файл Gadget.xml.)
Вот эти теги:

Название гаджета, которое появляется в диалоговом окне добавления гаджетов.

Имя или ник человека, который написал гаджет. Автор, авторское право, и описание гаджета вы увидите в окне добавления гаджетов

Краткое описание гаджета (что делает, и т.п.).

Название файла изображения (логотип гаджета). Для более полной информации смотрите Создание логотипа в следующем подразделе этого документа.

Вероятно не самое интуитивное название тега в мире, но это - название файла HTML, который составляет ваш гаджет.

Ну здесь без комментариев. Сайт разработчиков гаджета.

Для людей, которые ещё не совсем поняли код gadget.xml - полный русский перевод этого файла (при создании гаджетов пользуйтесь только файлом gadget.xml на английском языке):

Мой Первый гаджет
Парни из Microsoft
2006 Корпорация Microsoft
Пример файла gadget.xml, который возвращает название установленной операционной системы.

icon.png



html
полные
test.htm
www.microsoft.com/technet/scriptcenter

t;

html
полные
test.htm
www.microsoft.com/technet/scriptcenter

Создание иконки
Конечно же, Вам решать какой будет логотип гаджета, но если Вы не хотите создавать изображение (в файле gadget.xml не заполняйте тег ), и Windows Sidebar предоставит Вам изображение по умолчанию. Абсолютно бесплатно.

Если Вы действительно решаете сделать логотип, имейте в виду, что "иконка" - только название, данное файлу с изображением; это не истинные изображения Windows, а графика, которая должна быть создана, при помощи специального программного обеспечения (переводчик искренне и из лучших побуждений рекомендует пользоваться замечательным приложением MSPAINT.EXE, которое входит в состав Windows с 1994 года для создания логотипа). Логотип - только файл изображения формата GIF, JPG, или PNG. Все логотипы гаджетов от Microsoft, входящие в состав Sidebar, выполнены в PNG формате; это - вероятно потому, что PNG графика учитывает прозрачность, давая Вам возможность сделать очень красивые картины. (От Вас конечно требуется необходимый талант.) Однако, Вы можете использовать JPG файлы. По размеру они значительно меньше PNG, но решайте сами, т.к. всё зависит от конкретной ситуации.
Хороший вопрос: какого размера должен быть ваш логотип? Оптимальный размер - 64х64 пикселя. Более большие файлы, например 128x128 будут уменьшены Sidebar до размера 64x64 с возможной потерей качества.

Вот, например, иконка, которую использовали мы:

Отметить. Вы, возможно, заметили, что, в файле gadget.xml тег вложен в тег :

icon.png

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

Файл HTML
Файл HTML, который составляет сам гаджет, фактически не отличается от любой веб-страницы, которая использует динамический HTML; чтобы создать HTML, просто используют любую действительную маркировку HTML (включая стили CSS) плюс код скрипта. Мы покажем Вам примерную страницу HTML. Прежде, чем мы сделаем это, кратко расскажем про код WMI.

Работа с WMI
Если Вы системный администратор, тогда Вы привыкли писать скрипты, которые используют WMI. Это понятно, в конце концов, WMI - технология, которая помогает Вам управлять всем, начиная с принтеров, дисководов заканчивая мышью и монитором. Использовать WMI очень удобно. Например, предположите, что Вы хотите узнать название операционной системы, установленной на местном компьютере. Нет проблем; вот код WMI, который возвратит эту информацию для Вас:

StrComputer = "."

Set objWMIService = GetObject("winmgmts:\" & strComputer & "\root\cimv2")

For Each objItem in colItems
Msgbox objItem.Caption
Next

Если Вы планируете создавать гаджеты для администрирования системы, то у нас есть плохие новости для Вас: скрипты WMI, которые Вы привыкли писать, не будут работать в гаджетах. (Ждите, не делайте ничего решительного, мы попытаемся устранить эту проблему, обещаем.) Потому что, в глубине души, гаджет - не что иное как Веб-страница, и, из-за соображений безопасности, Веб-страницы не в состоянии использовать GetObject. Если Вы поместите предыдущий код в гаджет, Вы увидите это ошибочное сообщение:

Компонент ActiveX не может создать объект: "GetObject"

Мм-да.
Но не паникуйте. Вы можете все еще использовать код WMI в пределах гаджета; Вы только не можете использовать GetObject и winmgmts. Вместо этого Вы должны использовать CreateObject, чтобы создать объект WbemScripting.SWbemLocator, затем используем метод ConnectServer, чтобы соединиться с обслуживанием WMI. Другими словами, вот что Вы должны написать в результате:

StrComputer = "."

Set colItems = objWMIService.ExecQuery("Select * From Win32_OperatingSystem")

For Each objItem in colItems
Msgbox objItem.Caption
Next

Понятно? Как мы и сказали - нет повода для паники. (Хотя, по всей справедливости, это была, вероятно, наша ошибка, что Вы запаниковали вначале)/ Единственное различие между скриптом, который напрямую использует WMI и скриптом, который использует ConnectServer для соединения с обслуживанием WMI в связи. Вы привыкли делать связь, которая использует единственную строку кода:

Set objWMIService = GetObject("winmgmts:\" & strComputer & "\root\cimv2")

Теперь Вы должны использовать две строки кода, чтобы сделать связь (да, удваивая вашу рабочую нагрузку!) Вы создаете объект WbemScripting.WbemLocator, и используете метод ConnectServer, чтобы связаться с обслуживанием WMI. Заметьте, что мы передаем ConnectServer два параметра - это название компьютера, чтобы соединиться с представленный переменной strComputer и WMI namespace, мы хотим соединиться в этом случае с root\cimv2):

Set objLocator = CreateObject("WbemScripting.SWbemLocator")
Set objWMIService = objLocator.ConnectServer(strComputer, "root\cimv2")

Вам понятно? Хорошо. Теперь давайте возвращаться к нашей запланированной теме.

Создание Файла HTML
Поскольку мы уже отметили, гаджет - только файл HTML. Это означает, что любые элементы, включая динамические, Вы можете использовать в странице HTML, могут также использоваться в гаджете. Поскольку Вы вероятно уже выяснили, что также гаджет составляет код VBScript; хотя большинство ранних гаджетов на Веб-сайте гаджетов Microsoft сделало на JavaScript, но вначале работать с VBScript легче чем с Java Script.

Мы уже показали Вам код WMI, который возвращает название операционной системы, установленной на компьютере; давайте посмотрим, можем ли мы превратить тот код в гаджет. Мы начнем с очень простого, создавая устройство, которое состоит из единственной кнопки, щелкнув по которой, мы увидем название операционной в окне сообщения. Вот - коде HTML для нашего первого гаджета:

My First Gadget

body{width:120;height:160}

Sub RunSub
strComputer = "."

Set objLocator = CreateObject("WbemScripting.SwbemLocator")
Set objWMIService = objLocator.ConnectServer(strComputer, "root\cimv2")

Set colItems = objWMIService.ExecQuery("Select * From Win32_OperatingSystem")

For Each objItem in colItems
Msgbox objItem.Caption
Next
End Sub

Поскольку Вы можете видеть, нет ничего сложного в этом коде; это - элементарный HTML, который не делает намного больше, чем показ единственной кнопки на странице. Когда по кнопке щелкают, подпрограмма по имени RunSub выполнена; та подпрограмма использует WMI, чтобы определить название операционной системы, установленной на компьютере.

Отметить. Хорошо, возможно это - элементарный HTML для некоторых людей, но что, если Вы не имеете никакого отношения к HTML? Тогда прочитайте документацию по HTML, поверьте изучить HTML очень легко. Особенно заострите внимание на разделах, посвящённых тегам и .

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

body{width:120;height:160}

Этот тег просто говорит, что мы хотим сделать наш гаджет с размерами 120 пикселей в ширину (сам Windows Sidebar в ширину около 130 пикселей) и 160 пикселей в высоту. Для этого специфического гаджета 160 пикселей в длину будет слишком много, поэтому мы можем просто назначить собственную длину, например в 50 пикселей:

body{width:120;height:50}

Согласитесь, такой гаджет смотрится гораздо лучше.

Когда Вы щелкаете по кнопке Run появляется окно, где нас сообщается версия операционной системы!

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

Показ данных в теге
Пока мы создали простейший гаджет, к тому же он работает только когда мы щелкаем по кнопке. Ничего неправильного с этим нет, и вероятно будут времена, когда ваш гаджет будет возвращать так много информации, что она поместится только в окне сообщения, окне Internet Explorer, или некотором другом местоположении. С другой стороны рано или поздно Вы также создадите гаджет, где показ информации в окне сообщения не имеет смысла, и щелчок по кнопке будет лишним. Например, предположите, что Вы решили создать часы для Windows Sidebar. Представьте, чтобы узнать сколько сейчас времени Вы будете каждый раз нажимать на кнопку, и к тому же время выскочит в окне сообщения. Несомненно, на планете Омикрон IV любят такие вещи. Но люди находят это немного утомительным, не говоря уже о совершенно глупом.

Другими словами, мы нуждаемся в способности создать гаджеты, которые могут:
1) Показывать данные непосредственно в пределах границ гаджета.
2) Выводить данные автоматически, не требуя пользовательского взаимодействия с гаджетом.
3) Периодически обновлять информацию. Например, гаджет, который показывает свободную оперативную память компьютера (далее мы создадим такой гаджет) должен постоянно обновлять сведения.

Сразу разобраться будет непросто, поэтому мы будем изучать эти навыки по одному. Давайте для начала разберём первый пункт, используя тег - простой и легкий способ показать информацию непосредственно в пределах границ гаджета.

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

My First Gadget

body{width:120;height:160}

Sub RunSub
strComputer = "."

Set objLocator = CreateObject("WbemScripting.SwbemLocator")
Set objWMIService = objLocator.ConnectServer(strComputer, "root\cimv2")

Set colItems = objWMIService.ExecQuery("Select * From Win32_OperatingSystem")

For Each objItem in colItems

Next
End Sub

Всё работает, как мы и хотели. Классно!

Дополнительный бонус: первоклассный фон для гаджета
Поговорим больше о создании причудливо-выглядящих гаджетах. Мы расскажем несколько простых методов создания такого гаджета. Зачем это надо? Гаджет будет оригинально выглядеть и Вы сможете его дороже продать:). Например, предположим, что у Вас есть рисунок (назовём его background.jpg), который будет хорошим фоном для гаджета. В таком случае, все, что Вы должны сделать, это вставить в ваш HTML файл после тега такую строчку:

Этот код заставляет использовать файл background.jpg как фон гаджета:
Только удостоверьтесь, что background.jpg сохранен в вашей папке c гаджетом.

Альтернатива. Вы можете создать гаджет с различным второстепенным цветом; только теперь после тега вставьте эту строку:

Получим гаджет с ярко-красным фоном? Эй, а почему нет?

Наконец, Вы можете сделать градиентный фон для вашего гаджета при использовании одного из Веб-фильтров Microsoft. Вот что мы изменим в стиле этого гаджета:
1) Сделаем шрифт белым, а конкретно Arial 8pt.
2) Добавим градиентный фильтр.

Сразу приводим готовый код:

My Gadget

body{width:120;height:160;font:8 pt Arial;color:white;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr="#000000",
EndColorStr="#0000FF")}

Sub RunSub
strComputer = "."
Set objLocator = CreateObject("WbemScripting.SwbemLocator")

Set colItems = objWMIService.ExecQuery("Select * From Win32_OperatingSystem")
For Each objItem in colItems
DataArea.InnerHTML = objItem.Caption
Next
End Sub

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

Создание гаджета, выводящего данные автоматически
Наличие гаджета, показывающего информацию в своих границах, а не в окне сообщения, конечно хорошо. Однако, мы все еще должны щелкнуть по кнопке, чтобы получить информацию. Конечно должен быть способ собрать информацию автоматически и показать её сразу при загрузке гаджета.

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

My First Gadget

body{width:120;height:160}

Sub Window_OnLoad
RunSub
End Sub

Sub RunSub
strComputer = "."

Set objLocator = CreateObject("WbemScripting.SwbemLocator")
Set objWMIService = objLocator.ConnectServer(strComputer, "root\cimv2")

Set colItems = objWMIService.ExecQuery("Select * From Win32_OperatingSystem")

For Each objItem in colItems
DataArea.InnerHTML = objItem.Caption
Next
End Sub

Легко заметить, что этот код очень похож на наш предыдущий. Фактически, есть только два различия:
1) Мы удалили кнопку из гаджета. Это означает, что больше не нужно щелкать по кнопке (впрочем, нет больше ничего, по чему можно щёлкнуть).
2) Мы добавили подпрограмму Window_OnLoad.

Многие знают, что подпрограмма Window_Onload, включенная в Веб-страницу, разработана для управления временем загрузки или обновления Веб-страницы. Эта подпрограмма функционирует точно так же и в нашем гаджете: она автоматически управляет временем при его загрузке. Мы просто создаем подпрограмму по имени Window_OnLoad и помещаем ниже код, которым мы хотим управлять.

Для этого специфического гаджета наша подпрограмма Window_OnLoad выглядит так:

Sub Window_OnLoad
RunSub
End Sub

Вы можете увидеть все, что мы делаем в этой подпрограмме - запрос второй подпрограммы: RunSub. Мы поместили наш код WMI в отдельную подпрограмму, хотя возможно было поместить скрипт WMI в подпрограмму Window_OnLoad. Итак, почему мы создавали вторую лишнюю подпрограмму? Всё просто: это поможет нам легко перейти к созданию следующего гаджета.

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

My Gadget

body{width:120;height:40"}

Sub Window_Onload
GetMemory

End Sub

Sub GetMemory
Set objLocator = CreateObject("WbemScripting.SwbemLocator")
Set objWMIService = objLocator.ConnectServer(".", "root\cimv2")
Set colItems = objWMIService.ExecQuery("Select * From Win32_OperatingSystem")
For Each objItem in colItems

Next
End Sub

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

Подпрограмма для определения текущего количества доступной памяти (подпрограмма по имени GetMemory) :

Sub GetMemory
Set objLocator = CreateObject("WbemScripting.SwbemLocator")
Set objWMIService = objLocator.ConnectServer(".", "root\cimv2")
Set colItems = objWMIService.ExecQuery("Select * From Win32_OperatingSystem")
For Each objItem in colItems
DataArea.InnerHTML = objItem.FreePhysicalMemory
Next
End Sub

Но нас больше интересует не подпрограмма GetMemory, а подпрограмма Window_OnLoad:

Sub Window_Onload
GetMemory
iTimerID = window.SetInterval("GetMemory", 10000)
End Sub

Можно заметить, что мы делаем две вещи в этой подпрограмме. Сначала запускаем подпрограмму GetMemory - это для гарантии, что после загрузки нашего гаджета доступная память немедленно будет показана. Вторая вещь, которую мы делаем, немного более интересна:
iTimerID = window.SetInterval("GetMemory", 10000)

Здесь мы используем метод SetInterval, чтобы создать таймер. Этот таймер будет запускать подпрограмму GetMemory каждые 10 секунд (10 000 миллисекунд). Так мы заставляем гаджет автоматически обновлять сведения: каждые 10 секунд гаджет запускает подпрограмму GetMemory, это означает, что через 10 секунд гаджет будет использовать WMI, чтобы получить текущее количество доступной памяти и затем показать эти данные в теле гаджета. Если 10 секунд слишком много для Вас, измените параметр 10000 на меньшее число, например, число 5000 заставит гаджет обновлять данные каждые 5 секунд (5000 миллисекунд). Аналогично, изменив 10000 на большее число, интервал обновления будет больше.

Мы никогда не говорили, что это было произведение искусства. Но теперь, когда Вы понимаете основы создания гаджетов (особенно гаджеты интересны администраторам систем), надеемся Вы создадите произведения искусства. В следующей части мы будем говорить о слиянии графики с гаджетами и многих новых полезных возможностях.

Напоследок - "Домашнее задание". Далее идёт немного (с акцентом на слове немного) более сложный код гаджета, который делает две вещи: это контролирует доступную память и также, когда щелкают по кнопке Information, показывает в Веб-странице детальную информацию о системе. Само собой разумеется, этот гаджет не является примером всех возможностей гаджетов, но пример действительно показывает Вам диапазон способностей, которые одновременно могут быть включены в один гаджет. Вот собственно и код:

Примечание переводчика: Внимание, когда я сохранил этот код и запустил гаджет (я делал это в Windows XP c портированным Sidebar из билда 5342) система намертво зависла, и мне пришлось заново переводить половину статьи! Так что осторожнее. Хотя я думаю, что в оригинальном Sidebar из Windows Vista такого не возникнет, но я этого не проверял! После кода идут дополнительные ссылки по теме.

My Gadget

body{width:120;height:80}

Sub Window_Onload
GetMemory
iTimerID = window.SetInterval("GetMemory", 10000)
End Sub

Sub GetMemory
Set objLocator = CreateObject("WbemScripting.SwbemLocator")
Set objWMIService = objLocator.ConnectServer(".", "root\cimv2")
Set colItems = objWMIService.ExecQuery("Select * From Win32_OperatingSystem")
For Each objItem in colItems
DataArea.InnerHTML = objItem.FreePhysicalMemory
Next
End Sub

Set objLocator = CreateObject("WbemScripting.SwbemLocator")
Set objWMIService = objLocator.ConnectServer(".", "root\cimv2")

Set colItems = objWMIService.ExecQuery("Select * From Win32_ComputerSystem")
For Each objItem in colItems
strHTML = "Computer Name: " & objItem.Name & "
"
strHTML = strHTML & "User Name: " & objItem.UserName & "

"
Next

Set colItems = objWMIService.ExecQuery("Select * From Win32_OperatingSystem")
For Each objItem in colItems
strHTML = strHTML & "Operating System: " & objItem.Caption & "
"
strHTML = strHTML & "Service Pack: " & objItem.ServicePackMajorVersion & "

"
Next

Set colItems = objWMIService.ExecQuery("Select * From Win32_Processor")
For Each objItem in colItems
strHTML = strHTML & "Processor: " & objItem.Caption & "

"
Next

Set colItems = objWMIService.ExecQuery _
("Select * From Win32_NetworkAdapterConfiguration Where IPEnabled = True")
For Each objItem in colItems
strHTML = strHTML & objItem.Caption & "
"
For Each strAddress in objItem.IPAddress
strHTML = strHTML & "IP Address: " & strAddress & "
"
Next
Next

Set objIE = CreateObject("InternetExplorer.Application")
objIE.Navigate("about:blank")
objIE.Toolbar = 0
objIE.StatusBar = 0
Set objDoc = objIE.Document.Body
objDoc.InnerHTML = strHTML
objIE.Visible = True
End Sub

Основные шаги

Здесь описано несколько основных шагов при создании и размещении гаджетов.

Составьте спецификацию гаджета в текстовом редакторе, а затем сохраните ее на общедоступном веб-сервере.

Добавьте гаджет в контейнер, например iGoogle или Orkut. Контейнер – это приложение или сайт, которые могут выполнять гаджеты.

Структура гаджета

Разобравшись в способах изменения и публикации гаджетов, можно начинать включать в спецификации гаджетов более "продвинутые" функции. XML-cпецификация гаджета состоит из 3 основных частей.

• Раздел содержания. Раздел – то место, где происходит настоящая работа вашего гаджета. Здесь следует указывать тип гаджета, логику программирования, а также зачастую элементы HTML, определяющие его внешний облик.
• Пользовательские настройки. В разделе определены функции, которые дают пользователям возможность выбирать настройки гаджета. Например, в гаджете персонального приветствия может находиться текстовое поле, в котором пользователям следует указывать, как их зовут.
• Настройки гаджета. В разделе XML-файла указаны характеристики гаджета (например, название, автор, предпочитаемый размер и т.д.).

Создавая гаджет, следует начинать с раздела .

Определение содержания

Раздел представляет собой "мозг" гаджета. Раздел определяет тип содержания и содержит само содержание или ссылается на внешнее содержание. Раздел – это место, где атрибуты гаджета и пользовательские настройки объединяются с логикой программирования и сведениями о форматировании в работающий гаджет.

Простейший способ создать гаджет – просто поместить HTML (а возможно и JavaScript или Flash) в раздел . Опытные веб-разработчики могут почитать , где описаны другие варианты контроля доступа, удаленного хостинга, использование других языков создания сценариев и многое другое. Вот простой пример гаджета. В этом гаджете имеется фотография, которую нужно нажать, чтобы открыть фотоальбом на новой странице HTML:

Определение пользовательских настроек

Некоторые гаджеты должны давать пользователям возможность вводить сведения о себе. Например, игровой гаджет может поддерживать ввод предпочитаемого уровня сложности. В разделе пользовательских настроек () XML-файла приведены поля ввода пользовательской информации, которые появляются в интерфейсе пользователя, запустившего гаджет. Пользовательские настройки сохраняются постоянно.

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

• Имя, используемое в приветствии. Это имя пишется также в строке заголовка.
• Цвет фона.
• Нужно ли показывать фотографию.

Вот как выглядит гаджет, когда пользователь нажимает изменить для изменения пользовательских настроек:

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

Необходимо учесть следующее.

Вот весь гаджет, вместе с кодом JavaScript, который отображает текст приветствия для этого гаджета.

Список атрибутов см. в .

Пользовательские настройки можно вызывать из своего гаджета с помощью специальных API JavaScript, например:

var prefs = new gadgets.Prefs(); var someStringPref = prefs.getString("StringPrefName"); var someIntPref = prefs.getInt("IntPrefName"); var someBoolPref = prefs.getBool("BoolPrefName");

Список всех функций JavaScript см. в .

Подстановка переменных для пользовательских настроек

Вы можете использовать подстановку переменных формата __UP_userpref __ в разделах или , где userpref соответствует названию атрибута пользовательской настройки. После запуска гаджета строковое значение соответствующей пользовательской настройки подставляется вместо переменной, без перевода. Например, в этом фрагменте значение, представляемое пользователем во время выполнения для пользовательской настройки projects подставляется вместо __UP_projects__ в строке title_url :

Ниже приводится общее руководство по применению подстановки переменных для пользовательских настроек.

• Для атрибута title используйте __UP_name __ . Это переведено в HTML .
• Для атрибута title_url используйте __UP_name __ . Это переведено в HTML .
• В HTML в разделе используйте __UP_name __. Это переведено в HTML.
• В коде JavaScript в разделе используйте функцию gadgets.Prefs() .

Совместный доступ к настройкам пользователей

С помощью функции shareable-prefs можно предоставить нескольким пользователям возможность изменять настройки гаджета. Таким образом, пользователи могут совместно пользоваться гаджетом и видеть, кто что изменил. Например, члены семьи могут иметь общий гаджет со списком покупок и каждый человек может добавлять свои любимые продукты. Данные настроек пользователей – часть состояния гаджета, хранящаяся на iGoogle. Дополнительные сведения о пользовательских настройках можно найти в .

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

Вот код гаджета:

]]>

Добавив на iGoogle гаджет, поддерживающий настройки совместного доступа, его можно сделать доступным для совместного использования следующим образом.

Шаг 1 : Нажмите треугольник на том гаджете, к которому нужно предоставить совместный доступ, и выберите Открыть доступ к этому гаджету .

Шаг 2 : Если вы используете Gmail, выберите друзей, которым вы хотите открыть доступ к гаджету или введите их адреса электронной почты.

Шаг 3: Решите, смогут ли друзья редактировать содержание гаджета или только просматривать его на своих страницах iGoogle.

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

Нажмите Отправить приглашения . Друзья получат от вас письмо с приглашением добавить гаджет на свои страницы iGoogle.

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

Определение настроек гаджетов

В разделе XML-файла указаны характеристики гаджета (например, название, автор, предпочитаемый размер и т.д.). Например:

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, о существовании которого мы объявили выше.

Настройки

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

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

Недавно мне понадобилось создать гаджет для 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, о существовании которого мы объявили выше.

Настройки

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

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