TWaver Flex视图组件
TWaverFlex扩展了Flex组件，定义了Network, Table, Tree...能通过DataBox驱动的组件，其中Network是展示拓扑图的图形化组件，Table, Tree基于Flex原有的DataGrid和Tree，封装了更多特性，提供了更多的方法，方便用户使用
?
Network组件概要
Network组件用于图形化呈现网元信息，具有网元过滤，子网切换，背景图支持，缩放查看，多图层机制，Attachment组件显示等功能，还提供了丰富的鼠标交互和动画效果，是网管系统中最直观、最美观的展示平台。此外Network还提供了上百个函数和属性，用户可以灵活的配置和扩展，以满足特殊的应用需求。
下面先展示一张示例截图，简要介绍Network中几个常用的功能，详细功能将在以后的章节介绍。
利用Network组件可以轻易的做出下面拓扑图效果
?
Network的组件模型和层次结构
Network继承于flex的Canvas，其下包含多个容器组件，分别放置不同类型的组件。 network 组件结构:
Network
-> rootCanvas //根容器面板 -> topCanvas //顶层面板
-> attachmentCanvas //附件面板
-> layerCanvas //网元视图面板，用于放置ElementUI,
-> layer n //ElementUI的层次关系由ElementBox.layerBox来管理
-> layer ... -> layer 0
-> bottomCanvas //底层容器面板 -> backgroundCanvas //背景层面板
拓扑图中的网元组件
Network中每个网元对应一个ElementUI的视图组件，通过操作网元的数据模型（Element）可以反映到这个视图组件的呈现效果，Network中可以通过下面的方法得到网元对应的这个组件。
public function getElementUI(element:IElement):ElementUI
Attachment组件
拓扑图中的网元不只能关联ElementUI组件，还可以绑定多个附件（Attachment）组件来表现属性，如网元标签，告警冒泡都是通过附件机制实现的，用户可以给网元定义新的附件以表现网元的属性
Attachment继承于UIComponent，上面可以添加任意Flex组件，通过设置
showInAttachmentCanvas属性可以控制其是添加到ElementUi还是独立加入到拓扑图中的附件层画布（attachmentCanvas）中 twaver.network.ui.Attachment
//Attachment构造函数
public function Attachment(elementUI:ElementUI, showInAttachmentCanvas:Boolean = false)
twaver.network.Network
//network中的附件层画布，附件组件可以添加到ElementUI组件下， //也可以与ElementUI组件分离，直接添加在拓扑图的附件层画布中，这样可以保证附件置顶显示
public function get attachmentCanvas():Canvas
twaver.network.ui.ElementUI //ElementUI中可以获取网元附件的集合
public function get attachments():ICollection
?
Network常用功能
切换交互模式
Network中切换交互模式，能实现不同模式下不同的鼠标交互效果，最常用到的是选择模式（也叫默认模式）和编辑模式，用户也可以通过实现InteractionHandler接口，处理鼠标键盘事件，以定制自己的交互模式，这些InteractionHandler可以叠加使用，各种交互可以灵活编制在一起。
//切换到为默认交互模式
public function
setDefaultInteractionHandlers(lazyMode:Boolean = false):void //切换到编辑模式
public function
setEditInteractionHandlers(lazyMode:Boolean = false):void //切换到创建节点交互模式
public function
setCreateNodeInteractionHandlers(nodeClass:Class = null):void
//切换到创建连线的交互模式
public function
setCreateLinkInteractionHandlers(linkClass:Class = null):void
//切换到创建ShapeNode交互模式
public function
setCreateShapeNodeInteractionHandlers(shapeNodeClass:Class = null):void
过滤器的使用
network.visibleFunction = function(node:IElement):Boolean{ retrun node.childrenCount > 0;
相关推荐：
loading