`
hgfghw6
  • 浏览: 45385 次
  • 性别: Icon_minigender_2
  • 来自: 广州
社区版块
存档分类
最新评论

Flex拓扑图的设计(二)机房设计

 
阅读更多

  flex以及其优越的交互性,在flex3的时候已经得到大家好评,但是很多朋友都只是局限于普通topo的使用。我今天给大家分享一个机房topo设计,机房topo也是用最新的flex4开发的。也已其巨大交互性多次让客户得到好评。
  首先大家看一个成熟的机房topo图。
  
  这个视图特点:
  1、视图没有采用类似的立体的效果,但是让视图简单     
  2、视图没有采用2层的结构,让视图变得直观(因为很多客户都是要求直接可以看到某个设备再某个机柜)
  3、视图分为2个模式,编辑模式和管理模式,编辑模式可以在左边的未分配设备拖到视图里面。
  4、视图的设备都是可以拖拉,但是在加入视图时候要确定机柜
  增加设备过程
  
  这个视图有一个比较显著的特别,视图的设备和图例是无限扩展的,每次加入设备就可以选择这个设备的图例,但是图例是通过外部xml控制。如果每次遇到不同机房有不同的设备都可以扩展展示,力求给予客户最真实的数据。
  简单xml实现
  
  该机房的实现xml    width="130" x="25" y="6" alias="5555" id="10000" height="300"> width="120" height="16" color="0xd71345" info="服务器_p170_192.168.2.233" alias="p170" category="4" image="/resource/image/room/service.jpg" status="Down" categoryName="服务器" /> width="120" height="16" color="0x000000" info="服务器_NMS4_192.168.2.18有2个应用:" alias="NMS4" category="4" image="/resource/image/room/service.jpg" status="Up" categoryName="服务器">    width="120" height="16" color="0xd71345" info="服务器_OA-SERVER_192.168.2.19有1个应用:" alias="OA-SERVER" category="4" image="/resource/image/room/service.jpg" status="Up" categoryName="服务器">                width="130" height="300" x="0" y="0" label="添加机柜" icon="/resource/image/room/cabinet_16.gif" color="blue" category="999" />              篇幅有限,迟点再把余下的一些代码展示
分享到:
评论

相关推荐

    flex拓扑图

    "flex拓扑图"可能是指使用Flex技术来创建动态、交互式的网络拓扑图表。Flex是一种基于ActionScript编程语言和Adobe Flash Player运行时的开源框架,主要用于构建富互联网应用程序(Rich Internet Applications,RIAs...

    flex 拓扑图dome

    8. **响应式设计**:为了适应不同屏幕尺寸和分辨率,Flex应用可以采用响应式设计原则,确保拓扑图在各种设备上都能良好显示。 9. **性能优化**:对于大型拓扑图,性能优化至关重要。可以使用缓存策略、分层渲染或...

    flex做的拓扑图

    在这个“flex做的拓扑图”项目中,我们可以了解到如何利用Flex技术来创建交互式的网络拓扑图表。拓扑图在IT行业中广泛应用于网络设备布局、数据流可视化以及系统架构展示等领域,它可以帮助用户直观地理解复杂的系统...

    flex 拓扑绘图

    Flex,作为一种基于ActionScript 3.0的开放源代码框架,提供了强大的图形渲染和交互能力,因此成为了绘制拓扑图的优秀工具。 1. **Flex基础** Flex是Adobe公司推出的一种用于构建富互联网应用程序(RIA)的开发...

    Flex拓扑图精品文档

    ### Flex拓扑图精品文档知识点概述 #### 一、Flex拓扑图的两种实现方式 Flex拓扑图作为网络管理中的重要工具,在IT领域扮演着关键角色。它可以帮助技术人员直观地理解和管理网络结构。根据提供的文档,Flex拓扑图...

    论文研究-基于Flex的实时网络拓扑图呈现系统的设计与实现 .pdf

    基于Flex的实时网络拓扑图呈现系统的设计与实现,章碧云,,本文介绍了一种基于Flex实现的实时拓扑图可视化呈现系统的设计与实现,通过XML文件实现通信接口的设计,利用MVC架构实现了Flex呈现系�

    如何使用flex 开发拓扑图

    总的来说,使用Flex开发拓扑图涉及到ActionScript编程、图形库的集成、数据结构的设计、事件处理以及与服务器的交互等多个方面。通过学习和实践,你可以创建出功能丰富、交互性强的拓扑图应用程序。

    Flex4 做的系统拓扑图

    这个"Flex4做的系统拓扑图"项目,结合了Flex4的技术特性与数据库设计,提供了在MyEclipse集成开发环境中可运行的应用。 Flex4的核心是ActionScript 3.0,这是一种面向对象的编程语言,它为开发人员提供了丰富的功能...

    flex做拓扑图的组件

    综上所述,构建Flex拓扑图组件涉及图形渲染、交互设计、数据绑定、组件自定义、布局管理、动画效果、状态管理和性能优化等多个方面。通过深入理解和熟练运用这些知识点,你可以创建出功能强大、交互性强的拓扑图组件...

    Flex 画拓扑图两个库(Spring 和一个高人写的库)

    总之,使用Flex绘制拓扑图是一个涉及图形设计、数据绑定和交互实现的综合过程。Spring库和高手编写的库为我们提供了强大的工具,通过深入学习和实践,我们可以创造出功能丰富、视觉效果出色的拓扑图应用。

    flex4 系统拓扑图

    这个“flex4 系统拓扑图”可能是一个使用Flex4技术开发的可视化工具,用于展示和管理复杂的系统架构或者网络拓扑结构。通过这个系统,用户可能可以动态地查看、配置和监控网络设备、服务器、服务等组件的状态。 在...

    Flex拓扑图组件-iolive

    免费的Flex拓扑组件,可用于拓扑图、关系图、流程图的绘制,不输与Twaver的展现效果及完善的扩展机制和中文API文档 详细效果 iolive.duapp.com

    flex 画架构图 拓扑图

    在“flex 画架构图 拓扑图”的场景中,WorkFlowDesigner可能是一个自定义的Flex组件或者工具,允许用户通过拖放操作来设计和布局架构和拓扑元素。这样的工具通常包括节点(代表系统组件)、连接线(表示组件间的依赖...

    Flex+Java开发拓扑图

    在本项目中,Flex被用来设计和实现拓扑图的显示部分,提供良好的可视化效果和用户交互体验。 ActionScript是Adobe Flash Player和Adobe AIR支持的脚本语言,它为Flex提供了编程能力。在这个拓扑图项目中,...

    flex手工画拓扑图例子源码

    综上所述,"flex手工画拓扑图例子源码"是一个学习Flex图形绘制、交互设计和数据驱动UI的好实例。通过深入研究这个Demo,开发者不仅可以提升Flex编程技能,还能掌握如何在实际项目中构建交互式的拓扑图应用。

    flex CSV解析 拓扑图绘制

    总之,使用Flex进行CSV解析和拓扑图绘制涉及到了数据读取、解析、处理和图形化展示等多个技术环节,对于理解和操作IT系统具有重要的实用价值。通过学习和实践这些技能,开发者能够创建出直观且功能强大的数据可视化...

    flex流程拓扑设计

    在Flex中,拓扑设计允许开发者自由布局任务节点,形成有向无环图(DAG),以表示任务的执行顺序和依赖关系。 3. **OrchestraDesigner**:根据提供的文件名,OrchestraDesigner可能是用于设计Flex流程的工具。它可能...

    flex画拓扑图的第一步

    总结来说,使用Flex制作拓扑图涉及了Flex基础组件的使用、图形绘制、事件处理、数据结构设计和用户交互等多个方面,是一个集成了Flex核心技术的综合性项目。通过这样的实践,开发者不仅可以提升Flex技能,还能深入...

    flex拓扑展示的例子1

    5. **响应式设计**:Flex支持不同屏幕尺寸和分辨率,因此在设计拓扑图时,需要考虑其在不同设备上的显示效果,确保布局的适应性和可读性。 6. **动画效果**:为了提升用户体验,Flex可以添加平滑的动画效果,如节点...

    flex拓扑展示的例子

    3. **图形绘制**:在Flex中,可以使用Graphics API来绘制自定义图形,如线条、形状和曲线,这对于构建拓扑图至关重要。例如,使用beginPath、moveTo、lineTo等方法来绘制节点和连接线。 4. **数据绑定**:Flex支持...

Global site tag (gtag.js) - Google Analytics