工作流设计器XiorkFlow优化设计文档文档格式.docx
《工作流设计器XiorkFlow优化设计文档文档格式.docx》由会员分享，可在线阅读，更多相关《工作流设计器XiorkFlow优化设计文档文档格式.docx（30页珍藏版）》请在冰豆网上搜索。
组件的右键菜单事件处理器。
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界面的组件构成也可以说是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、添加了新文件
4、在文件
/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、连接线上显示连接顺序（流程设计时可见，流程查看时不显示）。
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中添加如下代码
/OA/flowdesigner/XiorkFlow/NS_FlowDesigner/NSFlowDesigner.js
中，在连线属性面板的确定按钮的事件处理函数中，添加如下代码
3.3.编辑域全选功能
3.3.1.需求描述
编辑域有全选复选框。
3.3.2.功能设计
3.3.3.代码设计
1、showTaskNodeInfo方法是显示任务节点或传阅节点属性的窗口（Ext.Window）的方法。
其中编辑域组件是一个CheckboxGroup组件。
在它的items属性的配置对象中（是一个数组对象）多加一个全选复选框的配置项。
2、在新加的全选复选框的事件处理函数中实现编辑域全选复选逻辑（如上图）。
3.3.4.文件修改
中，在函数showTaskNodeInfo中，修改代码如下
3.4.批量框选拖动删除功能
3.4.1.需求描述
批量拖动删除（拖动时线的名称要跟着平移）。
3.4.2.功能设计
批量拖动删除功能本是本次优化之前已有的功能，所以只要实现框选功能就可以了。
3.4.3.代码设计
1、为画布对象添加一个框选鼠标事件处理器MultiSelectMouseListener，在此处理器中完成上述逻辑。
2、修改原来的单节点选择逻辑：
在节点上松开按键时只有在非框选状态下才能选中本节点，否则将可能造成此节点并没有完全在选框内就被选中了。
3、修订原有的在连线文本上释放鼠标按键报脚本错误的Bug
4、修订原有的删除节点时节点上的连线不能全部删除的Bug
3.4.4.文件修改
/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/event/MultiSelectMouseListener.js
中，修改代码如下图165行
2、添加新文件
3、在文件
XiorkFlowViewer添加MultiSelectMouseListener事件处理器。
修改代码如下图88行
/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/meta/event/MetaNodeMouseListener.js
中，修改了单节点选择逻辑，如下图
/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中实现上述逻辑代码。
3.5.4.文件修改
/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/event/AlignActionListener.js
中，修改代码如下图167行
2、为系统添加js代码文件
3、为系统添加六个对齐方式小图标文件
/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/flowdesigner/XiorkFlow/images/xiorkflow/align/VM.jpg
/OA/flowdesigner/XiorkFlow/images/xiorkflow/align/VB.jpg
/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/XiorkFlowToolBar.js
中，添加对齐工具栏按钮及其事件处理函数，如下图159-169行
3.6.任务列表窗口
3.6.1.需求描述
1.在工具栏中添加【任务列表】按钮（流程设计时可见，流程查看时不显示）。
1.1.弹出任务列表窗口，包括任务节点属性中的八个基本属性列（顺序和任务节点属性窗口中的一样）。
每条记录前面有复选框。
1.2.任务列表是过滤后的只有任务型节点的列表。
1.3.并且是按审批意见顺序排序的。
1.4.任务列表窗口的工具栏上有【上移】【下移】按钮可以调整单个任务在列表中的顺序。
3.6.2.功能设计
3.6.3.代码设计
1、在工具栏中添加一个任务列表工具栏普通按钮，并为其添加action事件处理器TaskListActionListener。
2、在TaskListActionListener中实现上述逻辑代码。
3.6.4.文件修改
/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/event/TaskListActionListener.js
中，修改代码如下图168行
中，添加任务列表工具栏按钮及其事件处理函数，如下图172-175行
第4章附录：
文件修改清单
4.1.XiorkFlowWorkSpace.js
Ø
文件路径：
文件作用：
引入js脚本文件
涉及的优化需求：
3.1；
3.4；
3.5；
3.6；
4.2.NSFlowDesigner.js
扩展出来的用Ext编写的弹出窗体等。
3.2；
3.3；
4.3.AlignActionListener.js
/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/event/AlignActionListener.js
对齐工具栏按钮的事件处理器。
4.4.MetaCopyKeyListener.js
/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/event/MetaCopyKeyListener.js
节点复制功能的画布按键事件处理器。
4.5.MultiSelectMouseListener.js
/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/event/MultiSelectMouseListener.js
框选功能的画布鼠标事件处理器。
4.6.TaskListActionListener.js
/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/event/TaskListActionListener.js
任务列表按钮的事件处理器。
4.7.MetaNodeMouseListener.js
/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/meta/event/
MetaNodeMouseListener.js
节点的鼠标事件处理器。
4.8.TransitionTextMoveMouseListener.js
/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/meta/event/TransitionTextMoveMouseListener.js
连线文本的鼠标事件处理器。
4.9.NodeModel.js
任务节点模型对象
4.10.ReadNodeModel.js
/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/meta/ReadNodeModel.js
传阅节点模型对象
4.11.Transition.js
/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/meta/Transition.js
连线节点组件对象
4.12.XiorkFlowModel.js
设计器流程模型对象
4.13.XiorkFlowToolBar.js
/OA/flowdesigner/XiorkFlow/src/name/xio/xiorkflow/XiorkFlowToolBar.js
工具栏对象
4.14.XiorkFlowWrapper.js
/OA/flowde
升级会员 