论坛首页 Web前端技术论坛

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

浏览 10276 次
精华帖 (1) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2007-11-15  
看到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本身组件也是模块,可运行过程中加载或卸载。





  • 大小: 596.8 KB
  • 大小: 551.8 KB
  • 大小: 607.8 KB
   发表时间: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()
	}
    }

});
0 请登录后投票
   发表时间:2007-11-15  
呵呵 它需要更多的Extension,小弟用EXT 做了仿WIN的资源管理器(从ext1.0 alpha起开发,现在升级到2.0了),不知可否集成?
0 请登录后投票
   发表时间:2007-11-15  
Sean220,非常感谢分享桌面风格应用框架的设计。
0 请登录后投票
   发表时间:2007-11-15  
引用
(3)实现任务管理器机制,模块可动态加载,删除实例(包括script一起delete掉),这样在调试模块的时候不用刷新页面,只需要删除实例,再加载,即可将新的js代码重新加载并初始化实例。(?类似热部署^_^)。对具有autoRun属性的模块进行启动加载


这个特性不错啊,开拓了思路。
0 请登录后投票
   发表时间:2007-11-15  
sp42 写道
呵呵 它需要更多的Extension,小弟用EXT 做了仿WIN的资源管理器(从ext1.0 alpha起开发,现在升级到2.0了),不知可否集成?



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

0 请登录后投票
   发表时间:2007-11-15  
嗯 有个服务端的问题
我是用MS FSO的(asp com调用)文件一般服务的
不过幸好,也是JS实现的:)

0 请登录后投票
   发表时间: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的可能性吧
0 请登录后投票
   发表时间:2007-11-15  
to timezz:

能具体谈谈你发现的BUG么

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

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

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

当然有可能这是使用不当的原因。
0 请登录后投票
   发表时间:2007-11-15  
受益不浅,刚好在看这块内容,也想改造一下ext这个例子
希望能参与改造开发
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics