Главная
Tele2
Создание виджета для рабочего стола. Пишем гаджет Windows Sidebar с нуля

Создание виджета для рабочего стола. Пишем гаджет Windows Sidebar с нуля

25.07.2019

Можно регулировать. Если непрозрачность гаджета составляет менее 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», чтобы отредактировать файл настроек, а потом запустите его снова.

В заключение

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

28.12.2009 03:49

Гаджеты (мини-приложения) – это небольшие программы, отображающие разнообразную информацию на рабочем столе Windows 7.

Принцип работы гаджетов в Windows 7

Гаджет, как и веб-страница, состоит из графических изображений и файлов, написанных на HTML, JavaScript и CSS. Поэтому для отображения гаджетов необходимо, чтобы в системе был установлен хотя бы один браузер. Для работы предустановленных (стандартных) гаджетов Windows 7 необходимо наличие браузера Internet Explorer. Для работы некоторых гаджетов (например, «Погода») требуется подключение к Интернету, другие гаджеты могут работать автономно (например, «Часы»).

Установочный файл мини-приложения представляет собой обычный zip-архив с расширением .gadget . Чтобы гаджет отображался на рабочем столе, он должен быть установлен и запущен.

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

Коллекция гаджетов рабочего стола – это панель, в которой отображаются все установленные мини-приложения. Работа этой панели обеспечивается приложением sidebar.exe , расположенном в папке %ProgramFiles%\Windows Sidebar .

Чтобы открыть Коллекцию гаджетов рабочего стола, щелкните правой кнопкой мыши на рабочем столе и в появившемся контекстном меню выберите Гаджеты .

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

2. Дважды щелкните по одному из предложенных гаджетов.

Меню гаджета

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

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

Удаление гаджета

1. Чтобы удалить гаджет из коллекции, щелкните правой кнопкой по рабочему столу и выберите Гаджеты .

2. Щелкните правой кнопкой мыши по мини-приложению, которое нужно удалить и выберите Удалить .

После этого мини-приложение будет недоступно в Коллекции гаджетов.

Восстановление удаленных гаджетов

Чтобы восстановить все стандартные гаджеты Windows 7:

1. Откройте Панель управления, установите вид «Категория».

2. Нажмите .

3. В разделе Гаджеты рабочего стола нажмите Восстановление гаджетов рабочего стола, установленных Windows .

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

Включение и отключение функции «Гаджеты»

По умолчанию гаджеты в Windows 7 включены. Можно отключить установку, просмотр и добавление мини-приложений на рабочий стол с помощью «Компонентов Windows» на панели управления и с помощью Редактора локальной групповой политики (только для Windows 7 Professional, Windows 7 Ultimate и Windows 7 Enterprise).

Включение и отключение гаджетов с помощью панели управления

1. Откройте Панель управления (вид «Крупные значки») > Программы и компоненты .

2. В левом меню выберите Включение или отключение компонентов Windows .

3. Чтобы выключить функцию «Гаджеты», снимите флажок Платформа гаджетов Windows . Чтобы включить «Гаджеты», установите этот флажок.

4. Перезагрузите компьютер.

Включение и отключение гаджетов с помощью Редактора локальной групповой политики

1. Откройте меню Пуск, введите в поисковую строку и нажмите Ввод .

2. Выполните нужное действие:

Чтобы отключить функцию «гаджеты» для своей учетной записи, в левом меню редактора локальной групповой политики откройте Политика «Локальный компьютер» > Конфигурация пользователя > Административные шаблоны > Компоненты Windows > Гаджеты рабочего стола .

Чтобы отключить функцию «гаджеты» для всех пользователей компьютера, в левом меню редактора локальной групповой политики откройте Политика «Локальный компьютер» > Конфигурация компьютера > Административные шаблоны > Компоненты Windows > Гаджеты рабочего стола , в правой части окна редактора локальной групповой политики дважды щелкните параметр Отключить гаджеты рабочего стола .

3. Выберите Включить и нажмите OK .

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

4. Перезагрузите компьютер.

Создание собственных гаджетов для Windows

Если вам знакомы такие языки программирования, как HTML и JavaScript, а также каскадные таблицы стилей CSS, то вы можете воспользоваться руководством по созданию гаджетов для Windows Донавана Уэста. Руководство переведено на русский язык. И хотя это руководство посвящено созданию гаджетов для Windows Vista, в нем рассматриваются общие принципы создания мини-приложений, необходимые для понимания этого процесса.

1. Гаджеты в Windows 7 можно свободно перемещать левой кнопкой мыши в пределах рабочего стола. Чтобы переместить мини-приложения ближе друг другу, нажмите клавишу Shift и удерживайте её во время перемещения гаджета.

2. Чтобы гаджет всегда отображался поверх всех открытых окон, щелкните по нему правой кнопкой мыши и в появившемся контекстном меню выберите Поверх остальных окон .

3. Чтобы скрыть все активные мини-приложения, щелкните правой кнопкой мыши по рабочему столу Windows 7, выберите Вид и снимите флажок Отображать гаджеты рабочего стола . Чтобы гаджеты снова отображались, установите этот флажок.

4. Чтобы переместить все активные гаджеты на передний план, нажмите сочетание клавиш Windows + G .

5. Чтобы настроить прозрачность гаджета, щелкните по нему правой кнопкой мыши и установите степень непрозрачности.

Предустановленные гаджеты Windows 7

Windows 7 содержит девять предустановленных гаджетов (мини-приложений):

Windows Media Center

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

Валюта

При наличии подключения к Интернету, гаджет «Валюта» отображает стоимость выбранных пользователем валют, согласно данным поставщиков MSN Money. Всего в гаджете может отображаться от 2 до 4 валют. Для работы этого мини-приложения необходимо подключение к Интернету.

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

Чтобы изменить валюту , щелкните её название и в появившемся списке выберите нужную валюту.

Головоломка

Гаджет «Головоломка» – игра-мозаика. Подключение к Интернету для работы гаджета не требуется.

Чтобы просмотреть картинку, которую нужно собрать, нажмите знак «?» в верхней части мини-приложения.

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

Таймер можно приостановить, нажав на часы в левом верхнем углу гаджета.

Чтобы изменить картинку, щелкните по мини-приложению правой кнопкой мыши и выберите Параметры .

Заголовки новостей веб-каналов

Этот гаджет позволяет просматривать заголовки новостей веб-каналов (RSS-ленты) без запуска браузера (однако подключение к интернету необходимо). В гаджете отображаются новости только тех сайтов, RSS-ленты которых добавлены в браузер Internet Explorer. Чтобы просмотреть или изменить список RSS-каналов, откройте Internet Explorer > Избранное > Вкладка «Каналы» .

Любая добавленная в Internet Explorer RSS-лента станет доступной для отображения в гаджете «Заголовки новостей веб-каналов». Например, вы можете добавить наш веб-канал, чтобы всегда знать, когда на нашем сайте появляется новая статья. Чтобы сделать это, выполните следующие действия:

1. Запустите браузер Internet Explorer.

2. Введите в адресную строку адрес нашей RSS-ленты: http://www.сайт/feed/ и нажмите Ввод .

3. Нажмите Подписаться на этот канал .

Индикатор ЦП

Гаджет «Индикатор ЦП» отображает загруженность оперативной памяти (справа) и процессора (слева) в реальном времени. Дополнительных настроек не имеет. Подключение к Интернету для работы мини-приложения не требуется.

Календарь

Параметры и с помощью кнопки «…» укажите нужную папку.

Здесь же можно отрегулировать скорость смены рисунка и выбрать один из эффектов перехода от одного изображения к другому.

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

Гаджет «Часы» может отображать время в любом часовом поясе, известном операционной системе Windows. Чтобы гаджет «Часы» отображал время, отличное от выбранного по умолчанию в настройках ОС, щелкните по мини-приложению правой кнопкой мыши и выберите Параметры . На странице настроек гаджета выберите нужный часовой пояс и нажмите OK .

Чтобы на рабочем столе отображалось время в нескольких часовых поясах (как в центре управления полетами), запустите гаджет «Часы» необходимое количество раз и в каждом настройте нужный часовой пояс.

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

Скачать гаджеты для Windows 7

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

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

Компоненты Windows 7

Разметка основного окна ничем не отличается от разметки любой другой веб-страницы. Вдобавок нам предоставляют несколько исключительно гаджетовских тегов. Для задания фона гаджета, используется тег g:background . Любое содержимое, размещенное в данном элементе будет фоновым для всего основного окна.
< g:background id ="background" style opacity ="0" >

Я не стал делать задний фон гаджету, с помощью параметра opacity=«0» фон стал абсолютно прозрачным.

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

< div id ="status" >< a a >
< div id ="content" >
< ul id ="serverList" >

Все стили, JavaScript вынесены во внешние файлы. Для удобства была подключена библиотека jQuery. Целиком разметка основного окна крохотная.
< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< link rel ="stylesheet" type ="text/css" href ="./style/gadget.css" />
< script type ="text/javascript" src ="./js/jquery-1.3.2.min.js" >

< body onload ="startMonitoring()" >
< g:background id ="background" style ="position:absolute;z-index:-1;top:0;left:0;" opacity ="0" >
< div id ="status" >< a a >
< div id ="content" >
< ul id ="serverList" >

В CSS хотелось обратить внимание только на стили, которые описывают цвет ячейки сервера, в зависимости от его состояния.
ul#serverList li.busyLight
{
background : #fefe8c ;
}
ul#serverList li.busy
{
background : #ffb154 ;
}
ul#serverList li.free
{
background : #d2e582 ;
}
ul#serverList li.down
{
background : #dc6161 ;
}
Темная сторона, Люк Самый главный файл – JavaScript. Сразу оговорюсь, alert и confirm в гаджетах не работают. Для отладки гаджета, можно воспользоваться Visual Studio, но для этого нужно выполнить два хитрых действия. Прежде всего, включить отладчик JavaScript в Internet Explorer

Добавить в нужном месте кода гаджета строку:

и перезапустить гаджет.

Мы объявляем две глобальных переменных, которые отвечают за время в минутах для обновления данных в гаджете, для меня оптимально 30 минут, а также счетчик отсчета оставшихся минут до обновления

var updateInterval = 30;
var updateMinutes = updateInterval;

Функция init содержит действия для инициализации гаджета, мне в данном случае было нужно установить прозрачность гаджета на 40%, чтобы он не перекрывал полностью кусочек рабочего стола.
function init() {
System.Gadget.Settings.write("PrivateSetting_GadgetOpacity" , 40);
}

Функция запуска самого мониторинга, которая обновляет список серверов с их статусом, устанавливает интервал обновления данных, таймера в главном окне и так же добавляет обработчик события для ручного обновления статуса серверов.
function startMonitoring() {
init();

UpdateList();
setInterval(updateList, updateInterval * 1000 * 60);
setInterval(updateTimer, 1000 * 60);

StatusLink.onclick = function () {
updateList();
}
}

Добавление обработчика на нажатие происходит в данном случае двумя способами:
element.onclick = function (){}
$(element).get(0).onclick = function (){}

Продвинутые способы в гаджетах не работают:
element.attachEvent("onclick" , function (){})
$(element).bind("click" , function (){})

Для обновления самого таймера маленькая функция updateTimer, которая каждую минуту рассчитывает сколько времени осталось до обновления.
function updateTimer() {
updateMinutes = updateMinutes == 0 ? updateInterval: updateMinutes - 1;
$("#statusLink" ).html("Update in " + updateMinutes + " m." );
}

И наконец, обновление списка серверов, для возвращенных данных я использую JSON, вид ответа примерно такой:
[ { «ip» : "***.45.**.60" , «lastHitTime» : «2009-09-06 00:07:24» , «runningTasks» : «1» } ]
Для получения самих данных – getJSON. Вы можете использовать и AJAX, он прекрасно работает в гаджетах. Прежде всего, используя getJSON мы можем отлаживать код в браузере, не добавляя его в гаджет, AJAX нам такое сделать не позволит. В зависимости от загрузки сервера, я закрашиваю ячейку разным фоном. Одновременно выполняемых задач может быть всего две, мало, но каждая из них выполняется 1,5-2 часа. Так же дополнительная проверка, давно ли отзывался сервер.
);
list = "" ;

$.getJSON("https://mysite.com/getServerStatus.php" , function (json) {
$.each(json, function (i, server) {
status = "" ;
if (server.runningTasks == 0) {
status = "free" ;
} else if (server. runningTasks == 1) {
status = "busyLight" ;
} else if (server. runningTasks == 2) {
status = "busy" ;
}
hit = new Date(server.lastHitTime);
now = new Date();

if (now.getTime() - hit.getTime() >= 1000 * 60 * 60 * 3 + 1000 * 120) {
status = "down" ;
}
list += "

" + server.ip + "

" ;
});
$("#serverList" ).html(list);
});
$("#statusLink" ).html("Updated" );
}

Код готов к употреблению, осталось несколько взмахов волшебно палочкой. Пакуем все файлы проекта в zip-архив.

И добавить гаджет в систему, пытаясь открыть файл monitoringS.gadget

Вуаля, у нас появляется опрятный и скромный гаджет со списком серверов. Пример со 100% и 40% прозрачностью.

Я уверен, что у каждого из нас, есть похожие задачи и проблемы, так почему бы не сделать их красивее, удобнее?

Представленное ниже руководство основано на предварительных версиях новой операционной системы от корпорации 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) :

Но нас больше интересует не подпрограмма 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

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

AppWidget, или просто «виджет» - один из самых эффектных и удобных элементов пользовательского интерфейса в операционной системе Android, который можно добавить на рабочий стол для быстрого доступа к тем или иным функциям соответствующего приложения. В данной статье мы разберемся, как собственноручно создать свой виджет.

Что виджет представляет из себя конструктивно? Виджет нужен для отображения той или иной информации, связанной с приложением, к которому он относится, или же для оперативного взаимодействия с данным приложением напрямую через рабочий стол. Самый простой пример – часы на рабочем столе. Естественно, виджеты без труда можно добавлять или удалять с рабочих столов.

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

Начнем создание виджета мы с дизайна. Благо, компания Google предоставила весьма полезные UI Guidelines для разработчиков программного обеспечения, где подробно описан процесс создания дизайна и основные принципы эргономичности. Есть также и отдельная официальная инструкция для создания виджетов, с которой можно ознакомиться по ссылке: http://developer.android.com/guide/practices/ui_guidelines/widget_design.html .

Виджет, занимающий одну «клетку» на рабочем столе, имеет разрешение 80х100 точек, соответственно, для создания продолговатый виджет длиной в 4 клетки и высотой в одну, то нужно, соответственно, 320х100 пикселей. Такой размер мы и возьмем за основу создаваемого нами виджета.

Теперь виджет нужно нарисовать. В принципе, виджет вполне может и не иметь никакой графической части, и отображать только текст или элементы управления, без фона и рамки, но, естественно, красивый и приятный глазу виджет просто обязан иметь качественный дизайн. Поэтому нарисуем фон. За основу возьмем фон из упомянутого выше UI Guideline. Открываем доступную нам заготовку в Photoshop или другом графическом редакторе и делаем всё, что заблагорассудится, после чего сохраняем полученное изображение в формате.png. Нужный нам формат PNG-24, с 8-битным цветом и прозрачным фоном. Вот и готова основа для нашего виджета.

Теперь перейдем к созданию программной части. Виджет может не иметь программной части. Проще говоря, в меню добавления виджетов он будет, но в основном меню приложений – нет. Мы создадим виджет именно такого типа. Создаем новый проект, и называем его для удобства так, чтобы основной класс имел имя widget.java.

Редактируем AndroidManifest . xml . Объявляем наш виджет:

Теперь редактируем widget.java. Тут необходимо описать, как будет реагировать виджет на различные условия. Класс AppWidgetProvider имеет такие методы:

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

onDeleted – метод выполняется при удалении виджета с рабочего стола.

onEnabled – метод вызывается при первой активации виджета. Но если добавляется еще один точно такой же виджет, данный метод уже не выполняется.

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

onReceive – метод вызывается одновременно со всеми остальными. Зачастую не используется вообще.

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

package com.example.widget;

import android.appwidget.AppWidgetProvider;

public class widget extends AppWidgetProvider{

}

Далее, описываем наш виджет – это нужно для того, чтобы мобильный аппарат понимал, с чем имеет дело. Для этого нужно создать папку xml в папке res . В ней создаем файл с именем widget _ info . xml . Открываем созданный файл и прописываем в него вот такой код:

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

minWidth – минимальная необходимая для работы виджета ширина.

minHeight – минимальная необходимая для работы виджета высота.

updatePeriodMillis – период, за который происходит обновления виджета, указывается в миллисекундах. Параметр весьма полезен, так как по истечении указанного временного промежутка срабатываем метод onUpdate объекта AppWidgetProvider.

initialLayout – параметр указывает на ресурс с описанием интерфейса нашего виджета.

Формула подсчета размеров виджета имеет такой вид: (количество клеток * 74) - 2.

Приступим к описанию интерфейса создаваемого нами виджета. Здесь-то нам и пригодится созданный ранее фон. Импортируем рисунок фона в папку dwawable (или во всех три папки drawable для разных разрешений экрана). В папке layout создаем файл с именем widget . xml . Интерфейс описывается как для обычных Activity, но есть некоторые ограничения. Допустимы для использования такие элементы:

Создадим LinearLayout, к которому применим созданную картинку-фон и добавим для примера AnalogClock. Сами часы в рамку не влезут, но как наглядный пример вполне сгодятся. Итак:

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