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> 

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

<a target="_blank" href="http://blog.51cto.com/attachment/201101/153630281.png"></a>

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

 第二小节，我们开始学习有关Sidebar的标签

    在Sidebar中有三个基本的标签，分别是：

    &lt;g:background id="" src=""&gt; : 该标签表示小工具显示的背景方式，src是引用的资源，id是标识符，可以被CSS和JavaScript所控制

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

  &lt;g:image id="" src=""&gt;&lt;/g:image&gt; : 该标签表示图片的输出，相当于&lt;img/&gt;标签，可以被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

   我们看看这个文件夹的内容结构：  

<a target="_blank" href="http://blog.51cto.com/attachment/201101/171709764.jpg"></a>

编写之前再次提醒，所有的文件必须以UTF-8的形式保存！

第一步：编写配置部署文件，gadget.xml

&lt;?xml version="1.0" encoding="utf-8"?&gt; 

    &lt;name&gt;Hello World&lt;/name&gt; 

    &lt;namespace&gt;microsoft.windows&lt;/namespace&gt; 

    &lt;version&gt;1.0.0.0&lt;/version&gt; 

    &lt;author name="Sunspot/博远致静"&gt; 

    &lt;info url="http://sunspot.blog.51cto.com" text="访问我的博客"/&gt; 

    &lt;/author&gt; 

    &lt;copyright&gt;© 2010&lt;/copyright&gt; 

    &lt;description&gt;一个Sidebar的演示&lt;/description&gt; 

    &lt;icons&gt; 

        &lt;icon height="48" width="48" src="icon.png"/&gt; 

    &lt;/icons&gt; 

    &lt;hosts&gt; 

        &lt;host name="sidebar"&gt; 

          &lt;base type="HTML" apiVersion="1.0.0" src="HelloWorld.html"/&gt; 

          &lt;permissions&gt;Full&lt;/permissions&gt; 

          &lt;platform minPlatformVersion="1.0"/&gt; 

          &lt;defaultImage src="icon.png"/&gt; 

        &lt;/host&gt; 

    &lt;/hosts&gt; 

第二步：编写HelloWorld.html

&lt;html&gt; 

    &lt;head&gt; 

        &lt;title&gt;HelloWorld&lt;/title&gt; 

        &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; 

        &lt;style type="text/css"&gt; 

          body{  

            /*设置主体显示框的大小，这个需要设置，需注意*/  

            margin:0px;  

            width: 150px;  

            height: 180px;  

          }  

        &lt;/style&gt; 

    &lt;/head&gt; 

    &lt;body&gt; 

        &lt;g:background src="bg.png"&gt; 

            &lt;center&gt; 

                &lt;br/&gt; 

                &lt;g:text&gt;HelloWorld&lt;/g:text&gt;&lt;br/&gt; 

                &lt;g:text&gt;你的用户名：&lt;/g:text&gt;&lt;br/&gt; 

                &lt;input type="text" name="username" style="width:60px;" id="username"/&gt;&lt;br/&gt; 

                &lt;input type="button" value="Open" onclick="doOpenAction()"/&gt; 

            &lt;/center&gt; 

        &lt;/g:background&gt; 

        &lt;script language="javascript" type="text/javascript" src="gadget.js"&gt;&lt;/script&gt; 

    &lt;/body&gt; 

&lt;/html&gt; 

第三步：编写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

            /*设置移动显示框的大小，这个需要设置，需注意*/  

            font-size:20px;  

            font-weight:bold;  

    &lt;body&gt;        

        &lt;center&gt; 

            &lt;br/&gt; 

            展开Flyout，用户名：&lt;br/&gt; 

            &lt;script language="javascript"&gt; 

                document.write(System.Gadget.Settings.readString("username"));  

            &lt;/script&gt; 

        &lt;/center&gt; 

第五步：编写SettingsUI.html

            /*设置设置显示框的大小，这个需要设置，需注意*/  

            width: 200px;  

            height: 200px;  

            这是一个设置的显示窗口。  

第六步：打包

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

<a target="_blank" href="http://blog.51cto.com/attachment/201101/170150485.jpg"></a>

第七步：执行程序

双击HelloWorld.gadget文件

选择安装，之后的小工具显示为：

《点击Open后出现Flyout的效果》

《点击设置出现的效果》

小工具中的信息： 

<a href="http://down.51cto.com/data/2357398" target="_blank">附件：http://down.51cto.com/data/2357398</a>

本文转自 sundunjam 51CTO博客，原文链接：http://blog.51cto.com/sunspot/473217，如需转载请自行联系原作者