FoxBPM 系列之-signavio框架浅析

         根据前段时间的调研结果，FoxBPM流程引擎的web设计器最终选型已经确定：基于SIGNAVIO开源框架扩展foxbpm属性，本周博客就为大家简单介绍一下SIGNAVIO开源框架的部分结构模块，以及整个编辑器的数据模型。SIGNAVIO整个系统框架也是采用类MVC 编程模型将元数据和视图进行分离。  SIGNAVIO框架的实现基于事件模型、函数式编程、OOP思想、SVG标记语言，视图基于EXT框架、元数据基于JSON对象、图形编辑器则是基于SVG标记语言 等 。

 

 

       设计器的页面布局如下图所示：

  
 

主要包括四大块

      1、工具栏

                主要功能是负责中央设计器的辅助工作，包括编辑过程中的复制粘贴放大缩小回退等等功能。这一模块是固定的无法通过元数据进行动态扩展。

      2、图形库

                主要功能是展示当前设计器已支持的的bpmn元素节点，用户可以通过拖拽的方式将元素节点从图形库拖至中央编辑器进行编辑，所有的图形信息由元数据JSON提供，支持元数据动态扩展。如下图所示：

 

      3、中央编辑器

                负责所有的元素节点的编辑组合工作，是整个设计器的核心，基于Ext.dd内库和SVG标记语言，元素节点的组合规则由元数据JSON提供。

 

      4、属性页

                顾名思义是展示当前选中节点的所有可配置属性，页面加载时默认展示流程定义的属性，可以选中节点进行动态切换属性页，所有节点的属性信息、以及选中节点时属性的动态切换所需要的关联关系都全部由元数据JSON对象提供，所以也支持动态扩展。如下图所示：

 

通过以上描述一个大致的元数据模型我想已经渐渐清晰了，它应该包括：所有的图形信息、所有类型节点的所有属性信息（包括节点与属性之间的关联关系、节点与节点之间的规则信息）、所有的组合规则三大部分。根据以上描述我们在来看SIGNAVIO对应的元数据JSON对象，直接上图：

protertyPackages对应属性信息、

stencils对应图形库中图形信息、

rule对应元素之间的关联规则；

 

展开stencils节点大家应该能立刻明白我们上面所描述的了

 

我们可以发现stencil对象除基本属性外，还关联三个对象，分别是组、属性、规则，且都是一对多的关联关系，关联关系由stencil对象维护。根据以上元数据设计器就可以轻松的实现节点选中事件属性页动态切换、图形元素之间的组合规则等。

 

 

                SIGNAVIO开源框架采用GNU开源协议，所以允许我对其框架代码进行编辑修改，我们将元数据JSON对象相关的js代码单独抽取出来，定义在stencilDefinition.js文件中（由于其篇幅较长，直接添加到附加中，如有需要可以自行下载，也可以从GitHut下载整个开源项目）。

 

             其实我们最需要关心的是属性页的加载方式，属性信息的加载编辑和保存，所以针对这些，我们将属性页的加载相关模块也提取出来冠名以loadProperties.js，其功能包括根据选定的元素节点动态切换属性页、属性编辑、属性保存、Ext组件创建、布局等。（参考附件）。

 

             要想达到最终扩展的目的，我们还必须了解整个元数据JSON对象和流程定义元素对应的JSON对象它们的加载、操作以及传递的方式，所有JSON数据操作维护相关的功能我们也单独抽取出来，冠名以oryxEditor.js从而方便统一管理，其功能包括创建单例对象来维护编辑中的信息、DOM事件相关操作，json格式的节点元素（shape）的相关操作，模型加载等等。

 

本文只是基于元数据对SIGNAVIO部分模块的的一个参考，要想深入了解整个设计器的框架结构、算法结构、数据加载方式，学习相关源码是唯一的选择。不过在学习之前请做好心理准备！

             

 

====================================================================
声明：本文首发iteye blog，转载请注明作者信息及原文地址，谢谢


作者信息：
马恩亮（[e-mail]）

=====================================================================