TWaver HTML5学习笔记 —— 动态设置网元样式

来源：互联网发布：go语言知乎编辑：程序博客网时间：2024/05/28 16:17

一、学习内容概述：

学习如何在拓扑图中动态设置网元的样式。

二、学习内容总结：

1、添加属性表格：

1）、属性表格定义：使用twaver.controls.PropertySheet类，例如：

              var nodeStylePropertySheet = new twaver.controls.PropertySheet();

2）、设置属性表格可编辑：setEditable(true)

              nodeStylePropertySheet.setEditable(true);

3）、添加属性表格关联的对象及关联事件：

var nodeStyleData = new twaver.Element();var propertyBox = nodeStylePropertySheet.getPropertyBox();topo.Util.addClientProperty(propertyBox, "label.color").setEnumInfo(['black', 'red']);nodeStyleData.setClient("label.color", "black");nodeStylePropertySheet.getDataBox().add(nodeStyleData);nodeStylePropertySheet.getDataBox().getSelectionModel().setSelection(nodeStyleData);nodeStylePropertySheet.getDataBox().addDataPropertyChangeListener(function handlePropertyChange(e) {var name = topo.Util.getPropertyName(e);network.getElementBox().forEach(function(element) {if ( element instanceof twaver.Node || element instanceof twaver.Link) {element.setStyle(name, e.newValue);}});}, this);

4）、添加各种类型的属性参考（代码来源于demo）：

        var map = { '': 'None', 'default': 'Default', 'children': 'Children', 'descendant': 'Descendant', 'descendantAncestor': 'Descendant and Ancestor' };        demo.Util.addClientProperty(propertyBox, "check.mode")                .setEnumInfo({ map: map, values: ['', 'default', 'children', 'descendant', 'descendantAncestor'] });        demo.Util.addClientProperty(propertyBox, "checkable.function").setEnumInfo(['Leaf', 'Category', 'Check Network', 'Check All']);        demo.Util.addClientProperty(propertyBox, "unCheckable.style").setEnumInfo(['none', 'disabled']);        demo.Util.addClientProperty(propertyBox, "show.icon").setValueType('boolean');        demo.Util.addClientProperty(propertyBox, "layout.type").setEnumInfo(demo.LAYOUT_TYPE);        this.data.setClient("check.mode", this.tree.isCheckMode());        this.data.setClient("checkable.function", 'Check All');        this.data.setClient("unCheckable.style", this.tree.getUncheckableStyle());        this.data.setClient("show.icon", true);        this.data.setClient("layout.type", 'round');

三、验证代码运行效果截图：

四、验证代码：

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>动态设置网元样式</title><script type="text/javascript" src="./js/twaver.js"></script><script type="text/javascript" src="./js/topo.js"></script><script type="text/javascript">function init() {// 添加网元var box = new twaver.ElementBox();// 创建拓扑图var network = new twaver.network.Network(box);// 注册图片topo.Util.registerImage("./images/ne/route.png");topo.Util.registerImage("./images/ne/route_icon.png");var node = new twaver.Node();node.setName("ne1");node.setLocation(20, 30);node.setImage("route");node.setIcon("route_icon");box.add(node);var node2 = new twaver.Node();node2.setName("ne2");node2.setLocation(80, 150);node2.setImage("route");node2.setStyle("label.color", "black");node2.setIcon("route_icon");box.add(node2);var link = new twaver.Link(node, node2);link.setName("ne1 -- ne2");link.setToolTip("<b> ne1 -- ne2</b>");box.add(link);// 创建网元树var tree = new twaver.controls.Tree(box);tree.setCheckMode('descendantAncestor');// 设置在网元树中只显示节点tree.setVisibleFunction(function(element) {return element instanceof twaver.Node;});// 存储网元样式的变更的sheet页var nodeStyleData = new twaver.Element();var nodeStylePropertySheet = new twaver.controls.PropertySheet();nodeStylePropertySheet.setEditable(true);var propertyBox = nodeStylePropertySheet.getPropertyBox();topo.Util.addClientProperty(propertyBox, "label.color").setEnumInfo(['black', 'red']);nodeStyleData.setClient("label.color", "black");nodeStylePropertySheet.getDataBox().add(nodeStyleData);nodeStylePropertySheet.getDataBox().getSelectionModel().setSelection(nodeStyleData);nodeStylePropertySheet.getDataBox().addDataPropertyChangeListener(function handlePropertyChange(e) {var name = topo.Util.getPropertyName(e);network.getElementBox().forEach(function(element) {if ( element instanceof twaver.Node || element instanceof twaver.Link) {element.setStyle(name, e.newValue);}});}, this);// 拓扑各视图布局var rightSplit = new twaver.controls.SplitPane(network, nodeStylePropertySheet, 'vertical', 0.7);var mainSplitPane = new twaver.controls.SplitPane(tree, rightSplit, 'horizontal', 0.3);var networkDom = mainSplitPane.getView();networkDom.style.width = "100%";networkDom.style.height = "100%";document.body.appendChild(networkDom);network.getView().style.backgroundColor = "#f3f3f3";network.getView().style.cursor = "hand";window.onresize = function() {mainSplitPane.invalidate();};}</script></head><body onload="init()" style="margin:0;"></body></html>

0 0