vista
-
2023年4月26日发(作者：如何进入思科路由器)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)(注意：此文件必须命名为)。 步骤1.创建一个用于开发的文件夹。建议用所做的小工具实名起名。如你的工具叫Test，那么文件夹就取为 。这会避免日后的混淆。当然你不也可取自己喜欢的名字。同理，文件夹可以位于任何地方，但位于下列位置有利于实时测效。%USERPROFILE%AppDataLocalMicrosoftWindows SidebarGadgets (当前用户小工具)%SYSTEM_ROOT%Program FilesWindows SidebarGadgets (全部用户小工具)( %USERPROFILE% 一般: C:Users用户名 %SYSTEM_ROOT% 一般: C: )2.创建主框架。创建一个名为的文件用记事本写以下内容<?xml version="1.0" encoding="utf-8" ?>SDK Shell1.0.0.0Full3.创建主页面。创建一个名为html的文件用记事本写以下内容4.运行小工具。如果开发文件夹不是位于上述位置。复制要上述位置。如果需要打包小工具可以发布，见/zh-cn/library/bb456471(en-us,VS.85).aspx5.测试小工具。接下来是hello world 的测试样本。1.确保你已打开windows边栏。一般它是随机启动的。点开始/所有程序/附件/windows边栏 可以打开。或 开始/搜索 输入sidebar 或 windows边栏2.打开你的边栏开发文件夹。%USERPROFILE%AppDataLocalMicrosoftWindows SidebarGadgets3.在这个文件夹创建一个文件夹 取名。4.在上文件夹创建Hello Worldbody{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;}<script type="text/jscript" language="jscript">// Initialize the gadget.function init(){var oBackground = mentById("imgBackground"); //获得背景位置对象 = "url(images/)"; //设置背景}</script> Hello World!*注意 边栏窗口高度最小为60像素，宽度 25像素到130像素间。5.创建SDK Hello World1.0.0.0© Microsoft Corporation."HelloWorld" Sidebar gadget sample.Full*注 以上 编码为UTF-86.点击小工具的＋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格式图片。一般的说:用这个能显示背景。Hello World!或用脚本添加Hello World<script type="text/jscript" language="jscript">function init(){var oBackground = mentById("imgBackground"); = "url(images/)";}</script>Hello World!类似用System对象添加Hello World<script type="text/jscript" language="jscript">function init(){ound = "";}</script>Hello World!css也可以添加body{width:120;height:160;font:8 pt Arial;color:white;filter:progid:nt(GradientType=1, StartColorStr="#000000",EndColorStr="#0000FF")}...G:TEXT和G:IMAGE元素G:TEXT和G:IMAGE元素虽然可以达到目的，但强烈建议你使用addImageObject和addTextObject方法代替。这将确保内容是通过小工具产生的DOM元素。在下面的例子演示了如何添加图片和文字的背景层:这些物体会按z的大小出现在背景层上方，但低于任何用户控制界面(UI)。// 初始化gImage对象// DEFAULT_IMG_PATH: 默认图片位置。function initImage(){// 检查用户有无保存文件夹路径，否则使用默认if (("imageFile") == ""){("imageFile", DEFAULT_IMG_PATH);}imageFile = ("imageFile");// 创建图片对象oImage = mentById("background").addImageObject("", 0, 0);}// 初始化gText对象function initText(){oText = mentById("background").addTextObject("", "Verdana", 10, "blue", 0, 0);}function showImage(){ = ("imageFile");}function showText(newValue){ = newValue;}g:image和g:text对象也可直接添加<script language="javascript" src="js/" type="text/javascript"></script>test注意:此方法不产生g:image和g:tex对象。所以不能用mentById("...") 方法获取对象。图像协议本议议使小工具的图像的DOM更有效率比标准HTML 标记高。以缩图处理和图像缓存（如果被请求的大小大于256像素，它将尝试使用从Windows缓存获取的缩略图）代替使用图片文件协议file:// 或 http://来提高效率。注意:gimage协议规定，所需要的文件必须在本地计算机上。尽管和名称gimage的协议无关，图片和图标返回一个bytestream。但你仍可以使用对象，并使用标准javascript方法。function findGIMAGE(){var oGIMAGE = mentById("imgGIMAGE");// 得到标准对象.var srcValue = ;// 未定义G:IMAGE.var opacityValue = y;}...src="gimage:///C:UsersuserAppDataLocalMicrosoftWindows SidebarGadgetsSDK_" />大小如前所述，协议的其中一个好处是增强gimage议定书缩图处理和图像尺寸。通常情况下，你会提供图片的高度和宽度作为字符串附加到src属性值或作为内嵌样式。// --------------------------------------------------------------------// 增加图像// --------------------------------------------------------------------function addGIMAGE(){var heightWidthLoad = "?width=25&height=25";var oImage = Element("img"); = "gimage:///" + + "" + heightWidthLoad; = "imgGIMAGEx";Child(oImage);}// --------------------------------------------------------------------// 改变图像大小// --------------------------------------------------------------------function switchGIMAGE(file){// 指定高度，宽度和z值. = 25; = 25;rpolationMode = "bicubic"; = "gimage:///" + + "";}如果没有高度和宽度指定图像缩放比例，那么高度或宽度指定图像缩放比例120像素。在任何情况下，任何未填满的区域由透明表示。3.设置层和额外层的飞出(Flyout)。2010年04月22日 星期四 上午 11:14在上面介绍了如何创建一个基本的边栏。这里解释设置(或选项中小工具上下文菜单)和Flyout功能。介绍设置飞出高级介绍小工具的对象模型定义了两个用户界面（ UI ）来扩展用户界面的基本功能。小工具的设置对话框（ gs ）可以让用户更改配置，使一个小工具更个性化，而工具的Flyout （ ）让用户查看更多细节或信息。设置gs和gEvent点击小工具旁边的设置图标或选择选项从上下文菜单的小工具将显示设置对话框。设置设置界面:// 可用设置界面gsUI = "";其主要目的是设置对话框是让用户选择和修改的小工具设置。例如，股市跟踪小工具可以让用户指定一个数据提供商和股票信息显示偏好，建立设置对话框修改设置。设置值是一个数值或字符串。键值最多1024字节，值最多2048字节。注意：要限制类型转换错误，建议使用writeString和readString。// Delegate for the settings closing event. ingsClosing = SettingsClosing;// --------------------------------------------------------------------// 操作设置对话框// 参数:// 事件// --------------------------------------------------------------------function SettingsClosing(event){// 点击OK时保存设置if (ction == ){("settingsSelectionIndex", edIndex);}// 关闭设置 = false;}var userEntry = "";ingsClosed = SettingsClosed;// --------------------------------------------------------------------// 操作设置对话框光比// 事件 = gEvent参数.// --------------------------------------------------------------------function SettingsClosed(event){// 点击本页的OK.if (ction == ){userEntry = ring("settingsUserEntry");SetContentText(userEntry);}// 点击本页的取消.else if (ction == ){SetContentText("Cancelled");}}注意:设置框是一个模型，除非父窗口失去焦点，否则只能按确定或取消关闭。飞出飞出功能由发出，飞出页面需要自己的html， 通过nt和nt联系页面。注意:飞出页面随时可关，当页面出错时亦可。var oGadgetDocument = nt; = showFlyout; = hideFlyout;// --------------------------------------------------------------------// 初始化边栏// --------------------------------------------------------------------function Init(){// 定义飞出界面 = "";// Initialize the Flyout state display.if (!){ext = "Flyout hidden.";}}// --------------------------------------------------------------------// 展示飞出// --------------------------------------------------------------------function showFlyout(){mentById("strFlyoutFeedback").innerText = "Flyout visible.";}// --------------------------------------------------------------------// 隐藏飞出// --------------------------------------------------------------------function hideFlyout(){mentById("strFlyoutFeedback").innerText = "Flyout hidden."; = false;}飞出界面可以用来显示任何信息。注意:失去焦点后，飞出界面会关闭-
win7系统小工具