vista/win7 桌面小工具制作教程！
边栏小工具
边栏小工具是Windows Vista桌面上类似于Windows任务栏的一个迷你应用程序，它能管理各种称作gadgets的小工具。
小工具介绍
边栏小工具是一个HTML和基于脚本的应用程序，旨在从其他应用程序，控制台，或Web站点和服务器获取并向用户提供有限的信息或功能。小工具由边栏小工具主程序管理，它们并不限于边栏区域;用户可以按照意愿来添加、删除它们。
一个小工具以.gadget扩展名，但实际它是一个包括所有XML, HTML,JavaScript和CSS文件 的zip压缩文件。只要把zip改名gadget即可双击并导入小工具。
用户可以同时运行多个不同的小工具。比如，如果用户想知道不同区域的时间，他们可以运行多个时钟，每个时钟设不同区域;如果用户想同时以幻灯片形式查看2个文件夹的图片，他也可以做到。所有的边栏设置在用户登陆和注销时默认都会保存。默认开机时，小工具也会自动运行并读取设置。
边栏小工具开发指南
1.制作边栏小工具的基本技巧。
2.背景，图片，文本，各元素对象模型。
3.设置层和额外层的弹出(Flyout)。
4.边栏程序的打包和升级。
5.边栏安全。
6.小工具的兼容性。
Windows工具参考指南
1.制作边栏小工具的基本技巧。2010年04月22日 星期四 上午 11:13先来简单的看一下制作一个基本的小工具的做法:
这个小工具只用来显示一个“Hello World”。
介绍
文件
步骤
实例
高级
介绍
小工具是小型HTML和脚本的应用程序。做过网页的会发现的制作小工具的过程和做网页很相似。
文件
框架(manifest)，包含所有信息的格式文档(XML)(注意：此文件必须命名为gadget.xml)。
步骤
1.创建一个用于开发的文件夹。
建议用所做的小工具实名起名。如你的工具叫Test，那么文件夹就取为 Test.gadget。
这会避免日后的混淆。当然你不也可取自己喜欢的名字。
同理，文件夹可以位于任何地方，但位于下列位置有利于实时测效。
%USERPROFILE%\AppData\Local\Microsoft\Windows Sidebar\Gadgets (当前用户小工具)
%SYSTEM_ROOT%\Program Files\Windows Sidebar\Gadgets (全部用户小工具)
( %USERPROFILE% 一般: C:\Users\用户名 %SYSTEM_ROOT% 一般: C: )
2.创建主框架。
创建一个名为gadget.xml的文件
用记事本写以下内容
<?xml version="1.0" encoding="utf-8" ?>
<gadget>
<name>SDK Shell</name>
<version>1.0.0.0</version>
<hosts>
<host name="sidebar">
<base type="HTML" apiVersion="1.0.0" src="Shell.html" />
<permissions>Full</permissions>
<platform minPlatformVersion="1.0" />
</host>
</hosts>
</gadget>
3.创建主页面。
创建一个名为html的文件
用记事本写以下内容
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Unicode" />
</head>
<body>
<div id="gadgetContent">
</div>
</body>
</html>
4.运行小工具。
如果开发文件夹不是位于上述位置。复制要上述位置。
如果需要打包小工具可以发布，见http://msdn.microsoft.com/zh-cn/library/bb456471(en-us,VS.85).aspx
5.测试小工具。
接下来是hello world 的测试样本。
1.确保你已打开windows边栏。
一般它是随机启动的。点开始/所有程序/附件/windows边栏 可以打开。或 开始/搜索 输入sidebar 或 windows边栏
2.打开你的边栏开发文件夹。
%USERPROFILE%\AppData\Local\Microsoft\Windows Sidebar\Gadgets
3.在这个文件夹创建一个文件夹 取名HelloWorld.gadget。
4.在上文件夹创建HelloWorld.html
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Unicode" />
<title>Hello World</title>
<style type="text/css">
body
{
margin: 0;
width: 130px;
height: 75px;
font-family: verdana;
font-weight: bold;
font-size: small;
}
/* 大小设置，见注* */
#gadgetContent
{
margin-top: 20px;
width: 130px;
vertical-align: middle;
text-align: center;
overflow: hidden;
}
</style>
<script type="text/jscript" language="jscript">
// Initialize the gadget.
function init()
{
var oBackground = document.getElementById("imgBackground"); //获得背景位置对象
oBackground.src = "url(images/background.png)"; //设置背景
}
</script>
</head>
<body οnlοad="init()"> <!-- 插入背景 -->
<g:background id="imgBackground">
<span id="gadgetContent">Hello World!</span>
</g:background>
</body>
</html>
*注意 边栏窗口高度最小为60像素，宽度 25像素到130像素间。
5.创建gadget.xml
<gadget>
<name>SDK Hello World</name>
<version>1.0.0.0</version>
<author name="Microsoft">
<info url="msdn.microsoft.com" />
</author>
<copyright>© Microsoft Corporation.</copyright>
<description>"HelloWorld" Sidebar gadget sample.</description>
<hosts>
<host name="sidebar">
<base type="HTML" apiVersion="1.0.0" src="HelloWorld.html" />
<permissions>Full</permissions>
<platform minPlatformVersion="1.0" />
</host>
</hosts>
</gadget>
*注 以上 编码为UTF-8
6.点击小工具的＋
7.应该有一个名为SDK Hello World的小工具已添加。
8.双击加入工具。
2.背景，图片，文本，各元素对象模型。2010年04月22日 星期四 上午 11:14这里介绍如果添加这些元素和边栏图像协议。
介绍
背景图片和G:BACKGROUND元素
G:TEXT和G:IMAGE元素
图像协议
大小
介绍
小工具各元素通过以g为名字空间的html描点定位，表现api。通过dom对象模型查看器可以查看，并可以使用脚本。
注意:这样的html不是标准的html，不能在其它浏览器(如Internet Explorer)浏览。
背景图片和G:BACKGROUND元素
有许多方法可以增加背景。
注意:如果背景需要透明度，使用png格式图片。
一般的说:用这个能显示背景。
<body>
<g:background id="imgBackground" src="images/background.png">
<span id="gadgetContent">Hello World!</span>
</g:background>
</body>
或用脚本添加
<html>
<head>
<title>Hello World</title>
<script type="text/jscript" language="jscript">
function init()
{
var oBackground = document.getElementById("imgBackground");
oBackground.src = "url(images/background.png)";
}
</script>
</head>
<body οnlοad="init()">
<g:background id="imgBackground">
<span id="gadgetContent">Hello World!</span>
</g:background>
</body>
</html>
类似用System对象添加
<html>
<head>
<title>Hello World</title>
<script type="text/jscript" language="jscript">
function init()
{
System.Gadget.background = "images\\background.png";
}
</script>
</head>
<body οnlοad="init()">
<g:background id="imgBackground">
<span id="gadgetContent">Hello World!</span>
</g:background>
</body>
</html>
css也可以添加
<html>
<head>
<style>
body{width:120;height:160;font:8 pt Arial;color:white;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr="#000000",
EndColorStr="#0000FF")}
</style>
</head>
<body bgcolor="red" background="background.jpg">
...
</body>
</html>
G:TEXT和G:IMAGE元素
G:TEXT和G:IMAGE元素虽然可以达到目的，但强烈建议你使用addImageObject和addTextObject方法代替。这将确保内容是通过小工具产生的DOM元素。
在下面的例子演示了如何添加图片和文字的背景层:这些物体会按z的大小出现在背景层上方，但低于任何用户控制界面(UI)。
// 初始化gImage对象
// DEFAULT_IMG_PATH: 默认图片位置。
function initImage()
{
// 检查用户有无保存文件夹路径，否则使用默认
if (System.Gadget.Settings.read("imageFile") == "")
{
System.Gadget.Settings.write("imageFile", DEFAULT_IMG_PATH);
}
imageFile = System.Gadget.Settings.read("imageFile");
// 创建图片对象
oImage = document.getElementById("background").addImageObject("", 0, 0);
}
// 初始化gText对象
function initText()
{
oText = document.getElementById("background").addTextObject("", "Verdana", 10, "blue", 0, 0);
}
function showImage()
{
oImage.src = System.Gadget.Settings.read("imageFile");
}
function showText(newValue)
{
oText.value = newValue;
}
g:image和g:text对象也可直接添加
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Unicode" />
<link href="css/Graphic.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="js/graphic.js" type="text/javascript"></script>
</head>
<body>
<g:background
id="imgBackground"
src="images\background.png">
<g:text id="txtTest" blur="20">test</g:text>
<g:image id="imgTest" src="images\aerologo.png"/></div>
</g:background>
</body>
</html>
注意:此方法不产生g:image和g:tex对象。所以不能用document.getElementById("...") 方法获取对象。
图像协议
本议议使小工具的图像的DOM更有效率比标准HTML <img>标记高。以缩图处理和图像缓存（如果被请求的大小大于256像素，它将尝试使用从Windows缓存获取的缩略图）代替使用图片文件协议file:// 或 http://来提高效率。
注意:gimage协议规定，所需要的文件必须在本地计算机上。
尽管和名称gimage的协议无关，图片和图标返回一个bytestream。但你仍可以使用<img>对象，并使用标准javascript方法。
function findGIMAGE()
{
var oGIMAGE = document.getElementById("imgGIMAGE");
// 得到标准<img>对象.
var srcValue = oGIMAGE.src;
// 未定义G:IMAGE.
var opacityValue = oGIMAGE.opacity;
}
...
<img id="imgGIMAGE"
src="gimage:///C:\Users\user\AppData\Local\Microsoft\Windows Sidebar\Gadgets\SDK_Graphic.gadget\js\graphic.js" />
大小
如前所述，协议的其中一个好处是增强gimage议定书缩图处理和图像尺寸。通常情况下，你会提供图片的高度和宽度作为字符串附加到src属性值或作为内嵌样式。
// --------------------------------------------------------------------
// 增加图像
// --------------------------------------------------------------------
function addGIMAGE()
{
var heightWidthLoad = "?width=25&height=25";
var oImage = document.createElement("img");
oImage.src = "gimage:///" + System.Gadget.path + "\\images\\aerologo.png" + heightWidthLoad;
oImage.id = "imgGIMAGEx";
document.body.appendChild(oImage);
}
// --------------------------------------------------------------------
// 改变图像大小
// --------------------------------------------------------------------
function switchGIMAGE(file)
{
// 指定高度，宽度和z值.
imgGIMAGE.style.height = 25;
imgGIMAGE.style.width = 25;
imgGIMAGE.style.msInterpolationMode = "bicubic";
imgGIMAGE.src = "gimage:///" + System.Gadget.path + "\\images\\aerologo.png";
}
<!--
用脚本指定图像属性
-->
<img id="imgGIMAGE" src="images/blank.png" height="0" width="0" />
如果没有高度和宽度指定图像缩放比例，那么高度或宽度指定图像缩放比例120像素。在任何情况下，任何未填满的区域由透明表示。
3.设置层和额外层的飞出(Flyout)。2010年04月22日 星期四 上午 11:14在上面介绍了如何创建一个基本的边栏。这里解释设置(或选项中小工具上下文菜单)和Flyout功能。
介绍
设置
飞出
高级
介绍
小工具的对象模型定义了两个用户界面（ UI ）来扩展用户界面的基本功能。小工具的设置对话框（ System.Gadget.Settings ）可以让用户更改配置，使一个小工具更个性化，而工具的Flyout （ System.Gadget.Flyout ）让用户查看更多细节或信息。
设置
System.Gadget.Settings和System.Gadget.Settings.ClosingEvent
点击小工具旁边的设置图标或选择选项从上下文菜单的小工具将显示设置对话框。
设置设置界面:
// 可用设置界面
System.Gadget.settingsUI = "Example.html";
其主要目的是设置对话框是让用户选择和修改的小工具设置。例如，股市跟踪小工具可以让用户指定一个数据提供商和股票信息显示偏好，建立设置对话框修改设置。
设置值是一个数值或字符串。
键值最多1024字节，值最多2048字节。
注意：要限制类型转换错误，建议使用writeString和readString。
// Delegate for the settings closing event.
System.Gadget.onSettingsClosing = SettingsClosing;
// --------------------------------------------------------------------
// 操作设置对话框
// 参数:
// 事件
// --------------------------------------------------------------------
function SettingsClosing(event)
{
// 点击OK时保存设置
if (event.closeAction == event.Action.commit)
{
System.Gadget.Settings.write(
"settingsSelectionIndex", selUserEntry.selectedIndex);
}
// 关闭设置
event.cancel = false;
}
var userEntry = "";
System.Gadget.onSettingsClosed = SettingsClosed;
// --------------------------------------------------------------------
// 操作设置对话框光比
// 事件 = System.Gadget.Settings.ClosingEvent参数.
// --------------------------------------------------------------------
function SettingsClosed(event)
{
// 点击本页的OK.
if (event.closeAction == event.Action.commit)
{
userEntry =
System.Gadget.Settings.readString("settingsUserEntry");
SetContentText(userEntry);
}
// 点击本页的取消.
else if (event.closeAction == event.Action.cancel)
{
SetContentText("Cancelled");
}
}
注意:设置框是一个模型，除非父窗口失去焦点，否则只能按确定或取消关闭。
飞出
飞出功能由System.Gadget.Flyout发出，飞出页面需要自己的html， 通过System.Gadget.document和System.Gadget.Flyout.document联系页面。
注意:飞出页面随时可关，当页面出错时亦可。
var oGadgetDocument = System.Gadget.document;
System.Gadget.Flyout.onShow = showFlyout;
System.Gadget.Flyout.onHide = hideFlyout;
// --------------------------------------------------------------------
// 初始化边栏
// --------------------------------------------------------------------
function Init()
{
// 定义飞出界面
System.Gadget.Flyout.file = "example.html";
// Initialize the Flyout state display.
if (!System.Gadget.Flyout.show)
{
sFlyoutFeedback.innerText = "Flyout hidden.";
}
}
// --------------------------------------------------------------------
// 展示飞出
// --------------------------------------------------------------------
function showFlyout()
{
oGadgetDocument.getElementById("strFlyoutFeedback").innerText = "Flyout visible.";
}
// --------------------------------------------------------------------
// 隐藏飞出
// --------------------------------------------------------------------
function hideFlyout()
{
oGadgetDocument.getElementById("strFlyoutFeedback").innerText = "Flyout hidden.";
System.Gadget.Flyout.show = false;
}
飞出界面可以用来显示任何信息。
注意:失去焦点后，飞出界面会关闭
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
