1. Activiti控制台UI概述
Activiti控制台使用vaadin框架实现页面布局，在vaadin自带组件的基础上实现自定义组件。
Activiti Explorer后台代码位于org.activiti.editor.ui及org.activiti.explorer.*包下。
2. Activiti控制台UI
2.1登录页面
登录页面为VAADIN/themes/netflow/layouts/login.html
表单控件由后台代码生成后填充到login.html的
中。
2.2控制台页面
页面由顶部的Header、左边的sidebar、右边的整个maincontent及底部的Footer组成
Header：水平布局，对应页面实现类：org.activiti.explorer.ui.MainWindow—>org.activiti.explorer.ui.mainlayout.MainLayout(initTopMenuBar方法)
Sidebar：垂直布局，对应页面实现类：org.activiti.explorer.ui.MainWindow—>org.activiti.explorer.ui.mainlayout.MainLayout(initSideMenuBar方法)
Maincontent：网格布局，点击左侧sidebar中的两级导航栏对应的页面会显示在maincontent区域。下面列举了sidebar两级导航栏所对应的页面实现类：
任务（org.activiti.explorer.ui.task.TaskPage）
待办任务 org.activiti.explorer.ui.task.InboxPage
我的任务 org.activiti.explorer.ui.task.TasksPage
队列 org.activiti.explorer.ui.task.QueuedPage
受邀 org.activiti.explorer.ui.task.InvolvedPage
已归档 org.activiti.explorer.ui.task.ArchivedPage
流程（org.activiti.explorer.ui.process.ProcessInstancePage）
我的流程 org.activiti.explorer.ui.process.MyProcessInstancesPage
已部署流程定义 org.activiti.explorer.ui.process.ProcessDefinitionPage
流程设计工作区 org.activiti.editor.ui.EditorProcessDefinitionPage
报表（org.activiti.explorer.ui.AbstractTablePage）
生成报表 org.activiti.explorer.ui.reports.RunReportsPage
已保存报表 org.activiti.explorer.ui.reports.SavedReportsPage
管理（org.activiti.explorer.ui.management.ManagementPage）
部署包 org.activiti.explorer.ui.management.deployment.DeploymentPage
活动的流程 org.activiti.explorer.ui.management.processdefinition.ActiveProcessDefinitionPage
挂起的流程 org.activiti.explorer.ui.management.processdefinition.SuspendedProcessDefinitionPage
作业 org.activiti.explorer.ui.management.job.JobPage
用户 org.activiti.explorer.ui.management.identity.UserPage
组 org.activiti.explorer.ui.management.identity.GroupPage
管理 org.activiti.explorer.ui.management.admin.AdministrationPage
以上页面实现类均继承了org.activiti.explorer.ui.AbstractPage类（抽象类，自定义组件），AbstractPage类定义了maincontent的网格布局和组件，而各实现类提供具体的实现。除了‘任务’页面是3×3的网格布局，其他页面是2×3的网格布局。
Footer：Label组件，对应页面实现类：org.activiti.explorer.ui.MainWindow—>org.activiti.explorer.ui.mainlayout.MainLayout(initFooter方法)
补充：Vaadin APP—>Vaadin Panel—>Vaadin Window—>Vaadin Layout—>Vaadin Component
XXXPage都继承AbstractTablePage类，而AbstractTablePage又继承AbstractPage类。
AbstractPage类用于设置中间内容区域的布局（网格）、菜单、搜索框及菜单下两列或三列的内容
AbstractTablePage类用于设置中间内容区域最左侧的列表，使用Table控件
3. Activiti流程设计器UI概述
activiti modeler是基于oryx(js插件)做的封装，拖拽效果使用jquery ui的Draggable，前后端使用AngularJS+SpringMVC。
activiti modeler后台代码位于org.activiti.rest.editor.main及org.activiti.rest.editor.model包下。
4. Activiti流程设计器UI（editor.html）
页面由上图的四个div组成。
顶部editor-header：每一项图标来源为webapp/editor-app/configuration/toolbar.js中定义的KISBPM.TOOLBAR_CONFIG.items。图标为字体图标。
左侧paletteHelpWrapper：数据来源为webapp/editor-app/stencil-controller.js中使用$http请求org.activiti.rest.editor.main.StencilsetRestResource的getStencilset()方法，该方法读取src/main/resources/stencilset.json的数据（用节点定义）。一级项箭头图标使用bootstrap的glyphicon字体图标，二级项图标使用editor-app/stencilsets/bpmn2.0/icons目录下的png图片。
stencilset.json文件中节点的定义：
"type" : "node",
"id" : "MailTask",
"title" : "邮件任务",--标题
"description" : "邮件任务", --描述
"view" : "\n", --svg的xml
"icon" : "activity/list/type.send.png", --图标
"groups" : [ "任务" ], --归属的组
"propertyPackages" : [ "overrideidpackage" ],--属性
"hiddenPropertyPackages" : [ ],
"roles" : [ "Activity" ] --规则
右侧上方编辑区canvasHelpWrapper：svg图片，点击某个元素周围出现的小图标则使用的是editor-app/images/目录及editor-app/stencilsets/bpmn2.0/icons目录下的png图片。
右侧下方属性区propertiesHelpWrapper：
1.标题和属性键值的改变由stencil-controller.js中的$scope.editor.registerOnEvent()方法触发，该方法监听右上方编辑区事件的改变。
2.属性值的显示是通过调用stencil-controller.js中的getPropertyTemplateUrl()或getPropertyReadModeTemplateUrl()或getPropertyWriteModeTemplateUrl()方法来获得ng-include所需嵌入的页面。
3.属性的名称配置在src/main/resources/stencilset.json
stencilset.json文件中属性的定义，对应左侧paletteHelpWrapper使用的节点定义中指定的propertyPackages
"propertyPackages" : [ {
"name" : "process_idpackage",
"properties" : [ {
"id" : "name", ---id
"type" : "String", --类型，在赋值的时候会根据类型展示各种输入框，根据properties.js
"title" : "名称", --显示的标题
"value" : "", --值
"description" : "BPMN元素的描述性名称.", --描述
"category":"property", --分类，空的话位popular
"popular" : true, --是否显示
"refToView" : "text_name" --触发svg里面的效果
}]
5. Activiti Bug
使用jdk8时，定义report流程的xml中importPackage无法识别，使用jdk正常使用。
activiti-modeler BUG修复
6.Activiti身份认证
activiti启动流程时通过 Authentication.getAuthenticatedUserId();获得流程启动者。
7. 参考链接
Activiti Explorer源码解析
activiti-modeler工作流设计器代码分析1
activiti-modeler工作流设计器代码分析2
Activiti explorer使用的Vaadin UI框架