注:原创作品,分享以供交流学习,转载请注明出处。
twaver中树,网络拓扑,表格组件的数据模型是可以共享的,下面是实例。
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>