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做的一个拓扑图demo,写的比较清晰。
flex 拓扑绘图
基于Flex的实时网络拓扑图呈现系统的设计与实现,章碧云,,本文介绍了一种基于Flex实现的实时拓扑图可视化呈现系统的设计与实现,通过XML文件实现通信接口的设计,利用MVC架构实现了Flex呈现系�
flex拓扑 详细设计参考文档 文档仅供参考
NULL 博文链接:https://tydldd.iteye.com/blog/2041060
flex做拓扑图的组件flex做拓扑图的组件flex做拓扑图的组件
免费的Flex拓扑组件,可用于拓扑图、关系图、流程图的绘制,不输与Twaver的展现效果及完善的扩展机制和中文API文档 详细效果 iolive.duapp.com
在其他论坛上一个高手分享的,可以看一下 很多东西还是值得借鉴的
flex CSV解析 拓扑图绘制
flex流程拓扑设计
flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图...
flex设计模式flex设计模式flex设计模式flex设计模式flex设计模式flex设计模式flex设计模式flex设计模式flex设计模式flex设计模式flex设计模式flex设计模式flex设计模式flex设计模式flex设计模式flex设计模式
项目本人开发 ,数据库自己设计,导入myeclipse 可使用
下载导入flex开发环境,即可使用。flex4 mysql dom4j
这里面包含了两个类库(Spring和YI个高人写的库)大家可以参考下对于那些没有积分的友友可以发邮件索要 ownwell@126.com 一起学习flex画图的相关的
基于网上一个WorkFlowDesigner的资源
NULL 博文链接:https://aideqianfang.iteye.com/blog/680401
flex拓扑展示的例子
flex拓扑展示的例子
这个真实项目中的一个拓扑图Demo的前期版。