1. 程式人生 > >用SVG和VML開發工作流設計器

用SVG和VML開發工作流設計器

工作流是許多系統中必備的一種功能,而工作流設計器就顯示對使用者很重要。視覺化的設計器對於客戶來說就更好了,非常直觀,有效果的減少使用者的煩腦。 在各種應用中有b/s的系統,有c/s的系統。不同的系統工作流程都是相似的。當今web應用日益廣泛,因此本文將講述如何在web上實現工作流設計器。其中,圖形技術發揮著至關重要的作用,可升級向量影象SVG, Scalable Vector Graphics)和VML(Vector Markup Language)的產生有著十分積極的意義。它具有支援向量圖和動畫、由文字構成圖形易於操作、對點陣圖形相容等特點。然而,不同瀏覽器對兩種標準的支援並不一致, 微軟的IE瀏覽器系列對VML支援比較好,而其他的瀏覽器軟體對SVG

標準支援更完美。這也使得開發基於Web的圖形系統變得更加複雜。

多比圖形控制元件出現簡化了的這種開發難度,它是一款基於Web的向量圖形控制元件,能夠檢測瀏覽器型別,自動選擇VMLSVG方案進行做圖, 類似於網頁上的Visio控制元件。

VML技術

VML(VectorMarkup Language)是XML1. 0 的一個應用,使用VML 可以在IE 5. 0 以上版本中繪製向量圖形。由於VML 是基於新一帶網路標記語言XML 標準的,也就是說,表示方法簡單,易於擴充套件,資料與表現相分離,同時VML 支援高質量的向量圖形顯示,它基於相連線的直線和曲線描述路徑。其次VML 由文字構成,可以很方便地融合到HTML檔案中,可用很少的位元組來表示較複雜的影象,可以和其它HTML元素一樣使用VML元素,在客戶端瀏覽器顯示影象。VML可以使用DHTML大部分屬性和事件,如id, onmouseover等。最後VML 的功能不只是繪圖,它可以在圖形中嵌入文字,並可實現超鏈,通過指令碼控制還可以實現動畫效果。

SVG技術

SVG是由W3C制定的基於XML來描述二維向量圖型的一個開放標準,它用文字格式的描述性語言來描述影象內容,因此是一種和影象解析度無關的向量圖形格式。它具有以下優點:

1.影象檔案可讀,易於修改和編輯。

2.與現有技術可以互動融合。另外, SVG檔案還可嵌入JavaScript指令碼來控制SVG物件。

3.SVG圖形格式可以用來動態生成圖形。例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端使用者。

4. 如前所述, SVG文件作為一種規範的XML文件,能夠很好地與W3C其他開放標準如DOM, CSS,XSL, XL ink, Xpointer, SM IL, HTML, XHTML等進行協同工作,簡化異質系統間的資訊交流,方便資料庫的存取。

多比控制元件簡介

多比圖形控制元件出現簡化了的這種開發難度,它是一款基於Web的向量圖形控制元件,能夠檢測瀏覽器型別,自動選擇VML或SVG方案進行做圖, 類似於網頁上的Visio控制元件,是目前國內外最佳的解決方案,可以用於電力、化工、煤炭、工控組態軟體、模擬、地理資訊系統、工作流、複雜報表 工業SCADA系統、ERP流程設計系統圖形管理圖形拓撲分析GIS地理資訊系統系統工程製圖等領域。

多比圖形編輯器實現了圖形、影象和文字的有機統一。它除了支援HTML 中常用的標記,如文字、影象、連結、互動性、CSS的使用、指令碼( Scrip t)外,還提供了大量針對圖形、影象、動畫的特定標記。對SVG圖形檔案進行編輯管理的過程為: SVG圖形檔案經XML 解析器開啟,並在記憶體中生成一個物件樹,用滑鼠事件來驅動指令碼執行,指令碼通過DOM介面對物件進行相關的操作,來實現圖形繪製、編輯等功能。

在web上作設計器,圖形有了,剩下的就是控制這些圖形元素。

工作流程有兩種基本元素一種我們稱之為節點,一點稱之為關係(節點間的關係)也就是工作流的流向問題。要實現工作流設計器有幾個要點:

1、支援工作流元素的新增、刪除、移動。

2、建立節點間的關係

3、將設計好的流程儲存到永久物質裡(如檔案,資料庫等)

4、可以從永久資料裡讀取資料,並表現為圖形