2 Replies Latest reply on Oct 28, 2011 10:37 AM by alinator11

    How to pre-load or pre-build a view in Flex for mobile

    Cedmo55

      Dear forum,

       

      I'm quite new to Flex Development and just recently switched from "plain" AS3 projects, so please excuse maybe basic question.

       

      Currently we're building some apps for iOS and Android and most of the stuff works out.

       

      Our Problem is, that some of our views are quite slow when we push a new view. Our idea was to some kind of pre-loading or pre-building the view as we did in Actionscript.

       

      Is there any way to really create the next view in the background while still on the current view? Any hint welcome.

       

      Best,

      Cedric

        • 1. Re: How to pre-load or pre-build a view in Flex for mobile
          alinator11

          I accomplished this with two SWFs...

           

           

          <s:SWFLoader id="busyLoader"

                           x="0" y="0"

                           width="100%" height="100%"

                           source="@Embed('assets/CheckingSWF.swf')"

                           autoLoad="false"

                           visible="false"

                           />

              <!--<s:Group id="cameraGroup"  x="0" y="0">           

                  <mx:UIComponent id="vidComponent" x="0" y ="0"/>

              </s:Group>-->

                  <s:SWFLoader

                      id="shooterOverlay"

                      name="shooterOverlay"

                      x="0" y="0"

                      width="100%" height="100%"

                      scaleContent="true"

                      source="@Embed('assets/GunSiteAndroid.swf')"

                      autoLoad="false"

                      creationComplete="{swfLoaded(event)}"

                      />

           

          The first SWFLoader is a loading screen that I just load and then turn visible any time I have a long process. On the same view, I load the "shooterOverlay" and when I get confirmation that all of its members are loaded, I turn the loader invisible, call unloadAndStop() on that SWFLoader and then turn the long process visible.

           

          As a note, if you do use SWF's as I have, you can also attach listeners to the items in the loader:

           

          shooterOverlay.load();

          shooterOverlay.content.addEventListner(Event.ADDED_TO_STAGE, myHandler);

           

          var mc:MovieClip;

          private function myHandler(event:Event) :void{

          if(event.target is MovieClip) {

          mc = MovieClip(event.target);

          }

          }

           

          What is cool about this is that once you know it's all loaded, you can call mc.gotoAndPlay(1) or mc.play() and get your screen to play while knowing that everything you need on screen is loaded and ready to go...

           

          BTW, if you don't want to go the SWF approach, Flex has a BusyIndicator:

           

          <s:BusyIndicator  id="busyIndicator" x="{getCenterX()}" y="{getCenterY()}" symbolColor="blue" rotationInterval="200"/>

          • 2. Re: How to pre-load or pre-build a view in Flex for mobile
            alinator11 Level 2

            I should also mention another idea for solving this problem which I've used successfully in the past. One approach I've used is to store all of my screens' data in an object that gets passed around. For instance, I might have an object called "GlobalObjects" which has everything my app needs (or most everything it needs) loaded into it at startup. Then, when I need to move screens, all is loaded and held in GlobalObjects and thus there's no delay in showing a screen.

             

            I've also used an approach where I have kept all screens in an array or a Map (Object) and then just retrieved the proper screen at the proper position of the array. This has the added benefit of being able to work with the screens while they are not being shown to the user.

             

            Another tool you may want to use for this process, if you're not aware, is PersistenceManager. With PersistenceManager, you can serialize objects to the device.