mxGraph进阶（⼀）mxGraph教程-开发⼊门指南mxGraph教程-开发⼊门指南
概述
mxGraph是⼀个JS绘图组件适⽤于需要在⽹页中设计/编辑Workflow/BPM流程图、图表、⽹络图和普通图形的Web应⽤程序。mxgraph下载包中包括⽤javascript写的前端程序，也包括多个和后端程序(java/C#等)集成的例⼦。以下是mxgraph应⽤的⼏个例⼦。（你可以到的主页下载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.
//如果浏览器不⽀持，则显⽰错误信息
<('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
网页设计html代码翻译{
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
//更新显⽰
}
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中实现了定义图模型的元素。
图模型有以下属性（包含关系）：
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 = Stylesheet().getDefaultVertexStyle();
vertexStyle[mxConstants.ROUNDED] = true;
var edgeStyle = Stylesheet().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  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，。注意：这些⽅法作为⼀个参数，它指向⼀个cell的style"解决"（即数组）版本的cell状态。因此，对getImage默认实现如下所⽰：

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