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:
制作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
几个相关的网址: