TWaver学习笔记1-TWaver入门(6)

};

列举部分属性

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=\