Vista Gadget中引入Ext JS

ExtJS UI这一套UI被广泛地运用在不同客户端主机上,已经成为业界继Dojo、Yahoo!UI之后全能型UI框架。理论上,仅提供HTML/CSS /JavaScript的环境便可流程运行ExtJS UI,于是我们可以看到除了Web之外类型客户端:移动终端、WebOS、Fireware(如路由器、甚至任天堂Wii)等等。这种前提下,进而应用在 Gadget之上更是顺理成章、轻易易举的事情。那么发生在Gadget到底将会怎么样呢?我们可以透过MS Vista Gadget和Google Gadget来看看与结合ExtJS结合后发生什么事情。

ExtJS前任主程Jack Slocum曾经写过一篇博文(http://jackslocum.com/blog/2008/02/15/vista-gadget-with-ext-js/),说ExtJS可以直接用在Vista操作系统之上。这里“直接”的意思是不像网页使用ExtJS那么简单,也不是WSH、HTA的方式使用,而是通过Vista所支持的“Gadget小工具”的概念,来建立基于OS的小型应用程序。Gaget支持的开发途径就有HTML/CSS/JavaScript我们十分熟悉的知识技能,所以ExtJS作为一个AJAX UI框架,就可以充分利用到Vista的操作系统“原生”的扩展上了。

Jack在博文中便为大家提供一个 DEMO 程序。那是一个Ext Forum的内容读取 Gaget 程序,不需要打开浏览器,登录网站就可以在“桌面”上了解论坛的帖子。

如下图所示,左边的为完全展开(undocked)状态的 Gaget,右边为收缩(docked)状态的 Gaget:

Vista Gadget中引入Ext JS_第1张图片

制作Gaget的过程并不十分复杂。据Jack自述回忆,只是将做好的Ext程序打包为Gadget,还有就是写几行Docked/Undocked的代码外,没什么特定针对Gadget的代码。打包过程是发布每个应用程序的“编译过程”,总是少不了的。MS Gadget实际上也是一种ZIP文件,改变原forum.gadget的gadget扩展名为*.zip打开即可,里面都有源码的(forum.js)。

function changeDock() {
	if (System.Gadget.docked) {
		System.Gadget.background = 'images/docked.png';
		var bd = Ext.getBody();
		bd.setSize(130, 250);
		bd.addClass('docked');
		cm.setHidden(1, true);
		cm.setRenderer(0, renderTopicMini);
		grid.setPosition(4, 4);
		grid.setSize(121, 241);
		toggleDetails(null, false);
	} else {
		System.Gadget.background = 'images/undocked2.png';
		var bd = Ext.getBody();
		bd.setSize(528, 383);
		bd.removeClass('docked');
		cm.setHidden(1, false);
		cm.setRenderer(0, renderTopic);
		grid.setPosition(14, 14);
		grid.setSize(494, 349);
		cm.setColumnWidth(0, 350);
		toggleDetails(null, true);
	}
}
System.Gadget.onUndock = changeDock;
System.Gadget.onDock = changeDock;

 我们解释一下贴出的代码。Gaget API 提供了 onDock/onUndock 的事件,我们在这里都指向同一个事件处理器:changeDock()。事件处理器changeDock中,根据System.Gadget.docked的状态决定是否收缩Gaget控件。有一点必须注意,Gadget控件的背景图不能通过bod:background-image来设定,而是Gadget自己的背景图属性System.Gadget.background来设定。最后就是改变控件大小的一些方法。

 有网友问,Visit Gadget 只限于MS平台,如果不在用 Vista 或以上的 OS就不能享用Gadget,而Google的Gadget则没此限制,那么是否可以将此Gadget变为Google的Gadget(http://code.google.com/apis/gadgets/index.html)?Jack很快就回答了这位网友,说,其实Gadget内部依然AJAX程序,针对Gadget特定平台的代码是很小的一部分,所以转到Google网页的空间,应该不会太困难和麻烦的。

 

下载Gadget应用:http://jackslocum.com/playpen/forum.gadget

备份下载:http://bbs.ajaxjs.com/viewthread.php?tid=3140

 

几个相关的网址:

  • http://msdn.microsoft.com/en-us/library/aa965853(VS.85).aspx
    MSDN关于Sidebar的文档
  • http://social.msdn.microsoft.com/forums/en-US/sidebargadfetdevelopment/threads/
    Gadget官方论坛
  • http://gallery.live.com/home.aspx
    Live Gallery里面就有不少的Gadget应用

你可能感兴趣的:(Ajax,UI,ext,Google,ExtJs,dojo)