Гаджет с информацией о ПК

Опубликовано: 14.06.2011
Автор: Виталий Бочкарев
Поддержать автора статьи по этой ссылке
Содержание
Введение

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

Очень часто у службы ИТ-поддержки возникает ситуация, когда нужно узнать имя компьютера и IP-адрес компьютера обратившегося пользователя, но пользователь не знает как получить данную информацию. Гаджет с информацией о ПК поможет разрешить данную проблему - пользователь сможет прочитать требуемую информацию непосредственно на экране своего компьютера.

Windows 7 gadget
Гаджет с информацией о ПК на Pабочем столе

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

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

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

Простой гаджет представляет из себя HTML-страничку и XML-определения. Естественно, чтобы гаджет работал, а не просто висел на рабочем столе, его потребуется дополнить, как минимум, скриптами и стилями отображения. Все содержимое гаджета запаковано в ZIP-архив, а сам архив переименован в GADGET-тип.

Примечание. Если Вам интересно, как устроен уже готовый гаджет, то найдите его файл с расширением GADGET, скопируйте его, например, на рабочий стол, переименуйте расширение в ZIP и распакуйте архив - перед Вами предстанет внутренность гаджета.
XML-определение

XML-файл - это инструмент, который собирает содержимое гаджета в один работающий механизм. Этот файл содержит описание программы, ссылку на главный HTML-файл, иконки и некоторую служебную информацию. Шаблон стандартного XML-описания гаджета показан ниже.

<?xml version="1.0" encoding="utf-8" ?>
	<gadget>
	 <name>Напишите тут Название гаджета</name>
	 <version>1.0.0.0</version>
	 <author name="Напишите тут Свое имя или Имя компании">
	   <info url="http://веб-сайт.компании" text="Перейти на сайт компании" />
	   <logo src="logo.png" />
	 </author>
	 <copyright>© 2010, Напишите тут Имя компании</copyright>
	 <description>Напишите тут описание гаджета</description>
	 <icons>
	   <icon width="64" height="64" src="файл-картинка-для-библиотеки-гаджетов.png" />
	 </icons>
	 <hosts>
	   <host name="sidebar">
	     <base type="HTML" apiVersion="1.0.0" src="главный-html-файл.html" />
	     <permissions>full</permissions>
	     <platform minPlatformVersion="0.3" />
	   </host>
	 </hosts>
	</gadget>

В представленном шаблоне теги означают следующее:

  • name- заголовок гаджета.
  • version- версия гаджета в формате X.X.X.X.
  • author- имя автора или имя компании, создавшей гаджет.
    • info url- адрес веб-сайта компании.
    • info text- пояснение к адресу веб-сайта компании.
    • logo src- логотип компании, создавшей гаджет.
  • copyright- уведомлении об авторских правах на гаджет.
  • description- описание программы.
  • host
    • icon src- картинка, которая будет отображаться в библиотеке гаджетов.
    • base src- имя файла главного HTML-файла.

То есть большинство тегов в файле-определении служат для описания и отображения гаджета в библиотеке гаджетов, и только тег "host" непосредственно отвечает за исполнение мини-программы. В нем определяется исполняемый файл, права приложения, минимальные требования для запуска гаджета.

HTML-страница

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

Разработка HTML-странички для гаджета по сути ни чем не отличается от обычной веб-разработки, только размеры стандартного гаджета ограничены по ширине в 130 пиклелей, а по высоте высотой экрана (вертикальное разрешение экрана у пользователей разное, поэтому советую выходить за пределы в 400 пикселей). В гаджетах работает большинство технологий, которые доступны в Internet Explorer 7, то есть можно использовать JScript, DOM, API, DHTML, AJAX и так далее.

Итак, шаблон для стандартного HTML-файла выглядит так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	   <title></title>
	   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	   <link rel="stylesheet" type="text/css" href="Styles.css" />
	   <script type="text/javascript" src="Scripts.js" />
	</head>
	<body>
	   <g:background id="Background" src="Background.png"
	     style="position:absolute;z-index:-1;top:0;left:0;"></g:background>
	   <div id="Gadget" class="GadgetBody">
	   </div>
	</body>
	</html>

Здесь:

  • title- заголовок гаджета.
  • meta http-equiv="Content-Type"- метаданные (тип файла, кодировка).
  • link rel="stylesheet"- подключение внешнего файла стилей.
  • script type="text/javascript"- подключение файла скриптов.
  • g:background- описание фона гаджета.
  • div id="Gadget"- непосредственно тело гаджета.

Данный шаблон подходит в качестве начального к большинству HTML-гаджетов. В нем уже указана стандартная UTF-8-кодировка для гаджетов, подключены стили, скрипты, картинка заднего фона, которые надо создать самостоятельно.

Файлы стилей и скриптов - это стандартные файлы, которые сопровождают HTML-страницу, все функции, которые воспринимает Internet Explorer, можно смело применять в визуализации и логике гаджета.

Так как гаджеты работают на движке Internet Explorer, то можно не заботится о проблеме совместимости браузеров при написании HTML и CSS файлов.
Гаджет с информацией о ПК
Windows 7 gadget
Гаджет с информацией о ПК

Чтобы создать гаджет, показанный на рисунке, нужно сделать следующую файловую структуру:

PCInfo\
	   Images\                 - папка с изображениями
	   |   Background.png      - картинка заднего фона
	   |   Icon.png            - картинка для списка гаджетов
	   gadget.xml              - файл XML-определения
	   PCInfo.html             - файл HTML-страницы
	   scripts.vbs             - файл CSS-стилей
	   styles.css              - файл VBS-сценариев

Приведенную структуру нужно запаковать в ZIP-архив (без корневой папки PCInfo) и изменить архиву расширение на .gadget. Чтобы установить сделанный гаджет в операционную систему необходимо по нему сделать двойной щелчок мышкой - гаджет установится в систему и появится в списке доступных гаджетов, а также на рабочем столе пользователя.

Windows 7 gadget
Гаджет с информацией о ПК в списке гаджетов
XML-определение

Листинг файла XML-определения gadget.xml:

<?xml version="1.0" encoding="utf-8" ?>
	<gadget>
	   <name>PC Info</name>
	   <version>1.0</version>
	   <author name="Vitaly Bochkarev">
	       <info url="http://www.SysEngineering.ru" />
	   </author>
	   <copyright>2010</copyright>
	   <description>Computer and account information</description>
	   <icons>
	   <icon width="128" height="128" src="Images\icon.png" />
	   </icons>
	   <hosts>
	       <host name="sidebar">
	           <base type="HTML" apiVersion="1.0.0" src="PCInfo.html" />
	           <permissions>full</permissions>
	           <platform minPlatformVersion="0.3" />
	       </host>
	   </hosts>
	</gadget>
HTML-страница

Листинг файла HTML-страницы PCInfo.html:

<!DOCTYPE html>
	<html>
	   <head>
	       <title>Account information</title>
	       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	       <script type="text/vbscript" src="scripts.vbs"></script>
	       <link rel="stylesheet" type="text/css" href="styles.css" />
	   </head>
	   <body id="main" onload="WindowOnLoad()" ondblclick="GetComputerInfo()">
	       <g:background id="background" src="Images\BackGround.png"
	        style="position:absolute;z-index:-1;top:0;left:0;"></g:background>
	       <div class="InfoZone" id="InfoZone_Div">
	           <div class="UserName" id="UserName_Div"></div>
	           <div class="PropertyName">ID: </div>
	           <div class="PropertyValue" id="UserAccount_Div"></div>
	           <div class="ClearFloat"></div>
	           <div class="PropertyName">PC: </div>
	           <div class="PropertyValue" id="ComputerName_Div"></div>
	           <div class="ClearFloat"></div>
	           <div class="PropertyName">IP: </div>
	           <div class="PropertyValue" id="IPAddress_Div"></div>
	           <div class="ClearFloat"></div>
	       </div>
	   </body>
	</html>
VBS-сценарий

Листинг файла VBS-сценариев scripts.vbs:

Dim sUserName
	Dim sUserAccount
	Dim sComputerName
	Dim sIPAddress
	
	Sub WindowOnLoad
	   Call GetComputerInfo()
	   ' Update information every 15 minutes
	   Call SetInterval("GetComputerInfo()", 1000*60*15)
	End Sub
	Sub GetComputerInfo()
	   InfoZone_Div.style.fontSize = "18px"
	   sUserName = ""
	   sUserAccount = ""
	   sComputerName = ""
	   sIPAddress = ""
	   sComputer = "."
	   Set oWMIService = GetObject("winmgmts:\\" & sComputer & "\root\cimv2")
	   Set colItems = oWMIService.ExecQuery("Select * From Win32_ComputerSystem")
	   For Each oItem in colItems
	       sComputerName = oItem.Name
	       aFullUserName = Split(oItem.UserName, "\")
	       sUserDomain = aFullUserName(0)
	       sUserAccount = aFullUserName(1)
	   Next
	   Set colItems = oWMIService.ExecQuery("Select * From Win32_UserAccount WHERE Name = '" _
	     & sUserAccount & "'")
	   For Each oItem in colItems
	       sUserName = oItem.FullName
	   Next
	   Set colItems = oWMIService.ExecQuery ("Select * From Win32_NetworkAdapterConfiguration")
	   For Each oItem in colItems
	       If IsNull(oItem.IPAddress) = False Then
	           sIPAddress = sIPAddress & oItem.IPAddress(0) & ", "
	       End If
	   Next
	   If Len(sIPAddress) > 0 Then
	       sIPAddress = Left(sIPAddress, Len(sIPAddress) - 2)
	   Else
	       sIPAddress = "Disconnected"
	   End IF
	   Call LayoutInfo()
	End Sub
	
	Sub LayoutInfo()
	   UserName_Div.innerHTML = sUserName
	   UserAccount_Div.innerHTML = UCase(sUserAccount)
	   ComputerName_Div.innerHTML = UCase(sComputerName)
	   IPAddress_Div.innerHTML = UCase(sIPAddress)
	   If InfoZone_Div.offsetHeight > 98 Then
	       InfoZone_Div.style.fontSize = Left(InfoZone_Div.style.fontSize, _
	         Instr(InfoZone_Div.style.fontSize,"px")-1)-1 & "px"
	       LayoutInfo()
	   End If
	End Sub
CSS-стили

Листинг файла CSS-стилей styles.css:

body
	{
	   width: 130px;
	   height: 100px;
	   margin: 0px;
	   padding: 2px;
	   font-size: 12px;
	   font-family: Calibri;
	   text-align: left;
	   color: #c2d4ee;
	   background-color: #364965;
	}
	.InfoZone
	{
	   width: 126px;
	}
	.UserName
	{
	   text-align: center;
	}
	.PropertyName
	{
	   float: left;
	}
	.PropertyValue
	{
	   float: left;
	}
	.ClearFloat
	{
	   clear: both;
	}
Изображения

В гаджете используются 2 изображения, которые помещены в подпапку Images: картинка заднего фона и картинка для списка гаджетов.

Первая картинка (Background.png) является основой приложения и используется как подложка для выводимого текста. На ней также может быть изображена эмблема компании. Размер этого изображения должен быть 130х100 пикселей.

Вторая картинка (Icon.png) используется только для отображения гаджета на панели управления гаджетами. Размер этого изображения - 128х128 пикселей.

Заключение

Использованная технология создания мини-приложений очень проста и может использоваться даже начинающими системными инженерами. А приведенный в статье пример гаджета поможет освоить технику написания таких маленьких, но очень полезных программ. Сам же уже готовый гаджет может быть использован на компьютерах любой компании, так как в скриптах не используется привязка к конкретному домену или компании.

Виталий Бочкарев
Вложения