TWaver学习笔记1-TWaver入门

Twaver

入门

快速上手

下面我将分步骤讲解

?

首先新建一个MXML Application: HelloTWaverFull.mxml，设置twaver命名空间

* 在左边添加树组件，中间添加拓扑图组件，下方添加一个表格组件，设置好布局，如下：

?

设置拓扑图背景颜色，添加表格列

?

监听applicationComplete，添加网元数据

import twaver.network.Network; private var box:ElementBox; private var number:int;

private function init():void {

number=0;

box=network.elementBox; tree.dataBox=box; table.dataBox=box;

var group:Group=new Group(); group.name=\; box.add(group);

group.addChild(createTWaverNode(\,200,100)); group.addChild(createTWaverNode(\,300,130)); group.expanded=true;

var from:Node=createTWaverNode(\,30,30); var to:Node=createTWaverNode(\,70,150); var link:Link=new Link(from,to); link.name=\; box.add(link); }

private function createTWaverNode(name:String,x:int,y:int):Node {

var node:Node=new Node(); node.name=name;

node.setClient(\,number++); node.setLocation(x,y); box.add(node);

return node; } ]]>

基础

TWaver设计模式

TWaver Flex采用基本的模型视图分离的设计思想，通过MV的组合嵌套，实现了以twaver.Data为基本数据元素，twaver.DataBox为基本数据容器的客户端数据模型，以及基本图形twaver.network.ui.ElementUI和数据容器组件（twaver.Network, twaver.Tree, twaver.Table...）的视图系统，三者共同构成了TWaver Flex的架构体系。

Twaver数据模型

TWaverFlex的基本数据元素是twaver.IData，基本数据容器定义为twaver.DataBox，基于这两类基本元素，TWaverFlex预定义了一系列业务对象，视图网元和管理容器，例如告警（twaver.IAlarm）和告警容器（twaver.AlarmBox），图层（twaver.ILayer）与图层管理容器（twaver.LayerBox） ，拓扑网元（twaver.IElement）和拓扑管理容器（twaver.ElementBox）......

数据元素结构图

数据管理容器结构图

其中拓扑管理容器（twaver.ElementBox）整合了其他几种容器，提供了丰富的拓扑元素（Dummy, Node, Link, Bus, ShapeNode, ShapeLink, Follower, Rack, Shelf, Slot, Card, Port, Grid, Group, SubNetwork......），为网管界面开发提供了强大的设计模型和业务功能的基础支持。 TWaverFlex以twaver.IData为最基本的数据单元，扩展定义了一系列具有图形和业务意义的数据类型，包括IAlarm, ILayer, IElement...

数据元素

TWaverFlex以twaver.IData为最基本的数据单元，扩展定义了一系列具有图形和业务意义的数据类型，包括IAlarm, ILayer, IElement...

?

twaver.IData

IData是TWaverFlex的数据元素基类接口，twaver.Data是对其实现类，定义了id, name, icon, toolTip, parent, children等基本属性，对事件派发做了封装，并支持xml数据的导入导出，为TWaver各平台间数据的可序列化奠定了基础。

Data继承于flash.events.EventDispatcher，这使他具有事件派发和监听的功能，可以通过调用下面的方法派发事件或者添加实现监听器：

flash.events.EventDispatcher#public dispatchEvent(event:Event):Boolean

flash.events.EventDispatcher#addEventListener(type:String, listener:Function,

useCapture:Boolean=false, priority:int=0, useWeakReference:Boolean=false):void

Data还实现了twaver.IData接口，实现了对属性变化事件的派发和监听

function dispatchPropertyChangeEvent(property:String, oldValue:Object, newValue:Object):Boolean;

function addPropertyChangeListener(listener:Function, priority:int = 0

, useWeakReference:Boolean = false):void;

function

removePropertyChangeListener(listener:Function):void;

此外，Data中还定义了其他功能函数

function get childrenCount():int; function get hasChildren():Boolean;

function isDescendantOf(data:IData):Boolean; function isParentOf(data:IData):Boolean; function isRelatedTo(data:IData):Boolean;

function toXML(context:XMLContext, newInstance:IData):void;

function parseXML(context:XMLContext, xml:XML):void;

function setPropertyValue(property:String, value:Object):void;

function getPropertyValue(property:String):Object;

下面分别介绍各个实现类

?

twaver.ILayer

图层，用于TWaver的图层管理，Layer实现了twaver.ILayer接口，有三个特殊属性：visible, editable, movable。TWaverFlex中的层次关系由LayerBox来管理，默认的层次顺序由父子关系和先后顺序决定，在拓扑图中，每个Element通过设置layerId与某个layer相关联以控制网元的显示层次。

?

twaver.IAlarm

告警，用来表示网管系统中设备故障或者网络异常的数据模型，基本实现类是Alarm。告警与Element相关联，用以反映网元的告警状态，Alarm中定义了级别，是否已清除，是否已确认以及相关联的网元编号。

TWaverFlex预定义了六种告警级别，告警级别的value属性可表示告警的严重程度，默认value值越大，告警越严重。 Severity CRITICAL MAJOR MINOR WARNING

Letter Value Color C M m W

500 400 300 200 100 0

Red Orange Yellow Cyan Purple Green

INDETERMINATE N CLEARED

R

TWaver中告警使用AlarmBox进行管理，告警与网元通过AlarmBox来相关联，两者不直接引用，与网元直接引用的是AlarmState，用来反映新发告警的级别和数量

?

twaver.IElement

IElement是TWaver中最重要的数据元素，Element是其实现类，用于表示拓扑图中的网元对象，如节点，连线，子网，分组，板卡.......

TWaver预定义了丰富的网元类型（Dummy, Node, Link, Bus, ShapeNode, ShapeLink, Follower, Rack, Shelf, Slot, Card, Port, Grid, Group, SubNetwork......），每一种网元对应一个ElementUI类，对应网元在拓扑图中的呈现组件类型，两者构成一个模型与视图分离的模型结构。 通过设置网元的属性和样式可以表现出丰富的呈现效果和特性，用户也可以扩展这些预定义的Element，或者定制自己的ElementUI，已应对特殊的业务呈现需求。

Element数据可以用ElementBox管理， ElementBox可以驱动twaver.Network, twaver.Tree, twaver.Table等多种视图

Dummy

在拓扑图中不可见，可在树，表格中显示，通常用来表示无拓扑意义的逻辑分组

Node

表示拓扑图中的一个节点，是其他节点的基类

Link

表示连线，是其他连线类型的基类

Follower

表示跟随者，可以附着在另一个Node（称之为宿主节点）上，宿主节点移动，Follower也跟随着移动

Bus

继承于ShapeNode，是一种布局类型节点，可以与连接在它上面的节点们排布出总线布局那样的效果

box.add(node1);

var node2:Node=new Node(); node2.name=\;

node2.setLocation(200,100); box.add(node2);

var link:Link=new Link(node1,node2); link.name=\; box.add(link);

network.elementBox=box; tree.dataBox=box; } ]]>

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;

};

列举部分属性

Network有上百个属性，这里列举一部分

//设置当前子网

public function get/set currentSubNetwork():ISubNetwork //进入上级子网

public function upSubNetwork(animate:Boolean = false):void

//添加/删除交互（鼠标键盘）监听器

public function addInteractionListener(listener:Function, priority:int = 0, useWeakReference:Boolean = false):void public function

removeInteractionListener(listener:Function):void

//刷新网元视图

public function invalidateElementUI(element:IElement):void //获得网元视图

public function getElementUI(element:IElement):ElementUI{

//缩放操作

public function get zoom():Number public function zoomIn():void public function zoomOut():void public function zoomReset():void public function zoomOverview():void

//获得拓扑图组件中的面板容器

public function get rootCanvas():Canvas public function get topCanvas():Canvas

public function get attachmentCanvas():Canvas public function get layerCanvas():Canvas public function get bottomCanvas():Canvas public function get backgroundCanvas():Canvas

Table组件介绍

twaver.controls.Table组件继承于Flex的DataGrid，实现了与DataBox的数据绑定，可以作为任何DataBox（LayerBox, AlarmBox, ElementBox）模型的视图组件。

twaver.controls.Table对列配置和操作做了简化处理，可以更方便的显示网元的样式属性，还扩展了一些Renderer和Editor，使用户能更简洁的创建表格，展示数据信息。 table示例截图

!table.png!Table的使用与DataGrid相同

需要注意的是列配置部分，twaver.controls.Table中对列做了改进，如 dataField=\表示将通过调用item.getClient(\来获得和修改单元格的数值，这样就方便于用表格呈现网元的样式属性 过滤器的使用

table.visibleFunction = function(data:IData):Boolean{ retrun data.childrenCount > 0; };

下面的例子显示两列

自定义列

package table {

import twaver.controls.TableColumn; import mx.core.ClassFactory;

public class DataColumn extends TableColumn {

public function DataColumn(columnName:String=null) {

super(columnName);

this.itemRenderer = new ClassFactory(DataRenderer); this.editable = false; this.dataField = \ this.headerText = \ } } }

自定义renderer

package table {

import flash.display.BitmapData; import flash.geom.Matrix;

import mx.containers.HBox; import mx.controls.TextInput; import mx.core.UIComponent;

import twaver.IData; import twaver.Utils;

import twaver.controls.Table;

public class DataRenderer extends HBox {

public static const size:Number = 18;

private var image:UIComponent = new UIComponent(); private var textInput:TextInput = new TextInput();

public function DataRenderer() {

textInput.percentWidth = 100; this.addChild(image); this.addChild(textInput);

this.horizontalScrollPolicy = \ this.verticalScrollPolicy = \ this.textInput.mouseEnabled = false; this.textInput.mouseChildren = false;

this.textInput.setStyle(\ this.textInput.setStyle(\ this.setStyle(\ this.setStyle(\ this.setStyle(\ }

override public function set data(value:Object):void { super.data = value; var d:IData = null; if(this.data is IData){ d = this.data as IData; }

else if(this.data && this.owner is Table){

d =

Table(this.owner).dataBox.getDataByID(this.data.id); }

image.graphics.clear(); if(d != null){

this.textInput.text =

Utils.getQualifiedClassName(d);

var bd:BitmapData =

Utils.getImageAsset(d.icon).getBitmapData(); var matrix:Matrix = new Matrix(); matrix.scale(size/Number(bd.width), size/Number(bd.height));

image.graphics.beginBitmapFill(bd, matrix); image.graphics.drawRect(0, 0, size, size); image.graphics.endFill(); image.width = size; image.height = size; }else{

this.textInput.text = label; image.width = 0; image.height = 0; } } } }

表格显示上面的列和name列，并设置name列可编辑

xmlns:tw=\ xmlns:demo=\

applicationComplete=\>

import twaver.*;

private function init():void{ var box:DataBox = table1.dataBox; var from:Node = new Node(); from.name = \;

from.location = new Point(20, 20); box.add(from);

var to:Node = new Node(); to.name = \;

to.location = new Point(150, 60); box.add(to);

var link:Link = new Link(from,to); link.name = \; box.add(link); } ]]>

运行界面

Tree组件介绍

twaver.controls.Tree继承于Flex的Tree组件，可以与任意DataBox数据容器（LayerBox, AlarmBox, ElementBox...）绑定，树视图的层次关系由数据容器中元素的父子关系决定，树图组件有自己的选中模型，也可以使用DataBox的选中模型，这样可以达到同步选中的效果。 树图组件的使用非常简单，只要关联上DataBox类型的数据容器，就可以展示这个容器中的层次结构 过滤器的使用

tree.visibleFunction = function(data:IData):Boolean{ retrun data.childrenCount > 0; };

示例：

layout=\pageTitle=\creationComplete=\>

import twaver.Link; import twaver.Data; import twaver.DataBox;

private function init():void{

var box:DataBox=new DataBox(); var node:Data=new Data(); node.name=\; box.add(node);

var parentNode:Data=new Data(); parentNode.name=\; box.add(parentNode); var child:Data=new Data(); child.name=\; child.parent=parentNode; box.add(child); tree.dataBox=box;

tree.callLater(function():void{

tree.expandChildrenOf(tree.rootTreeData, true); }); } ]]>

运行结果

数据序列化

TWaver Flex支持数据容器的导入导出，便于数据的保存和传输。TWaver Flex使用

XMLSerializer来完成这项工作，提供serialize/deserialize方法实现DataBox中数据的序列化和反序列化。

构建一个XMLSerializer

var xmlSerializer:XMLSerializer=new XMLSerializer(box);

序列化与反序列化

public function serialize():String

public function deserialize(xmlString:String, rootParent:IData = null):void

XMLSerializer还可以设置哪些属性可以输出，哪些不输出 不输出元素id

xmlSerializer.settings.registerProperty(\null);

测试例子：

xmlns:twaver=\ex\

applicationComplete=\>

import twaver.*;

import twaver.network.Network; private var box:ElementBox;

private var xmlSerializer:XMLSerializer; private function init():void{ box = network.elementBox;

xmlSerializer=new XMLSerializer(box); //不输出元素id

xmlSerializer.settings.registerProperty(\,null);

var from:Node = new Node(); from.name = \;

from.location = new Point(20, 20); box.add(from);

var to:Node = new Node(); to.name = \;

to.location = new Point(150, 60); box.add(to);

var link:Link = new Link(from,to); link.name = \; box.add(link); }

protected function output(event:MouseEvent):void {

text.text=xmlSerializer.serialize(); }

protected function submit(event:MouseEvent):void {

box.clear();

xmlSerializer.deserialize(text.text); } ]]>

backgroundColor=\ width=\ height=\>

输出结果：

数据元素

数据元素是数据模型的基本要素，用于描述图形网元，业务网元，或者纯数据。TWaver Flex中所有数据元素都实现了接口twaver.IData。为不同功能的需要，预定义了三类数据类型twaver.IElement, twaver.IAlarm, twaver.ILayer，分别用来描述拓扑网元，告警和图层。其中拓扑网元扩展定义了十几种网元类型，用以描述丰富的拓扑网元特性，其中最常用的几类拓扑网元包括：基本网元，连线，子网，分组，设备面板...本章将详细介绍这些网元以及其他数据类型的特性，使用与扩展应用

基本数据元素

IData是TWaver Flex数据元素最基本的接口，Data是其实现类。Data中定义了id, name, icon, toolTip, parent, children等基本属性，对事件派发做了封装，并支持xml数据的导入导出，为TWaver跨平台数据交换奠定了基础。

Data继承于flash.events.EventDispatcher，这使他具有事件派发和监听的功能，可以通过调用下面的方法派发事件或者添加实现监听器：

flash.events.EventDispatcher#dispatchEvent(event:Event):Boolean

flash.events.EventDispatcher#addEventListener(type:String, listener:Function,

useCapture:Boolean=false, priority:int=0, useWeakReference:Boolean=false):void

Data还实现了twaver.IData接口，实现了对属性变化事件的派发和监听

function dispatchPropertyChangeEvent(property:String, oldValue:Object, newValue:Object):Boolean;

function addPropertyChangeListener(listener:Function, priority:int = 0

, useWeakReference:Boolean = false):void;

function

removePropertyChangeListener(listener:Function):void; 定义了父子关系，每个元素都可以添加孩子，也可以设置父亲 function get childrenCount():int; function get hasChildren():Boolean;

function isDescendantOf(data:IData):Boolean; function isParentOf(data:IData):Boolean; function isRelatedTo(data:IData):Boolean; 定义了一些基本属性，包括编号，名称，图标，提示文本......

其中id是数据元素在数据容器中的唯一标识，不能重复，构造Data时，TWaver会自动设置唯一编号，当然用户也可以自己传入，id设置后不能再修改

public function Data(id:Object = null) public function get id():Object public function get/set name():String public function get/set icon():String public function get/set toolTip():String

如果用户需要设置其他属性，可以通过setPropertyValue(...)方法，类似Java中的HashMap存放元素属性

function setPropertyValue(property:String, value:Object):void;

function getPropertyValue(property:String):Object; 数据元素还具有导入导出功能，以便于数据的交换和传输

public function serializeXML(serializer:XMLSerializer, newInstance:IData):void

public function deserializeXML(serializer:XMLSerializer, xml:XML):void

告警元素

TWaver中定义了告警，每个告警有告警级别，用以反映告警的紧急程度，告警使用AlarmBox进行管理，将告警与拓扑网元相关联。网元本身不存储具体的告警，而只存储当前告警状态信息。

告警

用来表示网管系统中设备故障或者网络异常的数据模型，与Element关联以反映网元的告警信息，Alarm中预定义了告警级别、告警是否已清除，告警是否已确认以及发出告警的网元编号，用户也可以通过setPropertyValue(...)方法添加自己的属性。 告警中定义的属性如下：

public function Alarm(alarmID:Object = null, elementID: isAcked:Boolean = false, isCleared:Boolean = false) public function get elementID():Object public function get/set isAcked():Boolean public function get.set isCleared():Boolean

public function get/set alarmSeverity():AlarmSeverity

告警级别

告警级别用以反映告警的紧急程度，TWaverFlex中预定义了六种告警级别，告警级别的value属性表示告警的严重程度，默认值越大告警越严重

public static var CRITICAL:AlarmSeverity = register(500, \, \, 0xFF0000);

public static var MAJOR:AlarmSeverity = register(400, \, \, 0xFFA000);

public static var MINOR:AlarmSeverity = register(300, \, \, 0xFFFF00);

public static var WARNING:AlarmSeverity = register(200, \, \, 0x00FFFF);

public static var INDETERMINATE:AlarmSeverity = register(100, \, \, 0xC800FF);

public static var CLEARED:AlarmSeverity = register(0, \, \, 0x00FF00);

Severity CRITICAL MAJOR MINOR WARNING

Letter Value Color C M m W

500 400 300 200 100 0

Red Orange Yellow Cyan Purple Green

INDETERMINATE N CLEARED

R

告警级别中的级别都是静态变量，用户也可以全局注册或者卸载自己的告警级别，此外还提供清除所有告警级别的方法（因为是全局变量，删除告警级别会对整个程序影响，要小心使用）

public static function register(value:int, name:String, nickName:String, color:uint, displayName:String = null):AlarmSeverity

public static function

unregister(name:String):AlarmSeverity public static function clear():void

可以全局的监听告警级别的增减变化，如增加级别，卸载告警级别，清除所有告警级别

public static function

addAlarmSeverityChangeListener(listener:Function, priority:int = 0, useWeakReference:Boolean = false):void

public static function

removeAlarmSeverityChangeListener(listener:Function):void

告警状态AlarmState

实际应用中，告警的出现可能成千上万，面对告警风暴，直接与告警关联是沉重的，所以TWaver采用网元与告警分离，由告警容器去管理所有告警，网元本身只存储告警状态信息，如当前有多少条告警，最高级别是什么，而对于每条告警具体的信息存放在告警容器(AlarmBox)中。 网元告警状态用 twaver.AlarmState来定义，用来反映新发告警的级别和数量。

告警状态属性包括，确认告警的最高级别，新发告警的最高级别，该网元所有告警的最高级别，新发告警次高级别，自身告警最高级别，传递告警级别以及各级别告警的数量

public function get

highestAcknowledgedAlarmSeverity():AlarmSeverity

public function get highestNewAlarmSeverity():AlarmSeverity public function get hasLessSevereNewAlarms():Boolean public function get

highestOverallAlarmSeverity():AlarmSeverity public function get

highestNativeAlarmSeverity():AlarmSeverity

public function get/set propagateSeverity():AlarmSeverity public function

getAcknowledgedAlarmCount(severity:AlarmSeverity = null):int

public function getAlarmCount(severity:AlarmSeverity = null):int

public function getNewAlarmCount(severity:AlarmSeverity = null):int

public function setNewAlarmCount(severity:AlarmSeverity, count:uint):void

修改告警状态的相关方法：确认告警，清除告警，增加/减少确认告警，删除告警...

public function

increaseAcknowledgedAlarm(severity:AlarmSeverity, increment:uint=1):void

public function increaseNewAlarm(severity:AlarmSeverity, increment:uint=1):void

public function

decreaseAcknowledgedAlarm(severity:AlarmSeverity, decrement:uint=1):void

public function decreaseNewAlarm(severity:AlarmSeverity, decrement:uint=1):void

public function

acknowledgeAlarm(severity:AlarmSeverity):void

public function

acknowledgeAllAlarms(severity:AlarmSeverity = null):void

public function removeAllNewAlarms(severity:AlarmSeverity = null):void

public function

setAcknowledgedAlarmCount(severity:AlarmSeverity, count:uint):void

public function

removeAllAcknowledgedAlarms(severity:AlarmSeverity = null):void

public function clear():void

其他方法

public function isEmpty():Boolean

public function get/set isEnablePropagation():Boolean

告警的使用

在使用告警时需要注意一点，告警增删都要通过alarmBox来操作，这点与网元需要在elementBox中增删是一致的 示例：

xmlns:twaver=\//www.servasoftware.com/2009/twaver/flex\

applicationComplete=\>

import twaver.*;

import twaver.network.Network; private function init():void{

var box:ElementBox = network.elementBox; var node:Node=new Node(); node.setLocation(50,50); box.add(node);

addAlarm(\

1\,node.id,AlarmSeverity.CRITICAL,box.alarmBox); }

//添加告警，通常需要从alarmBox来操作，这点与网元需要在elementBox中增删是一致的

private function

addAlarm(alarmID:Object,elementID:Object,alarmSeverity:AlarmSeverity,alarmBox:AlarmBox):void{ var alarm:Alarm=new

Alarm(alarmID,elementID,alarmSeverity); alarmBox.add(alarm); } ]]>

图层元素

ILayer（图层），用于描述拓扑网元的图层信息，Layer实现了ILayer接口，有三个特殊属性：visible, editable, movable。

public function get/set visible():Boolean public function get/set movable():Boolean public function get/set editable():Boolean

TWaverFlex中的层次关系由LayerBox来管理，默认的层次顺序由父子关系和加入的先后顺序决定。拓扑图中，每个Element通过设置layerId与某个layer相关联以控制网元的显示层次。

下面的例子展示了图层的使用以及图层三个属性的效作用：图层的上下移动等更多说明请参考LayerBox

xmlns:twaver=\//www.servasoftware.com/2009/twaver/flex\

applicationComplete=\>

import twaver.*;

import twaver.network.Network;

private var box:ElementBox; private var layerBox:LayerBox; private function init():void{ box=network.elementBox; layerBox=box.layerBox; tree.dataBox=layerBox;

network.setEditInteractionHandlers();

var layer1:Layer=new Layer(\,\layer\);

layer1.movable=false;

var layer2:Layer=new Layer(\,\layer\);

layer2.editable=false;

var layer3:Layer=new Layer(\,\layer\);

layer3.visible=false;

layerBox.add(layer1); layerBox.add(layer2); layerBox.add(layer3,0);

createNode(layer1,Consts.SHAPE_CIRCLE,10,40,100,100,0xff0000);

createNode(layer2,Consts.SHAPE_DIAMOND,30,60,100,100,0x00ff00);

createNode(layer3,Consts.SHAPE_RECTANGLE,50,80,100,100,0x0000ff);

createNode(layerBox.defaultLayer,Consts.SHAPE_RECTANGLE,70,20,150,150,0x808080); }

private function

createNode(layer:ILayer,shape:String,x:int,y:int,width:int,height:int,fillColor:uint):Node{ var node:Node=new Node(); node.layerID=layer.id; node.name=\+layer.id; node.setStyle(Styles.CONTENT_TYPE, Consts.CONTENT_TYPE_VECTOR);

node.setStyle(Styles.VECTOR_FILL_ALPHA,0.7); node.setStyle(Styles.VECTOR_SHAPE,shape); node.setSize(width,height); node.setLocation(x,y);

node.setStyle(Styles.VECTOR_FILL_COLOR,fillColor); box.add(node); return node;

} ]]>

拓扑元素

IElement接口用于定义拓扑网元，是TWaver中最重要的数据元素，Element是其实现类。拓扑元素用于拓扑图，主要分三大类，哑节点，节点，连线。

其中哑节点在拓扑图上不可见，在树组件上可见，通常设置为其他节点的父节点，表示类别或分组，如将所有的Link类型网元放在一个Dummy节点下，表示Link分类。 节点是最常用的网元类型，表示实体对象，包括节点，分组，子网，设备......

连线表示节点之间的连接关系，ShapeLink继承于Link，可以用于表示不规则走向的连线。

本文来源：https://www.bwwdw.com/article/ynl7.html