Mxgraph

本文介绍如何创建包含mxGraph的HTML页面,包括设置JavaScript变量mxBasePath,加载mxClient.js库,创建图表容器以及在图中添加单元格。还讨论了mxGraph的部署和调试,涉及生产与开发版本的区别。

1. Hello World!
 

  • Creating an HTML page that links the mxGraph client JavaScript,
  • Creating a container to place the mxGraph into,
  • Adds the required cells to that graph.
<script type="text/javascript">mxBasePath = 'javaScript/src'</script>
    <script type="text/javascript" src="javascript/src/js/mxClient.js"></script>

mxBasePath:这是一个JavaScript变量,定义了css、图像、资源和js目录所在的目录。它是JavaScript代码,需要放在脚本标记中。这必须在加载mxClient.js的行之前,并且后面不应该有斜杠。

mxClient.js:这是到mxGraph库的路径。如果HTML文件在本地执行,则路径可能是计算机的本地路径或公共Internet路径。如果html页面是从web服务器下载的,那么路径通常是公共Internet路径

Creation of the container:在代码的底部,在body元素中,定义了加载web页面时调用的函数(onload的值)。它将div容器作为参数传递,该参数在下面定义。这个div是mxGraph组件将放在其中的容器。在本例中,应用了网格背景,就像在绘图应用程序中常用的那样。在创建容器时,除了背景和容器的宽度和高度之外,没有描述图形可视化的其他部分。
注意,如果不希望出现滚动条,应该始终使用overflow:hidden样式

The entry function: 在本例中,文件的主要代码是在页面加载时执行的条目方法。这是JavaScript代码,必须在JavaScript脚本元素中。任何mxGraph应用程序的第一行都应该检查是否支持浏览器,如果不支持,则退出。如果支持浏览器,则在div容器中创建一个mxGraph,并在开始/结束更新调用之间向图添加三个单元格。

 

if (!mxClient.isBrowserSupported())
         {
            mxUtils.error('Browser is not supported!', 200, false);//检查浏览器是否支持MxGraph
         }
         else{
}
  // Creates the graph inside the given container 
            var graph = new mxGraph(container); 在<div>嵌入graph容器
  • js是一个JavaScript文件,它结合了mxGraph的所有JavaScript源代码。从web服务器下载时,由于每个文件所需的请求/确认的开销,将所有JavaScript作为一个文件获得要比作为许多单独的文件快得多。速度的增加通常至少是x2,尽管它随着服务器的容量而变化,服务器可以在一个客户机上打开并行套接字。
  • JavaScript代码及其依赖项都放在head元素中。
  • 默认情况下,Internet Explorer启用了安全选项,当试图从本地文件系统运行JavaScript时,这些选项会导致用户提示。可以在options菜单中禁用此功能,但是请注意,从本地文件系统运行不是mxGraph的部署场景,这只会在开发期间发生
  • 您的应用程序可以在HTML文件中编写并链接到应用程序中,也可以在单独的JavaScript源代码中编写并链接到HTML中,就像示例中的mxClient.js文件一样

2 mxGraph Deployment and Debugging

有两个版本的mxclient.js文件,一个用于生产使用,另一个用于开发/调试。javascript/src/js/mxClient.js是产品版本,javascript/debug/js/mxClient.js是开发版本。第一个版本删除了所有换行,以确保文件尽可能小。这有破坏大多数JavaScript调试器的副作用。在开发过程中,建议您使用包含换行符的调试版本,以便在支持的浏览器中进行调试

两个mxClient.js文件都是mxGraph的整个JavaScript源文件,为了减小文件大小,删除了所有的空格和注释。在调试时,如果需要调试到mxGraph库本身,则使用单独的源文件更容易。mxGraph的源代码版本包含javascript/devel目录中的source.zip文件中的完整源代码。将其解压缩到mxBasePath并删除完整的mxClient.js文件的负载,可以更容易地调试mxGraph。注意,源zip中的mxclient.js文件是一个引导文件,它加载所有其他JavaScript源代码

通过压缩代码,可以进一步提高客户机源代码的下载速度。所有现代浏览器都支持接收和解压服务器端压缩的传输,所有优秀的web服务器都支持检测那些不支持它的浏览器,并将未压缩的版本作为回退发送。

例如,在Apache web服务器上有一个mod_deflate模块,它的使用细节可以通过标准搜索找到。jgraph.com服务器使用这个模块,在任何受支持的浏览器中都没有出现任何问题的报告。
压缩的使用将mxClient.js文件大小从大约600KB减小到大约130KB。在大多数现代网络中,用户不会注意到这种差异,但是在某些情况下,更小的版本可能更好。

07-11
mxGraph库提供了一个强大的JavaScript绘图组件,适用于在网页中设计和编辑流程图、图表以及其他图形。它采用了一种模块化的架构设计,这使得它可以作为一个独立的图形编辑器使用,也可以被集成到其他复杂的应用程序中[^1]。 ### 入门指南 #### 安装与设置 首先需要从官方网站下载mxGraph库。下载包中包括用JavaScript编写的前端程序以及多个后端集成示例(如Java或C#)[^2]。安装完成后,可以通过引入mxGraph的核心文件来开始使用: ```html <script type="text/javascript" src="path/to/mxClient.js"></script> ``` 确保将`path/to/`替换为实际存放mxGraph库的位置。 #### 创建基本图表 一旦库已经加载,就可以创建一个简单的图表环境。下面是一个初始化图表的基本代码示例: ```javascript // 检查是否支持SVG if (!mxClient.isBrowserSupported()) { mxUtils.error('Browser is not supported!', 200, false); } else { var container = document.getElementById('graphContainer'); var graph = new mxGraph(container); // 开始编辑 graph.setEnabled(true); graph.setCellsEditable(true); } ``` 在这个例子中,我们检查浏览器是否支持SVG,并获取一个DOM元素作为图表容器。然后实例化一个新的`mxGraph`对象并启用编辑功能。 #### 添加形状和连接线 可以利用mxGraph提供的API添加节点和边。以下是如何向图表中添加矩形节点和一条连接线的例子: ```javascript var parent = graph.getDefaultParent(); 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); graph.insertEdge(parent, null, '', v1, v2); } finally { graph.getModel().endUpdate(); } ``` 这段代码会在指定位置插入两个文本框,并通过一条线连接它们。 #### 自定义样式 mxGraph允许用户自定义图形元素的外观。例如,你可以给特定的顶点应用图片背景: ```javascript题 // 假设state是某个顶点的状态信息 var image = graph.getImage(state); // 获取当前状态下的图像 console.log(image); // 输出图像URL或者null ``` 此外,还可以直接在XML配置文件里定义带有自定义属性的符号,比如标签、尺寸等: ```xml <add as="symbol"> <Symbol label="Symbol" customAttribute="whatever"> <mxCell vertex="1" connectable="1" style="symbol;image=images/event.png"/> <mxGeometry as="geometry" width="32" height="32"/> </Symbol> </add> ``` 以上XML片段展示了如何在一个`<Symbol>`标签内定义一个具有特定样式的可连接顶点,并且设置了宽度和高度。 ### 示例资源 对于想要深入了解mxGraph功能的人来说,官方提供的示例是非常宝贵的资源。这些示例不仅涵盖了基础操作,还涉及高级特性,如拖放、实时协作等功能。建议访问[www.longboo.com](http://www.longboo.com)主页下载mxGraph及相关实例以获得更丰富的学习材料[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值