(由于要求下載的人很多, 我現(xiàn)傳上來供大家下載學習, 點擊下載 作者的網(wǎng)站:www.erist.com)
工作流是許多系統(tǒng)中必備的一種功能，而工作流設(shè)計器就顯示對用戶很重要?？梢暬脑O(shè)計器對于客戶來說就更好了，非常直觀，有效果的減少用戶的煩腦。
在各種應(yīng)用中有b/s的系統(tǒng)，有c/s的系統(tǒng)。不同的系統(tǒng)工作流程都是相似的。當今web應(yīng)用日益廣泛，因此本文將講述如何在web上實現(xiàn)工作流設(shè)計器。
由于本人的經(jīng)驗所限，所選技術(shù)只在微軟路線上。經(jīng)過查閱資料，發(fā)現(xiàn)web上的圖形表現(xiàn)形式有svg，vml等等。之所以選擇vml是因為它靠瀏覽器 IE就可以完全支持，不用安裝插件，SVG就要安裝插件。雖然從一些文章說的，VML已經(jīng)過時，查看文檔大部分是1999年的，但VML作為一種技術(shù)，感覺還是成熟的。后來還是選擇了VML。
在web上作設(shè)計器，圖形有了，剩下的就是控制這些圖形元素。工作流程有兩種基本元素一種我們稱之為節(jié)點，一點稱之為關(guān)系（節(jié)點間的關(guān)系）也就是工作流的流向問題。下面為兩種基本形狀。
要控制圖形，因為VML是一種標記語言，符合基本HTML標記的規(guī)范，所有能控制HTML的都可以用來控制VML標記對象。
要實現(xiàn)工作流設(shè)計器有幾個要點：
1、支持工作流元素的添加、刪除、移動。
2、建立節(jié)點間的關(guān)系
3、將設(shè)計好的流程保存到永久物質(zhì)里（如文件，數(shù)據(jù)庫等）
4、可以從永久數(shù)據(jù)里讀取數(shù)據(jù)，并表現(xiàn)為圖形。
第一點：比較好完成，網(wǎng)絡(luò)上有較多的腳本控制圖形的拖動。
第二點呢，我們采用拖動某個節(jié)點的尖頭，并繪制線段，當鼠標彈起時，查看當前鼠標下的結(jié)象，繪制關(guān)系。
數(shù)據(jù)存儲為了方便應(yīng)用，我們使用XML文件存儲（當然，在寫這篇文章時，已經(jīng)完成了數(shù)據(jù)庫的存儲，XML只是為了演示方便而作。）數(shù)據(jù)庫的數(shù)據(jù)與XML的轉(zhuǎn)化可以使用XSD來完成。
為了將XML數(shù)據(jù)表現(xiàn)為VML標記，我們采用了習慣的作法，XSL可擴展樣式，將XML表現(xiàn)為VML標記。
將設(shè)計好的圖形，保存為數(shù)據(jù)，我們采用在客戶端形成XML數(shù)據(jù)，傳到服務(wù)器端。在寫文章時，還未完全實現(xiàn)。工作還在繼續(xù)，也許明天或后天能全部完成。
現(xiàn)在我們先來看一下作好的工作流設(shè)計器的樣式：
演示地址位于：http://www.erist.com/demo/VMLWorkFlow/WorkFlowDesign.aspx
左邊為設(shè)計器，右邊為工具欄。
可從右邊工作欄增加節(jié)點，并通過拖動節(jié)點間而增加關(guān)系。
新增的節(jié)點未指定部門，可以點鍵菜單來指定部門。
源文件已經(jīng)在文章中打包了，以供下載。
相關(guān)文件描述如下：
Control.js 控制圖形的腳本
Designer.ascx 用于設(shè)計器的控件
EditDepartment.aspx 選擇部門的頁面
Flow.xsd 工作流原始數(shù)據(jù)樣式
WorkFlow.xsd 轉(zhuǎn)換后的數(shù)據(jù)格式
WorkFlow.xslt 將XML轉(zhuǎn)為VML的樣式表
WorkFlowBLL.cs 業(yè)務(wù)邏輯層，包含兩種數(shù)據(jù)的轉(zhuǎn)換格式以及從數(shù)據(jù)中設(shè)計工作流位置信息的初始值
WorkFlowDAL.cs 數(shù)據(jù)訪問類，用于從數(shù)據(jù)庫中提取數(shù)據(jù)。
WorkFlowData.xml 用于演示的XML數(shù)據(jù)源
WorkFlowDesign.aspx 設(shè)計器的承載頁面。
如果各位有什么好的意見和建議可以論壇發(fā)表，有什么問題也可以提。
我去吃飯了，改天聊。
