去年做的一個(gè)流程設計器，跟大家分享下。
由于我們平臺要加入工作流的支持，必須設計一個(gè)WEB端的流程設計器，剛開(kāi)始并沒(méi)有什么概念，于是在網(wǎng)上查找資料，發(fā)現網(wǎng)上找的資源要么亂七八糟，要么各種BUG，一些做得比較好的又沒(méi)有分享源碼，很頭痛，最終還是決定自己設計。
當時(shí)看了一篇博文，博主的流程設計器確實(shí)不錯，但是并沒(méi)有分享源碼，通過(guò)截圖我決定參考他的樣式，這是原文地址：http://lipinliang.iteye.com/blog/578822
主要使用的技術(shù)：VML（缺點(diǎn)：只支持IE瀏覽器）、Ext（在一個(gè)比較大，因為我們平臺使用Ext做的，所以使用Ext作為外層框架，使用的并不多，外層框架和一些事件機制以及DOM元素的選擇）和JS操作XML。
設計器缺陷：由于時(shí)間原因，并沒(méi)有一個(gè)整體的構思，沒(méi)有使用類(lèi)思想，純粹的function方法，代碼看起來(lái)比較亂，重用方法不夠抽象，使得后面難以更新。并且沒(méi)有加入自定義表單的支持，所以是面對程序員開(kāi)發(fā)的。
前段時(shí)間剛做完表單設計器，于是決定重新開(kāi)發(fā)流程設計器，使用類(lèi)思想，兩者結合，達到面向客戶(hù)、開(kāi)發(fā)迅速、不需要編碼的目的，并且方便擴展，閱讀清晰。新的流程設計器使用的畫(huà)圖技術(shù)是拉斐爾，兼容全瀏覽器，有興趣的可以了解下。http://raphaeljs.com
事先申明，代碼并不是很規范，可能很難閱讀，僅供參考，有需要源碼的請留下你的郵箱地址。
因為前期是直接通過(guò)記事本開(kāi)發(fā)，因需使用平臺內的功能以及結合JBPM，后面轉入J2EE平臺開(kāi)發(fā)，所以這個(gè)版本的功能并不是很全，其他功能在平臺上實(shí)現。
下載的打包文件忘了把Ext打包了，這邊補上，查看index.html里的JS引入路徑，版本是3.3。
下載地址：流程設計器Ext下載地址
CSDN不讓修改資源，重新整合了一份上傳，里面已包含Ext文件，這邊提供下載地址：流程設計器
下面是截圖介紹：
1.流程設計器主界面，采用Ext的border布局，分為工具條區、屬性欄區和工作區。通過(guò)左側選擇功能對應的在右邊作圖，下方則是節點(diǎn)的屬性設置，并且可以實(shí)時(shí)查看生成的XML文件。
2.XML代碼實(shí)時(shí)查看，并且可以通過(guò)修改XML來(lái)編輯流程圖。
3.節點(diǎn)的選中以及連線(xiàn)
4.節點(diǎn)屬性
流程定義（基本信息、涌到定義、SQL腳本、消息提醒、郵件發(fā)送）：
任務(wù)節點(diǎn)（基本信息、轉換模式、任務(wù)委派、業(yè)務(wù)表單、SQL腳本、消息提醒、郵件發(fā)送）：
流程轉換節點(diǎn)（基本信息、動(dòng)態(tài)委派、轉換條件、SQL腳本、消息提醒、郵件發(fā)送）：
分支合并節點(diǎn)
CSDN下載地址：流程設計器http://download.csdn.net/detail/wind2154/4235584
聯(lián)系客服
