mxGraph进阶(一)mxGraph教程-开发入门指南

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

               

mxGraph教程-开发入门指南

概述

      mxGraph是一个JS绘图组件适用于需要在网页中设计/编辑Workflow/BPM流程图、图表、网络图和普通图形的Web应用程序。mxgraph下载包中包括用javascript写的前端程序,也包括多个和后端程序(java/C#等)集成的例子。以下是mxgraph应用的几个例子。（你可以到www.longboo.com的主页下载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.//如果浏览器不支持，则显示错误信息    mxUtils.error('Browser is not supported!', 200, fa