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 = new twaver.ElementBox(); 
    var network = new twaver.vector.Network(box); 
    function init() { 
        initNetwork(); 
        initDataBox(); 
    } 
    function initNetwork() {
        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'); 
    } 
    function initDataBox() { 
        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 = new twaver.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同時存在，且擺放的位置可以分別設置。下面列舉使用方法：

function registerImage(){
  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');
}
function registerNormalImage(url, name) {
  var image = new Image();
  image.src = url;
  image.onload = function() {
    twaver.Util.registerImage(name, image, image.width, image.height);
    image.onload = null;
    network.invalidateElementUIs();
  };
}
function initNode() {
    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 = new twaver.ElementBox(); 
var network = new twaver.vector.Network(box); 
function init() { 
  initNetwork(); 
  registerImage(); 
  initDataBox(); 
} 
function initNetwork() { 
  var view = network.getView(); 
  document.body.appendChild(view); 
  network.adjustBounds({x: 0, y: 0, width: 1300, height: 600});
  twaver.Styles.setStyle('select.color', '#57ab9a'); 
}
function registerImage() { 
//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 } ] }); 
}
function initDataBox() { 
  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 = new twaver.Link(node1, node2); 
  link.setName('link1'); 
  link.setStyle('label.position','topleft.topleft'); 
  box.add(link); 
  var link2 = new twaver.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陰影的設置

 

告警元素(Alarm)

TWaver中定義了告警，每個告警有告警級別，用以反映告警的緊急程度，告警使用AlarmBox進行管理，將告警與拓撲網元相關聯。網元本身不存儲具體的告警，而只存儲當前告警狀態信息。

告警(Alarm)

用來表示網管系統中設備故障或者網絡異常的數據模型，與Element關聯以反映網元的告警信息，Alarm中預定義了告警級別、告警是否已清除，告警是否已確認以及發出告警的網元id，用戶也可以通過setClient()方法添加自己的屬性。
告警中定義的屬性如下：

/**
* id:告警的Id
* elementId:告警網元的Id
* alarmSeverity:告警級別
* isAcked:告警是否確認
* isCleared:告警是否清除
*/
twaver.Alarm: function(id, elementId, alarmSeverity, isAcked, isCleared)
 
getElementId:function()
isAcked:function()
setAcked:function(value)
isCleared:function()
setCleared:function(value)
getAlarmSeverity:function()
setAlarmSeverity:function(value)

告警級別(AlarmSeverity)

告警級別用以反映告警的緊急程度，TWaver HTML5中預定義了六種告警級別，告警級別的value屬性表示告警的嚴重程度，默認值越大告警越嚴重。

/**
* value:
* name:
* nickName:
* color:
* displayName:
*/
twaver.AlarmSeverity:function(value,name,nickName,color,displayName)
 
//TWaver內部預定義六種告警級別
twaver.AlarmSeverity.CRITICAL = twaver.AlarmSeverity.add(500,'Critical','C',"#FF0000");
twaver.AlarmSeverity.MAJOR = twaver.AlarmSeverity.add(400,'Major','M',"#FFA000");
twaver.AlarmSeverity.MINOR = twaver.AlarmSeverity.add(300,'Minor','m',"#FFFF00");
twaver.AlarmSeverity.WARNING = twaver.AlarmSeverity.add(200,'Warning','W',"#00FFFF");
twaver.AlarmSeverity.INDETERMINATE = twaver.AlarmSeverity.add(100,'Indeterminate','N',"#C800FF");
twaver.AlarmSeverity.CLEARED = twaver.AlarmSeverity.add(0,'Cleared','R',"#00FF00");

AlarmSeverity中的級別都是靜態變量，用戶也可以全局注冊或者卸載自己的告警級別，此外還提供清除所有告警級別的方法。

//添加告警級別
twaver.AlarmSeverity.add:function(value,name,nickName,colour,displayName)
//刪除告警級別
twaver.AlarmSeverity.remove:function(name)
//清空告警級別
twaver.AlarmSeverity.clear:function()

Note:因為告警級別是全局變量，刪除告警級別會對整個程序產生影響，所以請謹慎操作。

告警狀態(AlarmState)

實際應用中，告警的出現可能成千上萬，面對告警風暴，直接與告警關聯是沉重的,所以TWaver采用網元與告警分離，由告警容器去管理所有告警，網元本身只存儲告警狀態信息，如當前有多少條告警，最高級別是什么，而對於每條告警具體的信息存放在告警容器(AlarmBox)中。
網元告警狀態用twaver.AlarmState來定義，用來反映新發告警的級別和數量。告警狀態屬性包括:確認告警的最高級別、新發告警的最高級別、該網元所有告警的最高級別、新發告警次高級別、資深告警最高級別，傳遞告警級別以及各級告警的數量。

getHighestAcknowledgedAlarmSeverity:function()
getHighestNewAlarmSeverity:function()
getHighestOverallAlarmSeverity:function()
hasLessSevereNewAlarms:function()
getAcknowledgedAlarmCount:function(severity)
getAlarmCount:function(severity)
getNewAlarmCount:function(severity)
setNewAlarmCount:function(severity,count)
getPropagateSeverity:function()
setPropagateSeverity:function(propagateSeverity)
isEmpty:function()
isEnablePropagation:function()
setEnablePropagation:function(enablePropagation)

修改告警狀態的相關方法：確認告警，清除告警，增加/減少確認告警，刪除告警…

acknowledgeAlarm:function(severity)
acknowledgeAllAlarms:function(severity)
increaseAcknowledgesAlarm:function(severity,increment)
increaseNewAlarm:function(severity,increment)
decreaseAcknowledgedAlarm:function(severity,decrement)
decreaseNewAlarm；function(severity,decrement)
removeAllNewAlarms:function(severity)
setAcknowledgedAlarmCount:function(severity,count)
removeAllAcknowledgedAlarms:function(severity)
clear:function()

告警的使用

在使用告警時需要注意一點，告警增刪都要通過alarmBox來操作，這點與網元需要在elementBox中增刪是一致的。
示例：

var box = new twaver.ElementBox(); 
var network = new twaver.vector.Network(box); 
function init() { 
  initNetwork(); 
  registerImage(); 
  initDataBox(); 
} 
function initNetwork() { 
  var view = network.getView(); 
  document.body.appendChild(view); 
  network.adjustBounds({x: 0, y: 0, width: 1300, height: 600}); 
  twaver.Styles.setStyle('select.color', '#57ab9a'); 
} 
function registerImage() { 
  //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 } ] }); 
} 
function initDataBox() { 
  var parent = new twaver.Group({ name: 'parent', location: {x: 300, y: 400 }, }); 
  addAlarm("alarm 0",parent.getId(),twaver.AlarmSeverity.MINOR,box.getAlarmBox()); 
  box.add(parent); 
  var node1 = new twaver.Node({ name: 'Jeff.fu', location: { x: 200, y: 200 } }); 
  addAlarm("alarm 1", node1.getId(), twaver.AlarmSeverity.CRITICAL, box.getAlarmBox()); 
  node1.setClient('vector', true); 
  box.add(node1); 
  var node2 = new twaver.Node({ name: 'alex.dong', location: { x: 500, y: 350 } });
  node2.setClient('vector', true); 
  addAlarm("alarm 2", node2.getId(), twaver.AlarmSeverity.MAJOR, box.getAlarmBox()); 
  box.add(node2); 
  var link = new twaver.Link(node1, node2); 
  link.setName('link1'); link.setStyle('label.position', 'topleft.topleft'); 
  addAlarm("alarm 3",link.getId(),twaver.AlarmSeverity.WARNING,box.getAlarmBox()); 
  box.add(link);
  parent.addChild(node1);
  parent.addChild(node2); 
} 
function addAlarm(alarmID, elementID, alarmSeverity, alarmBox) { 
  var alarm = new twaver.Alarm(alarmID, elementID, alarmSeverity); 
  alarmBox.add(alarm); 
}