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浏览器/回收站了。