Twaver HTML5 (2D)----data element

Overview

The data element is the basic element of the data model that describes the graphics network element, the Business network element, or the pure data. All data elements in Twaver HTML5 inherit from Twaver.data. For the requirements of different functions, three kinds of data types are pre-defined: Twaver. Element,twaver. Alarm,twaver. Layer, respectively, to describe the topology of the network elements, alarms and layers. The topological network element extension defines more than 10 types of network elements, which are used to describe rich topological network element features, among which the most commonly used topological network elements include Node, Link, Group, subnetwork, grid, etc., and the inheritance of twaver in the network element. This chapter details the characteristics of these network elements and other data types, using and extending the application.

Basic Data Element

Twaver. Data is the most basic element in Twaver HTML5, which defines basic properties such as Id,name,name2,icon,tooltip,parent,children by default, supports event dispatch and monitoring, and extends it with Twaver. Element,twaver. Alarm,twaver. Layer and other data types.

event dispatch and monitoring

Twaver. Data is inherited from the Twaver.propertychangedispatcher class and contains an internal twaver. The Eventdispatcher instance object, which enables data to dispatch events and listen for events, can be dispatched by calling the following methods or adding listeners:

// Distributing attribute Change events Firepropertychange:function(property,oldvalue,newvalue)//  Add Property Change Listener Addpropertychangelistener:function(listener,scope,ahead)//  Delete attribute change listener removepropertychangelistener:function(listener)//  How to handle property changes onpropertychanged:function(listener)

Basic Properties

Some basic properties are defined, including Id,name,name2,icon,tooltip, and so on.

/** *id: The ID of the network element, if not set, the Twaver internally assigns a unique 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 increases the flexibility of the label setting for newly added properties.

If you need to set additional properties, you can set the custom properties (including objects) through the Setclient ()/getclient () method.

// set client properties; function (Clientprop,newvalue) // Get Client Properties function (Clientprop)

Note:setclient () stores data similar to HashMap in Java.

Example:

 varbox =NewTwaver.     Elementbox (); varNetwork =Newtwaver.vector.Network (box); functioninit () {initnetwork ();     Initdatabox (); }     functioninitnetwork () {varView =Network.getview ();         Document.body.appendChild (view); Network.adjustbounds ({x:0, y:0, width:1300, height:600}); Network.gettooltip=function(Element) {varId =Element.getid (); varName =Element.getname (); varName2 =element.getname2 (); varicon =Element.geticon (); varClientproperty = 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 () {varnode =NewTwaver. Node ({name: ' From ', name2: ' From2 ', location: {x:300, y:200 } });         Box.add (node); varNode2 =NewTwaver. Node ({name: ' to ', name2: ' To2 ', location: {x:500, y:250 } }); Box.add (Node2); varlink =NewTwaver.         Link (node, node2); Link.setname (' Hello twaver! '); Link.setname2 (' Hello vector! '); Link.setclient (' Clientproperty ', node);    Box.add (link); }

Note: What did we learn from the example?

• Set the style uniformly, such as: Twaver. Styles.setstyle (' Label.color ', ' #ec6c00 ')
• Prompt for custom tooltip: overriding the Network.gettooltip method
• Use of the Client property
• Twaver interior contains some colors, twaver. colors.***

Here we specifically list the layout of the icon, icon as an attachment to the network element can be around the network element, rendering some special information. Twaver supports multiple sets of icons at the same time, and the position can be set separately. Here's how to use it:

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) {varImage =NewImage (); IMAGE.SRC=URL; Image.onload=function() {twaver.    Util.registerimage (name, image, Image.width, image.height); Image.onload=NULL;  Network.invalidateelementuis (); };}functionInitnode () {varNode2 =NewTwaver. 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 ']);}

Other function Functions

In addition, other function functions are defined in data

//Get all sub-net elementsGetChildren:function() Getchildsize:function()//gets a list of all childs that conform to MacthfunctionTochildren: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)

// How to use Tochildren:function (macthfunction,scope) Parent.tochildren (function(e) {     return e.getname () = = = ' Vector ';});

varbox =NewTwaver. Elementbox (); varNetwork =Newtwaver.vector.Network (box);functioninit () {initnetwork ();   Registerimage (); Initdatabox (); } functioninitnetwork () {varView =Network.getview ();   Document.body.appendChild (view); Network.adjustbounds ({x:0, y:0, width:1300, height:600}); Twaver. Styles.setstyle (' Select.color ', ' #57ab9a '); }functionRegisterimage () {//Register ShadowTwaver.  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 () {varParent =NewTwaver. Group ({name: ' Parent ', location: {x:300, y:400 }, });   Box.add (parent); varNode1 =NewTwaver. Node ({name: ' Jeff.fu ', location: {x:200, y:200 } }); Node1.setclient (' Vector ',true);   Box.add (Node1); varNode2 =NewTwaver. Node ({name: ' Alex.dong ', location: {x:500, y:350 } }); Node2.setclient (' Vector ',true);   Box.add (Node2); varNode3 =NewTwaver. Node ({name: ' Paul.peng ', location: {x:200, y:350 } });   Box.add (NODE3); varNode4 =NewTwaver. Node ({name: ' Vic.cheng ', location: {x:500, y:200 } });   Box.add (NODE4); varlink =NewTwaver.   Link (Node1, Node2); Link.setname (' Link1 '); Link.setstyle (' Label.position ', ' topleft.topleft ');   Box.add (link); varLink2 =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; }   }   varChildrenmatch =Parent.tochildren (matchfunction); Childrenmatch.foreach (function(Element) {Element.setimage (' Shadow '); Element.setname (' Child_vector '); }); }

Note: What do we learn from the above example?

• Use of the Tochildren () method
• Shadow Settings for Shadows

Twaver HTML5 (2D)----data element