2012/05/30

SWF Loading and Data Interaction on Flex

During the process of modularity development, some users may make each functional module into a sub swf respectively. Then a main program will load and display it and perform data interaction respectively.
In this process two main steps are included:
  1. Loading swf
  2. This step is quite easy, for you can just use the method “load” in SWFLoader to load swf. 
    loader.load("SWFLoadedDemo.swf"); 
  3. The data interaction between the main program and the sub swf
  4. This can be realized by the following code:
    var obj:Object=SystemManager(loader.content).application; tree.dataBox=obj.getBox();
There is one thing we need to pay attention to: Generally, we will add the following event to perform data loading.
loader.addEventListener(Event.COMPLETE, function(ev:Event):void
                   {
                        loadSWF(ex);
                    });
It is useless to fetch data after loading swf without the creation of swf. So if you just write the above codes, the null pointer will turn out as being abnormal.
The solution is provided as follows: Performing data interaction after the knowledge of the creation of swf by means of listening FlexEvent.APPLICATION_COMPLETE.
loader.addEventListener(Event.COMPLETE, function(ev:Event):void
           {
               var loadedSM:SystemManager=SystemManager(loader.content);
               loadedSM.addEventListener(FlexEvent.APPLICATION_COMPLETE, function(ex:Event):void
                  {
                      loadSWF(ex);
                   });
             });
Here is the detailed code:
SWFDemo.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                creationComplete="init();"
                layout="absolute"
                width="100%"
                height="100%"
                xmlns:tw="http://www.servasoftware.com/2009/twaver/flex">
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.controls.SWFLoader;
            import mx.events.FlexEvent;
            import mx.managers.SystemManager;
            private var loader:SWFLoader=new SWFLoader();

            private function init():void
            {
                loader.percentWidth=100;
                loader.percentHeight=100;
                swfPanel.addChild(loader);
                loader.addEventListener(Event.COMPLETE, function(ev:Event):void
                    {
                        var loadedSM:SystemManager=SystemManager(loader.content);
                        loadedSM.addEventListener(FlexEvent.APPLICATION_COMPLETE, function(ex:Event):void
                            {
                                loadSWF(ex);
                            });
                    });

                loader.load("SWFLoadedDemo.swf");
            }

            private function loadSWF(e:Event):void
            {
                var obj:Object=SystemManager(loader.content).application;
                tree.dataBox=obj.getBox();
            }
        ]]>
    </mx:Script>
    <mx:HBox width="100%"
             height="100%">
        <mx:VBox width="15%"
                 height="100%">
            <mx:Button label="LOAD"
                       click="loadSWF(event)"/>
            <tw:Tree id="tree"
                     width="100%"
                     height="100%"/>
        </mx:VBox>
        <mx:VBox width="85%"
                 height="100%"
                 id="swfPanel">
            <!--<mx:SWFLoader height="100%"
                 width="100%"
                 id="loader"
                 source="SWFLoadedDemo.swf"
                 showBusyCursor="true">
                 </mx:SWFLoader>-->
        </mx:VBox>
    </mx:HBox>
</mx:Application>
SWFLoadedDemo.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="absolute"
                creationComplete="init();"
                width="100%"
                height="100%"
                xmlns:tw="http://www.servasoftware.com/2009/twaver/flex">
    <mx:Script>
        <![CDATA[
            import twaver.ElementBox;
            import twaver.Node;
            private var box:ElementBox=new ElementBox();

            private function init():void
            {
                network.elementBox=box;

                for (var i:int=0; i < 5; i++)
                {
                    var n:Node=new Node();
                    n.name="node" + i;
                    n.setLocation(Math.random() * 800, Math.random() * 600);
                    box.add(n);
                }
            }

            public function getBox():ElementBox
            {
                return box;
            }
        ]]>
    </mx:Script>
    <tw:Network id="network"
                width="100%"
                height="100%"/>
</mx:Application>

No comments:

Post a Comment