OA7流程设计器优化设计.doc

OA7流程设计器优化设计 OA7流程设计器优化设计 1 第1章 引言 2 第2章 XiorkFlow前端JS实现原理概述 2 2.1. 组件机制 2 2.2. Component-Model机制 4 2.3. XiorkFlow界面的组件构成 5 第3章 流程设计器优化设计 8 3.1. 节点复制功能 8 3.2. 连线显示效果 12 3.3. 编辑域全选功能 16 3.4. 批量框选拖动删除功能 17 3.5. 节点六中对齐方式功能 21 3.6. 任务列表窗口 24 第4章 附录：文件修改清单 27 4.1. XiorkFlowWorkSpace.js 27 4.2. NSFlowDesigner.js 27 4.3. AlignActionListener.js 27 4.4. MetaCopyKeyListener.js 28 4.5. MultiSelectMouseListener.js 28 4.6. TaskListActionListener.js 28 4.7. MetaNodeMouseListener.js 28 4.8. TransitionTextMoveMouseListener.js 29 4.9. NodeModel.js 29 4.10. ReadNodeModel.js 29 4.11. Transition.js 29 4.12. XiorkFlowModel.js 30 4.13. XiorkFlowToolBar.js 30 4.14. XiorkFlowWrapper.js 30 4.15. HL.jpg 30 4.16. HC.jpg 30 4.17. HR.jpg 31 4.18. VT.jpg 31 4.19. VM.jpg 31 4.20. VB.jpg 31 引言 本文档编写的主要目的是为OA7流程设计器相关开发人员介绍清楚本次开发对代码所做的修改。 OA7流程设计器选型采用开源的XiorkFlow项目。本项目在前端采用js+VML的方式支持将流程模型绘制成矢量图；在后台通过spring的MVC可以将流程模型数据以ajax的方式与前端js通讯；而流程模型数据（元数据）是以XML的方式表达的，并且与前端js进行ajax通讯时采用的是整存整取的策略（一个流程一个流程的整存整取）。 本次OA7-Designer优化不涉及对后台和元数据的扩展和修改，而仅仅是对前端js的扩展和修改。 Javascript是一门不同于java的基于原型prototype（注意这可不是指那个开源的prototype.js的ajax开源框架）的解释型语言。掌握这门语言需要熟悉它的如下特点： 语句的执行过程是边解释边执行的。所以它的任何对象的属性都是可以随时添加赋值的。 它没有继承的概念，但有原型链的概念。访问一个对象的成员时会顺着原型链一直向上找直到找到或到根也没找着。 函数闭包的概念。函数闭包是一种变量的作用域，它是指的函数定义时的上下文（而不是执行时的）。 对象的this指针。 Dhtml文档对象模型及其事件模型。 XiorkFlow前端JS实现原理概述 组件机制 XiorkFlow的组件机制在设计模式上是油漆工模式（或叫装饰模式），这有点像java中的文件流的设计。这主要是为了简化对象的使用接口，给出一个符合“本系统”特点的方便使用的对象接口。并且这一设计对DomElement的事件在接口上进行了集中分类和重定义： ActionListener：按钮组件的事件处理器。 ContextMenuListener：组件的右键菜单事件处理器。 KeyListener：组件的按键事件处理器。 MouseListener：组件的鼠标按键事件处理器。 MouseWheelListener：组件的鼠标滑轮按键事件的处理器。 类图如下： 注：在实际的XiorkFlow中IComponent接口是与Component是同一个类，图中这样画是为了突出对DomElement进行装饰模式设计的目的。 事件适配机制： 以onClick事件为例。事件的适配机制在ListenerProxy中实现。 在ListenerProxy的构造函数中有如下代码： function ListenerProxy(){ // _onClick = function (e) { if (!ListenerProxy.isEnable()) { return; } e = (e) ? e : ((event) ? event : null); for (var i = 0; i ListenerProxy.mouseListeners.size();