mxGraph 教程1 - 开发入门指南
Overview 概述
mxGraph是一个JS绘图组件适用于需要在网页中设计/编辑Workflow/BPM流程图、图表、网络图和普通图形的Web应用程序。mxgraph下载包中包括用javescript写的前端程序,也包括多个和后端程序(java/C#等等)集成的例子。以下是mxgraph应用的几个例子。（你可以到www.longboo的主页下载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/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.
/
/如果浏览器不支持，则显示错误信息
    ('Browser is not supported!', 200, false);
  }
  ...
Container 容器
页面用一个dom节点将graph与javascript结合。它可以使用ElementById在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 = DefaultParent();
       
// 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
//更新显示
  dUpdate();
}
beginUpdate&endUpdate不仅提供了显示功能，而且它能够当做undo/redo标记的边界（也就是说，beginUpdate和endUpdate之间操作会作为Undo、redo的原子操作，要么同时被redo或undo， 相当于数据库中的事务， 译者注）。
Graphs 图
实例化mxgraph来创建graph图，以下是API的核心类图，其他的都是辅助。
将dom节点实例化为一个graph图：
var node = ElementById('id-of-graph-container');
var graph = new mxGraph(node);


Model 编程模型
mxcell在mxGraphModel中实现了定义图模型的元素。
图模型有以下属性（包含关系）：
根节点包含各个层，各个层的父节点都是根节点。
层中可包含graph图模型的元素：节点、连线组。
组中可递归的包含graph图模型的元素。
graph图的结构和信息都存储在cell和用户对象中。（又名业务对象）
用一个根节点和默认的层来创建一个新的graph模型：
var root = new mxCell();
root.insert(new mxCell());
var model = new mxGraphModel(root);
Stylesheet 样式表
cell的样式由样式表（mxStylesheet的实例）来决定。样式表规定了样式名称到样式之间的映射关系。一个样式是一个键的数组。那些键对应所用cell的值。值在mxConstants中定义，可以是字符串和数字、javascript对象、函数等 。 修改节点和连线的默认样式：
var vertexStyle = Stylesheet().getDefaultVertexStyle();
js脚本编程入门

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。