viewstack和canvas

<?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" minWidth="955" minHeight="600"
               xmlns:tw="http://www.servasoftware.com/2009/twaver/flex"
               creationComplete="init();">
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            
            import twaver.Element;
            import twaver.ElementBox;
            import twaver.Node;
            import twaver.SelectionChangeEvent;
            private var box1:ElementBox = new ElementBox();
            private var box2:ElementBox = new ElementBox();
            
            private function init():void {
                vStack.selectedChild = ca1;
            }
            
            public function nt1Change(e:SelectionChangeEvent):void {
                Alert.show("nt1 select change");
            }
            
            public function nt2Change(e:SelectionChangeEvent):void {
                Alert.show("nt2 select change");
            }
            
            public function toView1():void {
                vStack.selectedChild = ca1;
                //Alert.show(box1.count+"*");
            }
            
            public function toView2():void {
                vStack.selectedChild = ca2;
                //Alert.show(box2.count+"*");
            }
            
            public function loadView1Node():void {
                var node1:Node = new Node("n1");
                node1.setLocation(10,10);
                
                var node2:Node = new Node("n2");
                node2.setLocation(100,10);
                
                box1.add(node1);
                box1.add(node2);
                this.nt1.elementBox = box1;
                this.nt1.addSelectionChangeListener(nt1Change);
            }
            
            public function loadView2Node():void {
                var node3:Node = new Node("n3");
                node3.setLocation(50,10);
                
                var node4:Node = new Node("n4");
                node4.setLocation(150,10);
                
                box2.add(node3);
                box2.add(node4);
                this.nt2.elementBox = box2;
                this.nt2.addSelectionChangeListener(nt2Change);
            }
        ]]>
    </fx:Script>

    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    <mx:VBox width="100%" height="100%">
        <mx:ViewStack id="vStack" width="100%" height="100%">
            <mx:Canvas id="ca1"  width="100%" height="100%">
                <tw:Network id="nt1" backgroundColor="#00FF00" width="100%" height="100%"/>
            </mx:Canvas>
            
            <mx:Canvas id="ca2" width="100%" height="100%">
                <tw:Network id="nt2" backgroundColor="#CCFFFF" width="100%" height="100%"/>
            </mx:Canvas>
        </mx:ViewStack>
        <mx:HBox>
            <s:Button label="视图1" click="toView1()"/>
            <s:Button label="加载视图1数据" click="loadView1Node()"/>
            <s:Button label="视图2" click="toView2()"/>
            <s:Button label="加载视图2数据" click="loadView2Node()"/>
        </mx:HBox>
    </mx:VBox>
</s:Application>