上一篇介紹了定制器相關的文件，這篇我們來看看整個定制器的界面部分，了解了頁面結構有助于更好的理解定制器的實現，那么現在開始吧！

?

首先，我們來看看整體的結構：

?

整體結構比較簡單，主要包括三個部分：

1.調色板：放置工作流各種模型（節點、分支、開始、結束等等），使用時用鼠標拖動放到畫布上即可，比 ? ? ? ? ? ? ? ? ? ?較簡單不再贅述；

2.畫布：繪制工作流區域，這里是定制器的主要工作區，它有兩個Tab頁：Diagram和XML；其中Diagram可 ? ? ? ? ? ? ? ? 以展現工作流的流程圖，XML用來展現工作流生成的XML文件；這兩個功能后面會著重的介紹。

3.屬性設置：定義和現實流程中所有模型對應的屬性區域，不同的模型顯示會不同。

以上是整體結構的介紹，這個看起來比較簡單與Activiti提供的Eclipse的插件界面類似，其實也是借鑒了它的界面，這樣比較容易不用再設計。

?

下面詳細講解一下每一個部分：

?

第一部分、調色板區域：

調色版區域包括：Event、Task、Gateway、Boundary event四個文件夾，每個文件夾與Activiti官方的模型分類一一對應，具體意義可以參照官方文檔，本文主要是講解定制器所以有關Activiti的內容這里不再贅述，有興趣可以看看官方文檔，很好很全面也很好理解。

Event文件夾如圖：

?Event文件夾放置工作流的開始和結束節點。

?

Task文件夾如圖：

?Task文件夾放置工作流中各種類型的任務節點，每種類型節點意義請參照官方文檔，其中SubProcess（子流程）目前版本沒有實現。

?

Gataway文件夾如圖：

Gateway文件夾放置分支節點，包括：ParallelGateway（并行分支）和ExclusiveGateway（選擇分支），具體意義請參照官方文檔。

?

Boundary event文件下的節點目前還未實現，所以這里先略過。

?

第二部分、畫布

畫布區域比較簡單，只有兩個Tab頁：

Diagram頁面如圖：

?Diagram頁面主要用來繪制工作流程圖。

?

?XML頁面如圖：

XML頁面可以顯示流程圖產生的XML，可以將這個XML字符串提交到服務端進行流程部署。

?