mxGraph 教程 - 开发入门指南
一、概述
mxGraph是一个JS绘图组件适用于需要在网页中设计/编辑 Workflow/BPM 流程图、图表、网络图和普通图形的 Web 应用程序。mxgraph下载包中包括用 javascript 写的前端程序,也包括多个和后端程序(java/C#等)集成的例子。以下是 mxgraph 应用的几个例子。（你可以到www.longboo.com的主页下载 mxgraph 和更多的 mxgraph 实例）
电力系统案例
工作流设计器
化工系统案例
mxGraph 客户端是一个图形组件，并提供和网页集成的接口。客户端需要一个 Web 服务器提供所需的文件，也可以在本地文件系统上运行。后台可用于集成到现有存在的服务器所支持的语言中。
与后台配合后， 该组件可完成以下功能：
创建类似 visio 的图库
存储加载图库
创建一个 graph 对象
与其他客户共享图库
上述几种方式可以结合起来应用，如发送更改配置的 XML 文件到后台，或自动保存图形以免数据丢失。并且客户端可以本地化操作。
二、示例:Hello, World!
hello word 示例是一个单独的 html 文件，包含命名空间，mxgraph 的 lib 和示例代码。示例直接在浏览器中看运行效果。（用火狐浏览器按 crl+U 或直接单击页面用 IE 浏览器查看资源。）
2.1 引入库文件
网页头部包含 javascript 代码和依赖关系。用以下代码来加载库文件。mxBasePath 变量用来定义库资源的目录。这个变量必须在加载库前就定义好。
mxClient.js 包含全部所需代码。注意：资源代码仅仅商业发行。在评估版本中这个文件是一个来自服务器的 URL 链接。不可以本地化源代码。
2.2 检查浏览器
下一个 script 标签包含 hello world 的代码。代码的第一部分是检查浏览器是否支持 mxgraph。 建议在编码前做这步，如果浏览器不支持就能在此显示错误信息。一般来说, js 脚本代码应该和 html 代码分开，但这个例子中没这样做。
对于主函数 function main（）{}没有什么特殊的规定。function 引用头部加载的文件，并且可以有任何名称包含任何参数。在这个例子中参数是 body 中的 dom 节点。注意： 以下代码和 dom 节点的 id 无关
三、Container 容器
页面用一个 dom 节点将 graph 与 javascript 结合。它可以使用 document.getElementById 在 body 中取得（如这个例子）或者直接动态创建（如 createElement， 译者注）。dom 节点传递到主函数中用于建立以下 graph 例子。
如果你想让容器中有滚动条，那么将容器样式的属性 overflow 设为 auto。
四、Graph 图
代码创建了一个空的 graph 图模型并通过容器和空的模型来构建具体的图。在这个例子中，所有默认事件处理在最后一行将失效。（mxgraph 使用典型的 MVC 模式， 熟悉 MVC 模式的读者更容易上手。 译者注）
如果你希望 graph 图只读，可用 graph.setEnabed(false).
五、Vertices （节点）and Edges（连线）
程序需要在 beginUpdate 和 endUpdate 中来插入节点和连线（更新图形）。endUpdate 应放在 finally-block 中以确保 endUpdate 一直执行。但 beginUpdate 不能在 try-block 中，这样如果 beginUpdate 失败那么 endupdate 永远不会执行。
块内的部分为图形创建节点和连线。默认的父节点是在用 graph 时无需参数自动创建在图中根节点的第一个子节点。
beginUpdate&endUpdate 不仅提供了显示功能，而且它能够当做 undo/redo 标记的边界（也就是说，beginUpdate 和 endUpdate 之间操作会作为 Undo、redo 的原子操作，要么同时被 redo 或 undo， 相当于数据库中的事务， 译者注）。
六、Graphs 图
实例化 mxgraph 来创建 graph 图，以下是 API 的核心类图，其他的都是辅助。
将 dom 节点实例化为一个 graph 图：
七、Model 编程模型
mxcell 在 mxGraphModel 中实现了定义图模型的元素。
图模型有以下属性（包含关系）： 1）根节点包含各个层，各个层的父节点都是根节点。 2）层中可包含 graph 图模型的元素：节点、连线组。 3）组中可递归的包含 graph 图模型的元素。 4）graph 图的结构和信息都存储在 cell 和用户对象中。（又名业务对象）
用一个根节点和默认的层来创建一个新的 graph 模型：
八、Stylesheet 样式表
cell 的样式由样式表（mxStylesheet 的实例）来决定。样式表规定了样式名称到样式之间的映射关系。一个样式是一个键的数组。那些键对应所用 cell 的值。值在 mxConstants 中定义，可以是字符串和数字、javascript 对象、函数等 。 修改节点和连线的默认样式：
九、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 默认实现如下所示：
这个方法可把 cell 的图形改成任何你需要的。通常，图像被定义为 state.cell 指向 cell 关联的状态或 state.cell.value 指向用户对象。为了使改变可以显示出来，你需要调用 view.invalidate(cell)和 view.validate。
十一、Editors 编辑器
程序通过初始化 mxEditor 来创建编辑器。这是编辑器包的核心类。其他都是辅助类。可通过配置文件名称创建并配置一个编辑器。
请看下面的例子：
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 子节点元素是一个 ie 或者火狐的客户端元素，可以有任何名称和任意多的子节点以及客户属性。标签属性是对图形单元的文字表述。mxCell 元素是另一个特殊的子节点包含 cell 的图像化信息，并命名其为 cell-type, -style, -size ， -position.等
十四、Toolbar
按如下，必须通过在配置文件中配置 mxDefaultToolbar 节(mxEditor /mxDefaultToolbar[as=toolbar]) 来应用 Toolbar 模板。
as 属性指定工具标签在工具栏中显示，template 属性指定最先被加载的模板，style 属性是可选的，用于重写默认的 style。icon 属性指定了 toolbar 自身的图形样式。 注：在这个 symbolTool 的例子中，as 属性被规定为语言资源的键值。如果资源在 mxResource 中没有定义，那么属性值将被作为标签。
十五、Input/Output 输入/输出
默认编码体系通过 as 属性创建名称将所有无对象文件映射成字符串，有对象文件映射成 child 节点。在 mxCodecRegistry 中注册的默认编码体系可以被客户重构或编译解码。
请看下面的 JavaScript 对象的定义：
编码这个对象并以 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 数据（不需要产生编辑器实例）。
二十、参考文献
版权声明: 本文为 InfoQ 作者【No Silver Bullet】的原创文章。
原文链接:【http://xie.infoq.cn/article/b89f4e5633541aaa38d876d66】。文章转载请联系作者。
No Silver Bullet 2021.07.09 加入
岂曰无衣 与子同袍
评论