用flex4开发网络拓扑图的总结

在flex4下开发的网络拓扑图的客户端。该应用主要是管理L2层核心交换机群的网络状况，具有网络状况查询功能和核心交换机的配置及提供、OAM监控等功能。在这讲述的是与网络拓扑结构的拖拽相关联的方面。
有关网络拓扑图的相关要求是比较普遍的需求，具体如下：

1、根据数据库中保存的节点和连线信息绘制网络的物理拓扑结构图
2、根据数据库中的VLAN信息绘制出网络的逻辑结构图
3、根据实际交换机的trap和syslog等信息实时更新网络拓扑结构图
4、在UI界面，可以快速且直观地查看网络拓扑的实时状况并根据自己的喜好调整拓扑图的显示方式
5、使用spring model来自动调整网络拓扑结构

网络拓扑结构的呈现大多数是一些复杂计算，在此要分享的是如何高效地实现拓扑图的显示与拖拽功能。

在我们以前的版本（用FLEX3开发）中也基本上实现了上面的功能，但在实际运用中有一下几个缺陷。

1、当核心交换机数量达到2000台时，刷新一次拓扑图需要10几秒，并且拉动滚动条几乎无反应
2、往拓扑图的边缘拖拽是经常出一些意想不到的bug
3、界面不美观，只有一些单调的线和几张显示网络节点的图
4、花费大量人力在细微调整网络图的呈现

上面几个问题，在技术上来说，主要是当时我们在项目启动时没有好好设计拓扑图部分的架构。技术上讲主要有以下几方面：

1、没有把拓扑图中的各元素作为对象管理，而是把一个画布作为唯一的画图对象，节点显示，连线，位移等一系列操作全部是在画布上一笔一划描出来。这就好比设计一个HTML的页面时，我们将单个元素本身都作为描绘对象，对一个input[text]等简单对象都要用线条来描绘。导致需要过多的运算。
2、当初没有很好理解图片的嵌入与链接的关系，也就没有很好地回避大量创建位图的问题；对于2000个节点，虽然每个只有20kb左右（当时认为非常小），但是对于这2000多个节点都去创建自己的图片实例的话，这个swf文件大概会达到40mb，对一个以浏览器为容器的应用来说，自然会影响用户体验。
3、与第一个问题相同，用于描画代码都是基于画布来的，所有的处理都是在同一层面，导致画布的处理代码异常难看懂，最好只能由一个专人负责修改层出不求的bug。

基于以上那么多问题，我当时作为一个PM只能听程序员说那部分代码太难，对这部分功能也只能是减少更能，降低要求（包括性能要求），以此令他们有勇气继续下去。
项目完成了，最近得了点空，作为一个不是很懂FLEX的WEB应用开发人员，自己构思了一个架构，自认为能够满足以下部分的期望。

1、实际减少画布的负担，将节点、连线的行为和属性设置交由自己的对象来处理
2、将图片以对象的形式来处理，并保证图片本身是Link到对象以较少swf的容量
3、参考spark.components.List的元代码，实现了一整套拖拽模型，用flash来帮我拖拽，以减少一些意想不到的bug。

由于本人不是flex专业人士，效果很平淡。但我想如果在这基础上能添加很多功能。
还望高手指点不足之处。

评论

1 楼 王文丰 2011-12-12  

路过，学习一下，最近网上看到了类似的拓扑图地址，HopeRunTopo，可能是开源做的玩意吧。效果挺好的，也仔细研究了点代码，发现不怎么会看懂，比如，拓扑图鼠标移动时，究竟里面是怎么听到这个事件的？希望楼主有空也看看这个开源组件，哈哈。大家互相学习一下