Activiti實戰. 3.1基于B/S架構的流程設計器Activiti Modeler

<b>3.1基于b/s架構的流程設計器activiti</b>

modeler

activiti modeler是基于b/s架構的流程設計器，在activiti

5.11版本釋出之前activiti官方提供了獨立的activiti modeler元件，需要開發人員執行壓縮包中的腳本打包，但是從activiti 5.11開始不需要自行打包activiti modeler了，在下載下傳的壓縮包中已經把重新設計的activiti modeler內建到了activiti explorer中，是以不想了解如何打包的讀者可以跳過本節内容。關于重新設計的activiti modeler将在3.2節介紹。

<b>3.1.1activiti modeler特點</b>

在介紹activiti modeler之前不得不先介紹一下signavio，它是activiti modeler背後的signavio開源bpmn設計器。activiti modeler并非activiti官方開發的，而是基于signavio公司開發的signavio建構的。

singnavio是一款成熟bpmn可視化線上設計器，底層基于德國的hpi公司開發的web的模組化工具oryx。signavio雖然是一家商業公司，但是它提供了遵循mit協定開源的版本signavio-core-components。

signavio公司同時提供了商業版本的設計器以滿足更多、更強的需求，比如團隊協作、進階流程設計器、流程portal、分析與報表、導入/導出不同格式的檔案（aris、xpdl、 pdf、 visio、 excel）。當然使用者在正式購買商業版本之前有30天的試用期來了解商業版本的功能。

activiti modeler完全使用signavio-core-components的源碼建構，而且在打包時僅需要簡單的配置即可。

在activiti 5.6及之前的版本中，activiti modeler是衆多元件中的一部分，不需要我們自己打包war檔案，有興趣的讀者可以下載下傳activiti 5.6版本的zip包解壓一下看看。

<b>3.1.2下載下傳signavio-core-components</b>

signavio-core-components的源碼托管在google

code上，項目位址：http://code.google.com/p/signavio-core-components/。先利用版本控制器（subversion）檢出源碼到本地工作區。有subversion用戶端的讀者可以利用用戶端友善地檢出源碼，隻需要在url中輸入http://signavio-core-components.googlecode.com/svn/trunk/即可。喜歡使用指令行的讀者可以執行以下指令：

svn checkout

http://signavio-core-components.googlecode.com/svn/trunk/

檢出之後的檔案清單如圖3-1所示。

對于目錄中的檔案，我們隻關心build.properties和build.xml即可。如果讀者對其他的目錄檔案有興趣可以逐個浏覽，以便日後在此基礎上進行擴充。

<b>3.1.3配置打包與運作</b>

build.properties檔案就是打包時需要配置的一些選項的屬性檔案。用編輯器将該檔案打開之後看到的檔案内容如圖3-2所示。

下面介紹配置檔案中的屬性及其含義。

dir-tomcat-webapps：運作打包結果（war格式）的tomcat路徑。

dir-jboss-webapps：運作打包結果（war格式）的jboss路徑。

target：存放建構結果的目錄，是打包之後生成的war檔案的存放位置。

version：設計器的版本号，可完全由使用者自定義。

war：打包的war檔案的名稱，例如activiti-modeler，打包之後會在target目錄下生成activiti-modeler.war檔案。

configuration：使用的配置，包含一些css樣式和json格式的編輯器配置。目前支援3種配置：default、activiti、jbpm。有興趣的讀者可以進入到configuration目錄一探究竟。

host：打包之後運作時的路徑。這個配置很關鍵，還要注意僅僅需要提供伺服器位址（域名或ip）及端口即可。

filesystemrootdirectory：signavio運作時的工作區目錄，會儲存編輯器的配置及設計的流程定義檔案。值得注意的是，不管在哪種作業系統環境中都隻使用“/”作為路徑分隔符。

圖3-2build.properties預設配置

了解了配置之後讀者就可以根據自己的實際環境更改配置了。筆者隻更改了幾個屬性，其他屬性均使用預設值。

version=5.9

war = activiti-modeler

configuration = activiti

filesystemrootdirectory=/users/henryyan/workspaces/activiti-modeler

了解到這裡讀者完全可以基于signavio-core-components建構自己的流程設計器，并且在此基礎上進行改造，例如整合公司的其他産品、功能擴充以及本地化等。

更改好配置之後隻需要執行ant build-all-in-one-war指令來執行打包任務，執行結果如下：

henryyan@hy-mbp~/work/sources/signavio-core-componentsant

build-all-in-one-war

buildfile:

/users/henryyan/work/sources/signavio-core-components/build.xml

…

[war]         building    war:

/users/henryyan/work/sources/signavio-core-components/target/activiti-modeler.war

         build

successful

         total

time: 27 seconds

執行完以上指令後我們可以看到在signavio-core-components/target目錄中生成了activiti-modeler.war檔案，如圖3-3所示。

打包之後複制target/activity-modeler.war到本地tomcat的webapps目錄，然後啟動tomcat，之後在浏覽器中輸入http://localhost:8080/activiti-modeler通路應用，加載頁面如圖3-4所示。

目前signavio僅支援非ie核心的浏覽器，例如chrome、firefox、safari。

圖3-4activiti modeler的加載頁面

從圖3-4中可以看出，圖檔使用的是configuration/activiti中的 signavio_logo.png，版本号就是剛剛在build.properties中定義的version屬性。

在加載完成之後進入activiti modeler的首頁，頁面如圖3-5所示。

圖3-5activiti modeler首頁

3.1.4windows使用者打包

本節是針對windows使用者的老話題—亂碼。

windows使用者在執行ant的打包指令ant

budil-all-in-one-war時會遇到如圖3-6所示的錯誤資訊。

圖3-6windows環境下打包activiti modeler報錯

導緻建構錯誤的原因是編碼不一緻，signavio的源碼采用的是utf-8編碼，而中文版本的windows作業系統預設的編碼為gbk，編碼不一緻導緻在轉換的時候報錯。筆者在最初學習activiti時使用的是linux作業系統（ubuntu），在撰寫本書的時候又轉向了mac os x系統，因為linux/unix預設的編碼是utf-8，是以沒有遇到圖3-6中的錯誤。

解決辦法分三步，在用編輯器打開signavio-core-components/editor/build.xml檔案進行以下處理。

1）找到&lt;target

name="com.signavio.editor.js.concat"&gt;，緊随其後添加一行配置代碼：

&lt;property name="charset"

value="utf-8"/&gt;

将标簽中的&lt;concat destfile='${build}/oryx.debug.js'&gt;修改為：

&lt;concatdestfile='${build}/oryx.debug.js'

encoding="${charset}" outputencoding= "${charset}"&gt;

最終的配置如下：

&lt;target

name="com.signavio.editor.js.concat"&gt;

&lt;concat

destfile='${build}/oryx.debug.js' encoding="${charset}"

outputencoding= "${charset}"&gt;

2）找到&lt;target

name='com.signavio.editor.js.compress處代碼，更改此target内的&lt;java

dir="${build}" jar="${root}/lib/yuicompressor-2.4.2.jar"

fork="true" failonerror="true"

output='${compress.temp}'&gt;，将其中的yuicompressor-2.4.2.jar更改為yuicompressor-2.4.7.jar。

3）signavio預設使用yuicompressor-2.4.2版本壓縮javascript和css檔案。為了解決編碼問題我們需要使用最新的yuicompressor版本來替換2.4.2版本。在筆者撰稿時最新的yuicompressor版本為2.4.7，讀者也可以直接下載下傳最新版本。通路http://yuilibrary.com/download/yuicompressor/下載下傳第一個版本的壓縮包，将其解壓後提取build/yuicompressor-2.4.7.jar檔案并複制到signavio-core-components/yuicompressor/editor/lib目錄中。

再次執行打包指令ant build-all-in-one-war不會提示如圖3-6所示的錯誤提示，如圖3-7所示。

圖3-7解決了windows環境下打包activiti modeler錯誤後的提示

<b>3.1.5設計請假流程</b>

首先單擊圖3-5中的“new”按鈕，然後選擇“business process diagram(bpmn 2.0)”建立一個流程，此時浏覽器會打開一個新的如圖3-8中的設計器頁面。

整個設計器都是基于ext的拖曳方式進行操作的，如圖檔3-8所示。其中左邊欄是模型倉庫，中間部分是工作區，右邊欄可以用于設定中間工作區選中模型的屬性，如果工作區中沒有選中的模型，那麼右邊欄可以用于設定流程主資訊。

在第2章中已經初步運作了請假流程，在這裡我們仍然以請假流程為例來講解業務需求人員如何使用activiti modeler從業務角度設計流程。activiti modeler設計的請假流程如圖3-9所示。

圖3-8activiti modeler的建立流程頁面

圖3-9activiti modeler設計的請假流程

一個完整的流程總是以開始事件（start event）為入口，在activiti modeler中隻要從左側的模型倉庫找到“start events”，然後用滑鼠将其拖曳到中間的空白工作區中。開始事件和快捷菜單如圖3-10所示。

當将滑鼠移動到圓形表示的“start event”時會出現一些快捷菜單圖示，單擊這些小圖示可以快速建立各種模型并自動用順序流箭頭連接配接兩個模型。

接下來建立“上司審批”節點時可以單擊空白的矩形圖示快速建立一個“task（任務）”；也可以從左邊欄的“activities”中拖曳“task”到空白區域，然後把滑鼠移動到“start event”上單擊“箭頭”圖示将其拖曳到剛剛建立的task模型上。在日常的使用中還是第一種方式友善得多，第二種方式隻有在特殊情況下才會用到。

了解了如何建立task之後就可以使用第一種方式建立“上司審批”節點了。圖3-11展示了通過快速方式建立的task。

有了task模型之後就要進一步完善task的屬性，例如任務名稱、類型等。設定屬性需要展開右邊欄中的“attributes”，然後單擊剛剛建立的空白task，在右邊欄中設定task的相關屬性即可。在圖3-12中設定了task的“name”和“tasktype”。讀者可以繼續添加其他剩餘的節點并設定其屬性。

圖3-12設定上司審批節點的屬性

一個完整的流程還要有結束事件（end event），在普通的task之後需要有一個結束節點。結束節點的建立方式和普通task的建立方式一樣，将滑鼠移動到需要添加結束事件的任務上，然後單擊粗線條的圓形圖示就會自動建立一個結束事件，如圖3-13所示。關于各種事件及模型會在第4章詳細介紹。

圖3-13建立結束事件（end event）

到此一個完整的流程就設計完成了，在結束之前不要忘記儲存勞動成果。單擊頁面左上角的儲存按鈕，彈出如圖3-14所示的對話框。

在填寫“title”字段時不要輸入中文，否則會導緻再次打開流程圖時系統報錯，提示找不到頁面（404錯誤），報錯資訊如圖3-15所示。或許以後的版本能夠解決次問題。

儲存流程之後可以在activiti modeler首頁面的workspace中看到流程定義，選中流程定義可以進行編輯、移動、複制、删除等操作，如圖3-16所示。

圖3-14儲存流程對話框

圖3-15打開中文名稱的流程圖導緻404錯誤

圖3-16activiti modeler首頁面的workspace

<b>3.1.6導出bpmn2.0.xml</b>

圖3-16中有兩個流程定義，一個是英文名稱的，一個是中文名稱的。activiti modeler的設計結果都以xml的形式儲存在磁盤上，儲存xml檔案的目錄就是在最初打包時設定的filesystemrootdirectory屬性值。例如筆者的設定為/users/henryyan/work/workspaces/activiti-modeler，打開該目錄可以看到共有4個檔案，如圖3-17所示。

從圖3-17中可以看出，每個流程定義都有兩個檔案，隻不過擴充名不同。其中“bpmn20.xml”為流程定義檔案，我們在第2章中部署流程的時候使用的也是擴充名為bpmn20.xml的xml檔案；“signavio.xml”檔案用于儲存設計流程所需要的一些配置，其中配置以json方式儲存在leaven.signavio.xml檔案的“json-representation”屬性中。有興趣的讀者可以打開流程檔案閱讀其中的配置，本書不深入讨論。