如果你在使用的操作系统是WIN7或者Windows Vista版本，那一定会使用到边栏小工具。
有一天，有朋友问我这个边栏小工具是怎么制作的，我查了一下，这个东西其实分为两种小工具类型，一种就称之为“边栏小工具Sidebar”，还有一个称之为“SideShow”，而且使用的开发技术也不相同，前者你只要会一点网页开发技术即可，后者则需要一定的C++编程基础的。

这里我们先说说Sidebar的制作过程。

 第一小节，我们说说配置
     在整个边栏小工具项目的文件中，必须要一个基本的配置文件，称之为“gadget.xml”的文件，这个文件决定了程序启动的方式和程序的属性内容。下面使用中文的地方我们可以进行修改，当然如果非常熟悉了，就无所谓了。

       
       
       
       
    
        
        
        
        
  1. xml version="1.0" encoding="utf-8" ?> 
    2. 
        
        
        
        
  2. <gadget> 
    3. 
        
        
        
        
  3.   <name>这是程序的名字name> 
    4. 
        
        
        
        
  4.   <namespace>windows.sdknamespace> 
    5. 
        
        
        
        
  5.   <version>程序的版本控制信息version> 
    6. 
        
        
        
        
  6.   <author name="作者的名字"> 
    7. 
        
        
        
        
  7.     <info url="http://作者的访问网站" /> 
    8. 
        
        
        
        
  8.     <logo src="作者的Logo.png" /> 
    9. 
        
        
        
        
  9.   author> 
    10. 
        
        
        
        
  10.   <copyright>© 作者的版权.copyright> 
    11. 
        
        
        
        
  11.   <description>程序的基本描述description> 
    12. 
        
        
        
        
  12.   <icons> 
    13. 
        
        
        
        
  13.     <icon height="48" width="48" src="程序的图标.png" /> 
    14. 
        
        
        
        
  14.   icons> 
    15. 
        
        
        
        
  15.   <hosts> 
    16. 
        
        
        
        
  16.     <host name="sidebar"> 
    17. 
        
        
        
        
  17.       <base type="HTML" apiVersion="1.0.0" src="程序的入口网页.html" /> 
    18. 
        
        
        
        
  18.       <permissions>Fullpermissions> 
    19. 
        
        
        
        
  19.       <platform minPlatformVersion="1.0" /> 
    20. 
        
        
        
        
  20.       <defaultImage src="默认的程序图标.png" /> 
    21. 
        
        
        
        
  21.     host> 
    22. 
        
        
        
        
  22.   hosts> 
    23. 
        
        
        
        
  23. gadget> 
    24. 
        
        
        
        
  24.  
    25.

让我们看看这些配置在小工具中是如何显示的，这是官方的说明图片：

WIN7\Vista 边栏小工具的制作 HelloWorld_第1张图片

在这里我要说明一个关键的地方，在编写的所有文本文件都必须是以UTF-8的方式进行存储，切记。

 第二小节，我们开始学习有关Sidebar的标签
    在Sidebar中有三个基本的标签，分别是：
    : 该标签表示小工具显示的背景方式，src是引用的资源，id是标识符，可以被CSS和JavaScript所控制

  : 该标签表示文本的输出，可以被CSS和JavaScript所控制

  : 该标签表示图片的输出，相当于标签，可以被CSS和JavaScript所控制。

 第三小节，我们开始学习有关Sidebar的脚本代码（在JavaScript中执行）
    在Sidebar中有关小工具的类称之为System.Gadget，该类为根类。我们介绍常用的基本类：
    System.Gadget 
    主要方法：
     -settingsUI : 设置显示“小工具设置”功能的文件地址

    System.Gadget.Flyout : 该类表示“移出窗口”类，
    主要的属性有
      -file ： 表示“移出窗口”的资源文件的地址
     -show： 表示“移出窗口”是否显示，默认为false
    主要事件有：
     -onHide ： 在隐藏时的事件处理
     -onShow：在显示时的事件处理

    System.Gadget.Settings : 该类是一个键值对的容器，当被初始化时以Session的方式存在。
    主要方法：
     -write(key,value) : 保存键值，这个值应该是一个数据类型，比如boolean的true或false或者int类型
     -read(key) : 返回键值所保存的值
    -writeString(key,value) : 保存键值，该值是一个字符串
    -readString(key) : 返回键值

 第四小节，我们开始写一个HelloWorld
   我们看看这个文件夹的内容结构：  

WIN7\Vista 边栏小工具的制作 HelloWorld_第2张图片

 

编写之前再次提醒，所有的文件必须以UTF-8的形式保存！
第一步：编写配置部署文件，gadget.xml

       
       
       
       
    
        
        
        
        
  1. xml version="1.0" encoding="utf-8"?> 
    2. 
        
        
        
        
  2. <gadget> 
    3. 
        
        
        
        
  3.     <name>Hello Worldname> 
    4. 
        
        
        
        
  4.     <namespace>microsoft.windowsnamespace> 
    5. 
        
        
        
        
  5.     <version>1.0.0.0version> 
    6. 
        
        
        
        
  6.       
    7. 
        
        
        
        
  7.     <author name="Sunspot/博远致静"> 
    8. 
        
        
        
        
  8.     <info url="http://sunspot.blog.51cto.com" text="访问我的博客"/> 
    9. 
        
        
        
        
  9.     author> 
    10. 
        
        
        
        
  10.     <copyright>© 2010copyright> 
    11. 
        
        
        
        
  11.     <description>一个Sidebar的演示description> 
    12. 
        
        
        
        
  12.     <icons> 
    13. 
        
        
        
        
  13.         <icon height="48" width="48" src="icon.png"/> 
    14. 
        
        
        
        
  14.     icons> 
    15. 
        
        
        
        
  15.         
    16. 
        
        
        
        
  16.     <hosts> 
    17. 
        
        
        
        
  17.         <host name="sidebar"> 
    18. 
        
        
        
        
  18.           <base type="HTML" apiVersion="1.0.0" src="HelloWorld.html"/> 
    19. 
        
        
        
        
  19.           <permissions>Fullpermissions> 
    20. 
        
        
        
        
  20.           <platform minPlatformVersion="1.0"/> 
    21. 
        
        
        
        
  21.           <defaultImage src="icon.png"/> 
    22. 
        
        
        
        
  22.         host> 
    23. 
        
        
        
        
  23.     hosts> 
    24. 
        
        
        
        
  24. gadget> 
    25.

第二步：编写HelloWorld.html
 
       
       
       
       
    
        
        
        
        
  1. <html> 
    2. 
        
        
        
        
  2.     <head> 
    3. 
        
        
        
        
  3.         <title>HelloWorldtitle> 
    4. 
        
        
        
        
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    5. 
        
        
        
        
  5.         <style type="text/css"> 
    6. 
        
        
        
        
  6.           body{  
    7. 
        
        
        
        
  7.             /*设置主体显示框的大小，这个需要设置，需注意*/  
    8. 
        
        
        
        
  8.             margin:0px;  
    9. 
        
        
        
        
  9.             width: 150px;  
    10. 
        
        
        
        
  10.             height: 180px;  
    11. 
        
        
        
        
  11.           }  
    12. 
        
        
        
        
  12.         style> 
    13. 
        
        
        
        
  13.           
    14. 
        
        
        
        
  14.     head> 
    15. 
        
        
        
        
  15.     <body> 
    16. 
        
        
        
        
  16.         <g:background src="bg.png"> 
    17. 
        
        
        
        
  17.             <center> 
    18. 
        
        
        
        
  18.                 <br/> 
    19. 
        
        
        
        
  19.                 <g:text>HelloWorldg:text><br/> 
    20. 
        
        
        
        
  20.                 <g:text>你的用户名：g:text><br/> 
    21. 
        
        
        
        
  21.                 <input type="text" name="username" style="width:60px;" id="username"/><br/> 
    22. 
        
        
        
        
  22.                 <input type="button" value="Open" onclick="doOpenAction()"/> 
    23. 
        
        
        
        
  23.             center> 
    24. 
        
        
        
        
  24.         g:background> 
    25. 
        
        
        
        
  25.         <script language="javascript" type="text/javascript" src="gadget.js">script> 
    26. 
        
        
        
        
  26.     body> 
    27. 
        
        
        
        
  27. html> 
    28.


第三步：编写gadget.js代码：

       
       
       
       
    
        
        
        
        
  1. //初始化  
    2. 
        
        
        
        
  2. var initHelloWorld = function() {  
    3. 
        
        
        
        
  3.     //设置“移出窗口”的文件  
    4. 
        
        
        
        
  4.     System.Gadget.Flyout.file="Flyout.html";  
    5. 
        
        
        
        
  5.     //设置“设置窗口”的文件  
    6. 
        
        
        
        
  6.     System.Gadget.settingsUI="SettingsUI.html";  
    7. 
        
        
        
        
  7. }  
    8. 
        
        
        
        
  8.  
    9. 
        
        
        
        
  9. //执行open按钮的点击方法  
    10. 
        
        
        
        
  10. var doOpenAction = function () {  
    11. 
        
        
        
        
  11.     var username = document.getElementById("username");  
    12. 
        
        
        
        
  12.     //session中设置用户名  
    13. 
        
        
        
        
  13.     System.Gadget.Settings.writeString("username",username.value);  
    14. 
        
        
        
        
  14.     //打开Flyout  
    15. 
        
        
        
        
  15.     System.Gadget.Flyout.show=true;  
    16. 
        
        
        
        
  16.       
    17. 
        
        
        
        
  17. }  
    18. 
        
        
        
        
  18.  
    19. 
        
        
        
        
  19. //执行初始化  
    20. 
        
        
        
        
  20. initHelloWorld();  
    21.


第四步：编写Flyout.html

       
       
       
       
    
        
        
        
        
  1. <html> 
    2. 
        
        
        
        
  2.     <head> 
    3. 
        
        
        
        
  3.         <title>HelloWorldtitle> 
    4. 
        
        
        
        
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    5. 
        
        
        
        
  5.         <style type="text/css"> 
    6. 
        
        
        
        
  6.           body{  
    7. 
        
        
        
        
  7.             /*设置移动显示框的大小，这个需要设置，需注意*/  
    8. 
        
        
        
        
  8.             margin:0px;  
    9. 
        
        
        
        
  9.             width: 150px;  
    10. 
        
        
        
        
  10.             height: 180px;  
    11. 
        
        
        
        
  11.             font-size:20px;  
    12. 
        
        
        
        
  12.             font-weight:bold;  
    13. 
        
        
        
        
  13.           }  
    14. 
        
        
        
        
  14.         style> 
    15. 
        
        
        
        
  15.     head> 
    16. 
        
        
        
        
  16.     <body>        
    17. 
        
        
        
        
  17.         <center> 
    18. 
        
        
        
        
  18.             <br/> 
    19. 
        
        
        
        
  19.             展开Flyout，用户名：<br/> 
    20. 
        
        
        
        
  20.             <script language="javascript"> 
    21. 
        
        
        
        
  21.                 document.write(System.Gadget.Settings.readString("username"));  
    22. 
        
        
        
        
  22.             script> 
    23. 
        
        
        
        
  23.         center> 
    24. 
        
        
        
        
  24.     body> 
    25. 
        
        
        
        
  25. html> 
    26.


第五步：编写SettingsUI.html

       
       
       
       
    
        
        
        
        
  1. <html> 
    2. 
        
        
        
        
  2.     <head> 
    3. 
        
        
        
        
  3.         <title>HelloWorldtitle> 
    4. 
        
        
        
        
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    5. 
        
        
        
        
  5.         <style type="text/css"> 
    6. 
        
        
        
        
  6.           body{  
    7. 
        
        
        
        
  7.             /*设置设置显示框的大小，这个需要设置，需注意*/  
    8. 
        
        
        
        
  8.             margin:0px;  
    9. 
        
        
        
        
  9.             width: 200px;  
    10. 
        
        
        
        
  10.             height: 200px;  
    11. 
        
        
        
        
  11.             font-size:20px;  
    12. 
        
        
        
        
  12.             font-weight:bold;  
    13. 
        
        
        
        
  13.           }  
    14. 
        
        
        
        
  14.         style> 
    15. 
        
        
        
        
  15.     head> 
    16. 
        
        
        
        
  16.     <body>        
    17. 
        
        
        
        
  17.         <center> 
    18. 
        
        
        
        
  18.             <br/> 
    19. 
        
        
        
        
  19.             这是一个设置的显示窗口。  
    20. 
        
        
        
        
  20.         center> 
    21. 
        
        
        
        
  21.     body> 
    22. 
        
        
        
        
  22. html> 
    23.


第六步：打包
将上述图片中的文件使用WinZip 、7-ZIP 或 WinRAR压缩为ZIP格式文件，之后将ZIP文件的后缀名改为gadget即可。

第七步：执行程序
双击HelloWorld.gadget文件

WIN7\Vista 边栏小工具的制作 HelloWorld_第3张图片 

 

选择安装，之后的小工具显示为：
《点击Open后出现Flyout的效果》

WIN7\Vista 边栏小工具的制作 HelloWorld_第4张图片 

《点击设置出现的效果》

WIN7\Vista 边栏小工具的制作 HelloWorld_第5张图片 

小工具中的信息： 
WIN7\Vista 边栏小工具的制作 HelloWorld_第6张图片WIN7\Vista 边栏小工具的制作 HelloWorld_第7张图片