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主界面和右下的控制面板）