js画图框架--mxgraph--入门

js画图框架--mxgraph--入门

    备注：由于工作变动的原因，mxgraph文章没有及时更新，写的比较简陋，希望大家谅解。以后有时间了在更新。这些算是一个引子，希望大家有兴趣的朋友继续研究下去。

1. 下载

    在http://www.mxgraph.com/mxgraph.html网站中，下边的Download Now 按钮下载。版本从mxgraph-1_0_0_0.zip到最新版本mxgraph-1_10_4_2.zip ，我们下载最新版本。

 

    解压安装包

    解压安装包后是mxgraph目录，目录结果如下：

/ DOC	文档根目录，包括本用户手册。
/ DOTNET	NET服务器端类
/ java中	Java服务器端类
/ javascript中	JavaScript客户端功能。
/ JavaScript的/例子	HTML示例演示如何使用的mxGraph
更新日志	在不同版本之间的变化详情
的index.html	到图书馆的基本介绍
LICENSE.TXT	的许可条款下，你必须使用这个库

    

2. 环境搭建

    本地环境

    将【javascript】目录下【examples】和【src】目录拷贝到要测试或者开发的目录

    server环境

 

3. 注意事项

    文件路径引用

    在要测试或者使用的jsp,php,或者html文件中引用时，要注意文件目录的引用。

    在调试或者使用mxGraph的时候，最好使用firefox浏览器

   

4. 例子

    附件ajaxTesst.rar中是我研究mxgraph的工程，引入到myEclipse中，保证程序没有错的情况下，工厂目录如下：

 主要是SelectCityServlet.java ，examples目录和web.xml这三个地方。

SelectCityServlet.java 在web.xml中配置的请求处理servlet，主要是doGet方法。

examples目录是存放mxgraph文件的地方，我测试的例子是‘schema-结构定义2.html’这个文件。在里面主要做的是点击导入按钮，将图形编译成XML发送到服务器段，服务器端返回一个xml，mxgraph得到xml解析后显示到图形窗体中。

其中第267行代码的getResult("zs")方法是发送信息到服务器端并返回的。大家可以自己试试。