TWaver学习笔记1TWaver入门.docx

1、TWaver学习笔记1TWaver入门Twaver入门 快速上手 下面我将分步骤讲解 首先新建一个MXML Application: HelloTWaverFull.mxml，设置twaver命名空间mx:Application xmlns:mx= xmlns:twaver=* 在左边添加树组件，中间添加拓扑图组件，下方添加一个表格组件，设置好布局，如下：mx:Application xmlns:mx= xmlns:twaver= 设置拓扑图背景颜色，添加表格列mx:Application xmlns:mx= xmlns:twaver= 监听applicationComplete，添加网元数据

2、 基础TWaver设计模式 TWaver Flex采用基本的模型视图分离的设计思想，通过MV的组合嵌套，实现了以twaver.Data为基本数据元素，twaver.DataBox为基本数据容器的客户端数据模型，以及基本图形work.ui.ElementUI和数据容器组件（twaver.Network, twaver.Tree, twaver.Table.）的视图系统，三者共同构成了TWaver Flex的架构体系。Twaver数据模型TWaverFlex的基本数据元素是twaver.IData，基本数据容器定义为twaver.DataBox，基于这两类基本元素，TWaverFlex预定义了一系

3、列业务对象，视图网元和管理容器，例如告警（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,

4、Grid, Group, SubNetwork.），为网管界面开发提供了强大的设计模型和业务功能的基础支持。TWaverFlex以twaver.IData为最基本的数据单元，扩展定义了一系列具有图形和业务意义的数据类型，包括IAlarm, ILayer, IElement.数据元素TWaverFlex以twaver.IData为最基本的数据单元，扩展定义了一系列具有图形和业务意义的数据类型，包括IAlarm, ILayer, IElement. twaver.IDataIData是TWaverFlex的数据元素基类接口，twaver.Data是对其实现类，定义了id, name, icon,

5、toolTip, parent, children等基本属性，对事件派发做了封装，并支持xml数据的导入导出，为TWaver各平台间数据的可序列化奠定了基础。Data继承于flash.events.EventDispatcher，这使他具有事件派发和监听的功能，可以通过调用下面的方法派发事件或者添加实现监听器：flash.events.EventDispatcher#public dispatchEvent(event:Event):Booleanflash.events.EventDispatcher#addEventListener(type:String, listener:Functi

6、on, useCapture:Boolean=false, priority:int=0, useWeakReference:Boolean=false):voidData还实现了twaver.IData接口，实现了对属性变化事件的派发和监听function dispatchPropertyChangeEvent(property:String, oldValue:Object, newValue:Object):Boolean;function addPropertyChangeListener(listener:Function, priority:int = 0, useWeakRefe

7、rence: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

8、;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接口，有三个特殊属性：vi

9、sible, editable, movable。TWaverFlex中的层次关系由LayerBox来管理，默认的层次顺序由父子关系和先后顺序决定，在拓扑图中，每个Element通过设置layerId与某个layer相关联以控制网元的显示层次。 twaver.IAlarm告警，用来表示网管系统中设备故障或者网络异常的数据模型，基本实现类是Alarm。告警与Element相关联，用以反映网元的告警状态，Alarm中定义了级别，是否已清除，是否已确认以及相关联的网元编号。TWaverFlex预定义了六种告警级别，告警级别的value属性可表示告警的严重程度，默认value值越大，告警越严重。Sev

10、erityLetterValueColorCRITICALC500RedMAJORM400OrangeMINORm300YellowWARNINGW200CyanINDETERMINATEN100PurpleCLEAREDR0GreenTWaver中告警使用AlarmBox进行管理，告警与网元通过AlarmBox来相关联，两者不直接引用，与网元直接引用的是AlarmState，用来反映新发告警的级别和数量 twaver.IElementIElement是TWaver中最重要的数据元素，Element是其实现类，用于表示拓扑图中的网元对象，如节点，连线，子网，分组，板卡.TWaver预定义了丰富

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

12、.Network, twaver.Tree, twaver.Table等多种视图Dummy在拓扑图中不可见，可在树，表格中显示，通常用来表示无拓扑意义的逻辑分组Node表示拓扑图中的一个节点，是其他节点的基类Link表示连线，是其他连线类型的基类Follower表示跟随者，可以附着在另一个Node（称之为宿主节点）上，宿主节点移动，Follower也跟随着移动Bus继承于ShapeNode，是一种布局类型节点，可以与连接在它上面的节点们排布出总线布局那样的效果ShapeNode由一系列控制点决定形状，可以表现丰富的形态ShapeLink继承于Link，与Link不同，其走向有一系列控制点决定，

13、可以定制出特殊的连线布局Grid在拓扑图上表现为网格，可以指定行列数，是Rack, Shelf, Slot, Card, Port的基类，可以用来表示设备面板Group表示分组，包含孩子网元，可以展开合并，孩子的位置和范围决定Group展开后的位置和范围SubNetwork子网在拓扑图中有重要意义，拓扑图通常并不会一次显示所有的网元，而只显示当前子网中的元素，通过切换子网和数据的延时加载可以解决大数据量的问题Rack设备面板中表示机架Shelf设备面板中表示机框Slot设备面板中表示板卡槽位Card设备面板中表示一个板卡Port设备面板中表示端口数据管理容器 数据管理容器，顾名思义就是用来管理

14、数据的容器，TWaverFlex中的DataBox就是用来管理所有Data数据的容器，在TWaverFlex的设计模式中担当者Model的重要角色，一个DataBox可以驱动多个视图，DataBox中数据的变化都能够自动的反映到其关联的所有视图组件上。TWaverFlex中的DataBox支持的视图包括：twaver.controls.Tree, twaver.controls.Table，此外ElementBox还有专门的视图组件work.Network。 DataBoxDataBox继承于 EventDispatcher，对容器变化以及容器内数据的变化都做了监听，这样就可以通过监听Data

15、Box掌握所有DataBox中元素的变化，用户也可以通过重写on*Changed事件回调函数处理这些事件public function addDataBoxChangeListener(listener:Function, priority:int = 0, useWeakReference:Boolean = false):voidpublic function removeDataBoxChangeListener(listener:Function):voidpublic function addDataPropertyChangeListener(listener:Function,p

16、riority:int = 0, useWeakReference:Boolean = false):voidpublic function removeDataPropertyChangeListener(listener:Function):voidpublic function addPropertyChangeListener(listener:Function, priority:int = 0, useWeakReference:Boolean = false):voidpublic function removePropertyChangeListener(listener:Fu

17、nction):voidpublic function addHiberarchyChangeListener(listener:Function, priority:int = 0, useWeakReference:Boolean = false):voidpublic function removeHiberarchyChangeListener(listener:Function):voidprotected function onDataPropertyChanged(data:IData, e:PropertyChangeEvent):voidprotected function

18、onClientChanged(styleProp:String, oldValue:*, newValue:*):void一个容器，自然要提供数据管理的方法 ，DataBox中定义了下面的方法进行数据增删操作publicfunctionadd(data:IData, index:int= -1):voidpublic function remove(data:IData):voidpublic function removeByID(id:Object):voidpublic function clear():voidpublic function getDataByID(id:Object

19、):IDatapublic function contains(data:IData):Boolean对数据的遍历查找也提供了简便的方法publicfunctionforEach(callbackFunction:Function):voidpublic function forEachByDepthFirst(callbackFunction:Function, data:IData = null):voidprivate function depthFirst(callbackFunction:Function, data:IData):voidpublic function forEac

20、hByBreadthFirst(callbackFunction:Function, data:IData = null):voidDataBox还管理着数据的层次模型 ，提供了下面的方法方便数据的移动和插入操作publicfunctionmoveUp(data:IData):voidpublic function moveDown(data:IData):voidpublic function moveToTop(data:IData):voidpublic function moveToBottom(data:IData):voidpublic function moveTo(data:IData, newIndex:int):void此外DataBox对数据元素的选中机制做了封装，实现了数据的选中模型（SelectionModel），并提供了便捷操作的方法publicfun