jBPM Web Designer(jBPM Web 設(shè)計(jì)器、jBPM 流程設(shè)計(jì)器.doc

jBPM Web Designer（jBPM Web 設(shè)計(jì)器、jBPM 流程設(shè)計(jì)器、工作流程設(shè)計(jì)器） 支持不同格式日期字符串自動(dòng)解析的日期工具 . 2010-01-25jBPM Web Designer（jBPM Web 設(shè)計(jì)器、jBPM 流程設(shè)計(jì)器、工作流程設(shè)計(jì)器）文章分類:Web前端 研究jBPM已有一段時(shí)間了，今天終于決定拿點(diǎn)東西出來(lái)，但請(qǐng)大家原諒不能分享源碼。之所以拿出來(lái)，希望通過(guò)交流認(rèn)識(shí)到更多技術(shù)一線的同志們，結(jié)點(diǎn)人緣。本人不才只念完了高中，求職路屢戰(zhàn)屢敗，只好踏實(shí)地弄點(diǎn)東西出來(lái)?yè)蜗麻T面，希望有所幫助，找到一份滿意的工作。 大多研究JBPM的，對(duì)其引擎的擴(kuò)展開(kāi)發(fā)都不曾苦惱，但提及其可視化設(shè)計(jì)工具都希望能有一款WEB版設(shè)計(jì)器。 苦惱過(guò)后，便有了開(kāi)發(fā)設(shè)計(jì)器的沖動(dòng)。首先通過(guò)網(wǎng)上找到的WEB流程設(shè)計(jì)工具，多半是非流程研究人員的產(chǎn)品，拿來(lái)用要經(jīng)過(guò)大量的修改，不太可取，也不容易修改，參考倒是有些價(jià)值，在此謝過(guò)；另外由于剛學(xué)會(huì)了JavaScript在頁(yè)面實(shí)現(xiàn)的拖曳功能。鑒于此便開(kāi)始了行動(dòng)，現(xiàn)在想想還有些大膽。由于一直沒(méi)抽出時(shí)間來(lái)，拖了兩個(gè)多月，終于寫下了這篇文章。 基于javaScript+css+vml的jBPM webdesigner，由于使用了vml只支持IE瀏覽器（IE5+），其中沒(méi)有使用任何javaScript開(kāi)發(fā)框架，但模仿了extJs框架的css界面風(fēng)格。開(kāi)發(fā)過(guò)程中參考了extJs、prototype、jQuery等javaScript開(kāi)發(fā)框架；參考了jBPM designer eclipse 插件；參考了shine Workflow Designer截圖、以及圈子中shappy1978貼出來(lái)的截圖（當(dāng)時(shí)還回帖希望這位大哥分享源碼，結(jié)果失望，也就狠下心來(lái)獨(dú)干，造自己的輪子）；還參考了webflow、XiorkFlow、EMSFlow（applet）等，XiorkFlow是早期看過(guò)的流程設(shè)計(jì)工具。在此謝過(guò)以上提供的參考。 以下以貼圖方式介紹jBPM3 webdesigner。1、流程設(shè)計(jì)器主界面，采用純JS且面向?qū)ο蟮木幊谭绞剑ㄊ录幚頇C(jī)制swing、extjs思想中毒很深）開(kāi)發(fā)，動(dòng)態(tài)生成div等HTML代碼，利用外部樣式表以實(shí)現(xiàn)多風(fēng)格支持，根據(jù)窗口大小自適應(yīng)寬高，以使編輯區(qū)域最大可視化，仿jBPM designer eclipse 插件布局與操作習(xí)慣（其中個(gè)人覺(jué)得屬性輸入要比eclipse 插件方便些），仿extJs框架的css界面風(fēng)格。主界面分為三部分，工具欄、編輯區(qū)、屬性欄，支持鼠標(biāo)拖動(dòng)設(shè)定大小及最大化、最小化、還原功能。編輯區(qū)支持網(wǎng)格顯示。目前設(shè)計(jì)器支持開(kāi)始、結(jié)束、分支、合并、決策、任務(wù)、郵件7種節(jié)點(diǎn)（可以容易擴(kuò)展新節(jié)點(diǎn)）并可以通過(guò)鼠標(biāo)拖曳操作編輯大小，流程轉(zhuǎn)換可以通過(guò)鼠標(biāo)操作支持直線及折線。節(jié)點(diǎn)的連接操作進(jìn)行驗(yàn)證，如只允許拖入一個(gè)開(kāi)始節(jié)點(diǎn)；開(kāi)始節(jié)點(diǎn)只允許單個(gè)from連接；結(jié)束節(jié)點(diǎn)只允許to連接，但支持多個(gè)連接；兩個(gè)節(jié)點(diǎn)只能有唯一的同向連接等等。點(diǎn)擊編輯區(qū)的空白處在屬性欄顯示流程定義的屬性配置，點(diǎn)擊節(jié)點(diǎn)則在屬性欄顯示節(jié)點(diǎn)的屬性配置，點(diǎn)擊流程轉(zhuǎn)換或其label同樣在屬性欄顯示其屬性配置。在屬性欄輸入配置信息將自動(dòng)保存并響應(yīng)到圖形展示上（如輸入節(jié)點(diǎn)名稱，則編輯區(qū)中節(jié)點(diǎn)顯示的文字相應(yīng)地改變）。整個(gè)設(shè)計(jì)器工作過(guò)程相當(dāng)流暢。所有的配置信息將生成符合JPDL規(guī)范的XML流程定義文件。由于最終的產(chǎn)物是XML字符串，這賦予了流程設(shè)計(jì)器不僅僅能夠定義出符合jBPM3的定義文件，稍做修改同樣能定義出符合jPBM4，以及其它任何的基本XML的定義文件。2、圖形編輯，節(jié)點(diǎn)及流程轉(zhuǎn)換，利用vml標(biāo)簽獲得良好的視覺(jué)效果（考慮兼容其它瀏覽器，可以開(kāi)發(fā)基于svg、canvas或純js的圖形模型）。 網(wǎng)格節(jié)點(diǎn)選中（節(jié)點(diǎn)選中后，可以通過(guò)鼠標(biāo)按下拖動(dòng)節(jié)點(diǎn)，改節(jié)點(diǎn)顯示位置，也可以通過(guò)鍵w、a、s、d或up、left、dowm、rigth來(lái)移動(dòng)節(jié)點(diǎn)，選中的節(jié)點(diǎn)能夠通過(guò)delete鍵進(jìn)行刪除，連同其所有的form及to轉(zhuǎn)換將一起被刪除。當(dāng)兩個(gè)節(jié)點(diǎn)重疊時(shí)，選中節(jié)點(diǎn)始終顯示于最上面）節(jié)點(diǎn)改變大?。ü鈽?biāo)置于選中節(jié)點(diǎn)的高亮指示點(diǎn)上，將出現(xiàn)方向箭頭，支持8個(gè)方向改變節(jié)點(diǎn)大小，同時(shí)在節(jié)點(diǎn)左上角顯示節(jié)點(diǎn)的改變后虛線框長(zhǎng)與寬）流程轉(zhuǎn)換選中（轉(zhuǎn)換選中后，可以設(shè)置轉(zhuǎn)換名稱（也可以為空，則沒(méi)有l(wèi)abel，自動(dòng)進(jìn)行判斷），其作為label，顯示于轉(zhuǎn)換中間（與轉(zhuǎn)換線不重疊），也可以手動(dòng)改變label顯示位置，操作和節(jié)點(diǎn)的移動(dòng)一樣。選中的轉(zhuǎn)換，按下delete鍵將被刪除。轉(zhuǎn)換名稱（label）不管是否被選中，都將顯示于節(jié)點(diǎn)、流程轉(zhuǎn)換的上面，即不會(huì)被蓋?。┺D(zhuǎn)換直線/折線變換（轉(zhuǎn)換選中后，鼠標(biāo)按下高亮指示點(diǎn)可以將直線改變?yōu)檎劬€，折線也可以還原為直線拖動(dòng)高亮指示點(diǎn)到靠近相連兩高亮指示點(diǎn)確定的線段時(shí)自動(dòng)變?yōu)橹本€，轉(zhuǎn)換名稱（label）跟隨轉(zhuǎn)換的移動(dòng)自動(dòng)重新計(jì)算中點(diǎn)位置進(jìn)行重新顯示（與轉(zhuǎn)換線不重疊），節(jié)點(diǎn)移動(dòng)時(shí)轉(zhuǎn)換隨著節(jié)點(diǎn)重新自動(dòng)連接，若為折線，則節(jié)點(diǎn)向外的第一個(gè)折點(diǎn)為定點(diǎn)，只有連接點(diǎn)變動(dòng)）3、屬性配置（屬性配置支持自動(dòng)保存，以免忘記保存，而重新填寫）流程定義（支持基本信息流程名稱、流程描述、SQL腳本、消息提醒、郵件發(fā)送）任務(wù)節(jié)點(diǎn)（支持基本信息、轉(zhuǎn)換模式、任務(wù)委派、任務(wù)策略、業(yè)務(wù)表單、SQL腳本、消息提醒、郵件發(fā)送）SQL腳本、消息提醒、郵件發(fā)送參考流程定義截圖其它節(jié)點(diǎn)（支持基本信息、SQL腳本、消息提醒、郵件發(fā)送）參考流程定義流程轉(zhuǎn)換（支持基本信息、動(dòng)態(tài)委派、轉(zhuǎn)換條件、SQL腳本、消息提醒、郵件發(fā)送）SQL腳本、消息提醒、郵件發(fā)送參考流程定義截圖4、流程監(jiān)控（綠：已執(zhí)行，藍(lán)：處理中，灰：未處理，支持流程執(zhí)行歷史手工播放/自動(dòng)播放）基于javaScript+css+vml的jBPM web designer，由于使用了vml只支持IE瀏覽器（IE5+），其中沒(méi)有使用任何javaScript開(kāi)發(fā)框架，但模仿了extJs框架的css界面風(fēng)格。 flyeyes 寫道界面是用EXT做的么？ 文中有說(shuō)明的“基于javaScript+css+vml的jBPM web designer，由于使用了vml只支持IE瀏覽器（IE5+），其中沒(méi)有使用任何javaScript開(kāi)發(fā)框架，但模仿了extJs框架的css界面風(fēng)格?！?沒(méi)有用現(xiàn)成的JS框架，用js操作div+css仿EXTJS的風(fēng)格，主要考慮到大多人對(duì)EXTJS的風(fēng)格比較認(rèn)同。BruceXX 寫道和我們以前公司的workflow 差不多的。 不知道你是不是從EMSFlow出來(lái)，我參考了上海滿智信息技術(shù)有限公司EMSFlow的一些思想，和一些功能，以前試用過(guò)該工作流產(chǎn)品。xyz20003 寫道做的很不錯(cuò)，樓主辛苦了。 我們是專門做jbpm4的，可以看看我們網(wǎng)站上的演示視頻，也可以試用一下： /jbpm4/demo/jpdl-swf.html /jbpm4/demo/index.html 這位大哥在圈子里面很是活躍，給大伙幫了不少忙，在此謝過(guò)。你們的設(shè)計(jì)器我也在關(guān)注，希望能做好做大。我的留言簿 更多留言 我看了“jBPM Web Designer（jBPM Web 設(shè)計(jì)器、jBPM 流 .-