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

一、学习内容概述:

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


二、学习内容总结:

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 οnlοad="init()" style="margin:0;">

	</body>
</html>




  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值