win7 小工具制作

kidys

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

第一小节，我们说说配置      在整个边栏小工具项目的文件中，必须要一个基本的配置文件，称之为“gadget.xml”的文件，这个文件决定了程序启动的方式和程序的属性内容。下面使用中文的地方我们可以进行修改，当然如果非常熟悉了，就无所谓了。   这是程序的名字   windows.sdk   程序的版本控制信息                       © 作者的版权.   程序的基本描述                                      Full                         　　让我们看看这些配置在小工具中是如何显示的，这是官方的说明图片： http://img1.iyunv.com/attachment/201101/153630281.png 　　在这里我要说明一个关键的地方，在编写的所有文本文件都必须是以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    我们看看这个文件夹的内容结构：   http://img1.iyunv.com/attachment/201101/171709764.jpg 　　 　　编写之前再次提醒，所有的文件必须以UTF-8的形式保存！ 第一步：编写配置部署文件，gadget.xml     Hello World     microsoft.windows     1.0.0.0                              © 2010     一个Sidebar的演示                                                                      Full                                         第二步：编写HelloWorld.html               HelloWorld                               body{               /*设置主体显示框的大小，这个需要设置，需注意*/               margin:0px;               width: 150px;               height: 180px;             }                                                                                            HelloWorld                 你的用户名：                                                                            　　 第三步：编写gadget.js代码： //初始化 var initHelloWorld = function() {       //设置“移出窗口”的文件     System.Gadget.Flyout.file="Flyout.html";       //设置“设置窗口”的文件     System.Gadget.settingsUI="SettingsUI.html";   }   //执行open按钮的点击方法 var doOpenAction = function () {       var username = document.getElementById("username");       //session中设置用户名     System.Gadget.Settings.writeString("username",username.value);       //打开Flyout     System.Gadget.Flyout.show=true;          }   //执行初始化 initHelloWorld();   　　 　　第四步：编写Flyout.html               HelloWorld                               body{               /*设置移动显示框的大小，这个需要设置，需注意*/               margin:0px;               width: 150px;               height: 180px;               font-size:20px;               font-weight:bold;             }                                                                   展开Flyout，用户名：                              document.write(System.Gadget.Settings.readString("username"));                                　　 第五步：编写SettingsUI.html               HelloWorld                               body{               /*设置设置显示框的大小，这个需要设置，需注意*/               margin:0px;               width: 200px;               height: 200px;               font-size:20px;               font-weight:bold;             }                                                                   这是一个设置的显示窗口。                   　　 第六步：打包 将上述图片中的文件使用WinZip 、7-ZIP 或 WinRAR压缩为ZIP格式文件，之后将ZIP文件的后缀名改为gadget即可。 http://img1.iyunv.com/attachment/201101/170150485.jpg 　　第七步：执行程序 双击HelloWorld.gadget文件 http://img1.iyunv.com/attachment/201101/170305617.jpg 　　 　　选择安装，之后的小工具显示为： 《点击Open后出现Flyout的效果》 http://img1.iyunv.com/attachment/201101/170353272.jpg 《点击设置出现的效果》 http://img1.iyunv.com/attachment/201101/170500310.jpg 　　小工具中的信息： http://img1.iyunv.com/attachment/201101/170751135.jpghttp://img1.iyunv.com/attachment/201101/170820169.jpg