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：

制作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应用