win7 小工具制作
如果你在使用的操作系统是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
页:
[1]