【轉】mxGraph教程-開發入門指南

原文：http://www.javashuo.com/article/p-nssmuilw-cw.html

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變量用來定義庫資源的目錄。這個變量必須在加載庫前就定義好。

 

<script type="text/javascript">
  mxBasePath = 'javascript/src/';
</script>
<script type="text/javascript" src="javascript/src/js/mxClient.js"></script>

 

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

檢查瀏覽器

 

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

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

 

<script type="text/javascript";>
function main(container)
{
  // Checks if the browser is supported
//檢查瀏覽器是否支持
  if (!mxClient.isBrowserSupported())
  {
    // Displays an error message if the browser is not supported.
//若是瀏覽器不支持，則顯示錯誤信息
    mxUtils.error('Browser is not supported!', 200, false);
  }
  ...

 

Container 容器

 

      頁面用一個dom節點將graph與javascript結合。它可使用document.getElementById在body中取得（如這個例子）或者直接動態建立（如createElement， 譯者注）。dom節點傳遞到主函數中用於創建如下graph例子。

      若是你想讓容器中有滾動條，那麼將容器樣式的屬性 overflow 設爲auto。

Graph 圖

 

      代碼建立了一個空的graph圖模型並經過容器和空的模型來構建具體的圖。在這個例子中，全部默認事件處理在最後一行將失效。（mxgraph使用典型的MVC模式， 熟悉MVC模式的讀者更容易上手。 譯者注）

 

var model = new mxGraphModel();
var graph = new mxGraph(container, model);

 

      若是你但願graph圖只讀，可用 graph.setEnabed(false).

Vertices （節點）and Edges（連線）

 

      程序須要在beginUpdate和endUpdate中來插入節點和連線（更新圖形）。endUpdate應放在finally-block中以確保endUpdate一直執行。但beginUpdate不能在try-block中，這樣若是beginUpdate失敗那麼endupdate永遠不會執行。

      塊內的部分爲圖形建立節點和連線。默認的父節點是在用graph時無需參數自動建立在圖中根節點的第一個子節點。

 

// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
//爲插入節點得到默認的父節點。
 //這一般是根節點的第一個子節點
var parent = graph.getDefaultParent();
// Adds cells to the model in a single step
//在單獨的一步中添加cell
model.beginUpdate();
try
{
  var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
  var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
  var e1 = graph.insertEdge(parent, null, '', v1, v2);
}
finally
{
  // Updates the display
//更新顯示
  model.endUpdate();
}

 

      beginUpdate&endUpdate不只提供了顯示功能，並且它可以當作undo/redo標記的邊界（也就是說，beginUpdate和endUpdate之間操做會做爲Undo、redo的原子操做，要麼同時被redo或undo， 至關於數據庫中的事務， 譯者注）。

Graphs 圖

 

      實例化mxgraph來建立graph圖，如下是API的核心類圖，其餘的都是輔助。

 

      將dom節點實例化爲一個graph圖：

 

var node = document.getElementById('id-of-graph-container');
var graph = new mxGraph(node);

 

Model 編程模型

 

      mxcell在mxGraphModel中實現了定義圖模型的元素。

 

      圖模型有如下屬性（包含關係）：
      1）根節點包含各個層，各個層的父節點都是根節點。
      2）層中可包含graph圖模型的元素：節點、連線組。
      3）組中可遞歸的包含graph圖模型的元素。
      4）graph圖的結構和信息都存儲在cell和用戶對象中。（又名業務對象）

      用一個根節點和默認的層來建立一個新的graph模型：

 

var root = new mxCell();
root.insert(new mxCell());
var model = new mxGraphModel(root);

 

Stylesheet 樣式表

 

      cell的樣式由樣式表（mxStylesheet的實例）來決定。樣式表規定了樣式名稱到樣式之間的映射關係。一個樣式是一個鍵的數組。那些鍵對應所用cell的值。值在mxConstants中定義，能夠是字符串和數字、javascript對象、函數等 。 修改節點和連線的默認樣式：

 

var vertexStyle = graph.getStylesheet().getDefaultVertexStyle();
vertexStyle[mxConstants.ROUNDED] = true;
var edgeStyle = graph.getStylesheet().getDefaultEdgeStyle();
edgeStyle[mxConstants.STYLE_EDGE] = mxEdgeStyle.TopToBottom;

 

Styles 樣式

 

      cell的樣式在屬性style中（cell.style）。樣式是cell狀態的一部分，它能夠通mxGraphModel.setStyle來改變。style是form[stylename;|key=value;]中的一段字符串。默認樣式可覆蓋此cell的制定鍵值。例如：你用 rounded 樣式，它能夠覆蓋 stroke和fillColor，樣式被這樣定義：

[stylename;|key=value;]

      which tells the graph to use the given named styles and override the specified key, value pairs in the given order. For example, to use the rounded style and override the stroke- and fillColor, the style would be defined as:

rounded;strokeColor=red;fillColor=green

      上面Hello World！的例子是這樣插入一個節點的：（注意樣式的使用方法）

var v1 = graph.insertVertex(parent, null, 'Hello',  20, 20, 80, 30, 'rounded;strokeColor=red;fillColor=green');

Appearance 顯示外觀

 

      在具體項目中你也許須要自定義cell的那些動態特性（就是外觀），例如圖形、指針形狀、顏色等。你能夠分別用如下方法： getImage, getIndicatorShape, getIndicatorImage, getIndicatorColor，getIndicatorGradientColor...。注意：這些方法做爲一個參數，它指向一個cell的style"解決"（即數組）版本的cell狀態。所以，對getImage默認實現以下所示：

 

mxGraph.prototype.getImage = function(state)
{
  if (state != null && state.style != null)
  {
    return state.style[mxConstants.STYLE_IMAGE];
  }
  return null;
}

 

      這個方法可把cell的圖形改爲任何你須要的。一般，圖像被定義爲state.cell指向cell關聯的狀態或state.cell.value指向用戶對象。
      爲了使改變能夠顯示出來，你須要調用view.invalidate(cell)和view.validate。

Editors 編輯器

 

      程序經過初始化mxEditor來建立編輯器。這是編輯器包的核心類。其餘都是輔助類。可經過配置文件名稱建立並配置一個編輯器。

 

      請看下面的例子：

 

var config = mxUtils.load('editors/config/keyhandler-commons.xml').getDocumentElement();
var editor = new mxEditor(config);

 

     xml格式的配置文件會傳遞給mxCodec，mxCodec使用mxEditorCodec和其餘編碼將xml文件讀入編輯器對象層次結構中。一般在編輯器開始構建時進行，graph, model, toolbar, popupmenus等用 I/O subsystem。

CSS

 

      Css樣式表單包含多種用戶接口元素（選擇框，編輯器，彈出菜單等）的樣式的定義。它也包含容許應用XML配置文件來支持IE的指令，所以頁面中有大量的這種表單。

能夠經過mxClient.link('stylesheet', filename)或者表單標籤來配置編輯器。例：

<mxEditor>

  <ui>

    <stylesheet name="examples/editors/css/process.css"/>

    ...

Templates 模板

 

      按以下，經過在配置文件中的節點定義新的cell類型模板

 

<add as="symbol">
  <Symbol label="Symbol" customAttribute="whatever">
    <mxCell vertex="1" connectable="1" style="symbol;image=images/event.png">
      <mxGeometry as="geometry" width="32" height="32"/>
    </mxCell>
    <CustomChild customAttribute="whatever"/>
  </Symbol>
</add>

 

      add元素的as屬性包含模板上一次成功應用的名稱，Symbol子節點元素是一個ie或者火狐的客戶端元素，能夠有任何名稱和任意多的子節點以及客戶屬性。標籤屬性是對圖形單元的文字表述。mxCell元素是另外一個特殊的子節點包含cell的圖像化信息，並命名其爲 cell-type, -style, -size ， -position.等

Toolbar

 

      按以下，必須經過在配置文件中配置mxDefaultToolbar節(mxEditor /mxDefaultToolbar[as=toolbar]) 來應用Toolbar模板。

 

<add as="symbolTool" template="symbol"
  style="symbol;image=wf/images/bpmn/special_event.png"
  icon="wf/images/bpmn/small_event.gif"/>

 

      as屬性指定工具標籤在工具欄中顯示，template屬性指定最早被加載的模板，style屬性是可選的，用於重寫默認的style。icon屬性指定了toolbar自身的圖形樣式。
      注：在這個symbolTool的例子中，as屬性被規定爲語言資源的鍵值。若是資源在mxResource中沒有定義，那麼屬性值將被做爲標籤。

Input/Output 輸入/輸出

 

      默認編碼體系經過as屬性建立名稱將全部無對象文件映射成字符串，有對象文件映射成child節點。在mxCodecRegistry中註冊的默認編碼體系能夠被客戶重構或編譯解碼。

      請看下面的JavaScript對象的定義：

 

var object = new Object();
object.myBool = true;
object.myObject = new Object();
object.myObject.name = 'Test';
object.myArray = ['a', ['b', 'c'], 'd'];

 

      編碼這個對象並以XML格式在新的window中顯示結果的方法以下：

var encoder = new mxCodec();

var node = encoder.encode(object);

mxUtils.popup(mxUtils.getXml(node));

如下是XML格式的顯示結果：

<Object myBool="1">

  <Object name="Test" as="myObject"/>

  <Array as="myArray">

    <add value="a"/>

    <Array>

      <add value="b"/>

      <add value="c"/>

    </Array>

    <add value="d"/>

  </Array>

</Object>

      注：編碼器會將布爾型轉換成數字型，屬性值不存儲數字或非對象。而且經過XML中的include指令可實現包含其餘XML文件。

Files 文件

 

      mxEditor實現了save, open, readGraphModel 、 writeGraphModel,這四個函數,  用來處理一些標準的文件操做。
默認的mxEditor.save帶有一個參數，這個參數說明【保存文件】是由程序觸發的仍是由用戶觸發的。而後mxEditor利用urlPost變量檢查這個post請求是否須要發行。若是該變量是默認的，那麼編輯器經過XML和名爲xml的POST變量到指定的URL發行。

Post

 

      如下是一個保存文件的例子。HTML頁面和PHP文件放在一個目錄下。若是文件名是server.php，那麼在編輯器中urlPost變量必須指定爲server.php。PHP文件經過POST請求獲得XML並寫入diagram.xml中。

<?php

$xml = $HTTP_POST_VARS['xml'];

if ($xml != null) {

  $fh=fopen("diagram.xml","w");

  fputs($fh, stripslashes($xml));

  fclose($fh);

}

?>

      以下，發送URL請求改變mxEditor的各自項的配置文件。

<mxEditor urlPost="http://www.example.com/server.php" ... >

      記住：javascript只能發佈到它的源服務器上，因此咱們建議使用相對路徑，URL server.php等。

Form Fields

 

      若是你想經過一組字符來讀/寫graph（如：填充一個表單），你須要如下方法：

var data = editor.writeGraphModel();

editor.readGraphModel(mxUtils.parseXml(data));

Codecs

 

      mxCodec用於編碼其餘對象或者建立和讀取XML數據（不須要產生編輯器實例）。