Блог Вебмастера

Блог о создании, продвижении и монетизации сайтов

Делаем свой гаджет для windows 7 (seven)

Думаю каждый из пользователей windows 7 хоть раз но задумывался как работают гаджеты в вашей боковой панели. И я как то задумался, оказалось все до удивительного просто — гаджет имеет структуру схожую с веб страницей, и по суте ей и является, только для удобства её запаковали в ZIP архив и поменяли разрешение на *.gadget.

Ну а теперь подробнее из чего состоит гаджет:

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

Тут подробнее описаны элементы манифеста:

Особое внимание уделите 20 строчке — в ней путь к файлу html основного окна гаджета.

2) Создайте ваш основной html файл, в нем описывайте все как в обычной веб страничке, можете подключить CSS, javascript и др.

Для описания заднего плана вашего гаджета воспользуйтесь строкой:

Эта строка взята с моего гаджета.

Собственно когда гаджет готов, вам остается только запаковать его в zip архив, а затем переименовать .zip в .gadget, после запуска он попросит установку и начнет работать.

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

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

Создание гаджетов для windows 7. Разрабатываем свой Sidebar Gadget

Виджеты на рабочий стол Windows 7 или 10 предоставляют пользователям огромное количество возможностей, позволяя рационально настроить рабочее пространство . Вообще, в системе от Microsoft они называются гаджеты. И прежде чем мы перейдём к тому, как поставить виджеты на рабочий стол Windows 7 или 10, вам нужно узнать некоторую информацию.

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

Windows 7

Итак, если вы любитель виджетов на рабочем столе и пользователь любой версии операционной системы Windows 7, то вы счастливчик. Потому что поставить гаджеты вам будет очень просто: достаточно нажать правой кнопкой мыши в любом месте рабочего стола (РС), выбрать «Гаджеты» и передвинуть любой понравившийся на РС. Проще некуда, не правда ли?

Windows 10

Юзерам десятки придётся прибегнуть к помощи дополнительных сторонних приложений. Наиболее популярным сегодня является программа Windows Desktop Gadgets, которую можно скачать с сайта http://gadgetsrevived.com/download-sidebar/. После чего у вас появится такая же вкладка, как и у пользователей семёрки. То есть, инструкция далее будет такая же. Ещё одно приложение, но уже с большим функционалом под названием 8GadgetPack. Доступен он для загрузки на официальном сайте разработчика http://8gadgetpack.net/. По сравнению с предыдущей программой, эта не до конца переведена на русский. Но если это не является для вас проблемой, то этот вариант для скачивания будет лучше.

Итоги

Теперь вы знаете, как включить виджеты на рабочий стол (например, погода). В системе представлены следующие гаджеты:

1. Валюта. Предоставляет информацию о курсе основных валют в режиме реального времени. То есть, всё что вы видите в зоне золотой карты с картой мира — последняя на данный момент информация. Для работы гаджета требуется наличие подключения к интернету.
2. Головоломка. Это прикольная мини-игра, целью которой является собрать пазл из картинки. По умолчанию стоит красочная картинка с птицей. Вам нужно передвигать квадратики так, чтобы восстановить исходный рисунок . В настройках виджета вы можете выбрать любое из одиннадцати изображений. После того как вы начнёте смещать квадратики, наверху наступит отсчёт времени. Тогда вы сможете соревноваться с друзьями, ставить собственные рекорды.
3. Заголовки новостей. Для работы этого гаджета также необходимо наличие подключения к интернету. Он показывает данные с RSS-каналов, на которые пользователь системы осуществил подписку. Получается, отныне вы всегда будете в курсе последних новостей, тематику которых вы выбираете самостоятельно.
4. Индикатор ЦП. Здесь ЦП — это центральный процессор. Виджет показывает его нагруженность в процентах. То есть вы сможете отследить насколько забивается ваш компьютер или ноутбук и даже оценить, при запуске и работе каких именно программ процессор нагружен больше всего.

1. Календарь. Суть этого виджета объяснять не нужно: это просто симпатичный календарь, который показывает месяцы, день недели, год (в общем, всё что нужно, чтобы не потеряться во времени).
2. Погода. Гаджет предоставляет последнюю информацию о погоде в том месте, где вы находитесь. В настройках вы можете либо сами поставить нужный город, либо настроить автоматическое обнаружение местоположения.
3. Показ слайдов. По сути, этот виджет является своеобразной фоторамкой на рабочий стол Windows 7 или 10. В настройках вы можете установить интервал времени, с которым картинки будут меняться, а также выбрать библиотеку изображений для показа слайдов.
4. Ну и последнее — часы. Как ни странно, они показывают время. В параметрах вы можете выбрать один из восьми видов часов, который больше всего подойдёт под дизайн вашего рабочего стола.

Приятной работы, дорогие друзья! Не забываем делиться своим мнением в комментариях: расскажите, какой из виджетов самый полезный для вас. Для многих таковым является гаджет «Погода».

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

1. Составьте спецификацию гаджета в текстовом редакторе, а затем сохраните ее на общедоступном веб-сервере.
2. Добавьте гаджет в контейнер, например iGoogle или Orkut. Контейнер – это приложение или сайт, которые могут выполнять гаджеты.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Список всех функций 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-файла указаны характеристики гаджета (например, название, автор, предпочитаемый размер и т.д.). Например:

Пользователи вашего гаджета не смогут изменять эти атрибуты.

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

Не забывайте: гаджеты общедоступны

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

Как ограничить доступ к своему гаджету? Google призывает авторов гаджетов делиться спецификациями. Однако если требуется свести к минимуму доступ к гаджету до момента готовности к выпуску, обратите внимание на несколько советов ниже.

• Не подавайте гаджет в каталог содержания и не размещайте его в таких каталогах, как googlemodules.com или hotmodules.com .
• Если ваш гаджет нельзя будет найти, вряд ли кто-то сможет угадать его URL. Вот несколько тонких моментов, которые необходимо учесть, чтобы избежать сканирования поисковыми системами.
  • Убедитесь, что на веб-сервере отсутствует список файлов, включающий ваш файл (это также поможет скрыть его от пользователей).
  • Удостоверьтесь в том, что к гаджету не ведут гиперссылки

Дальнейшие действия

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

Недавно мне понадобилось создать гаджет для 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;

Файл 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().

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

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

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

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

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

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

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

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

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

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

1. html файл (gadget.html) – в этом файле описан внешний вид гаджета и его функциональность.
2. 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

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