Windows Vista 的Gadget開發其實並不難，只要你有一定的HTML、CSS、Javascript基礎就能成功地開發出一個漂亮的桌面小工具。在Vista和Win7下，每一個桌面Gadget其實就是一個小的瀏覽器視窗，我們可以通過製作一個HTML頁面，來完成各種桌面功能。簡單的說，我們可以使用HTML+CSS來製作介面，用JS完成程式功能。 
        Vista和Win7的邊欄小工具位於 C:\Program files\Windows Sidebar\gadgets\ 裡面，每一個小工具的命名方式都是YourName.Gadget，建立一個這種格式的資料夾，就為你自己的小工具添加了存放目錄。 
        .xml檔案，用於儲存小工具的基本設定，包括名稱、版本等等。以下就是一個典型的gadget.xml檔案示例：

<?xml version="1.0" encoding="utf-8"?>   
<gadget>
  <!--小工具名稱-->
  <name>test</name>  
  <!--小工具名稱空間-->
  <namespace><!--_locComment_text="{Locked}"-->Yourname.Test</namespace>  
  <!--小工具版本號-->
  <version><!--_locComment_text="{Locked}"-->1.0.0.0</version>  
  <!--作者名稱-->
  <author name=""> 
    <!--作者更多資訊,連結和顯示內容--> 
    <info url="http://www.msphome.cn" target="_blank">http://www.msphome.cn
    </info>
    <!--小工具的LOGO-->
    <logo src="logo.png"/> 
  </author>
  <!--小工具版權-->
  <copyright><!--_locComment_text="{Locked}"-->? 2009</copyright>
  <!--小工具簡介-->  
  <description>簡介。</description>  
  <icons>
    <!--小工具圖示-->
    <icon height="48" width="48" src="icon.png"/>  
  </icons>   
  <hosts>   
    <host name="sidebar">
      <!--是否自適應解析度-->   
      <autoscaleDPI><!--_locComment_text="{Locked}"-->true</autoscaleDPI>
      <!--小工具主體HTML檔案-->
      <base type="HTML" apiVersion="1.0.0" src="Test.html"/>  
      <permissions><!--_locComment_text="{Locked}"-->Full</permissions>
      <!--小工具能正常執行的最低平臺-->
      <platform minPlatformVersion="1.0"/>
      <!--當小工具被拖動時,顯示的圖形-->
      <defaultImage src="drag.png"/>  
    </host>   
  </hosts>   
</gadget>
 

       經過以上設定以後，系統就能識別出我們自己的小工具了。接下來，就是編寫這個小工具了。 首先，我們先來了解下YourName.Gadget這個資料夾裡面的檔案。除了上面的gadget.xml檔案，我們還需要存放上面定義的logo.png，icon.png，drag.png，這些圖片檔案。如果需要多語言支援，請建立語言資料夾，具體存放方法可以參考工具目錄下微軟自帶的小工具。 
       接下來，我們需要知道Gadget的程式設計介面。在MSDN的參考中，我們得知，在小工具的HTML檔案中所包含的JS裡面，我們可以使用System.Gadget物件，這個物件包括的事件、方法、屬性請參考 
       另外，在Gadget裡面還有一些物件也是可用的，這些可能對我們非常有用。詳情請檢視部落格園上面的文章（內容為英文） 
       在實際操作中還發現了一個有趣的事情，就是Gadget裡面的JS指令碼擁有比較高的許可權，可以使用一些在瀏覽器裡面被禁用的COM元件，比如adodb、FSO等等，並且裡面的XMLHTTP元件讀取也是可以跨域的，呵呵。這樣我們可以很方便地使我們的程式變得強大起來。 
       至於小工具的尺寸，我們可以通過CSS定義body的width和height來完成，但在Vista下width最大為130px，在Windows 7下貌似可以更大。我們可以通過body標籤CSS中的background屬性定義背景圖片，但這樣似乎邊框的過度效果就沒有了，解決方案是在body下面一行使用

<g:background style="position:absolute;z-index:-1;width:130px;height:173px"
    src="img/Back.png" />
 

來定義一個完美的背景。 
        想要給小工具新增一個設定頁面？可以，只要在公共執行的JS裡面加入一句

System.Gadget.settingsUI = "Settings.html";

就可以了。
        當我們完成開發以後，就需要將小工具打包釋出。標準的小工具安裝包是以Gadget為副檔名的ZIP或者CAB壓縮包。因此，我們只需要把開發資料夾裡面的所有檔案打包壓縮即可。我們可以使用WinRAR製作ZIP壓縮包，然後將副檔名修改為Gadget即可，這樣，小工具的打包就完成了。