twaver html5软件价格,TWaver HTML5 (2D)----数据元素

概述

数据元素是数据模型的基本要素，用于描述图形网元，业务网元，或者纯数据。TWaver HTML5中所有数据元素都继承自twaver.Data。为不同功能的需求，预定义了三类数据类型：twaver.Element,twaver.Alarm,twaver.Layer,分别用来描述拓扑的网元，告警和图层。其中拓扑网元扩展定义了十几种网元类型，用以描述丰富的拓扑网元特性，其中最常用的几类拓扑网元包括：Node、Link、Group、SubNetwork、Grid等，TWaver中网元的继承关系如下图，本章将详细介绍这些网元以及其他数据类型的特性，使用以及扩展应用。

基本数据元素(Data)

twaver.Data是TWaver HTML5中最基本的数据元素，默认定义了id,name,name2,icon,toolTip,parent,children等基本属性，支持事件派发和监听，由它扩展出来还有twaver.Element,twaver.Alarm,twaver.Layer等数据类型。

事件派发与监听

twaver.Data继承于twaver.PropertyChangeDispatcher类,内部包含一个twaver.EventDispatcher实例对象，这使得Data具有派发事件和监听事件的功能，可以通过调用下面的方法派发事件或者添加监听器：

//派发属性变化事件

firePropertyChange:function(property,oldValue,newValue)//添加属性变化监听器

addPropertyChangeListener:function(listener,scope,ahead)//删除属性变化监听器

removePropertyChangeListener:function(listener)//属性发生变化的处理方法

onPropertyChanged:function(listener)

基本属性

定义了一些基本属性，包括id,name,name2,icon,toolTip等。

/**

*id:网元的id,如果未设置，TWaver内部会分配唯一的Id。*/twaver.Data:function(id)

getId:function()

setName:function(value)

getName:function()

setName2:function(value)

getName2:function()

setIcon:function(value)

getIcon:function()

setToolTip:function(value)

getToolTip:function()

Note:name2为新增加的属性,增大了label设置的灵活性。

如果需要设置其他属性，可以通过setClient()/getClient()方法设置自定义的属性(包括对象)。

//设置Client属性;

setClient = function(clientProp,newValue)//获取Client属性

getClient = function(clientProp)

Note:setClient()存放数据类似于Java中的HashMap。

示例:

var box = newtwaver.ElementBox();var network = newtwaver.vector.Network(box);functioninit() {

initNetwork();

initDataBox();

}functioninitNetwork() {var view =network.getView();

document.body.appendChild(view);

network.adjustBounds({x:0, y: 0, width: 1300, height: 600});

network.getToolTip= function(element) {var Id =element.getId();var name =element.getName();var name2 =element.getName2();var icon =element.getIcon();var clientProperty = element.getClient(‘clientProperty‘);return ‘Id:‘ + Id + ‘ ‘ + ‘name:‘ + name + ‘ ‘ + ‘name2:‘ + name2+ ‘ ‘ + ‘icon:‘ +icon;

}

twaver.Styles.setStyle(‘label.color‘,‘#ec6c00‘);

twaver.Styles.setStyle(‘label2.color‘,‘#57ab9a‘);

twaver.Styles.setStyle(‘select.color‘,‘#ef8200‘);

}functioninitDataBox() {var node = new twaver.Node({ name: ‘from‘, name2: ‘from2‘, location: { x: 300, y: 200} });

box.add(node);var node2 = new twaver.Node({ name: ‘to‘, name2: ‘to2‘, location: { x: 500, y: 250} });

box.add(node2);var link = newtwaver.Link(node, node2);

link.setName(‘Hello TWaver!‘);

link.setName2(‘Hello Vector!‘);

link.setClient(‘clientProperty‘,node); box.add(link);

}

Note:从示例中我们学会了什么？

统一设置样式，如:twaver.Styles.setStyle(‘label.color’,’#ec6c00′)

自定义toolTip的提示语:重写network.getToolTip方法

Client属性的使用

TWaver内部内置一些颜色，twaver.Colors.***

在这我们特别列举出icon的布局问题，icon作为网元的附件可以围绕在网元的周围，呈现一些特殊信息。TWaver支持多组icon同时存在，且摆放的位置可以分别设置。下面列举使用方法：

functionregisterImage(){

registerNormalImage(‘./images/list_view.png‘,‘list_view‘);

registerNormalImage(‘./images/settings1.png‘,‘setting1‘);

registerNormalImage(‘./images/ic_mech_wheel.png‘,‘wheel‘);

registerNormalImage(‘./images/ic_search_archive.png‘,‘archive‘);

registerNormalImage(‘./images/super_mono.png‘,‘mono‘);

registerNormalImage(‘./images/twitter_04.png‘,‘twitter‘);

}functionregisterNormalImage(url, name) {var image = newImage();

image.src=url;

image.οnlοad= function() {

twaver.Util.registerImage(name, image, image.width, image.height);

image.οnlοad= null;

network.invalidateElementUIs();

};

}functioninitNode() {var node2 = new twaver.Node("node2");

node2.setLocation(450, 205);

box.add(node2);

node2.setName(‘name1‘);

node2.setName2(‘name2‘);

node2.setSize(300,300);

node2.setStyle(‘icons.names‘, [["mono","wheel",‘archive‘],["wheel",‘archive‘,‘mono‘],["archive",‘mono‘],["mono",‘wheel‘]]);

node2.setStyle(‘icons.position‘, [‘topleft.topleft‘,‘topright.topright‘,‘bottomleft.bottomleft‘,‘bottomright.bottomright‘]);

node2.s(‘icons.orientation‘,[‘top‘,‘left‘,‘right‘,‘bottom‘]);

}

其他功能函数

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

//获取所有子网元

getChildren:function()

getChildSize:function()//获取符合macthFunction的所有childs组成的List

toChildren:function(macthFunction,scope)

addChild:function(child,index)

removeChild:function(child)

getChildAt:function(index)

clearChildren:function()

getParent:function()

setParent:function(parent)

hasChildren:function()

isRelatedTo:function(data)

isParentOf:function(data)

isDescendantOf:function(data)

//toChildren:function(macthFunction,scope)的使用方法

parent.toChildren(function(e){return e.getName() === ‘vector‘;

});

var box = newtwaver.ElementBox();var network = newtwaver.vector.Network(box);functioninit() {

initNetwork();

registerImage();

initDataBox();

}functioninitNetwork() {var view =network.getView();

document.body.appendChild(view);

network.adjustBounds({x:0, y: 0, width: 1300, height: 600});

twaver.Styles.setStyle(‘select.color‘, ‘#57ab9a‘);

}functionregisterImage() {//register shadow

twaver.Util.registerImage(‘shadow‘, { w: 37, h: 29, shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 5, shadowColor: ‘#ec6c00‘, v: [ { shape: ‘vector‘, name: ‘node_image‘, x: 0, y: 0} ] });

}functioninitDataBox() {var parent = new twaver.Group({ name: ‘parent‘, location: {x: 300, y: 400}, });

box.add(parent);var node1 = new twaver.Node({ name: ‘Jeff.fu‘, location: { x: 200, y: 200} });

node1.setClient(‘vector‘, true);

box.add(node1);var node2 = new twaver.Node({ name: ‘alex.dong‘, location: { x: 500, y: 350} });

node2.setClient(‘vector‘, true); box.add(node2);var node3 = new twaver.Node({ name: ‘paul.peng‘, location: { x: 200, y: 350} }); box.add(node3);var node4 = new twaver.Node({ name: ‘vic.cheng‘, location: { x: 500, y: 200} }); box.add(node4);var link = newtwaver.Link(node1, node2);

link.setName(‘link1‘);

link.setStyle(‘label.position‘,‘topleft.topleft‘);

box.add(link);var link2 = newtwaver.Link(node3, node4);

link2.setName(‘link2‘);

box.add(link2);

parent.addChild(node1);

parent.addChild(node2);

parent.addChild(node3);

parent.addChild(node4);

matchFunction= function(e) {if (e.getClient(‘vector‘)) {return true;

}

}var childrenMatch =parent.toChildren(matchFunction);

childrenMatch.forEach(function(element) {

element.setImage(‘shadow‘);

element.setName(‘child_vector‘);

});

}

Note:上述示例我们学会了什么？

toChildren()方法的使用

shadow阴影的设置

原文：http://www.cnblogs.com/ClassNotFoundException/p/5849031.html