Activiti实战. 3.1基于B/S架构的流程设计器Activiti Modeler-CSDN博客

3.1基于B/S架构的流程设计器Activiti Modeler

Activiti Modeler是基于B/S架构的流程设计器，在Activiti 5.11版本发布之前Activiti官方提供了独立的Activiti Modeler组件，需要开发人员执行压缩包中的脚本打包，但是从Activiti 5.11开始不需要自行打包Activiti Modeler了，在下载的压缩包中已经把重新设计的Activiti Modeler集成到了Activiti Explorer中，所以不想了解如何打包的读者可以跳过本节内容。关于重新设计的Activiti Modeler将在3.2节介绍。

3.1.1Activiti Modeler特点

在介绍Activiti Modeler之前不得不先介绍一下Signavio，它是Activiti Modeler背后的Signavio开源BPMN设计器。Activiti Modeler并非Activiti官方开发的，而是基于Signavio公司开发的Signavio构建的。

Singnavio是一款成熟BPMN可视化在线设计器，底层基于德国的HPI公司开发的Web的建模工具Oryx。Signavio虽然是一家商业公司，但是它提供了遵循MIT协议开源的版本signavio-core-components。

Signavio公司同时提供了商业版本的设计器以满足更多、更强的需求，比如团队协作、高级流程设计器、流程Portal、分析与报表、导入/导出不同格式的文件（ARIS、XPDL、 PDF、 Visio、 Excel）。当然用户在正式购买商业版本之前有30天的试用期来了解商业版本的功能。

Activiti Modeler完全使用signavio-core-components的源码构建，而且在打包时仅需要简单的配置即可。

在Activiti 5.6及之前的版本中，Activiti Modeler是众多组件中的一部分，不需要我们自己打包war文件，有兴趣的读者可以下载Activiti 5.6版本的Zip包解压一下看看。

3.1.2下载signavio-core-components

signavio-core-components的源码托管在Google Code上，项目地址：http://code.google.com/p/signavio-core-components/。先利用版本控制器（Subversion）检出源码到本地工作区。有Subversion客户端的读者可以利用客户端方便地检出源码，只需要在URL中输入http://signavio-core-components.googlecode.com/svn/trunk/即可。喜欢使用命令行的读者可以执行以下命令：

svn checkout http://signavio-core-components.googlecode.com/svn/trunk/

检出之后的文件列表如图3-1所示。

对于目录中的文件，我们只关心build.properties和build.xml即可。如果读者对其他的目录文件有兴趣可以逐个浏览，以便日后在此基础上进行扩展。

3.1.3配置打包与运行

build.properties文件就是打包时需要配置的一些选项的属性文件。用编辑器将该文件打开之后看到的文件内容如图3-2所示。

下面介绍配置文件中的属性及其含义。

dir-tomcat-webapps：运行打包结果（war格式）的tomcat路径。

dir-jboss-webapps：运行打包结果（war格式）的jboss路径。

target：存放构建结果的目录，是打包之后生成的war文件的存放位置。

version：设计器的版本号，可完全由用户自定义。

war：打包的war文件的名称，例如activiti-modeler，打包之后会在target目录下生成activiti-modeler.war文件。

configuration：使用的配置，包含一些CSS样式和JSON格式的编辑器配置。目前支持3种配置：default、Activiti、jBPM。有兴趣的读者可以进入到configuration目录一探究竟。

host：打包之后运行时的路径。这个配置很关键，还要注意仅仅需要提供服务器地址（域名或IP）及端口即可。

fileSystemRootDirectory：signavio运行时的工作区目录，会保存编辑器的配置及设计的流程定义文件。值得注意的是，不管在哪种操作系统环境中都只使用“/”作为路径分隔符。

图3-2build.properties默认配置

了解了配置之后读者就可以根据自己的实际环境更改配置了。笔者只更改了几个属性，其他属性均使用默认值。

version=5.9

war = activiti-modeler

configuration = Activiti

fileSystemRootDirectory=/Users/henryyan/workspaces/activiti-modeler

了解到这里读者完全可以基于signavio-core-components构建自己的流程设计器，并且在此基础上进行改造，例如整合公司的其他产品、功能扩展以及本地化等。

更改好配置之后只需要执行ant build-all-in-one-war命令来执行打包任务，执行结果如下：

henryyan@hy-mbp~/work/sources/signavio-core-componentsant build-all-in-one-war

Buildfile: /Users/henryyan/work/sources/signavio-core-components/build.xml

…

[war] Building war:

/Users/henryyan/work/sources/signavio-core-components/target/activiti-modeler.war

BUILD SUCCESSFUL

Total time: 27 seconds

执行完以上命令后我们可以看到在signavio-core-components/target目录中生成了activiti-modeler.war文件，如图3-3所示。

打包之后复制target/activity-modeler.war到本地Tomcat的webapps目录，然后启动Tomcat，之后在浏览器中输入http://localhost:8080/activiti-modeler访问应用，加载页面如图3-4所示。

目前Signavio仅支持非IE内核的浏览器，例如Chrome、Firefox、Safari。

图3-4Activiti Modeler的加载页面

从图3-4中可以看出，图片使用的是configuration/Activiti中的 signavio_logo.png，版本号就是刚刚在build.properties中定义的version属性。

在加载完成之后进入Activiti Modeler的首页，页面如图3-5所示。

图3-5Activiti Modeler首页

3.1.4Windows用户打包

本节是针对Windows用户的老话题—乱码。

Windows用户在执行ant的打包命令ant budil-all-in-one-war时会遇到如图3-6所示的错误信息。

图3-6Windows环境下打包Activiti Modeler报错

导致构建错误的原因是编码不一致，Signavio的源码采用的是UTF-8编码，而中文版本的Windows操作系统默认的编码为GBK，编码不一致导致在转换的时候报错。笔者在最初学习Activiti时使用的是Linux操作系统（Ubuntu），在撰写本书的时候又转向了Mac OS X系统，因为Linux/UNIX默认的编码是UTF-8，所以没有遇到图3-6中的错误。

解决办法分三步，在用编辑器打开signavio-core-components/editor/build.xml文件进行以下处理。

1）找到<target name="com.signavio.editor.js.concat">，紧随其后添加一行配置代码：

将标签中的<concat destfile='${build}/oryx.debug.js'>修改为：

<concatdestfile='${build}/oryx.debug.js' encoding="${charset}" outputencoding= "${charset}">

最终的配置如下：

2）找到<target name='com.signavio.editor.js.compress处代码，更改此target内的<java dir="${build}" jar="${root}/lib/yuicompressor-2.4.2.jar" fork="true" failοnerrοr="true" output='${compress.temp}'>，将其中的yuicompressor-2.4.2.jar更改为yuicompressor-2.4.7.jar。

3）signavio默认使用yuicompressor-2.4.2版本压缩javascript和css文件。为了解决编码问题我们需要使用最新的yuicompressor版本来替换2.4.2版本。在笔者撰稿时最新的yuicompressor版本为2.4.7，读者也可以直接下载最新版本。访问http://yuilibrary.com/download/yuicompressor/下载第一个版本的压缩包，将其解压后提取build/yuicompressor-2.4.7.jar文件并复制到signavio-core-components/yuicompressor/editor/lib目录中。

再次执行打包命令ant build-all-in-one-war不会提示如图3-6所示的错误提示，如图3-7所示。

图3-7解决了Windows环境下打包Activiti Modeler错误后的提示

3.1.5设计请假流程

首先单击图3-5中的“New”按钮，然后选择“Business Process Diagram(BPMN 2.0)”新建一个流程，此时浏览器会打开一个新的如图3-8中的设计器页面。

整个设计器都是基于Ext的拖曳方式进行操作的，如图片3-8所示。其中左边栏是模型仓库，中间部分是工作区，右边栏可以用于设置中间工作区选中模型的属性，如果工作区中没有选中的模型，那么右边栏可以用于设置流程主信息。

在第2章中已经初步运行了请假流程，在这里我们仍然以请假流程为例来讲解业务需求人员如何使用Activiti Modeler从业务角度设计流程。Activiti Modeler设计的请假流程如图3-9所示。

图3-8Activiti Modeler的新建流程页面

图3-9Activiti Modeler设计的请假流程

一个完整的流程总是以开始事件（Start Event）为入口，在Activiti Modeler中只要从左侧的模型仓库找到“Start Events”，然后用鼠标将其拖曳到中间的空白工作区中。开始事件和快捷菜单如图3-10所示。

当将鼠标移动到圆形表示的“Start Event”时会出现一些快捷菜单图标，单击这些小图标可以快速创建各种模型并自动用顺序流箭头连接两个模型。

接下来创建“领导审批”节点时可以单击空白的矩形图标快速创建一个“Task（任务）”；也可以从左边栏的“Activities”中拖曳“Task”到空白区域，然后把鼠标移动到“Start Event”上单击“箭头”图标将其拖曳到刚刚创建的Task模型上。在日常的使用中还是第一种方式方便得多，第二种方式只有在特殊情况下才会用到。

了解了如何创建Task之后就可以使用第一种方式创建“领导审批”节点了。图3-11展示了通过快速方式创建的Task。

有了Task模型之后就要进一步完善Task的属性，例如任务名称、类型等。设置属性需要展开右边栏中的“Attributes”，然后单击刚刚创建的空白Task，在右边栏中设置Task的相关属性即可。在图3-12中设置了Task的“Name”和“TaskType”。读者可以继续添加其他剩余的节点并设置其属性。

图3-12设置领导审批节点的属性

一个完整的流程还要有结束事件（End Event），在普通的Task之后需要有一个结束节点。结束节点的创建方式和普通Task的创建方式一样，将鼠标移动到需要添加结束事件的任务上，然后单击粗线条的圆形图标就会自动创建一个结束事件，如图3-13所示。关于各种事件及模型会在第4章详细介绍。

图3-13创建结束事件（End Event）

到此一个完整的流程就设计完成了，在结束之前不要忘记保存劳动成果。单击页面左上角的保存按钮，弹出如图3-14所示的对话框。

在填写“Title”字段时不要输入中文，否则会导致再次打开流程图时系统报错，提示找不到页面（404错误），报错信息如图3-15所示。或许以后的版本能够解决次问题。

保存流程之后可以在Activiti Modeler主页面的Workspace中看到流程定义，选中流程定义可以进行编辑、移动、复制、删除等操作，如图3-16所示。

图3-14保存流程对话框

图3-15打开中文名称的流程图导致404错误

图3-16Activiti Modeler主页面的Workspace

3.1.6导出bpmn2.0.xml

图3-16中有两个流程定义，一个是英文名称的，一个是中文名称的。Activiti Modeler的设计结果都以xml的形式保存在磁盘上，保存xml文件的目录就是在最初打包时设置的fileSystemRootDirectory属性值。例如笔者的设置为/Users/henryyan/work/workspaces/activiti-modeler，打开该目录可以看到共有4个文件，如图3-17所示。

从图3-17中可以看出，每个流程定义都有两个文件，只不过扩展名不同。其中“bpmn20.xml”为流程定义文件，我们在第2章中部署流程的时候使用的也是扩展名为bpmn20.xml的xml文件；“signavio.xml”文件用于保存设计流程所需要的一些配置，其中配置以JSON方式保存在leaven.signavio.xml文件的“json-representation”属性中。有兴趣的读者可以打开流程文件阅读其中的配置，本书不深入讨论。