上一篇介紹了定制器相關的文件，這篇我們來看看整個定制器的界面部分，了解了頁面結構有助於更好的理解定制器的實現，那么現在開始吧！
首先，我們來看看整體的結構：
整體結構比較簡單，主要包括三個部分：
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字符串提交到服務端進行流程部署。