flex 之twaver2--树，网络拓扑，表格综合

注：原创作品，分享以供交流学习，转载请注明出处。

   twaver中树，网络拓扑，表格组件的数据模型是可以共享的，下面是实例。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:tw="http://www.servasoftware.com/2009/twaver/flex"
			   applicationComplete="init()"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
			import flash.geom.Point;
			
			import twaver.*;
			import twaver.network.Network;
			
			private function init():void
			{
				//获取网络topo的数据模型	
				//netWork是网络拓扑的容器，这个容器中盛放 节点（node），连线（Link）
				var box:ElementBox = network.elementBox;
				
				//定义第一个节点“中国”，并加入到网络拓扑的数据模型中
				var zhongguo:Node = new Node();
				zhongguo.name = "中国";
				zhongguo.location = new Point(20,100);
				box.add(zhongguo);
				
				//定义第二个节点：“北京”，并敬爱如到网络拓扑的数据模型中
				var beijing:Node = new Node();
				beijing.name = "北京";
				beijing.location = new Point(160,0);
				box.add(beijing);
				
				
				//定义第三个节点：“上海”，并加入到网络拓扑的数据模型中
				var shanghai:Node = new Node();
				shanghai.name = "上海";
				shanghai.location = new Point(160,50);
				box.add(shanghai);
				
				//定义第四个节点：“上海”，并加入到网络拓扑的数据模型中
				var guangzhou:Node = new Node();
				guangzhou.name = "广州";
				guangzhou.location = new Point(160,150);
				box.add(guangzhou);
				
				//定义第五个节点：“上海”，并加入到网络拓扑的数据模型中
				var shenzhen:Node = new Node();
				shenzhen.name = "深圳";
				shenzhen.location = new Point(160,200);
				box.add(shenzhen);
				
				//定义中国--北京之间的连接线
				var zhongbei:Link = new Link(zhongguo,beijing);
				zhongbei.name = "中国到北京的网络谱图";
				var zhongshang:Link = new Link(zhongguo,shanghai);
				zhongshang.name = "中国到上海的网络谱图";
				var zhongguang:Link = new Link(zhongguo,guangzhou);
				zhongguang.name = "中国到广州的网络谱图";
				var zhongshen:Link = new Link(zhongguo,shenzhen);
				zhongshen.name = "中国到深圳的网络谱图";
				
				box.add(zhongbei);
				box.add(zhongshang);
				box.add(zhongguang);
				box.add(zhongshen);
				
				//重点：给树组件绑定数据，给表格绑定数据
				tree.dataBox = box;
				table.dataBox = box;
			}
		]]>
	</fx:Script>
	
	<!--实现效果：左边添加树组件，中间是拓扑组件，下方是表格组件-->
	<mx:Panel title="Hello Twaver!" width="100%" height="100%">
		<mx:HDividedBox width="100%" height="100%">
			<tw:Tree id="tree" width="30%" height="100%"/>
			<mx:VDividedBox width="100%" height="100%">
				<tw:Network id="network" width="100%" height="70%" backgroundColor="0x00ff00"/>
				<tw:Table width="100%" height="30%" id="table" editable="true">
					<tw:columns>
						<tw:TableColumn dataField="name" headerText="Name"/>
						<tw:TableColumn dataField="id" headerText="ID"/>
						<tw:TableColumn dataField="icon" headerText="Icon"/>
						<tw:TableColumn dataField="c:number" headerText="Number"/>
					</tw:columns>
			    </tw:Table>
			</mx:VDividedBox>
		</mx:HDividedBox>
	</mx:Panel>
	
</s:Application>