基于Desktop风格设计的应用框架探索

看到EXT版里许多基于desktop demo改写的应用界面，包括差沙老兄的那个DEMO，结合自己目前完成的工作做个简单的分享：

（1）为了追求desktop应用OAOP的实质，不采用iframe等方法来取巧，否则只是学了一个界面而已

（2）desktop应该有一个基础框架来为后续开发提供支持，包括调试、任务管理、接口模型等多个方面

（3）组件化，动态加载（根据实际需要异步或同步），desktop里的每样东西，包括开始菜单、任务栏、桌面图标、类加载提示窗口等内容都进行插件化管理。

（4）垃圾收集问题。既然作为OAOP应用，使用过程中动态加载的的模块的各种ui组件，必须保证在模块destory时从dom树上删除，这点在做的时候调试非常辛苦，举个例子：比如window组件只要close，就会自动从dom树上remove,而Menu则不会，如果带contextmenu的模块destory时候未手动将自身相关的menu清除，那么即使重复打开同一模块，未释放的menu element也会造成内存泄漏。（好在有firebug可以动态监视dom树变化）

由于没有外网服务器，加上目前完成度不高，只能用图片看看，以后差不多在拿出来共享吧。


截图已实现部分功能说明：

（1）可以从开始菜单、桌面图标加载模块（可拖放），桌面右键菜单（保存当前设置、排列图标等），快捷方式支持自定义的右键菜单，模块可根据自身需要在自身快捷方式右键菜单里加新的项（默认为打开、在新窗口打开（脱离desktop窗口，以浏览器新页面模块窗口全屏打开，即为传统方式）、删除快捷、重命名、属性）

（2）调试窗口实现类似log4j方式的消息监视，可避免到处alert(),将来可以扩展两个方面，一个方面可将本地调试日志发往服务器保存，二可以服务器日志在本地显示，调试窗口消息上点右键可打开详细内容或打开对象浏览窗口

（3）实现任务管理器机制，模块可动态加载，删除实例（包括script一起delete掉），这样在调试模块的时候不用刷新页面，只需要删除实例，再加载，即可将新的js代码重新加载并初始化实例。（？类似热部署^_^）。对具有autoRun属性的模块进行启动加载

（4）桌面图标、加载进度口等desktop本身组件也是模块，可运行过程中加载或卸载。

评论

12 楼 rihoonet 2007-11-16  

cool,在哪下载？

11 楼 Sean220 2007-11-16  

只要目前2.0的api稳定了，那些细节bug对整个体系影响不大，我认为不用干等稳定版本发布，另外会在闲暇尝试跟下代码，用firebug看下css,发现往往都能解决问题

10 楼 fangzhouxing 2007-11-15  

Sean220,非常欣赏你运用Ext的高水平！希望有机会和你交流。

感觉Ext2.0RC1中还是有一些bug,看正式版本能否解决。主要是在TabPanel中显示GridPanel问题，页脚无法显示，只能等调整浏览器窗口后才显示出来。这个问题我
很早已经给Jack提出，好像一直没有解决。

9 楼 longyan1979 2007-11-15  

受益不浅，刚好在看这块内容，也想改造一下ext这个例子
希望能参与改造开发

8 楼 Sean220 2007-11-15  

to timezz:

能具体谈谈你发现的BUG么

2.0RC1 应该来讲还是比较稳定了，到现在我只发现DD里的offset的bug

就是拖放的时候，如果在notifyDrop里手动调用element的setXY，则再

拖放开始的时候，proxy里的cloneNode会偏移出位置，因为offset的缘故。

当然有可能这是使用不当的原因。

7 楼 timezz 2007-11-15  

Sean220 写道

sp42 写道

呵呵 它需要更多的Extension,小弟用EXT 做了仿WIN的资源管理器(从ext1.0 alpha起开发,现在升级到2.0了),不知可否集成?

完全可以，Desktop本身就是开放的框架，如果有资源管理器，可以让用户管理本地文件一样管理自己在服务器上的文件，上传、删除、改名等，将是一个非常有用的Extension，已M你了，QQ交流下

根据我2周对ext的学习运用，我不得不说ext的这个框架现在并不十分flexible，且bug不断（layout方面），我觉得其强项应该在grid，treeview等插件，或许等他2.0版本稳定后，再来审视其oaop的可能性吧

6 楼 sp42 2007-11-15  

嗯 有个服务端的问题
我是用MS FSO的(asp com调用)文件一般服务的
不过幸好，也是JS实现的:)

5 楼 Sean220 2007-11-15  

sp42 写道

呵呵 它需要更多的Extension,小弟用EXT 做了仿WIN的资源管理器(从ext1.0 alpha起开发,现在升级到2.0了),不知可否集成?

完全可以，Desktop本身就是开放的框架，如果有资源管理器，可以让用户管理本地文件一样管理自己在服务器上的文件，上传、删除、改名等，将是一个非常有用的Extension，已M你了，QQ交流下

4 楼 i_love_sc 2007-11-15  

引用

（3）实现任务管理器机制，模块可动态加载，删除实例（包括script一起delete掉），这样在调试模块的时候不用刷新页面，只需要删除实例，再加载，即可将新的js代码重新加载并初始化实例。（？类似热部署^_^）。对具有autoRun属性的模块进行启动加载

这个特性不错啊，开拓了思路。

3 楼 fangzhouxing 2007-11-15  

Sean220，非常感谢分享桌面风格应用框架的设计。

2 楼 sp42 2007-11-15  

呵呵 它需要更多的Extension,小弟用EXT 做了仿WIN的资源管理器(从ext1.0 alpha起开发,现在升级到2.0了),不知可否集成?

1 楼 Sean220 2007-11-15  

对于动态加载的内容，与差沙的实现略有不同，差沙的思路为所有的模块（Action）定义为json形式，如发现存在execute方法则执行，考虑到不同模块的复用可能（json方式本身就已是对象，如果两个模块功能相同而只是初始化参数不一样，那么按json方式就必须相同的json代码copy两份）


因此一个用户登录后，后台根据权限返回给taskManager的只是模块列表的config信息，一般表现形式如下
[
{id:m0102,title,'用户列表',script:"app.module.userlist",smallIconCls:"x-app-userlist-s",largerIconCls:"x-app-userlist-l",initcfg:{...},...},
{id:m0103,title,'用户新建',script:"app.module.usernew",smallIconCls:"x-app-usernew-s",largerIconCls:"x-app-usernew-l",initcfg:{...},...},
....
]
而存在可能就是两个module的script都是同一个类，但是initcfg不相同，就具有不同的标识id,不同的title,不同的icon等。


基本的Module主类定义如下

$package("app.desktop")
//所有的需要纳入任务管理器管理的模块必须由此Module继承
app.desktop.Module = function(config){
	this.opener  = null;
	this.mainApp = null
	this.openWinInTaskbar = true;  //false则不出现在任务栏，不让taskmanager打开窗口，手动打开
	this.autoRun = false
	this.type = "USER"
	
    Ext.apply(this, config);
    app.desktop.Module.superclass.constructor.call(this);
	this.classId = this.script + "-" + this.id
    this.init();
}

//继承于Observable，为模块之间、模块与desktop采用事件机制通讯提供基础 
Ext.extend(app.desktop.Module, Ext.util.Observable, {     init : function(){},
    getWin: function(){return null},//需要override，加载后taskmanager自动调用获得模块主窗口，无窗口模块可不实现该方法
    setMainApp:function(mainApp){
    	this.mainApp = mainApp;
    	this.logger = mainApp.logger.createLogger(this.classId) 
    },
    destory: function(){  //需要override，垃圾清场，关闭主窗口时自动由taskManager调用
    	if(this.win){
    		this.win.close()
	}
    }

});