mxGraph使用笔记

不积跬步，无以至千里...

Container 容器

      页面用一个dom节点将graph与javascript结合。它可以使用document.getElementById在body中取得（如这个例子）或者直接动态创建（如createElement， 译者注）。dom节点传递到主函数中用于建立以下graph例子。

      如果你想让容器中有滚动条，那么将容器样式的属性 overflow 设为auto。

Graph 图

      代码创建了一个空的graph图模型并通过容器和空的模型来构建具体的图。在这个例子中，所有默认事件处理在最后一行将失效。（mxgraph使用典型的MVC模式， 熟悉MVC模式的读者更容易上手。 译者注）

[javascript]  view plain  copy

 print ?

1. var model = new mxGraphModel();  
2. 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时无需参数自动创建在图中根节点的第一个子节点。

[javascript]  view plain  copy

 print ?

1. // Gets the default parent for inserting new cells. This  
2. // is normally the first child of the root (ie. layer 0).  
3. //为插入节点获得默认的父节点。  
4.  //这通常是根节点的第一个子节点  
5. var parent = graph.getDefaultParent();  
6. // Adds cells to the model in a single step  
7. //在单独的一步中添加cell  
8. model.beginUpdate();  
9. try  
10. {  
11.   var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);  
12.   var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);  
13.   var e1 = graph.insertEdge(parent, null, '', v1, v2);  
14. }  
15. finally  
16. {  
17.   // Updates the display  
18. //更新显示  
19.   model.endUpdate();  
20. }  

      beginUpdate&endUpdate不仅提供了显示功能，而且它能够当做undo/redo标记的边界（也就是说，beginUpdate和endUpdate之间操作会作为Undo、redo的原子操作，要么同时被redo或undo， 相当于数据库中的事务， 译者注）。

Graphs 图

      实例化mxgraph来创建graph图，以下是API的核心类图，其他的都是辅助。

 

      将dom节点实例化为一个graph图：

[javascript]  view plain  copy

 print ?

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

Model 编程模型

      mxcell在mxGraphModel中实现了定义图模型的元素。

 

      图模型有以下属性（包含关系）：
      1）根节点包含各个层，各个层的父节点都是根节点。
      2）层中可包含graph图模型的元素：节点、连线组。
      3）组中可递归的包含graph图模型的元素。
      4）graph图的结构和信息都存储在cell和用户对象中。（又名业务对象）

      用一个根节点和默认的层来创建一个新的graph模型：

[javascript]  view plain  copy

 print ?

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

Stylesheet 样式表

      cell的样式由样式表（mxStylesheet的实例）来决定。样式表规定了样式名称到样式之间的映射关系。一个样式是一个键的数组。那些键对应所用cell的值。值在mxConstants中定义，可以是字符串和数字、javascript对象、函数等 。 修改节点和连线的默认样式：

[javascript]  view plain  copy

 print ?

1. var vertexStyle = graph.getStylesheet().getDefaultVertexStyle();  
2. vertexStyle[mxConstants.ROUNDED] = true;  
3. var edgeStyle = graph.getStylesheet().getDefaultEdgeStyle();  
4. 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默认实现如下所示：

[javascript]  view plain  copy

 print ?

1. mxGraph.prototype.getImage = function(state)  
2. {  
3.   if (state != null && state.style != null)  
4.   {  
5.     return state.style[mxConstants.STYLE_IMAGE];  
6.   }  
7.   return null;  
8. }  

      这个方法可把cell的图形改成任何你需要的。通常，图像被定义为state.cell指向cell关联的状态或state.cell.value指向用户对象。
      为了使改变可以显示出来，你需要调用view.invalidate(cell)和view.validate。

Editors 编辑器

      程序通过初始化mxEditor来创建编辑器。这是编辑器包的核心类。其他都是辅助类。可通过配置文件名称创建并配置一个编辑器。

 

      请看下面的例子：

[javascript]  view plain  copy

 print ?

1. var config = mxUtils.load('editors/config/keyhandler-commons.xml').getDocumentElement();  
2. 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类型模板

[javascript]  view plain  copy

 print ?

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

      add元素的as属性包含模板上一次成功应用的名称，Symbol子节点元素是一个ie或者火狐的客户端元素，可以有任何名称和任意多的子节点以及客户属性。标签属性是对图形单元的文字表述。mxCell元素是另一个特殊的子节点包含cell的图像化信息，并命名其为 cell-type, -style, -size ， -position.等

Toolbar

      按如下，必须通过在配置文件中配置mxDefaultToolbar节(mxEditor /mxDefaultToolbar[as=toolbar]) 来应用Toolbar模板。

[javascript]  view plain  copy

 print ?

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

      as属性指定工具标签在工具栏中显示，template属性指定最先被加载的模板，style属性是可选的，用于重写默认的style。icon属性指定了toolbar自身的图形样式。
      注：在这个symbolTool的例子中，as属性被规定为语言资源的键值。如果资源在mxResource中没有定义，那么属性值将被作为标签。

Input/Output 输入/输出

      默认编码体系通过as属性创建名称将所有无对象文件映射成字符串，有对象文件映射成child节点。在mxCodecRegistry中注册的默认编码体系可以被客户重构或编译解码。

      请看下面的JavaScript对象的定义：

[javascript]  view plain  copy

 print ?

1. var object = new Object();  
2. object.myBool = true;  
3. object.myObject = new Object();  
4. object.myObject.name = 'Test';  
5. 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数据（不需要产生编辑器实例）。

参考文献

1.http://www.jgraph.com/