Windows Vista与Win7边侧栏小工具开发教程(二)

作者在 2011-06-24 17:52:13 发布以下内容
小工具的三个主要页面(见附图)
主界面-小工具的主界面
设置界面-对小工具进行设置的界面
扩展界面-弹出的扩展界面
实现代码

System.Gadget.Flyout.file = "flyout.html";//若需要flyout其他page,可以随时设置此属性

System.Gadget.settingsUI = "setting.html";//这句要写在主界面js代码的最开头

 

扩展页面弹出方法

System.Gadget.Flyout.show = true;

反之设置这个属性为false则会关闭扩展页面

 

不规则界面的制作

 

一些小工具的界面并不是规则的界面(如CPU速度表的圆形截面)

这些界面可以使用png图片来实现,小工具支持png图片,所以png图片的透明部分在显示时也会透明,这样可以设置一个png图片做背景图从而实现不规则界面

 

比如

body

{

  background:url(abc.png);

}

 

常见事件

//常常在main page中使用

System.Gadget.onSettingsClosed = function () {

    System.Debug.outputString("Setting Closed ...");

};

System.Gadget.Flyout.onHide = function () {

    System.Debug.outputString("Flyout Hide ...");

};

System.Gadget.onUndock = function () {

    System.Debug.outputString("Gadget undock ...");

};

System.Gadget.onDock = function () {

    System.Debug.outputString ("Gadget Dock");

};

//常在flyout page中使用

System.Gadget.Flyout.onShow=function() {

         System.Debug.outputString("Flyout Show");

}

 

数据传输

//将数据传递到Flyout.Htm页面

System.Gadget.Settings.writeString('sfid', this.sfid);

System.Gadget.Flyout.file = "flyout.html";

System.Gadget.Flyout.show = true;

//Flyout.Htm页面接受数据

var id=System.Gadget.Settings.readString('sfid');

 

//Gadget窗体访问flyout窗体:

System.Gadget.Flyout.document.parentWindow.<id/function/variable>

//Flyout/Settings窗体访问Gadget窗体:

System.Gadget.document.parentWindow.<id/function/variable>

 

另附微软MSDN提供的小工具开发API文档(英文)里面有小工具可以使用的几个内置系统对象的说明

 

http://msdn.microsoft.com/en-us/library/aa965853(v=VS.85).aspx

 

还有一个要注意的地方,小工具的页面和文件必须是utf-8编码字符集

也就是说小工具网页或xml文档的charset必须是utf-8如果是gb2312可能会乱码

默认分类 | 阅读 1978 次
文章评论,共0条
游客请输入验证码
浏览139273次
文章分类