OA7流程设计器优化设计

《OA7流程设计器优化设计》由会员分享，可在线阅读，更多相关《OA7流程设计器优化设计（31页珍藏版）》请在装配图网上搜索。

1、OA7流程设计器优化设计OA7流程设计器优化设计1第1章 引言2第2章 XiorkFlow前端JS实现原理概述22.1.组件机制22.2.Component-Model机制42.3.XiorkFlow界面的组件构成5第3章 流程设计器优化设计83.1.节点复制功能83.2.连线显示效果123.3.编辑域全选功能163.4.批量框选拖动删除功能173.5.节点六中对齐方式功能213.6.任务列表窗口24第4章 附录：文件修改清单274.1.XiorkFlowWorkSpace.js274.2.NSFlowDesigner.js274.3.AlignActionListener.js274.4.M

2、etaCopyKeyListener.js284.5.MultiSelectMouseListener.js284.6.TaskListActionListener.js284.7.MetaNodeMouseListener.js284.8.TransitionTextMoveMouseListener.js294.9.NodeModel.js294.10.ReadNodeModel.js294.11.Transition.js294.12.XiorkFlowModel.js304.13.XiorkFlowToolBar.js304.14.XiorkFlowWrapper.js304.15.H

3、L.jpg304.16.HC.jpg304.17.HR.jpg314.18.VT.jpg314.19.VM.jpg314.20.VB.jpg31第1章 引言本文档编写的主要目的是为OA7流程设计器相关开发人员介绍清楚本次开发对代码所做的修改。OA7流程设计器选型采用开源的XiorkFlow项目。本项目在前端采用js+VML的方式支持将流程模型绘制成矢量图；在后台通过spring的MVC可以将流程模型数据以ajax的方式与前端js通讯；而流程模型数据（元数据）是以XML的方式表达的，并且与前端js进行ajax通讯时采用的是整存整取的策略（一个流程一个流程的整存整取）。本次OA7-Designer

4、优化不涉及对后台和元数据的扩展和修改，而仅仅是对前端js的扩展和修改。Javascript是一门不同于java的基于原型prototype（注意这可不是指那个开源的prototype.js的ajax开源框架）的解释型语言。掌握这门语言需要熟悉它的如下特点：1、 语句的执行过程是边解释边执行的。所以它的任何对象的属性都是可以随时添加赋值的。2、 它没有继承的概念，但有原型链的概念。访问一个对象的成员时会顺着原型链一直向上找直到找到或到根也没找着。3、 函数闭包的概念。函数闭包是一种变量的作用域，它是指的函数定义时的上下文（而不是执行时的）。4、 对象的this指针。5、 Dhtml文档对象模型及

5、其事件模型。第2章 XiorkFlow前端JS实现原理概述2.1. 组件机制XiorkFlow的组件机制在设计模式上是油漆工模式（或叫装饰模式），这有点像java中的文件流的设计。这主要是为了简化对象的使用接口，给出一个符合“本系统”特点的方便使用的对象接口。并且这一设计对DomElement的事件在接口上进行了集中分类和重定义：1、 ActionListener：按钮组件的事件处理器。2、 ContextMenuListener：组件的右键菜单事件处理器。3、 KeyListener：组件的按键事件处理器。4、 MouseListener：组件的鼠标按键事件处理器。5、 MouseWheel

6、Listener：组件的鼠标滑轮按键事件的处理器。类图如下：注：在实际的XiorkFlow中IComponent接口是与Component是同一个类，图中这样画是为了突出对DomElement进行装饰模式设计的目的。事件适配机制：以onClick事件为例。事件的适配机制在ListenerProxy中实现。在ListenerProxy的构造函数中有如下代码：function ListenerProxy()/ _onClick = function (e) if (!ListenerProxy.isEnable() return; e = (e) ? e : (event) ? event : n

7、ull); for (var i = 0; i ListenerProxy.mouseListeners.size(); i+) ListenerProxy.mouseListeners.get(i).onClick(e); return this.propagation;this.container.onclick = _onClick;2.2. Component-Model机制在XiorkFlow中的一些组件采用了Model机制，这个机制实现了UI组件的显示模型和数据模型的分离。Component是UI组件的显示模型，而Model是UI组件的数据模型。并且这一机制的设计采用了观察者模式，

8、Component可以通过这一模式观察Model中的数据变动并相应地进行显示调整。下面以节点或连线的选中状态设定方法为例（此方法在MetaModel.setSelected）列出时序如下：其中方法_updateBoundRectangle()就是设置节点或连线的选择热点的私有方法。在XiorkFlow中除了节点和连线以外，按钮和画布（XiorkFlowViewer）也实现了Model机制。2.3. XiorkFlow界面的组件构成整个XiorkFlow的界面是一个界面组件，这个组件类就是XiorkFlow类。在XiorkFlow类的构造函数中可以看到它由如下七大组件构成：1、 StateMon

9、itor2、 XiorkFlowToolBar（extends Component）3、 XiorkFlowViewer（extends Component）4、 XiorkFlowTableViewer（extends Component）5、 StatusLabel（extends Component）6、 XiorkFlowWrapper7、 XiorkFlowModelXiorkFlow界面的组件构成也可以说是MVC模式的：1、M数据模型层。其中XiorkFlowModel在XiorkFlowWrapper的构造函数中创建，并被XiorkFlowTableViewer共享。此对象是流程

10、的纯数据模型，通过XiorkFlowModelConverter对象可把它直接XML序列化和反序列化。2、C操作控制层。XiorkFlowWrapper主要封装了添加移除节点或连线的方法，添加清除获取选中节点和连线的方法等。3、V界面显示层。XiorkFlow类本身集成自Component，和组成它的其他子Component（XiorkFlowToolBar、XiorkFlowViewer、XiorkFlowTableViewer、StatusLabel）共同构成了V层。XiorkFlow界面操作的事件可以分为三类：1、 无状态按钮事件这是指【保存】【属性】【删除】【对齐】【任务列表】【关闭】

11、这几个按钮，他们的特点是一点击按钮事件处理过程就直接响应他了。如对【保存】按钮进行响应的是SaveActionListener。2、 有状态按钮事件这类按钮事件的特点是当按钮被按下时只会引起相应状态的变迁，而在不同的状态下，其它事件的响应是不同的。一般为了直观的区分状态的不同这类按钮会用ToggleButton的形式显示。在工具栏中共有两组有状态按钮：流程元素组（nodeButtonGroup包含节点和连线）；显示模式组（viewerPatternButtonGroup包括三种显示模式）比如当点击【传阅节点】按钮后，系统变为传阅节点添加状态（状态有StateMonitor管理），然后再在画布上

12、点击鼠标左键就会添加传阅节点在画布上。这一过程时序如图：3、 普通组件事件普通组件事件是指其它Component上的事件，这些事件可能会受StateMonitor状态的影响，如上面说的WrapperMetaMouseListener。这些事件处理器除了在响应的接口方法中提供上下文变量外，还可以在构造函数中提供上下文变量。第3章 流程设计器优化设计3.1. 节点复制功能3.1.1. 需求描述单个节点的复制，复制时保持复制节点和源节点的属性一摸一样，只是坐标向左下移动一点。3.1.2. 功能设计复制功能流程黏贴功能流程3.1.3. 代码设计1、 为画布对象viewer:XiorkFlowViewe

13、r添加按键事件处理器MetaCopyKeyListener。2、 MetaCopyKeyListener在构造时需要提供wrapper:XiorkFlowWrapper作为上下文变量。3、 在处理器的onKeyDown方法中实现的是复制功能逻辑，选中节点可从wrapper上下文对象中取得。4、 在处理器的onKeyUp方法中实现的是黏贴功能逻辑。5、 为支持复制功能的节点类添加clone克隆方法。3.1.4. 文件修改1、 引入代码文件/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/event/MetaCopyKeyListener.js到系

14、统中。这一修改在文件/OA/flowdesigner/XiorkFlow/js/XiorkFlowWorkSpace.js中，修改代码如下图166行2、 在文件/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/XiorkFlowWrapper.js中，在XiorkFlowWrapper的_initViewer方法中为画布对象viewer:XiorkFlowViewer添加MetaCopyKeyListener事件处理器。修改代码如下图90行 3、 添加了新文件/OA/flowdesigner/XiorkFlow/src/name/xio/xio

15、rkflow/event/MetaCopyKeyListener.js4、 在文件/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/meta/NodeModel.js中，添加了任务节点的创建方法和克隆方法，如下图5、 在文件/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/meta/ReadNodeModel.js中，添加传阅节点的创建方法（ReadNodeModel继承自NodeModel），如下图3.2. 连线显示效果3.2.1. 需求描述1、连接线上显示连接顺序（流程设计时可见，流程查看时

16、不显示）。2、返回类型的链接线用不同颜色显示（流程设计时显示不同颜色，流程查看时一样颜色）。3.2.2. 功能设计3.2.3. 代码设计1、 修改连线组件Transition的更新显示文本方法_updateText。在编辑模式的情况下，把要显示的文本的前面加上连线模型TransitionModel中的连线顺序getIndex()前缀。2、 修改连线组件Transition的更新方法_updatePoints。在编辑模式的情况下，把返回类型的连线显示成红色，而普通连线显示成黑色。3.2.4. 文件修改1、 在文件/OA/flowdesigner/XiorkFlow/src/name/xio/xi

17、orkflow/meta/Transition.js中，在方法Transition.prototype._updateText中更新如下代码在方法Transition.prototype._updatePoints中添加如下代码2、 在文件/OA/flowdesigner/XiorkFlow/NS_FlowDesigner/NSFlowDesigner.js中，在连线属性面板的确定按钮的事件处理函数中，添加如下代码3.3. 编辑域全选功能3.3.1. 需求描述编辑域有全选复选框。3.3.2. 功能设计3.3.3. 代码设计1、 showTaskNodeInfo方法是显示任务节点或传阅节点属性的

18、窗口（Ext.Window）的方法。其中编辑域组件是一个CheckboxGroup组件。在它的items属性的配置对象中（是一个数组对象）多加一个全选复选框的配置项。2、 在新加的全选复选框的事件处理函数中实现编辑域全选复选逻辑（如上图）。3.3.4. 文件修改1、 在文件/OA/flowdesigner/XiorkFlow/NS_FlowDesigner/NSFlowDesigner.js中，在函数showTaskNodeInfo中，修改代码如下3.4. 批量框选拖动删除功能3.4.1. 需求描述批量拖动删除（拖动时线的名称要跟着平移）。3.4.2. 功能设计批量拖动删除功能本是本次优化之前

19、已有的功能，所以只要实现框选功能就可以了。3.4.3. 代码设计1、 为画布对象添加一个框选鼠标事件处理器MultiSelectMouseListener，在此处理器中完成上述逻辑。2、 修改原来的单节点选择逻辑：在节点上松开按键时只有在非框选状态下才能选中本节点，否则将可能造成此节点并没有完全在选框内就被选中了。3、 修订原有的在连线文本上释放鼠标按键报脚本错误的Bug4、 修订原有的删除节点时节点上的连线不能全部删除的Bug3.4.4. 文件修改1、 引入代码文件/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/event/MultiSel

20、ectMouseListener.js到系统中。这一修改在文件/OA/flowdesigner/XiorkFlow/js/XiorkFlowWorkSpace.js中，修改代码如下图165行2、 添加新文件/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/event/MultiSelectMouseListener.js3、 在文件/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/XiorkFlowWrapper.js中，在XiorkFlowWrapper的_initViewer方法中为画布对象

21、viewer:XiorkFlowViewer添加MultiSelectMouseListener事件处理器。修改代码如下图88行 4、 在文件/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/meta/event/MetaNodeMouseListener.js中，修改了单节点选择逻辑，如下图5、 在文件/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/meta/event/TransitionTextMoveMouseListener.js中，修订连线文本鼠标bug，如下图6、 在文件/OA/

22、flowdesigner/XiorkFlow/src/name/xio/xiorkflow/XiorkFlowModel.js中的方法XiorkFlowModel.prototype.removeMetaNodeModel中，修改删除节点时连线不能全删的bug，如下图3.5. 节点六中对齐方式功能3.5.1. 需求描述节点六种对齐方式。3.5.2. 功能设计3.5.3. 代码设计1、 在工具栏中添加一个对齐工具栏Toggle按钮，并为其添加action事件处理器AlignActionListener。但因为Toggle按钮集成于普通button类时，重载了doClick方法造成不能直接响应ac

23、tion事件处理器（因为它采用的是上面说的有状态事件机制），因此需要重写此方法以响应action事件。2、 在AlignActionListener中实现上述逻辑代码。3.5.4. 文件修改1、 引入代码文件/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/event/ AlignActionListener.js到系统中。这一修改在文件/OA/flowdesigner/XiorkFlow/js/XiorkFlowWorkSpace.js中，修改代码如下图167行2、 为系统添加js代码文件/OA/flowdesigner/XiorkFlow/

24、src/name/xio/xiorkflow/event/ AlignActionListener.js3、 为系统添加六个对齐方式小图标文件/OA/flowdesigner/XiorkFlow/images/xiorkflow/align/HL.jpg/OA/flowdesigner/XiorkFlow/images/xiorkflow/align/HC.jpg/OA/flowdesigner/XiorkFlow/images/xiorkflow/align/HR.jpg/OA/flowdesigner/XiorkFlow/images/xiorkflow/align/VT.jpg/OA/f

25、lowdesigner/XiorkFlow/images/xiorkflow/align/VM.jpg/OA/flowdesigner/XiorkFlow/images/xiorkflow/align/VB.jpg4、 在文件/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/XiorkFlowToolBar.js中，添加对齐工具栏按钮及其事件处理函数，如下图159-169行3.6. 任务列表窗口3.6.1. 需求描述1.在工具栏中添加【任务列表】按钮（流程设计时可见，流程查看时不显示）。1.1.弹出任务列表窗口，包括任务节点属性中的八个基本属性

26、列（顺序和任务节点属性窗口中的一样）。每条记录前面有复选框。1.2.任务列表是过滤后的只有任务型节点的列表。1.3.并且是按审批意见顺序排序的。1.4.任务列表窗口的工具栏上有【上移】【下移】按钮可以调整单个任务在列表中的顺序。3.6.2. 功能设计3.6.3. 代码设计1、 在工具栏中添加一个任务列表工具栏普通按钮，并为其添加action事件处理器TaskListActionListener。2、 在TaskListActionListener中实现上述逻辑代码。3.6.4. 文件修改1、 引入代码文件/OA/flowdesigner/XiorkFlow/src/name/xio/xiork

27、flow/event/TaskListActionListener.js到系统中。这一修改在文件/OA/flowdesigner/XiorkFlow/js/XiorkFlowWorkSpace.js中，修改代码如下图168行2、 为系统添加js代码文件/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/event/TaskListActionListener.js3、 在文件/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/XiorkFlowToolBar.js中，添加任务列表工具栏按钮及其事件处

28、理函数，如下图172-175行第4章 附录：文件修改清单4.1. XiorkFlowWorkSpace.js 文件路径：/OA/flowdesigner/XiorkFlow/js/XiorkFlowWorkSpace.js 文件作用：引入js脚本文件 涉及的优化需求：3.1；3.4；3.5；3.6；4.2. NSFlowDesigner.js 文件路径：/OA/flowdesigner/XiorkFlow/NS_FlowDesigner/NSFlowDesigner.js 文件作用：扩展出来的用Ext编写的弹出窗体等。 涉及的优化需求：3.2；3.3；4.3. AlignActionListe

29、ner.js 文件路径：/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/event/AlignActionListener.js 文件作用：对齐工具栏按钮的事件处理器。 涉及的优化需求：3.5；4.4. MetaCopyKeyListener.js 文件路径：/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/event/ MetaCopyKeyListener.js 文件作用：节点复制功能的画布按键事件处理器。 涉及的优化需求：3.1；4.5. MultiSelectMouseListener

30、.js 文件路径：/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/event/ MultiSelectMouseListener.js 文件作用：框选功能的画布鼠标事件处理器。 涉及的优化需求：3.4；4.6. TaskListActionListener.js 文件路径：/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/event/ TaskListActionListener.js 文件作用：任务列表按钮的事件处理器。 涉及的优化需求：3.6；4.7. MetaNodeMouseListe

31、ner.js 文件路径：/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/meta/event/MetaNodeMouseListener.js 文件作用：节点的鼠标事件处理器。 涉及的优化需求：3.4；4.8. TransitionTextMoveMouseListener.js 文件路径：/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/meta/event/ TransitionTextMoveMouseListener.js 文件作用：连线文本的鼠标事件处理器。 涉及的优化需求：3.4；

32、4.9. NodeModel.js 文件路径：/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/meta/NodeModel.js 文件作用：任务节点模型对象 涉及的优化需求：3.1；4.10. ReadNodeModel.js 文件路径：/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/meta/ ReadNodeModel.js 文件作用：传阅节点模型对象 涉及的优化需求：3.1；4.11. Transition.js 文件路径：/OA/flowdesigner/XiorkFlow/src/

33、name/xio/xiorkflow/meta/ Transition.js 文件作用：连线节点组件对象 涉及的优化需求：3.2；4.12. XiorkFlowModel.js 文件路径：/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/XiorkFlowModel.js 文件作用：设计器流程模型对象 涉及的优化需求：3.4；4.13. XiorkFlowToolBar.js 文件路径：/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/ XiorkFlowToolBar.js 文件作用：工具栏对

34、象 涉及的优化需求：3.5；3.6；4.14. XiorkFlowWrapper.js 文件路径：/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/XiorkFlowWrapper.js 文件作用：设计器控制对象 涉及的优化需求：3.1；3.4；4.15. HL.jpg 文件路径：/OA/flowdesigner/XiorkFlow/images/xiorkflow/align/HL.jpg 文件作用：水平左对齐图标 涉及的优化需求：3.5；4.16. HC.jpg 文件路径：/OA/flowdesigner/XiorkFlow/images/

35、xiorkflow/align/HC.jpg 文件作用：水平中对齐图标 涉及的优化需求：3.5；4.17. HR.jpg 文件路径：/OA/flowdesigner/XiorkFlow/images/xiorkflow/align/HR.jpg 文件作用：水平右对齐图标 涉及的优化需求：3.5；4.18. VT.jpg 文件路径：/OA/flowdesigner/XiorkFlow/images/xiorkflow/align/VT.jpg 文件作用：垂直上对齐图标 涉及的优化需求：3.5；4.19. VM.jpg 文件路径：/OA/flowdesigner/XiorkFlow/images/xiorkflow/align/VM.jpg 文件作用：垂直中对齐图标 涉及的优化需求：3.5；4.20. VB.jpg 文件路径：/OA/flowdesigner/XiorkFlow/images/xiorkflow/align/VB.jpg 文件作用：垂直下对齐图标 涉及的优化需求：3.5；