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>&#169; 作者的版权.</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>

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


        
        

         
         <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;  

         
                     font-size:20px;  

         
                     font-weight:bold;  

         
                   }  

         
                 </style> 

         
             </head> 

         
             <body>        

         
                 <center> 

         
                     <br/> 

         
                     展开Flyout，用户名：<br/> 

         
                     <script language="javascript"> 

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

         
                     </script> 

         
                 </center> 

         
             </body> 

         
         </html>

第五步：编写SettingsUI.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: 200px;  

         
                     height: 200px;  

         
                     font-size:20px;  

         
                     font-weight:bold;  

         
                   }  

         
                 </style> 

         
             </head> 

         
             <body>        

         
                 <center> 

         
                     <br/> 

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

         
                 </center> 

         
             </body> 

         
         </html>

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

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

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

《点击设置出现的效果》

小工具中的信息：

附件：http://down.51cto.com/data/2357398

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

WIN7\Vista 边栏小工具的制作 HelloWorld

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

WIN7\Vista 边栏小工具的制作 HelloWorld

热门文章

最新文章

相关课程

相关电子书