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。在大多数现代网络中,用户不会注意到这种差异,但是在某些情况下,更小的版本可能更好。