easyui能否展示流程图_基于easyui开发Web版Activiti流程定制器详解（三）——页面结构（上）...

上一篇介绍了定制器相关的文件，这篇我们来看看整个定制器的界面部分，了解了页面结构有助于更好的理解定制器的实现，那么现在开始吧！

首先，我们来看看整体的结构：

整体结构比较简单，主要包括三个部分：

1.调色板：放置工作流各种模型(节点、分支、开始、结束等等)，使用时用鼠标拖动放到画布上即可，比                    较简单不再赘述；

2.画布：绘制工作流区域，这里是定制器的主要工作区，它有两个Tab页：Diagram和XML；其中Diagram可                 以展现工作流的流程图，XML用来展现工作流生成的XML文件；这两个功能后面会着重的介绍。

3.属性设置：定义和现实流程中所有模型对应的属性区域，不同的模型显示会不同。

以上是整体结构的介绍，这个看起来比较简单与Activiti提供的Eclipse的插件界面类似，其实也是借鉴了它的界面，这样比较容易不用再设计。

下面详细讲解一下每一个部分：

第一部分、调色板区域：

调色版区域包括：Event、Task、Gateway、Boundary event四个文件夹，每个文件夹与Activiti官方的模型分类一一对应，具体意义可以参照官方文档࿰