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>
<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>
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>