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" /> 篇幅有限,迟点再把余下的一些代码展示
首先大家看一个成熟的机房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" /> 篇幅有限,迟点再把余下的一些代码展示