在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专业人士,效果很平淡。但我想如果在这基础上能添加很多功能。
还望高手指点不足之处。
分享到:
相关推荐
基于Flex的实时网络拓扑图呈现系统的设计与实现,章碧云,,本文介绍了一种基于Flex实现的实时拓扑图可视化呈现系统的设计与实现,通过XML文件实现通信接口的设计,利用MVC架构实现了Flex呈现系�
下载导入flex开发环境,即可使用。flex4 mysql dom4j
flex做的一个拓扑图demo,写的比较清晰。
此原文件主要是来做做谱图,代码精简,但是并不够强大,麻烦各位有空增强在上传,供给其他同胞们
Flex4开发与实践,
项目本人开发 ,数据库自己设计,导入myeclipse 可使用
毕业论文基于Flex的网络拓扑图的绘制工具
Flex4开发实践PPT,讲解Flex4开发实践,从基础到实践的分析讲解,让你对flex技术达到深入了解。
flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图...
flex CSV解析 拓扑图绘制
flex总制作可拖拽的网络拓扑图实例. 基于spark组件的拖拽功能的源码改写,具有比较完美的拖拽效果。
flex 地图开发demo,将arcgis和flex结合开发使用
flex 拓扑绘图
Flex 4 入门教程,简单而全面。适合于初学者。
NULL 博文链接:https://aideqianfang.iteye.com/blog/680401
flex做拓扑图的组件flex做拓扑图的组件flex做拓扑图的组件
Flex4开发与实践
Flex是Adobe公司推出的一系列工具和技术,使开发人员可以开发和部署可升级的富互联网应用程序(RIAs)
flex文档 ActonScript3.0 flex4各类电子书
FLEX4开发文档,绝对有用。。详细介绍了FLEX4新特性。内付完整实例,是学习FLEX的绝佳帮助文档。