tree topo

我是想做个左右结构的页面，左面是颗数，右边是拓扑图。
我想实现的是，比如：四川省，下面有个成都市和绵阳市。我想在tree里面实现四川省这个父节点下面挂着成都市和绵阳市两个子节点。同时在拓扑页面上面呈现四川省分别link上成都市和绵阳市。但是写出来的效果不对。请教你们是怎么实现的？
代码:
<?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:mx="library://ns.adobe.com/flex/mx"
pageTitle="TWaverFlex" creationComplete="init()"
xmlns:twaver="http://www.servasoftware.com/2009/twaver/flex">
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import spark.components.Group;
import twaver.ElementBox;
import twaver.Group;
import twaver.Link;
import twaver.Node;
private function init():void
{
var networkbox:ElementBox=new ElementBox();
var treebox:ElementBox=new ElementBox();

network.elementBox=networkbox;
tree.dataBox=treebox;

var group:twaver.Group=new twaver.Group();
group.name="四川省";
treebox.add(group);

var parentnode:Node=createNode("四川省",20,20);
var node1:Node=createNode("成都",200,100);
var node2:Node=createNode("绵阳",210,50);

group.addChild(node1);
group.addChild(node2);

networkbox.add(parentnode);
networkbox.add(node1);
networkbox.add(node2);

var link1:Link=new Link(parentnode,node1);
var link2:Link=new Link(parentnode,node2);
networkbox.add(link1);
networkbox.add(link2);

}

private function createNode(name:String,x:int,y:int):Node
{
var node:Node=new Node();
node.name =name;
node.setLocation(x,y);
return node;
}
]]>
</fx:Script>
<s:BorderContainer width="100%" height="100%">
<mx:HDividedBox width="100%" height="100%">
<twaver:Tree id="tree" width="30%" height="100%"/>
<twaver:Network id="network" width="70%" height="100%"/>
</mx:HDividedBox>
</s:BorderContainer>
</s:Application>


不需要创建两份box的，tree和network共享一个box即可


1。把你的tree设置成与network共用同一个box。tree.DataBox = networkBox;
2.构建数据的时候这样构造
代码:
var sichuan:Node = new Node();
var chengdu:Node = new Node();
var jinyang:Node = new Node();
sichuan.addChild(chengdu);
sichuan.addChild(jinyang);
var l1:Link = new Link(sichuan,jinyang);
var l2:Link = new Link(sichuan,chengdu);
networkBox.add(sichuan);
networkBox.add(chengdu);
networkBox.add(jinyang);
networkBox.add(l1);
networkBox.add(l2);

节点的位置你自己调整一下就行了。
这样两步你看看是不是就搞定了。

同意楼上，同时Link也需要加到elementBox中。
代码:
networkBox.add(l1);
networkBox.add(l2);

如果不想在tree显示link，可以在tree上加个visibleFunction
代码:
tree.visibleFunction = function visibleFunction(element:IElement):Boolean{
return !(element is Link);
};


代码:
serializable = null;
var node:IData = demoBox.selectionModel.lastData;
if(node != null){
var component:UIComponent = null;
var clazz:Class = node.getClient("demo") as Class;
if(clazz != null){
component = new clazz();
node.setClient("demo", component);
map[component] = node;
}
component = node.getClient("demo") as UIComponent;
if(component != null){
demoPane.addChild(component);
demoPane.title = node.name;
demoPane.titleIcon = DemoImages.leaf;

serializable = component as ISerializable;
if(serializable != null){
consolePane.visible = true;
consolePane.includeInLayout = true;
}
notifier = component as IObserver;
if(notifier != null){
notifier.onShown();
}
}

这一段是什么意思？这一段看不太懂，能否讲解下？

选中监听器，用于切换Demo，所做的就是打开tree上选中节点对应的Demo（包括右边的Demo主界面和右下的控制面板）