一、 代碼主要結(jié)構(gòu)
所謂流程設(shè)計(jì)器者，無(wú)怪乎讀取xml文件，圖形展現(xiàn)，操作圖形元素，改變xml文件，回寫(xiě)，如此而已。
既然如此，設(shè)計(jì)器的流程結(jié)構(gòu)就非常清晰：首先是xml框架解析xml文件為Model模型組件，然后Model模型組件被展現(xiàn)為Component視圖組件；用戶(hù)對(duì)Component視圖組件進(jìn)行操作，這些操作被同步的修改到Model模型組件；最后用戶(hù)保存時(shí)，Model模型組件經(jīng)過(guò)xml框架解析回xml文件，該文件被上傳到服務(wù)器或本地覆蓋原有的xml文件。
那么代碼結(jié)構(gòu)就很清晰了：xml框架、Model模型組件和Component視圖組件。但是等等，Model與Component如何交互呢？這里就需要GEF框架嫁接起兩者的聯(lián)系。同時(shí)，一個(gè)流程設(shè)計(jì)器往往要同時(shí)編輯多個(gè)流程定義，相比具體的流程定義而言，設(shè)計(jì)器擁有一些全局的對(duì)象，這些全局對(duì)象包括系統(tǒng)菜單欄、工具條、整個(gè)設(shè)計(jì)器布局框架（ProcessDesigner）、設(shè)計(jì)器入口（ProcessEditor），還有就是負(fù)責(zé)保存全局屬性和發(fā)布/訂閱定制事件的TheModel對(duì)象。
二、 Component視圖組件
很直接，Component視圖組件指的是與用戶(hù)打交道的、與流程定義相關(guān)的視圖元素。注意這里的一個(gè)定語(yǔ)：與流程定義相關(guān)的，即不包括系統(tǒng)菜單、工具條這些東東。這些視圖元素很簡(jiǎn)單，包括畫(huà)圖板、各種節(jié)點(diǎn)元素和連接線元素。
代碼位于org.jbpmside.view.component和org.jbpmside.view.component.node下。主要類(lèi)SurfaceComponent、NodeComponent和ConnectionComponent。看類(lèi)名就很清晰這些類(lèi)分別代表著什么組件：
• SurfaceComponent代表畫(huà)圖板；
• NodeComponent代表節(jié)點(diǎn)；
• ConnectionComponent代表連接線；
org.jbpmside.view.component.node下的類(lèi)就是NodeComponent類(lèi)的子類(lèi)，代表具體的單個(gè)節(jié)點(diǎn)類(lèi)型了，包括開(kāi)始節(jié)點(diǎn)、結(jié)束節(jié)點(diǎn)、Fork節(jié)點(diǎn)、Join節(jié)點(diǎn)等等。
Component視圖組件使用了degrafa來(lái)渲染表現(xiàn)形式。
目前缺少一個(gè)屬性彈出框組件，職責(zé)展現(xiàn)和修改節(jié)點(diǎn)/連接線屬性。
三、 Model模型組件
Xml流程定義文件解析為本地Model模型組件，本地建模和jBPM4的PVM建模一致，代碼位于org.jbpmside.model下，重要的類(lèi)：
• ProcessModel代表流程定義；
• NodeModel代表節(jié)點(diǎn)定義；
• ConnectionModel代表連接線定義；
剩下的就是具體節(jié)點(diǎn)類(lèi)型的模型類(lèi)，例如StartNode/EndNode/TaskNode等。
目前模型類(lèi)還非常簡(jiǎn)單，因?yàn)榍岸螘r(shí)間主要關(guān)注Component視圖組件部分，接下來(lái)很快會(huì)與jPDL規(guī)范完全同步，同時(shí)ProcessModel/NodeModel/ConnectionModel會(huì)進(jìn)行重構(gòu)，目標(biāo)是與jBPM4模型完全一致。
最新的模型位于org.jbpmside.model.common下，對(duì)jpdl4的支持位于org.jbpmside.model.jpdl4下，未來(lái)需要將Component與Model的關(guān)聯(lián)遷移至common包下。
四、 GEF框架
GEF框架嫁接Model與Component。
1、 IGraphicalEditor與IEditPart
IGraphicalEditor與IEditPart是GEF框架里最重要的兩個(gè)接口：
• IGraphicalEditor代表整個(gè)圖形編輯器，IGraphicalEditor里最重要的方法：
function get graphicViewer():GraphicViewer;
返回當(dāng)前的圖形視圖。在當(dāng)前的設(shè)計(jì)里，設(shè)計(jì)器支持多個(gè)TabPane，每個(gè)流程定義會(huì)擁有一個(gè)單獨(dú)的圖形視圖（即一個(gè)TabPane），這里的圖形視圖即指當(dāng)前處于激活（編輯）狀態(tài)的畫(huà)圖板；很顯然IGraphicalEditor是一個(gè)全局類(lèi)。
• IEditPart代表單個(gè)的圖形編輯元素，很顯然，這些元素是和Component組件一致的，IEditPart里最為重要的方法：
function get model():Object;
function set model(_model:Object):void;
Component組件繼承于IEditPart，這樣就瞬間將Component組件與Model關(guān)聯(lián)起來(lái)。IEditPart重要的實(shí)現(xiàn)類(lèi)包括GraphicViewer與GraphicEditPart。
GraphicViewer被SurfaceComponent繼承；
GraphicEditPart被NodeComponent和ConnectionComponent繼承。
2、 Tool
Flex應(yīng)用程序是基于事件驅(qū)動(dòng)的，用戶(hù)對(duì)界面的操作即反映到各種鼠標(biāo)和鍵盤(pán)事件上。在原先的設(shè)計(jì)里，由Component組件自己來(lái)處理各種原生事件，當(dāng)需要其他組件協(xié)作時(shí)，通過(guò)TheModel發(fā)出應(yīng)用定制事件。在GEF的設(shè)計(jì)里，Component組件的原生事件處理被委派到Tool類(lèi)進(jìn)行處理。Component組件只管理自身的圖形渲染和變化。
例如SurfaceComponent處理鼠標(biāo)點(diǎn)擊事件代碼：
public function mouseClickHandler(event:MouseEvent):void
{
… …
this.tool.mouseClick(event, compX, compY);
}
注意this.tool方法，這個(gè)方法同樣是由GraphicViewer和GraphicEditPart分別 引入的。注意有些時(shí)候組件的Tool是需要切換的，例如鼠標(biāo)點(diǎn)擊面板，通常會(huì)導(dǎo)致被選中的節(jié)點(diǎn)或連接線選中狀態(tài)消失，但是當(dāng)工具條選中一個(gè)節(jié)點(diǎn)時(shí)，這個(gè)鼠標(biāo)事件會(huì)導(dǎo)致向面板增加相應(yīng)的節(jié)點(diǎn)。這時(shí)需要ToolManager來(lái)進(jìn)行Tool卻換的管理，針對(duì)SurfaceComponent/NodeComponent/ConnectionComponent分別有SurfaceToolsManager/NodeToolsManager/ConnectionToolsManager來(lái)管理不同的Tool切換策略。需要注意的是ToolManager和Tool都是無(wú)狀態(tài)的，全局唯一，所有視圖組件共用。
3、 Command
視圖組件的變化會(huì)導(dǎo)致Model組件的變化。Tool處理視圖原生事件、調(diào)用CommandService執(zhí)行各個(gè)Command具體操作視圖組件和Model對(duì)象實(shí)現(xiàn)視圖組件和Model組件的變化。
CommandService與SurfaceComponent進(jìn)行一對(duì)一綁定。CommandService持有CommandStack，實(shí)現(xiàn)單個(gè)Tab編輯界面內(nèi)Command的redo和undo。
具體操作視圖組件和Model對(duì)象必須通過(guò)Command。
五、 TheModel全局類(lèi)的用途
TheModel全局唯一，職責(zé)如下：
• 負(fù)責(zé)應(yīng)用所有定制事件的訂閱/分發(fā)；
• 負(fù)責(zé)持有工具條和系統(tǒng)菜單屬性；
• 負(fù)責(zé)持有剪貼板，實(shí)現(xiàn)各個(gè)畫(huà)板之間的節(jié)點(diǎn)拷貝/剪切。
六、 ProcessDesigner與ProcessEditor
ProcessDesigner負(fù)責(zé)整個(gè)應(yīng)用的布局，目前由三部分組成，系統(tǒng)菜單、工具條和TabNavigator（TabBar管理器），TabBar管理器負(fù)責(zé)添加和刪除Tab，由Tab加載畫(huà)板，這樣實(shí)現(xiàn)對(duì)多流程定義同時(shí)編輯的支持（即多Tab）。
ProcessEditor是應(yīng)用的入口，它持有ProcessDesigner，實(shí)現(xiàn)了IGraphicalEditor接口。目前其對(duì)graphicViewer（）方法的實(shí)現(xiàn)是返回當(dāng)前激活狀態(tài)Tab的畫(huà)板。
同時(shí)，ProcessEditor負(fù)責(zé)統(tǒng)一監(jiān)聽(tīng)工具條/鍵盤(pán)事件，并將這些事件處理委派給當(dāng)前處于激活狀態(tài)的Tab畫(huà)板處理。
七、 Xml框架
位于org.jbpmside.xml下，使用E4X，使用binding對(duì)各種類(lèi)型的節(jié)點(diǎn)進(jìn)行解析，不集中在一個(gè)文件完成解析和轉(zhuǎn)換，一個(gè)節(jié)點(diǎn)類(lèi)型對(duì)應(yīng)一個(gè)binding。使用代碼如下：
public function parse(xml:String):ProcessDefinition{
var parser:Parser=new Parser();
return parser.createParse().setString(xml).
execute().getProcessDefinition() as ProcessDefinition;
}
測(cè)試代碼位于test目錄下，是目前唯一可以進(jìn)行單元測(cè)試的部分。
八、 還需要完成的工作
1、 xml框架還需要大量的解析工作完成（以支持jpdl4）
2、 第一個(gè)版本為本地應(yīng)用，需要增加對(duì)本地文件操作的支持
3、 模型遷移至org.jbpmside.model.common
4、 工具條使用flexlib重寫(xiě)，新的16位圖標(biāo),節(jié)點(diǎn)屬性彈出框
5、 Command目前只實(shí)現(xiàn)了對(duì)undo的支持，需要實(shí)現(xiàn)對(duì)redo的支持
http://m.tkk7.com/ronghao 榮浩原創(chuàng)，轉(zhuǎn)載請(qǐng)注明出處：）
posted on 2009-09-20 21:17
ronghao 閱讀(2232)
評(píng)論(4) 編輯 收藏 所屬分類(lèi):
JbpmSide