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")方法是发送信息到服务器端并返回的。大家可以自己试试。