WIN7\Vista 边栏小工具的制作 HelloWorld-阿里云开发者社区

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

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

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

<?xml version="1.0" encoding="utf-8" ?>
<gadget>
<name>这是程序的名字</name>
<namespace>windows.sdk</namespace>
<version>程序的版本控制信息</version>
<author name="作者的名字">
<info url="http://作者的访问网站" />
<logo src="作者的Logo.png" />
</author>
<copyright>© 作者的版权.</copyright>
<description>程序的基本描述</description>
<icons>
<icon height="48" width="48" src="程序的图标.png" />
</icons>
<hosts>
<host name="sidebar">
<base type="HTML" apiVersion="1.0.0" src="程序的入口网页.html" />
<permissions>Full</permissions>
<platform minPlatformVersion="1.0" />
<defaultImage src="默认的程序图标.png" />
</host>
</hosts>
</gadget>

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

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

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

<g:text id=""></g:text> : 该标签表示文本的输出，可以被CSS和JavaScript所控制

<g:image id="" src=""></g:image> : 该标签表示图片的输出，相当于<img/>标签，可以被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
我们看看这个文件夹的内容结构：

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

<?xml version="1.0" encoding="utf-8"?>
<gadget>
<name>Hello World</name>
<namespace>microsoft.windows</namespace>
<version>1.0.0.0</version>
<author name="Sunspot/博远致静">
<info url="http://sunspot.blog.51cto.com" text="访问我的博客"/>
</author>
<copyright>© 2010</copyright>
<description>一个Sidebar的演示</description>
<icons>
<icon height="48" width="48" src="icon.png"/>
</icons>
<hosts>
<host name="sidebar">
<base type="HTML" apiVersion="1.0.0" src="HelloWorld.html"/>
<permissions>Full</permissions>
<platform minPlatformVersion="1.0"/>
<defaultImage src="icon.png"/>
</host>
</hosts>
</gadget>

第二步：编写HelloWorld.html

<html>
<head>
<title>HelloWorld</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body{
/*设置主体显示框的大小，这个需要设置，需注意*/
margin:0px;
width: 150px;
height: 180px;
}
</style>
</head>
<body>
<g:background src="bg.png">
<center>
<br/>
<g:text>HelloWorld</g:text><br/>
<g:text>你的用户名：</g:text><br/>
<input type="text" name="username" style="width:60px;" id="username"/><br/>
<input type="button" value="Open" onclick="doOpenAction()"/>
</center>
</g:background>
<script language="javascript" type="text/javascript" src="gadget.js"></script>
</body>
</html>