Как создать собственный гаджет для windows 7

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

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

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

<?xml version="1.0" encoding="utf-8" ?>
<gadget>
 <name>Weather from Info.Denms.Ru</name>
 <version>1.0.1232</version>
 <hosts>
  <host name="wdenms">
   <base type="HTML" apiVersion="1.0.0" src="main.html" />
   <permissions>Full</permissions>
   <platform minPlatformVersion="1.0" />
  </host>
 </hosts>
  <icons>
    <icon width="64" height="64" src="icon.png" />
  </icons> 
 <author name="cvs">
  <info url="http://info.denms.ru" />
 </author>
 <description>Weather Widget (Info.Denms.Ru)</description>
</gadget>

Рассмотрим его более подробно.
Элемент <base> должен содержать apiVersion, равный 1.0.0 (на данный момент), а также атрибут src, в котором указан главный файл нашего гаджета;
<permissions> — разрешения для гаджета. Устанавливаем равным full;
<platform> — минимальная версия Widows Sidebar. На данный момент – 1.0;
Параметры <name> — имя гаджета, <version> — версия, <author> — информация об авторе, <info> — ссылка на страницу с гаджетом, <icon> — иконка гаджета и <descrtiption> будут отображаться на панели установленных гаджетов.

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

<g:background id="background" style="position:absolute; z-index:-1; top:0; left:0;" opacity="0"></g:background>

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

<SCRIPT Language="VBScript">
'Вызов функции JavaScript из области VBS
function isDocked
    isDocked = isDockedJS()
End Function    
</script>
<script src="main.vbs" type="text/vbscript"></script>

<SCRIPT Language="JavaScript">
    docked = 0;
    function isDockedJS() { 
      return docked;
    }
</SCRIPT>
<script type="text/javascript" src="main.js"></script>

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

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

  <div id="small_needupdate"></div>

С помощью 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.

<?xml version="1.0"?>
<all>
  <day id="today">
  <temp>1.7</temp>
  <cloudyim>41</cloudyim>
  <cloudy>пасмурно</cloudy>
  <air>снег</air>
  <humidity>87</humidity>
  <wind_direction>Ю-З</wind_direction>
  <wind_speed>5</wind_speed>
  <min>-3</min>
  <max>-1</max>
</day>
<day id="ПТ">
  <min>-1</min>
  <cloudyim>26</cloudyim>
  <max>1</max>
</day>
  <day id="СБ">
  <min>-9</min>
  <cloudyim>41</cloudyim>
  <max>0</max>
</day>
…
</all>

Скачивать и парсить 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)
  'главная нода – в нашем случае <all>
  Set currNode = xmlDoc.documentElement
  'дни недели – <day>
  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, о существовании которого мы объявили выше.

<html>
 <head>
  <title>Настройки</title>
  <style type="text/css">
  body { width:220px; height:120px; }
  </style>
 </head>
 <body>
  <div style="text-align:center">
   <strong>Weather from Info.Denms.Ru<br/><script type="text/javascript">document.write(System.Gadget.version);</script></strong><br/>
   © cvs, 2011<br/>
   <a href="http://info.denms.ru">http://info.kovonet.ru</a><br/><br/>
  </div>
 </body>
</html>

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

Использованные источники:
http://www.script-coding.com/XMLDOMscripts.html;
http://msdn.microsoft.com/en-us/library/bb508511%28v=VS.85%29.aspx;
VBScript Programmers Reference, 3rd Edition;
ну, и, конечно, http://google.com.

Ссылка на гаджет – http://info.kovonet.ru/test.gadget.

This article shows you how to create a simple «Gadget» — a sort of mini-application supported by Windows 7 and Vista.  Gadgets can be dropped anywhere on the desktop to provide instant information, or to act as a gateway to a website or a larger program.  

What I like about gadgets is that they are really just small HTML pages.  That means:  No big-project development overhead.  If you have Notepad.exe and some knowledge about HTML, then you can write your own gadget.  Like HTAs, they run with with full local-program privileges, and can use ActiveX objects.  There is no limit to the creative things you can do with gadgets.

How to Create a Gadget (the short version):

Here’s all you need to do to create your own gadget:

1) Write an HTML page, say gadgetName.html

2) Write a short XML file, named (exactly) gadget.xml

3) Copy these two files into a particular directory:

   userDir \ AppData\Local\Microsoft\Windows Sidebar\Gadgets\ gadgetName.gadget

The Details:

Follow these steps and you’ll have a new gadget in a few minutes:

1

Create a new folder on your desktop and name it

HelloGadget.gadget

2

Open that folder and create two files in that folder.  Here’s the XML file (called a manifest):

gadget.xml

<?xml version="1.0" encoding="utf-8" ?>
                      <gadget>
                        <name>HelloGadget</name>
                        <version>1.0.0.0</version>
                        <description>Hello World Gadget.</description>
                        <hosts>
                          <host name="sidebar">
                            <base type="HTML" apiVersion="1.0.0" src="HelloGadget.html" />
                            <permissions>Full</permissions>
                            <platform minPlatformVersion="1.0" />
                          </host>
                        </hosts>
                      </gadget>

Open in new window

About the only place you might go wrong is misspelling the name of the HTML file in the

    <base type=»HTML» apiVersion=»1.0.0″ src=«HelloGadget.html» />

line.  Here’s that HTML file:

HelloGadget.html

<html>
                      <script>
                      //----------------- resizes the gadget display surface
                      function DoInit() {
                          document.body.style.width = 90;
                          document.body.style.height= 55;
                          document.body.style.margin=0;
                      }
                      </script>
                      <body onload="DoInit();">
                      <table border="5"><tr><td><center><i>Hello World!</i></center></td></tr></table>
                      </body>
                      </html>

Open in new window

3

Open a Windows Explorer and drill-down to locate the

following folder:

   userDir \ AppData\Local\Microsoft\Windows Sidebar\Gadgets\

…where userDir is your Windows User Name (the folder is in the «Desktop» virtual folder, just above «Computer» ) If you want, you can copy the following text and paste it into the address bar in any Explorer window (or in the Start/Search or Start/Run input boxes):

%localappdata%\Microsoft\Windows Sidebar\Gadgets

Open in new window

Looking in that folder, you will see the other gadgets that are already installed.  Each is in a folder that has a file extension of .gadget  A good way to learn about gadget programming is to examine the source files of the gadgets you can download from the Microsoft site.

4

Drag the HelloGadget.gadget folder from the desktop

and drop it into that Gadgets directory.

Картинка с сайта: www.experts-exchange.com

5

Right-click the desktop and select Gadgets.  

Your gadget is now visible in the gallery.  

It has the default icon, but the name is as was set in the XML file.  Drag it and drop it onto your desktop.

There you have it:  Your first gadget.  About all you can do with it is drag it around and close it.  But that’s a start.  You can open the HTML file with your favorite text editor, make changes, and then drag it from the gallery to the desktop to see the effects of your changes.

Debugging

Alas, the usually-dependable all-purpose JavaScript debugging tool —  the alert() function — is not available when running as a gadget.  One option is to drop the HTML file onto a browser and run it there — where alert() will work.  

With Windows 7, there is a new registry key that affects debugging.  Setting…

   [HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Sidebar]

      «ShowScriptErrors»=dword:00000001

…will enable the display of script errors.  It’s better than sitting there looking at the screen blankly and wondering why nothing is happening.

If you have Visual Studio, you can use its Just-In-Time debugging.  Just insert:

debugger;

Open in new window

…at a good starting point in the <script> block.  The VS script debugger will come up and let you single-step, check variables, and so forth.  I’ve found this technique works best if you break your JScript out into a separate file (as opposed to putting it all in the HTML file).  See Debugging JScript Programs with Visual Studio 2008 for related info.

Packaging and Deployment

Microsoft made this very easy.  All you need to do is create a ZIP file that contains your two files.  Rename the ZIP file to give it an extension of .gadget and you are done.  When you right-click a file that has the .gadget extension, Windows asks if you want to install the gadget, and then it creates the AppData directory and unpacks the files into it.  The gadget  immediately becomes available in your gallery.

But, as we’ve seen, you don’t need to create a deployment package:  While developing, you can create the folder manually and work directly with the source code.

Caution:  If you work this way (directly in the AppData folder), then be aware that if you choose to Uninstall in the Gadget Gallery, it will delete your files!   Keep a copy of the files handy in a different place.

Rather than a renamed ZIP file, you can instead create a renamed CAB file for deployment.  CAB files can be signed, so your users might avoid a scary «Unknown Publisher» notice when installing.

Up Next:

In the next installment, we’ll create a more complex gadget that illustrates how to add a non-default icon, how to populate the «details» area of the gadget gallery, and most importantly, how to display a Settings dialog and save the settings so they’ll be in effect each time your gadget starts.

See: Create a Win7 Maze! Gadget

And: Create a Win7 Drop Target Gadget

And: Create a Win7 Gadget with a Flyout Panel

Resources:

Gadgets

http://msdn.microsoft.com/en-us/library/ee663278(VS.85).aspx

Developing a Gadget for Windows Sidebar  (Written for Vista, but it mostly applies)

http://msdn.microsoft.com/en-us/library/bb456468(VS.85).aspx

Gadgets for Windows Sidebar Debugging

http://msdn.microsoft.com/en-us/library/bb456467(VS.85).aspx

=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

If you liked this article and want to see more from this author,  please click the Yes button near the:

      Was this article helpful?

label that is just below and to the right of this text.   Thanks!

=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

Добрый день,
Возникла следующая проблема (опишу подробно, чтобы не возникало дальнейших вопросов.
Итак, я только начинаю знакомится с миром программирования, и понадобилось как-то написать гаджет для Windows 7. Сам я на Mac работаю, но понадобилось. И вот, чтобы понять хотя бы общие принципы, решил написать какой-нибудь Hello World. Вот, нашел следующую инструкцию:
1. Создать XML-файл, примерно такой:

1
2
3
4
5
6
7
8
9
10
11
12

<?xml version="1.0" encoding="utf-8" ?>
<gadget>
  <name>Hello World!</name>
  <version>1.0</version>
  <hosts>
    <host name="sidebar">
    <base type="HTML" apiVersion="1.0.0" src="gadget.html" />
    <permissions>full</permissions>
    <platform minPlatformVersion="0.3" />
    </host>
  </hosts>
</gadget>

2. Создать HTML-файл, примерно такой:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style>
      body {
        width: 130px;
        height: 30px;
      }
    </style>
  </head>
  <body>
    <p>Hello World!</p>
  </body>
</html>

3. Соответственно, дать им расширения XML и HTML.
4. Запаковать файлы в папку с расширением .Gadger (я так понял, надо написать в названии папки .Gadget).
5. Папку запаковать в zip-архив.

Делал я все это на Mac. При этом после загрузки архива на Windows обнаружилась в архиве папка _MACOSX. Я ее удалил. Потом (чтобы все точно правильно стало) распаковал архив, выбрал из него файлы, потом снова, уже на Windows, сделал архив, потом снова распаковал. Однако папка так и не стала папкой гаджета. Дальше я попробовал скопировать данную папку в Program Files / Windows Sidebar / Gadgets. Открыл панель виджетов, но перед запуском появилась примерно такая надпись:

В папке хранится файл, который нельзя выполнить.
Ошибка в манифесте.
Строчка: 1.
Символ: 23 (значения точные).
Обновите виджет до более новой версии.

Ошибки в документах быть не может — со второй попытки делал просто Копировать-Вставить.
И что это может быть? Как бороться? Думаю, может надо данные документы в Windows в блокноте напечатать?

Прошу прощения за оффтоп, если не там написал — укажите, пожалуйста, необходимую ветку.
Прошу помощи!