MxGraph从入门到精通之1：运行HelloWorld示例程序

2024-06-07 03:24:29

简介

MxGraph包括了一个JavaScript编写的客户端软件，以及一系列各个语言写的后端。客户端是一个图形组件，它需要一个web服务器把相关的文件传给客户端或者直接从本地文件系统运行起来(如下文介绍的通过直接打开本地HTML文件运行MxGraph)。后端可以原样使用（如下文介绍的通过Java后端运行MxGraph）,或者嵌入到现有的服务器应用程序中。MxGraph的架构图如下：

运行HelloWorld程序

在介绍MxGraph的原理和代码实现之前，我们先把它跑起来看一看。运行MxGraph有两种方式，一种是直接在本地打开HTML文件，另一种是把通过后端服务器（Java,PHP等）生成相应的数据返回到浏览器上。两种方式的运行效果如下：

直接打开本地HTML文件

2. 通过访问后端服务器

直接打开本地HTML文件的方式就不必多说了，下面主要介绍第二种方式。

步骤

1 下载项目源码

这步简单，使用git直接下载源码：

git clone https://github.com/jgraph/mxgraph.git

2 使用Idea打开项目

实际上使用Eclipse也可以，官方文档说明就是用Eclipse的，但我用Idea打开用起来也完全没问题。这一步也简单，打开Idea，点击File->Open->选择上一步下载的源码根目录，打开后如下图：

3 运行目录下的示例程序

这一步也很简单，点击项目目录java->examples->com.mxgraph.examples->web->Main，Main是个Java文件，点进来看到有个main方法，很开心，这是个可以直接运行的文件！所以点击运行main方法，如下：

4 打开浏览器

如果上一步运行顺利的话，就可以在下面的控制台中看到以下输出：
直接Ctrl+点击一下即可跳到浏览器界面：

点击任意连接就可以进入到相应的示例程序中，示例程序中的流程图还可以拖着玩：

MxGraph从入门到精通之1：运行HelloWorld示例程序相关推荐

MxGraph从入门到精通之2：HelloWorld程序解析
文章目录通过上一篇文章MxGraph从入门到精通之1:运行HelloWorld示例程序,我们已经把MxGraph运行起来,通过查看hellloworld.html可以总结该程序运行的核心步骤主要有以 ...
MxGraph从入门到精通之3：设置图形样式
文章目录修改默认样式修改顶点(Vertex)的默认样式修改边(Edge)的默认样式设置节点样式创建指定样式的节点更新已有节点样式常用样式汇总 mxConstants.STYLE_SHAP ...
【FastDDS学习笔记】HelloWorld示例程序编译和运行
目录第一章:[FastDDS学习笔记]Ubuntu22上安装fastDDS环境第二章:[FastDDS学习笔记]HelloWorld示例程序编译和运行第三章:[FastDDS学习笔记]Fast- ...
OpenCV4每日一练day2：运行OpenCV示例程序(边缘检测、kmeans聚类)
一:将OpenCV自带的C++示例程序添加进VS2015源文件二:运行边缘检测示例程序默认调用的图片是这样的,要用我们自己图片的话要进行默认参数的修改: step1:把图片放在项目源文件中: st ...
vscode运行helloworld.java程序
摘要:常见的开发java程序的IDE有很多种,本文推荐vscode来运行一些简单的java程序,例如helloworld.只需要简单的几步,就可以使vscode运行helloworld.java.老生 ...
MxGraph从入门到精通之5：在Vue项目中使用MxGraph
第一步:安装npm包 npm install mxgraph 第二步:在mxgraph.vue中使用mxgraph <template><div><div ref=&qu ...
MxGraph从入门到精通之4：布局
文章目录 mxCircleLayout-圆形布局 mxCompactTreeLayout-树状布局 mxFastOrganicLayout-组织状布局本文介绍MxGraph支持的几种常用布局方式. ...
OpenCV4每日一练day3：运行OpenCV示例程序(物体跟踪)
step1:准备好摄像头,或用电脑自带摄像头也可以.这里使用的是英特尔D435i. step2:找到OpenCV自带的物体跟踪demo--camshiftdemo.cpp,添加到VS2015源文件中 ...
安装HElib并运行示例程序
文章目录 1. HElib简介 2. HElib安装的前期准备 2.1. git 安装/升级 2.2. GNU make 安装/升级 2.3. g++ 安装/升级 2.4. cmake 安装/升级 2 ...

最新文章

热门文章