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
第1章引言
本文档编写的主要目的是为OA7流程设计器相关开发人员介绍清楚本次开发对代码所做的修改。
OA7流程设计器选型采用开源的XiorkFlow项目。本项目在前端采用js+VML的方式支持将流程模型绘制成矢量图；在后台通过spring的MVC可以将流程模型数据以ajax的方式与前端js通讯；而流程模型数据（元数据）是以XML的方式表达的，并且与前端js进行ajax通讯时采用的是整存整取的策略（一个流程一个流程的整存整取）。
本次OA7-Designer优化不涉及对后台和元数据的扩展和修改，而仅仅是对前端js的扩展和修改。
Javascript是一门不同于java的基于原型prototype（注意这可不是指那个开源的prototype.js的ajax开源框架）的解释型语言。掌握这门语言需要熟悉它的如下特点：
1、语句的执行过程是边解释边执行的。所以它的任何对象的属性都是可以随时添加赋值的。
2、它没有继承的概念，但有原型链的概念。访问一个对象的成员时会顺着原型链一直向上找直到找到或到根也没找着。
3、函数闭包的概念。函数闭包是一种变量的作用域，它是指的函数定义时的上下文（而不是执行时的）。
4、对象的this指针。
5、Dhtml文档对象模型及其事件模型。
第2章XiorkFlow前端JS实现原理概述
2.1.组件机制
XiorkFlow的组件机制在设计模式上是油漆工模式（或叫装饰模式），这有点像java中的文件流的设计。这主要是为了简化对象的使用接口，给出一个符合“本系统”特点的方便使用的对象接口。并且这一设计对DomElement的事件在接口上进行了集中分类和重定义：
1、ActionListener：按钮组件的事件处理器。
2、ContextMenuListener：组件的右键菜单事件处理器。
3、KeyListener：组件的按键事件处理器。
4、MouseListener：组件的鼠标按键事件处理器。
5、MouseWheelListener：组件的鼠标滑轮按键事件的处理器。
类图如下：
注：在实际的XiorkFlow中IComponent接口是与Component是同一个类，图中这样画是为了突出对DomElement进行装饰模式设计的目的。
事件适配机制：
以onClick事件为例。事件的适配机制在ListenerProxy中实现。
在ListenerProxy的构造函数中有如下代码：
functionListenerProxy(){
//_onClick=function(e){if(!ListenerProxy.isEnable()){return;}e=(e)?e:((event)?event:null);for(vari=0;i<ListenerProxy.mouseListeners.size();i++){ListenerProxy.mouseListeners.get(i).onClick(e);}returnthis.propagation;};
this.container.onclick=_onClick;}
2.2.Component-Model机制
在XiorkFlow中的一些组件采用了Model机制，这个机制实现了UI组件的显示模型和数据模型的分离。Component是UI组件的显示模型，而Model是UI组件的数据模型。并且这一机制的设计采用了观察者模式，Component可以通过这一模式观察Model中的数据变动并
相应地进行显示调整。
下面以节点或连线的选中状态设定方法为例（此方法在MetaModel.setSelected）列出时序如下：
其中方法_updateBoundRectangle()就是设置节点或连线的选择热点的私有方法。在XiorkFlow中除了节点和连线以外，按钮和画布（XiorkFlowViewer）也实现了Model机制。
2.3.XiorkFlow界面的组件构成
整个XiorkFlow的界面是一个界面组件，这个组件类就是XiorkFlow类。在XiorkFlow类的构造函数中可以看到它由如下七大组件构成：
1、StateMonitor
2、XiorkFlowToolBar（extendsComponent）
3、XiorkFlowViewer（extendsComponent）
4、XiorkFlowTableViewer（extendsComponent）
5、StatusLabel（extendsComponent）
6、XiorkFlowWrapper
7、XiorkFlowModel
工作流设计器XIORKFLOW优化设计文档.doc下载XiorkFlow界面的组件构成也可以说是MVC模式的：1、M数据模型层。其中XiorkFlowModel在XiorkFlowWrapper的构造函数中创建，并被XiorkFlowTableViewer共享。此对象是流程的纯数据模型，通过XiorkFlowModelConverter对象可把它直接XML序列化和反序列化。
2、C操作控制层。XiorkFlowWrapper主要封装了添加移除节点或连线的方法，添加清除获
取选中节点和连线的方法等。
3、V界面显示层。XiorkFlow类本身集成自Component，和组成它的其他子Component（XiorkFlowToolBar、XiorkFlowViewer、XiorkFlowTableViewer、StatusLabel）共同构成了V层。
XiorkFlow界面操作的事件可以分为三类：1、无状态按钮事件
这是指【保存】【属性】【删除】【对齐】【任务列表】【关闭】这几个按钮，他们的特点是一点击按钮事件处理过程就直接响应他了。
如对【保存】按钮进行响应的是SaveActionListener。
2、有状态按钮事件
这类按钮事件的特点是当按钮被按下时只会引起相应状态的变迁，而在不同的状态下，其它事件的响应是不同的。一般为了直观的区分状态的不同这类按钮会用ToggleButton的形式显示。
在工具栏中共有两组有状态按钮：流程元素组（nodeButtonGroup包含节点和连线）；显示模式组（viewerPatternButtonGroup包括三种显示模式）
比如当点击【传阅节点】按钮后，系统变为传阅节点添加状态（状态有StateMonitor管理）
，然后再在画布上点击鼠标左键就会添加传阅节点在画布上。这一过程时序如图：
3、普通组件事件
普通组件事件是指其它Component上的事件，这些事件可能会受StateMonitor状态的影响，如上面说的WrapperMetaMouseListener。
这些事件处理器除了在响应的接口方法中提供上下文变量外，还可以在构造函数中提供上下文变量。
第3章流程设计器优化设计
3.1.节点复制功能
3.1.1.需求描述
单个节点的复制，复制时保持复制节点和源节点的属性一摸一样，只是坐标向左下移动一点。
3.1.2.功能设计
复制功能流程
黏贴功能流程
3.1.3.代码设计
1、为画布对象viewer:XiorkFlowViewer添加按键事件处理器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到系统中。
这一修改在文件
/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/xiorkflow/event/MetaCopyKeyListener.js
4、在文件
/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/meta/NodeModel.js中，添加了任务节点的创建方法和克隆方法，如下图
第11 / 31页
5、在文件
/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/meta/ReadNodeModel.js中，添加传阅节点的创建方法（ReadNodeModel继承自NodeModel）
，如下图
3.2.连线显示效果
3.2.1.需求描述
1、连接线上显示连接顺序（流程设计时可见，流程查看时不显示）。
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/xiorkflow/meta/Transition.js中，在方法Transition.prototype._updateText
中更新如下代码在方法Transition.prototype._updatePoints
中添加如下代码
2、在文件
/OA/flowdesigner/XiorkFlow/NS_FlowDesigner/NSFlowDesigner.js
中，在连线属性面板的确定按钮的事件处理函数中，添加如下代码
第15 / 31页
3.3.编辑域全选功能
3.3.1.需求描述编辑域有全选复选框。
3.3.2.
功能设计
3.3.3.代码设计
1、showTaskNodeInfo方法是显示任务节点或传阅节点属性的窗口（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.功能设计
批量拖动删除功能本是本次优化之前已有的功能，所以只要实现框选功能就可以了。
3.4.3.代码设计
1、为画布对象添加一个框选鼠标事件处理器MultiSelectMouseListener，在此处理器中完成上述逻辑。
2、修改原来的单节点选择逻辑：在节点上松开按键时只有在非框选状态下才能选中本节点，否则将可能造成此节点并没有完全在选框内就被选中了。
3、修订原有的在连线文本上释放鼠标按键报脚本错误的Bug
4、修订原有的删除节点时节点上的连线不能全部删除的Bug
3.4.4.文件修改
1、引入代码文件
/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/event/MultiSelectMouseListener.js到系统中。
这一修改在文件
/OA/flowdesigner/XiorkFlow/js/XiorkFlowWorkSpace.js
中，修改代码如下图165
行
2、添加新文件
/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/event/MultiSelectMouseListener.js
3、在文件/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/XiorkFlowWrapper.js
中，在XiorkFlowWrapper的
_initViewer方法中为画布对象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/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方法造成不能直接响应action事件处理器（因为它采用的是上面说的有状态事件机制），因此需要重写此方法以响应action事件。
2、在AlignActionListener中实现上述逻辑代码。
久久建筑网m.kkreddy.com提供大量：建筑图纸、施工方案、工程书籍、建筑论文、合同表格、标准规范、CAD图纸等内容。