文档介绍：mxGraph 教程1 - 开发入门指南
Overview 概述
mxGraph是一个JS绘图组件适用于需要在网页中设计/编辑Workflow/BPM流程图、图表、网络图和普通图形的Web应用程序。mxgraph下载包中包括用javescript写的前端程序,也包括多个和后端程序(java/C#等等)集成的例子。以下是mxgraph应用的几个例子。(你可以到载mxgraph , 和更多的mxgraph实例)
电力系统案例
工作流设计器
化工系统案例
mxGraph客户端是一个图形组件,并提供和网页集成的接口。。客户端需要一个Web服务器提供所需的文件,也可以在本地文件系统上运行。后台可用于集成到现有存在的服务器所支持的语言中。
与后台配合后, 该组件可完成以下功能:
创建类似visio的图库
存储加载图库
创建一个graph对象
与其他客户共享图库
上述几种方式可以结合起来应用,如发送更改配置的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/"></script>
。注意:资源代码仅仅商业发行。在评估版本中这个文件是一个来自服务器的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 (!())
{
// Displays an error message if the browser is not supported.
//如果浏览器不支持,则显示错误信息
('Browser is not supported!', 200, false);
}
...
Container 容器
页面用一个dom节点将graph与javascript结合。(如这个例子)或者直接动态创建(如createElement, 译者注)。dom节点传递到主函数中用于建立以下graph例子。
如果你想让容器中有滚动条,那么将容器样式的属性 overflow 设为auto。
Graph 图
代码创建了一个空的graph图模型并通过容器和空的模型来构建具体的图。在这个例子中,所有默认事件处理在最后一行将失效。(mxgraph使用典型的MVC模式, 熟悉MVC模式的读者更容易上手。译者注)
var model = new mxGraphModel();
var graph = new mxGraph(container, model);
如果你希望graph图只读,可用 (false).
Vertices (节点)and Edges(连线)
程序需要在beginUpdate和endUpdate中来插入节点和连线(更新图形)。endUpdate应放在finally-block中以确保endUpdate一直执行。但beginUpdate不能在try-block中,这样如果beginUpdate失败那么end