首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

mxgraph 的初始介绍与开发入门

2012-11-17 
mxgraph 的初步介绍与开发入门mxgraph是一个用于画流程图的前台框架,目前没有中文的API,但要学习它也不是

mxgraph 的初步介绍与开发入门
mxgraph是一个用于画流程图的前台框架,目前没有中文的API,但要学习它也不是很难,我们可以参考它的包中自带的实例。那些实例基本上包括了你所需要的各种应用。
并且,通过实例你就可以发现它到底有哪些方面的应用。其中最经典的就是我目前正在做的用ext和mxgraph结合开发画流程图并并可生成xml文件发布的系统。
mxgraph的开发入门:
步骤一:
将mxgraph\javascript目录下的src文件夹、mxgraph\javascript\examples下的editors和images文件夹拷入工程的WebContent目录下,再把mxgraph\javascript\examples下的所有例子放入工程的WebContent目录下。
下载附件中的包,解压缩后的三个文件同样放入WebContent目录下。(此包实现了mxgraph的本地化)
步骤二:
更改例子的头文件:
找到如下代码

<!-- Sets the basepath for the library if not in same directory --><script type="text/javascript">mxBasePath = '../src';</script> <!-- Loads and initiaizes the library --><script type="text/javascript" src="http://www.jgraph.com/demo/mxgraph/src/js/mxclient.php?version=1.5.1.0&key=hnaDeK2rfn%2BjnC8"></script>

将其改为本地的目录位置:
<script type="text/javascript">mxBasePath = 'src';</script><!-- Loads and initiaizes the library --><script type="text/javascript" src="mxclient-chrome.js"></script><script type="text/javascript" src="mxclient-ff.js"></script><script type="text/javascript" src="mxclient-ie.js"></script>

然后即可查看例子并试着修改。
步骤三:
extJs与mxgraph的结合
在头文件中加载ext的包如下:
<link rel="stylesheet" type="text/css" href="ext-3.3.0/resources/css/ext-all.css" /><script type="text/javascript" src="ext-3.3.0/adapter/ext/ext-base.js"></script><script type="text/javascript" src="ext-3.3.0/ext-all.js"></script>

理解以下一段内容:
extJs跟mxgraph一样都是一种前台框架,可以混着用,关键是研究他们怎么结合。
这里我们要看的例子是extjs.html
function main(container)graph = new mxGraph(container);el:'hello-win',<body onload="main(document.getElementById('graphContainer'))"><div id="hello-win" name="code"><script type="text/javascript">mxBasePath = 'src';</script><!-- Loads and initiaizes the library --><script type="text/javascript" src="mxclient-chrome.js"></script><script type="text/javascript" src="mxclient-ff.js"></script><script type="text/javascript" src="mxclient-ie.js"></script>

即可<script type="text/javascript">mxBasePath = 'src';</script><!-- Loads and initiaizes the library --><script type="text/javascript" src="mxclient-chrome.js"></script><script type="text/javascript" src="mxclient-ff.js"></script><script type="text/javascript" src="mxclient-ie.js"></script>
即可
一个文件1M,你这样引入对服务器负担也挺重的,即使是本机运行,下载这些js代码的时间也是很可观的
应该先判断一下浏览器类型,然后动态引入

热点排行