`
xierh21
  • 浏览: 24009 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

用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专业人士,效果很平淡。但我想如果在这基础上能添加很多功能。
还望高手指点不足之处。
  • dragImageSample-src.zip (16.1 KB)
  • 描述: 源码未经详细测试,本人不保证正确性。
  • 下载次数: 292
分享到:
评论
1 楼 王文丰 2011-12-12  
路过,学习一下,最近网上看到了类似的拓扑图地址,HopeRunTopo,可能是开源做的玩意吧。效果挺好的,也仔细研究了点代码,发现不怎么会看懂,比如,拓扑图鼠标移动时,究竟里面是怎么听到这个事件的?希望楼主有空也看看这个开源组件,哈哈。大家互相学习一下

相关推荐

    flex 拓扑绘图

    Flex拓扑绘图是一种在...总结,Flex拓扑绘图技术结合了Flex的图形能力和数据处理能力,使得在RIA中构建交互式、动态的拓扑图成为可能。通过理解并掌握上述知识点,开发者可以创建出高效、直观的网络或系统管理工具。

    TWaver_Flex中文帮助文档

    TWaver Flex中文帮助文档是为开发网络拓扑图提供指导的重要参考资料,它由ServaSoftware公司发布。文档涵盖了TWaver Flex的多个方面,包括开发环境、设计模式与结构、数据模型等。以下是对文档中提到的各个知识点的...

    googlecode上的ravis,实现网络拓扑DEMO

    Ravis是一个专门用于创建和展示网络拓扑图的开源工具。它利用Flex技术,这是一种基于ActionScript的富互联网应用程序(RIA)开发框架,能够为用户提供丰富的图形界面和交互体验。Ravis的设计目标是简化网络拓扑的...

    twaver for flex 开发手册

    这些控件允许开发者在 Flex 应用程序中轻松实现复杂的网络拓扑图、表格、树形结构等图形界面,从而极大地提高了应用程序的可读性和可用性。 #### 二、TWaverFlex 快速入门 **TWaverFlex 快速上手**:为了帮助初学...

    TWaver Flex网元任意位置添加icon

    标题“TWaver Flex网元任意位置添加icon”指的是在使用TWaver Flex开发图形化界面时,如何在图表或网络拓扑图的各个元素(网元)上自由地添加图标(icon)。TWaver是一款强大的可视化工具,它允许开发者创建交互式的...

    springgraph 带API

    **SpringGraph API 深度...总结来说,SpringGraph API 提供了一整套工具,帮助开发者高效地创建和管理拓扑图。通过深入理解和实践API、示例代码以及库文件,你可以构建出具有专业视觉效果和强大交互功能的Flex应用。

    BirdEye-Ravis.swc

    拓扑图是一种用图形表示网络结构的方法,它可以清晰地显示节点(如服务器、设备)之间的连接关系,帮助系统管理员、网络工程师和开发者理解和管理复杂的网络布局。 "BirdEye-Ravis"的特点在于其动态性和交互性。...

    TWaver_Web_4.0中文开发手册

    - **概述**:TWaver Web 是一种用于浏览器中展示图形化界面的组件,特别适用于展示电信网络管理中的拓扑图和设备面板图。TWaver Web 的广义概念涵盖了多个版本,包括 TWaver Web SVG、TWaver Flex 和 TWaver ...

    ArcGIS电子地图制作与发布流程

    7. Web应用程序开发:利用ArcGIS API for JavaScript、Flex、Silverlight等开发Web应用程序,将地图服务嵌入网页,实现交互式地图查看、查询、分析等功能。 8. Web GIS平台:ArcGIS Online或ArcGIS Enterprise...

    TWaver文档

    - 特别值得注意的是TWaver的**网络拓扑**组件,它能够以图形的方式展示网络中的各种设备及其连接关系,对于网络管理和监控非常重要。 #### 基本架构 - TWaver采用了MVC(Model-View-Controller)架构,这使得用户...

Global site tag (gtag.js) - Google Analytics