TWaver学习笔记1-TWaver入门

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;