Windows Gadget 制作（二）

在经过上篇介绍之后，一个windows 的gadget程序已经可以跑起来了。现在一步步添加功能。

说明：在这个应用中，我使用了prototype_1.6.js框架，因为我感觉这是比较轻量级的js框架，而且项目中正使用它，对它比较熟悉。

在程序第一次运行时，因为没有配置文件，所以使用为其配置几个默认的系统应用：

我的电脑、网络、控制面板、回收站、IE浏览器，在这里我以资源的方式将其添加，以便于后边的引用。

var finalVals = { /** * 定义需要用到的资源文件。 */ defaultResources : { /** 我的电脑。 */ myComputer : "我的电脑", /** 网络。 */ netWork : "网络", /** 控制面板。 */ control : "控制面板", /** ie浏览器。 */ ie : "IE浏览器", /** 回收站。 */ recycleBin : "回收站" }, /** * FileSystemObject对象。 */ oFSO : new ActiveXObject("Scripting.FileSystemObject") }

初始化一些资源信息

/** * 系统初始化资源。 */ myGadgetInitResource = { /** * GadGet的路径。 */ gadgetPath : System.Gadget.path, /** * 当没有生成配置文件时，读取这个默认的配置。000用来排序，0开头的表示文件，1开头的表示文件夹。 为了让我的电脑、网络、控制面板、ie浏览器、回收站按顺序排列，因此使用了001这样的序号。 以*号区分文件类型，显示的文件名，执行的路径，及默认的图标路径。这里默认应用的执行路径是按windows 7来的，可能在 */ defaultItems : ["000*" + finalVals.defaultResources.myComputer + "*::{20D04FE0-3AEA-1069-A2D8-08002B30309D}", "001*" + finalVals.defaultResources.netWork + "*::{F02C1A0D-BE21-4350-88B0-7367FC96EF3C}", "002*" + finalVals.defaultResources.control + "*::{20D04FE0-3AEA-1069-A2D8-08002B30309D}//::{21EC2020-3AEA-1069-A2DD-08002B30309D}", "003*" + finalVals.defaultResources.ie + "*::{871C5380-42A0-1069-A2EA-08002B30309D}", "004*" + finalVals.defaultResources.recycleBin + "*::{645FF040-5081-101B-9F08-00AA002F954E}"], /** * 定义几个系统应用的默认图标。 */ showIco : new function() { var icos = new Hash(); icos.set(finalVals.defaultResources.netWork, "/images/newWork.png"); // windows 文件夹的路径 var winPath = System.Shell.knownFolderPath("Windows"); icos.set(finalVals.defaultResources.myComputer, "/images/computer.png"); // 将控制面板的图标修改为系统的图标。 if (finalVals.oFSO.FileExists(winPath + "//system32//control.exe")) icos.set(finalVals.defaultResources.control, "gimage:///" + winPath + "//system32//control.exe"); else icos.set(finalVals.defaultResources.control, "/images/control.png"); var pfPath = System.Shell.knownFolderPath("ProgramFiles"); // 将ie的默认图标修改为系统的图标。 if (finalVals.oFSO.FileExists(pfPath + "//Internet Explorer//iexplore.exe")) icos.set(finalVals.defaultResources.ie, "gimage:///" + pfPath + "//Internet Explorer//iexplore.exe"); else icos.set(finalVals.defaultResources.ie, "/images/ie.ico"); if (System.Shell.RecycleBin.fileCount + System.Shell.RecycleBin.folderCount >= 1) icos.set(finalVals.defaultResources.recycleBin, "/images/rbFull.ico"); else icos.set(finalVals.defaultResources.recycleBin, "/images/rbEmpty.ico"); /** * 根据名字获取系统应用的图标。 * @return 如果是系统应用，返回其对应图标。否则返回未定义。 */ this.getImg = function(name) { return icos.get(name); }; } };

有了以上信息后，我们就可以开始生成一些初始化列表及将这些列表显示到div里边了。代码如下：

myGadget = { /** 显示快捷键列表的DIV */ outputDiv : ('g_content'), /** * 列表。 */ lists : null, /** 配置文件保存的路径。 */ settingFile : myGadgetInitResource.gadgetPath + "//setting.gadget", /** * 读取快捷设置列表。 */ getSetting : function() { this.lists = new Array(); // 配置文件存在，读取配置文件里边的东西。 if (finalVals.oFSO.FileExists(this.settingFile)) { //... } else {// 如果配置文件不存在，使用五个系统默认的应用。 this.lists = myGadgetInitResource.defaultItems; } this.lists.sort();// 排序。 }, /** * 将列表显示到指定的div中。 * @param {String/Element} outputDiv 要显示列表的Div层的ID值或Element对象。 * @param {Array} lists 路径列表。该列表是以xxx*xxx*xxx，第一组数是类型，第二组数是显示的文件名，第三组数是文件路径。 */ showToTools : function(outputDiv, lists) { outputDiv = $(outputDiv); outputDiv.innerHTML = "";// 清空里边显示的快捷项。 lists.each(function(obj) { var datas = obj.split("*"); if (datas.length >= 3) { var image = myGadgetInitResource.showIco.getImg(datas[1]); if (!image) { image = datas[2]; } outputDiv.innerHTML += "<div title='" + datas[1] + "' class='itemsOutDiv' type='" + datas[0] + "' link='" + datas[2] + "'>" + "<div class='itemsImgDiv'><img src="" + image + "" mce_src="" + image + ""/></div><div class='itemsNameDiv'>" + datas[1] + "</div><div class='clear'></div></div>"; } }); outputDiv.childElements().each(function(o) { o.observe("mouseover", myGadget.itemMouseOver); o.observe("mouseout", myGadget.itemMouseOut); o.observe("mousedown", myGadget.mousedown); }); }, itemMouseOver : function(e) { }, itemMouseOut : function(e) { }, mousedown : function(e) { if (e.button == "1") { System.Shell.execute(this.getAttribute("link")); } } };

最后需要在页面加载完成后，调用一个方法，进行页面的初始化。

Event.observe(window, "load", function() { myGadget.outputDiv = $(myGadget.outputDiv); myGadget.getSetting(); myGadget.showToTools(myGadget.outputDiv, myGadget.lists); });

OK，以上代码之后，我们就可以看到工具的运行界面了： 
  

单击这几个项目就可以打开我的电脑/网络/控制面板/IE浏览器/回收站了。