mxGraph進階(一)mxGraph教程-開發入門指南

mxGraph教程-開發入門指南

概述

mxGraph是一個JS繪圖組件適用于需要在網頁中設計/編輯Workflow/BPM流程圖、圖表、網絡圖和普通圖形的Web應用程序。mxgraph下載包中包括用javascript寫的前端程序,也包括多個和后端程序(java/C#等)集成的例子。以下是mxgraph應用的幾個例子。（你可以到www.longboo.com的主頁下載mxgraph和更多的mxgraph實例）

電力系統案例

工作流設計器

化工系統案例

mxGraph客戶端是一個圖形組件，并提供和網頁集成的接口。客戶端需要一個Web服務器提供所需的文件，也可以在本地文件系統上運行。后臺可用于集成到現有存在的服務器所支持的語言中。

與后臺配合后， 該組件可完成以下功能：

1.創建類似visio的圖庫

2.存儲加載圖庫

3.創建一個graph對象

4.與其他客戶共享圖庫

上述幾種方式可以結合起來應用，如發送更改配置的XML文件到后臺，或自動保存圖形以免數據丟失。并且客戶端可以本地化操作。

示例:Hello, World!

hello word?示例是一個單獨的html文件，包含命名空間，mxgraph的lib和示例代碼。示例直接在瀏覽器中看運行效果。（用火狐瀏覽器按crl+U或直接單擊頁面用IE瀏覽器查看資源。）

引入庫文件

網頁頭部包含javascript代碼和依賴關系。用以下代碼來加載庫文件。mxBasePath變量用來定義庫資源的目錄。這個變量必須在加載庫前就定義好。

mxClient.js包含全部所需代碼。注意：資源代碼僅僅商業發行。在評估版本中這個文件是一個來自服務器的URL鏈接。不可以本地化源代碼。

檢查瀏覽器

下一個script標簽包含hello world的代碼。代碼的第一部分是檢查瀏覽器是否支持mxgraph。?建議在編碼前做這步，如果瀏覽器不支持就能在此顯示錯誤信息。一般來說, js腳本代碼應該和html代碼分開，但這個例子中沒這樣做。

對于主函數function main（）{}沒有什么特殊的規定。function引用頭部加載的文件，并且可以有任何名稱包含任何參數。在這個例子中參數是body中的dom節點。注意：?以下代碼和dom節點的id無關