mxgraph 的初步介紹與開發入門

原創

iteye_19962

2020-02-22 14:43

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 οnlοad="main(document.getElementById('graphContainer'))">
<div id="hello-win" class="x-hidden">
<div id="graphContainer" class="x-tab"...>

這幾句說明mxgraph是將html的頁面元素<div>當做一個容器（container），並在此容器中畫圖的，而extJs也是將此容器包裝成一個window的，因此頁面的<div>容器就是它們的結合點。
這樣就可以結合二者來編寫流程圖插件了
並且mxgraph的button對象可直接用在extJs的items[]中。
***************情人節不快樂的分割線****************************
失戀很痛苦，求安慰，求交流。。。