twaver flex 编程之 Attachment 定制

最新推荐文章于 2016-10-08 21:35:00 发布

rock_2014

最新推荐文章于 2016-10-08 21:35:00 发布

阅读量858

点赞数

CC 4.0 BY-SA版权

分类专栏： flex 文章标签： flex 定制Attachment

本文链接：https://blog.youkuaiyun.com/rockblog_h/article/details/23479907

flex 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何通过自定义Node、NodeUI和Attachment来实现特定功能的可视化展示，包括Node类、NodeUI类和Attachment类的具体实现，以及如何在测试环境中进行验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Attachment定制的一个例子，还未具体调试，先把代码贴出来，后面再整理。

1.定制Node:

	import twaver.Node;

	public class ChartNode extends Node
	{
		public function ChartNode(id:Object = null)
		{
			super(id);
		}
		
		override public function get elementUIClass():Class
		{
			return ChartNodeUI;
		}
	}

2.定制NodeUI:

	import twaver.Node;
	import twaver.network.Network;
	import twaver.network.ui.NodeUI;

	public class ChartNodeUI extends NodeUI
	{
		private var barAttachment:BarAttachment;
		
		public function ChartNodeUI(network:Network, node:Node)
		{
			super(network, node);
		}
		
		override public function checkAttachments():void
		{
			super.checkAttachments();
			checkChartAttachemnt();
		}
		
		protected function checkChartAttachemnt():void
		{
			if(this.node.getClient("bar"))
			{			
				if(null == this.barAttachment)
				{
					this.barAttachment = new BarChartAttachment();
					this.addAttachment(barAttachment);						
				}
			}
			else
			{
				if(null != this.barAttachment)
				{
					this.removeAttachment(this.barAttachment);
					this.barAttachment = null;
				}
			}
		}
	}

3.定制Attachment：

        import twaver.Node;
	import twaver.network.ui.BasicAttachment;
	import twaver.network.ui.ElementUI;

	public class BarAttachment extends BasicAttachment
	{
		private chart:BarChart = new AttachmentBarChart();
		public function BarAttachment(elementUI:ElementUI, showInAttachmentCanvas:Boolean = false)
		{
			super(elementUI, showInAttachmentCanvas);
			this.content = chart;
		}
		
		override public function updateProperties():void
		{
			super.updateProperties();
			var node:Node = new Node(this.element);
			chart.dataProvider = [{name:"Y", value:int(node.location.y)},
									{name:"X", value:int(node.location.x)}];
		}
		
		override public function get position():String
		{
			return Consts.POSITION_TOPLEFT;
		}
		
		override public function get direction():String
		{
			return Consts.ATTACHMENT_DIRECTION_LEFT;
		}
	}

4.测试：

private function init():void
			{
				this.initBox();
			}
			
			private function initBox():void
			{
				var node:ChartNode = new ChartNode();
				node.name = "Chart Node";
				node.setClient("bar", true);
				
				node.setLocation(100, 100);
				network.elementBox.add(node);
			}