camunda对BPMN流程定义解析、执⾏、展现的JS库1 写在前⾯
本⽂介绍了camunda 对BPMN流程定义⽂件的解析实现。
该类库的JS框架采⽤的dojo
（了解下dojo与jquery的区别：blog.csdn/dojotoolkit/article/details/7682978）
这个类库有四个⽂件
Bpmn.js提供相应功能的接⼝。
三个组件：Executor.js——轻量级流程引擎
Renderer.js——通过dojo展现渲染流程图的组件
Transformer.js——解析流程图的组件
最坑爹的是camunda⾸页的流程模拟是⽤jquery框架和Raphael图形处理库，因此确定，除了Renderer组件，其他组件都能复⽤。 camunda⾸页还采⽤了bootstrap框架，并且⾃⼰拓展了相关组件，值得借鉴。
2 结构
src
-bpmn
-Bpmn.js
-Executor.js
-Renderer.js
-Transforme.js
test
-bpmn
-engine
-lib
-
renderer
-resources
-transformer
-util
-runner.html
3 各类接⼝
3.1 bpmn.js
renderUrl(url, options)通过url解析流程图
render(bpmnXml, options)通过字符串解析流程图
zoom(factor)放⼤缩⼩
annotate(id, innerHTML, classArray)注释
clear()清除
例⼦：
new Bpmn().renderUrl("test/resources/task_loop.bpmn", {
diagramElement : "diagram",
overlayHtml : '<div ></div>'
}).then(function (bpmn){
圣诞节来历<(0.8);
bpmn.annotate("reviewInvoice", '<span class="bluebox" >New Text</span>', ["highlight"]);
//bpmn.clear();
});
3.2 Executor.js
CAM轻量级流程引擎核⼼
在这⾥定义了监听事件和公共⽅法，并注册了各种类型元素的执⾏⾏为。
接⼝
[list]
[*]ActivityExecution活动执⾏类
[*]ActivityExecution(activityDef,parentExecution) 构造函数
activityDef：流程定义
parentExecution：⽗执⾏
[*]bindVariableScope(scope) 绑定变量
scope：绑定变量到⽗执⾏
[*]executeActivities(activities) 执⾏多活动
activities：活动的数组
[*]executeActivity(activity, quenceFlow) 执⾏活动
activity：当前活动
pukquenceFlow：活动相关的顺序流
[*]invokeListeners (type, quenceFlow) 调⽤监听
type：监听类型
quenceFlow ：监听类型绑定到顺序流
[*]getActivityInstance() 获得流程实例
[/list]
以下是控制流程执⾏
[list]古文翻译在线
[*]start 开始流程活动
记录开始时间，注册开始监听
[*]continue 执⾏活动
[*]end 结束流程活动
记录结束时间，注册结束监听
[*]takeAll 执⾏所有quenceFlows连接的活动
[*]take 执⾏quenceFlow连接的活动
注册TAKE监听
[*]signal 标记活动tocca
如果活动定义了标记⽅法就执⾏，否则结束活动
[/list]
[list]
[*]ActivityInstance活动实例类（是私有类，有以下属性）
[*]activityId 活动id
[*]isEnded 是否结束
[*]startDate 开始时间
[*]endDate 结束时间
[*]activities 未结束的活动们
托福junior[/list]
异步调⽤
异步活动通过调⽤signal来控制执⾏
BPMN2.0中规定的活动元素应有的执⾏，通过注册活动类型来实现
抛出异常
3.3 Renderer.js
渲染器中内置了各个BPMN元素的render⽅法集放在Map中，并根据元素类型调⽤它们各⾃的render⽅法，⽤dojo的dom-construct⽣成dom节点。
3.4 Transformer.js
解析流程图的xml⽂件，返回含有元素集合的数组。
例⼦：
var processDefinition = new Transformer().transform(bpmn.bpmnXml)[0];
下⾯是processDefinition对象的样⼦：
其中的⼀个baElement
4 实例
4.1 流程执⾏
var docXml = '<?xml version……'</definitions>';
var processDefinition = new Transformer().transform(docXml)[0];
var execution = new CAM.ActivityExecution(processDefinition);
execution.variables.input = 10;
execution.start();
//活动没结束
expect(execution.isEnded).toBe(fal);
var processInstance = ActivityInstance();
//expect(XXX).toBe(XXX2)；是判断XXX是否等于XXX2的意思
//以下说明执⾏完的活动数量
expect(processInstance.activities.length).toBe(2);
湖南化妆培训
expect(processInstance.activities[0].activityId).toBe("theStart");
视频剪辑培训
expect(processInstance.activities[1].activityId).toBe("urTask");
// 为urTask发送⼀个信号
execution.activityExecutions[1].signal();
execution.activityExecutions[2].signal();
// 现在流程结束了
expect(execution.isEnded).toBe(true);
//以下说明流程实例的执⾏情况
processInstance = ActivityInstance();
expect(processInstance.activities.length).toBe(4);
expect(processInstance.activities[0].activityId).toBe("theStart");
expect(processInstance.activities[1].activityId).toBe("urTask");
expect(processInstance.activities[3].activityId).toBe("theEnd");
解释：
execution定义了⼀个流程的执⾏。即为引擎中的ActivityExecution类。
该引擎⽀持多执⾏，多实例。
4.2 任务传参
当流程执⾏到某步时，我们想传递参数，可以通过对执⾏实例加监听来实现yomi
var processDefinition = new Transformer().transform(docXml)[0]; //为流程定义增加监听
for (var i = 0; i < processDefinition.baElements.length; i++) { var activity = processDefinition.baElements[i];
var listeners = activity.listeners;
if(!!activity.listeners) {
listeners.push({
"start" : function(activityExecution) {
var actId = activityExecution.activityDefinition.id;
gracefully
console.log("start "+actId);
if(pe=="urTask"){ var lala = prompt("input lala","");
activityExecution.variables.lala = lala;
大学自主招生
activityExecution.signal();
}
},
"end" : function(activityExecution){
var actId = activityExecution.activityDefinition.id;
console.log("end "+actId)
},
"signal" : function(activityExecution){
var actId = activityExecution.activityDefinition.id;
console.log("signal "+actId)
}
});
}
}
4.3 延迟加载
5 启发
5.1 可⽤性
流程定义对象的解析（Transformer）
流程预演功能（Executor）
