之前用Silverlight實現過一個流程設計器(Demo),使用起來不是很方便。打算參考GooFlow,結合自己對工作流的理解,用jQuery改造實現一個,力求簡單實用。 第一步是要構建設計器的UI界面,如下: 用到的圖標有: 用CSS精靈工具如CSS Satyr可以把它們合在一起 ...
設計器UI界面有了,接下來結點的屬性怎么顯示呢,采用彈窗的話覺得不方便用戶 用easyui的propertygrid在最右邊顯示,又覺得要引入easyui,使得插件變復雜了 最后決定自己寫。 實現效果如下: . 屬性顯示 . 屬性隱藏 . 屬性分組收起 jQuery 左右拖動分隔條 Demo 流程板板屬性定義及初始化 加入流程模板屬性后goflow插件最新結構如下 代碼:GoFlow .zip 演 ...
2015-10-23 10:40 15 2741 推薦指數:
之前用Silverlight實現過一個流程設計器(Demo),使用起來不是很方便。打算參考GooFlow,結合自己對工作流的理解,用jQuery改造實現一個,力求簡單實用。 第一步是要構建設計器的UI界面,如下: 用到的圖標有: 用CSS精靈工具如CSS Satyr可以把它們合在一起 ...
到目前流程設計器流程結點的拖拽操作已基本完成,接下來就到結點的屬性開發了。前面已經開發過流程模板的屬性了,結點屬性跟模板屬性類似,從屬性模板定義copy一份,然后按各結點類型進行調整就ok。 1、先來回顧下流程模板屬性,這里對流程模板屬性稍微進行了調整,效果圖 ...
流程結點可以添加了之后,接下來到畫結點與結點之間的連線,效果圖如下 很眼饞visio的連線可以折來折去,這里實現的連線比較簡單。 首先是把連線的類型分為Z(折線)、N(折線)及I(直線)3種類型,然后在兩個結點間划線的時候,根據兩個結點間的位置來決定畫哪種線。 1、結點2在結點1左邊 ...
去年就完成了流程設計器及流程引擎的開發,本想着把流程設計器好好整理一下,形成一個一步一步的開發案例,結果才整理了一點點,發現寫文章比寫代碼還累,加上有事情要忙,結果就。。 明天要去外包駐場了,現把流程設計器最終實現的效果及應用案例放到網上(Demo),歡迎大家圍觀,歡迎園友們提出寶貴意見 ...
經過前面的准備工作,終於把設計器的主要UI界面搭建好了,接下來到添加流程結點,效果如下圖 代碼:GoFlow_03.zip 演示地址:Demo 微信演示公眾號: 另:Silverlight版 Silverlight版Demo ...
現在的業務分工越來越細,很多客戶指定要求上工作流系統,就一定要包含流程設計器。而很多開源的工作流系統,都只注重流程引擎部分,或更注重和各種開源的框架,orm等的集成,流程設計器或者根本就沒有。這使得很多找開源的工作流系統的系統集成商,不得不面臨着要自己寫一份工作流設計器,常常在論壇中 ...
...
以前在IE盛行,微軟一家獨大的時候,web繪圖功能首選就是VML,IE5.0以上的版本都支持VML,VML可以在IE中通過文本的方式繪制矢量圖像,類似在html頁面中實現了畫筆的功能,所以被很多人采用來實現web流程設計器。 隨着手機,ipad等各種移動設備的升級,越來越多的應用要求支持這些移動 ...