備份一下資料，哈哈
乙個多月之前，發了篇有關用flex開發了乙個流程設計器原型的博文，詳見
。這乙個多月來，主要忙於這邊引擎的重構，以及flex流程設計器的實際性開發工作。目前基本已經成形，所以將一些心得寫出來，分享一下。
目前的外在表現，以及內部構架，已經與原型幾乎不同了，進行了很大的重構。如下圖，是目前的外觀，是按照bpmn modeler的樣式構造。當然，這個外觀是很容易改變的，因為底層提供了一套基本的 flex gef for process構架。
在原型系統中，還只是乙個model-figure的模式，而目前已經完全依照model-editpart-figure來這個mvc思想來構架的。
接下來就這套框架的實現思路和思想，與大家分享一下。我們先從大的設計思想來入手，再講解較為細微的設計之處。
注：以下會很多地方提到figure這個詞，在flex中並沒有這個物件，用figure只是表示是乙個圖元。這個圖元的實現，可以是canvas、image，或別的什麼displayobject。
一定要採用mvc的構架。
flex本身已經提供了很好的對uicomponent的操作，所以用flex本身技術去實現繪圖並不難，只需要把握好drag和mouse事件操作的影響即可。
但如果僅僅只是操作圖形，則會使你的應用非常死板，也不便於後續擴充套件。特別對於「流程圖」這樣的依賴於應用資料的繪製操作。你需要解決model與figure之間的關係。——但流程圖又涉及到乙個model的圖形化顯示，可能會存在多種顯示的情況：設計檢視、開發檢視、監控檢視等等。單一的model-figure這種關係，可能無法進行解耦，所以在中間增加editpart一層，是比較理想的設計模式。
你能想象下面這種圖，與上面的圖，實現與統一套gef for process構架之上嗎，兩套圖形實現只是model與figurefactory做了不同的擴充套件。
使用「玻璃板」技術
最早接觸glass pane這個名詞是在swing中接觸過，在flex中並沒有這個說法。我們是用glass pane這種模式，在整個圖形編輯的editor上「罩」上乙個canvas，利用這個canvas攔截所有的key和mouse的事件，攔截之後，計算當前滑鼠操作正在操作的
figure
物件，並分析行為——這兩者一結合，即可控制當前的圖形操作邏輯。
很多人開發這種figure操作的時候，喜歡直接在uicomponent上註冊mouseevent listener，來響應滑鼠的行為。簡單的圖形操作，這個沒有任何問題，但是對於複雜的多元圖形操作，則變得非常繁瑣。
而且，flex本身的mouseevent會層層穿透響應，所以過多的由figure本身控制event，就容易造成event處理混亂，對於多元多層圖形的情況下，這種錯誤一旦發生，是非常難以解決和除錯的。
使用command模式
這個就不多過的講解了，圖形化操作，這個command模式是基本組成結構之一。解決undo、redo的問題。
使用layer模式
這就是將各種圖元，按照類別、行為、影響等等因素，放置於不同的layer上。比如將grid放置於最底層、連線線的layer放置在較低的layer等等。
當然，實現這種layer的技術是很簡單的，每個layer都是乙個canvas，這些canvas按層次順序加入到另外乙個container中即可。
editor與editdomain
這是模仿eclipse gef中的思路，用於記錄當前操作圖形的editor相關的一些基礎資訊，以及暫存一些公用資訊。比如當前的command stack、selectionmanager，model與editpart對應關係，以及當前的行為等等。這樣每個editor就會維護自己的工作空間物件。
大的實現模式上，大體就是這些。可能熟悉eclipse gef的朋友，會奇怪沒有提到諸如palette、request、toolentry、editpart policy等等。
在我的這套框架中，暫時是沒有的這些。一方面我對eclipse gef不熟，另一方面，我故意不考慮palette的實現。對於flex這種應用來說，提供一套palette的基礎實現意義不大，而且反而會限制palette的展示效果開發。
因為有glass pane模式存在，所以上層開發，可以覆蓋dragenter和dragdrop等事件，來操作當圖形拖入到editor中的行為。當然，在我的flex gef for process框架中，是提供了基礎的toolentry物件的描述，但僅僅只是用於描述其所對應的需要建立的model物件型別，而此toolentry是需要被放入dragsource中。
今天寫到這兒，後續再講解細化的設計和實現。
Flex開發web流程設計器的經驗之談（1）
乙個多月之前，發了篇有關用flex開發了乙個流程設計器原型的博文，詳見 這乙個多月來，主要忙於這邊引擎的重構，以及flex流程設計器的實際性開發工作。目前基本已經成形，所以將一些心得寫出來，分享一下。目前的外在表現，以及內部構架，已經與原型幾乎不同了，進行了很大的重構。如下圖，是目前的外觀，是按照b...
FLEX 流程設計器
今天是我在csdn第一次寫部落格。先把我做的東西放在上面。然後我在點評！基本實現了流程設計器的所有功能，與後台同步，匯入匯出檔案，匯出，繪製虛線直線曲線等，泳道的繪製，前進回退。放大縮小。等等。使用了自己做的和自帶的特效。我在做本作品的同時，參照了。外國人寫的圖形軟體的demo。老外總是nb的。在學...
flex版的流程設計器
主要使用flex技術做前端的頁面，後端使用jbpm4.4做為流程引擎。還在不斷完善中的介面。分成功個區域，在上邊的分解結構中可以看到。建立乙個新的畫布並且可以重新匯制新的流程。分為儲存xml和儲存兩部分。儲存xml就是將生成的xml進行儲存。儲存是儲存當前畫布中的內容。將儲存後的流程檔案匯入並且載入...