Flex拓扑图的设计(二)机房设计
2011-03-16 13:29
218 查看
flex以及其优越的交互性,在flex3的时候已经得到大家好评,但是很多朋友都只是局限于普通topo的使用。我今天给大家分享一个机房topo设计,机房topo也是用最新的flex4开发的。也已其巨大交互性多次让客户得到好评。
首先大家看一个成熟的机房topo图。
![](http://hi.csdn.net/attachment/201103/16/0_1300252605aJt8.gif)
这个视图特点:
1、视图没有采用类似的立体的效果,但是让视图简单
2、视图没有采用2层的结构,让视图变得直观(因为很多客户都是要求直接可以看到某个设备再某个机柜)
3、视图分为2个模式,编辑模式和管理模式,编辑模式可以在左边的未分配设备拖到视图里面。
4、视图的设备都是可以拖拉,但是在加入视图时候要确定机柜
增加设备过程
![](http://hi.csdn.net/attachment/201103/16/0_1300252948SEze.gif)
这个视图有一个比较显著的特别,视图的设备和图例是无限扩展的,每次加入设备就可以选择这个设备的图例,但是图例是通过外部xml控制。如果每次遇到不同机房有不同的设备都可以扩展展示,力求给予客户最真实的数据。
简单xml实现
![](http://hi.csdn.net/attachment/201103/16/0_1300253195U6x9.gif)
该机房的实现xml
篇幅有限,迟点再把余下的一些代码展示
首先大家看一个成熟的机房topo图。
![](http://hi.csdn.net/attachment/201103/16/0_1300252605aJt8.gif)
这个视图特点:
1、视图没有采用类似的立体的效果,但是让视图简单
2、视图没有采用2层的结构,让视图变得直观(因为很多客户都是要求直接可以看到某个设备再某个机柜)
3、视图分为2个模式,编辑模式和管理模式,编辑模式可以在左边的未分配设备拖到视图里面。
4、视图的设备都是可以拖拉,但是在加入视图时候要确定机柜
增加设备过程
![](http://hi.csdn.net/attachment/201103/16/0_1300252948SEze.gif)
这个视图有一个比较显著的特别,视图的设备和图例是无限扩展的,每次加入设备就可以选择这个设备的图例,但是图例是通过外部xml控制。如果每次遇到不同机房有不同的设备都可以扩展展示,力求给予客户最真实的数据。
简单xml实现
![](http://hi.csdn.net/attachment/201103/16/0_1300253195U6x9.gif)
该机房的实现xml
<?xml version="1.0" encoding="utf-8"?> <RoomMap id="14" label="ttt" alarmUrl="/alarmMsg_getRoomAlarmXML.do?id=14" alarmStatUrl="/alarmMsg_getRoomAlarmStatXML.do?id=14" saveUrl="/room/roommap_save.do?id=14"> <device> <node info="" width="130" x="25" y="6" alias="5555" id="10000" height="300"> <node id="30" x="5" y="5" 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="服务器" /> <node id="31" x="5" y="28" 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="服务器"> <node id="42" alias="nms4_18" category="53" ip="192.168.2.18" image="/resource/image/room/mysql_16.gif" info="MySQL_nms4_18_192.168.2.18" status="Up" detailUrl="/menu_getDetail.do?elementId=#id" /> <node id="40" alias="abccc" category="71" ip="192.168.2.18" image="/resource/image/room/httpurl_16.gif" info="HTTP URL_abccc" status="Up" detailUrl="/menu_getDetail.do?elementId=#id" /> </node> <node id="26" x="5" y="54" 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="服务器"> <node id="41" alias="oa" category="71" ip="192.168.2.19" image="/resource/image/room/httpurl_16.gif" info="HTTP URL_oa" status="Down" detailUrl="/menu_getDetail.do?elementId=#id" color="0xd71345" /> </node> </node> </device> <deviceTree> <node type="root" icon="/resource/image/room/alloted_16.gif" label="已分配设备"> <node type="root" icon="/resource/image/room/cabinet_16.gif" id="10000" label="5555"> <node type="node" icon="/resource/image/room/server_16.gif" id="30" label="p170" /> <node type="node" icon="/resource/image/room/server_16.gif" id="31" label="NMS4" /> <node id="26" label="OA-SERVER" icon="/resource/image/room/server_16.gif" type="node" /> </node> </node> </deviceTree> <idleDeviceTree> <node label="未分配设备" type="root" icon="/resource/image/room/idle_16.gif"> <node width="130" height="300" x="0" y="0" label="添加机柜" icon="/resource/image/room/cabinet_16.gif" color="blue" category="999" /> <node id="13" info="路由交换机_3550###_192.168.1.1" icon="/resource/image/room/route_switch_16.gif" ip="192.168.1.1" label="3550###" category="2" categoryName="路由交换机" /> <node id="18" info="交换机_SW_1_192.168.1.2" icon="/resource/image/room/switch_16.gif" ip="192.168.1.2" label="SW_1" category="3" categoryName="交换机" /> <node id="25" info="交换机_SW_2_192.168.1.3" icon="/resource/image/room/switch_16.gif" ip="192.168.1.3" label="SW_2" category="3" categoryName="交换机" /> <node id="29" info="路由交换机_Quidway_192.168.1.8" icon="/resource/image/room/route_switch_16.gif" ip="192.168.1.8" label="Quidway" category="2" categoryName="路由交换机" /> <node id="27" info="服务器_p560_192.168.2.133" icon="/resource/image/room/server_16.gif" ip="192.168.2.133" label="p560" category="4" categoryName="服务器" /> <node id="24" info="路由器_C3640_192.168.100.1" icon="/resource/image/room/router_16.gif" ip="192.168.100.1" label="C3640" category="1" categoryName="路由器" /> </node> </idleDeviceTree> </RoomMap>
篇幅有限,迟点再把余下的一些代码展示
相关文章推荐
- Flex拓扑图设计(三)部分核心代码 完结
- 某公司网络设计及机房装修方案说明(含拓扑图、主线图、机柜布局图)
- Flex拓扑图设计-有趣的鹰眼
- Flex拓扑图的设计(一)
- Flex拓扑图设计-有趣的鹰眼
- 机房通信网设计
- 写了一个Flex的web流程设计器原型系统
- 机房通信网设计
- Flex外观设计
- flex拓扑图日记,需要删除array里的接点线段[转]
- 机房收费系统完美设计——获得系统时间
- 机房收费系统=三层+设计模式
- 机房收费系统--界面设计,人与软件之间的问题
- 免费的Flex拓扑图框架iolive
- Flex皮肤设计简单实例教程
- 数据中心机房施工设计的规范要求
- 机房建设效果图制作|机房鸟瞰图设计|教程文章
- 参观型机房的装修设计探讨
- 机房收费系统---数据库设计说明书
- 机房收费系统数据库概念设计模型——ER图