mxgraph 的初步介绍与开发入门

lynnlysh

浏览: 176702 次
性别:
来自: 天津

最近访客更多访客>>

zhangyuyong

limengna845567

lsh8656

涩慕年华

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JavaScript EXT 框架 XML HTML

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" class="x-hidden">
<div id="graphContainer" class="x-tab"...>

这几句说明mxgraph是将html的页面元素<div>当做一个容器（container），并在此容器中画图的，而extJs也是将此容器包装成一个window的，因此页面的<div>容器就是它们的结合点。
这样就可以结合二者来编写流程图插件了
并且mxgraph的button对象可直接用在extJs的items[]中。
***************情人节不快乐的分割线****************************
失恋很痛苦，求安慰，求交流。。。

mxclient.rar (355.1 KB)
下载次数: 552

分享到：

mxgraph入门之 mxcell的操作方法 | 转一个JBPM4 简易请假实例，加我的理解

2011-02-15 10:21
浏览 7425
评论(6)
分类:Web前端
查看更多

6 楼 lynnlysh 2014-11-18

小伟小伟写道

你好刚学这个   如何将 maxgraph 与extjs结合起来   目前无法将maxgraph面板放到extjs中

rendTo:'hello-win', //el
                layout:'fit',
                width:500,
                height:300,
                closeAction:'hide',
                plain: true,

                items: new Ext.TabPanel(
                {
                    rendTo: 'hello-tabs',
                  title:'xxx',
                    autoTabs:true,
                    activeTab:0,
                    deferredRender:false,
                    border:true
                }),

extjs窗口就是不显示内容

mxGraph的安装包中有一个例子，是介绍 maxgraph 与extjs结合的，位置是
mxgraph-1_11_0_0\mxgraph_1_1\javascript\examples\extjs.html 你可以看一下
具体代码给你贴出来啦

<!--
  $Id: extjs.html,v 1.11 2012-10-30 16:24:02 gaudenz Exp $
  Copyright (c) 2006-2010, JGraph Ltd

  ExtJs example for mxGraph. This example demonstrates using
  mxGraph inside an ExtJS window.
-->
<html>
<head>
	<title>Hello, World! example for mxGraph</title>

	<link rel="stylesheet" type="text/css" href="http://extjs.com/deploy/dev/resources/css/ext-all.css" />
	<script type="text/javascript" src="http://extjs.com/deploy/dev/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="http://extjs.com/deploy/dev/ext-all.js"></script>

	<!-- Sets the basepath for the library if not in same directory -->
	<script type="text/javascript">
		mxBasePath = '../src';
	</script>

	<!-- Loads and initializes the library -->
	<script type="text/javascript" src="../src/js/mxClient.js"></script>

	<!-- Example code -->
	<script type="text/javascript">
		// Program starts here. Creates a sample graph in the
		// DOM node with the specified ID. This function is invoked
		// from the onLoad event handler of the document (see below).
		var graph;

		function main(container)
		{
			// Checks if the browser is supported
			if (!mxClient.isBrowserSupported())
			{
				// Displays an error message if the browser is not supported.
				mxUtils.error('Browser is not supported!', 200, false);
			}
			else
			{
				// Creates the graph inside the given container
				graph = new mxGraph(container);

				// Enables rubberband selection
				new mxRubberband(graph);
				graph.setPanning(true);
				graph.setTooltips(true);

				// Gets the default parent for inserting new cells. This
				// is normally the first child of the root (ie. layer 0).
				var parent = graph.getDefaultParent();

				// Adds cells to the model in a single step
				graph.getModel().beginUpdate();
				try
				{
					var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
					var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
					var e1 = graph.insertEdge(parent, null, '', v1, v2);
				}
				finally
				{
					// Updates the display
					graph.getModel().endUpdate();
				}
			}
		};

		Ext.onReady(function()
		{
		    var win;
		    var button = Ext.get('show-btn');

		    button.on('click', function()
		    {
		        // create the window on the first click and reuse on subsequent clicks
		        if(!win)
		        {
		            win = new Ext.Window(
		            {
		                el:'hello-win',
		                layout:'fit',
		                width:500,
		                height:300,
		                closeAction:'hide',
		                plain: true,

		                items: new Ext.TabPanel(
		                {
		                    el: 'hello-tabs',
		                    autoTabs:true,
		                    activeTab:0,
		                    deferredRender:false,
		                    border:false
		                }),

		                buttons: [
		                {
		                    text:'Submit',
		                    disabled:true
		                },
		                {
		                    text: 'Close',
		                    handler: function()
		                    {
		                        win.hide();
		                    }
		                }]
		            });

		            // Fits the SVG container into the window
		            win.on('resize', function()
		            {
		                graph.sizeDidChange();
		            });
		        }

		        win.show(this);
		    });
		});
	</script>
</head>

<!-- Page passes the container for the graph to the program -->
<body onload="main(document.getElementById('graphContainer'))">

<input type="button" id="show-btn" value="Hello World" /><br /><br />

	<!-- Creates a container for the graph with a grid wallpaper -->
	<div id="hello-win" class="x-hidden">
	    <div class="x-window-header">Hello Dialog</div>
	    <div id="hello-tabs">
	        <!-- Auto create tab 1 -->
			<div id="graphContainer" class="x-tab" title="Hello World 1"
				style="background:url('editors/images/grid.gif');">
			</div>
		</div>
	</div>
</body>
</html>

5 楼小伟小伟 2014-11-15

4 楼 QiuQiu0034 2012-02-27

lynnlysh 写道

解压后将三个文件放在WebRoot或webContent目录下
然后在jsp页面头部写

<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代码的时间也是很可观的
应该先判断一下浏览器类型,然后动态引入

3 楼 bingoohuang 2011-06-30

测试一下fiddler拦截testing

2 楼 lynnlysh 2011-04-06

解压后将三个文件放在WebRoot或webContent目录下
然后在jsp页面头部写

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

即可

1 楼清溪客 2011-03-31

额，不会用
我刚刚学jbpm，对mxgraph 也不了解，不知道在eclipse 下运行你的mxclient.rar中的文件，要什么东西啊

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论