actionscript 3 - Flex: how to call titlewindow when changing tab, before tab's UI components are built -

actionscript 3 - Flex: how to call titlewindow when changing tab, before tab's UI components are built -

my flex4 app uses tab bar follows:

<s:tabbar id="tabs"/> <mx:viewstack id="vs" height="100%" width="100%"> <s:navigatorcontent label="tab 1" width="100%" height="100%"> ... </s:navigatorcontent> <s:navigatorcontent label="tab 2" width="100%" height="100%"> ... </s:navigatorcontent> <s:navigatorcontent label="tab 3" width="100%" height="100%"> ... </s:navigatorcontent> </mx:viewstack> </s:tabbar>

the app opens tab 1 default. tab 2 not built yet.

the problem is, when alter tabs tab 2, flex takes long time build tab 2 ui components , display tab contents. app freezes during process. need provide indication user he/she needs wait several seconds.

i've tried using cursor manager create busy mouse icon. didn't work (e.g. cursor changes when tab 2 completes building).

i'd display title window while tab builds. but, don't know how launch when switch tab, such title window appears before , while tab 2 building.

i know mx viewstack can have change="" property, when utilize title window doesn't appear until tab 2 completes loading.

i'm not sure how implement calllater() function in below scenario.

can help me figure out how trigger title window appears before , while tab 2 builds?

references:

how implement "please wait ...." screen in flex when app busy

flex: looking design pattern display busy cursor while app "busy"

update 1:

with createdeferredcontent comment david below , settimeout comment weltraumpirat in previous post linked above, able hack solution resulting in busy cursor displayed while content in tab 2 loads. here's did:

create tab 2 component implementing following:

<s:vgroup ... preinitialize="preinit" creationcomplete="start1"> private function preinit():void { mx.managers.cursormanager.setbusycursor(); } private function start1():void { settimeout(start2,100); } private function start2():void { // create mxml components mybc.createdeferredcontent(); // place required actionscript code here mx.managers.cursormanager.removebusycursor(); } ... <s:bordercontainer id="mybc" creationpolicy="none"> <!--- place mxml code here create layout --> </s:bordercontainer> </s:vgroup>

a few notes:

(1) while busy cursor display before tab 2 completes building, app still freezes , when user moves mouse busy cursor stays set on screen while default mouse icon (the arrow) moves around screen controlled user until tab 2 completes building , gets displayed. not ideal, @ to the lowest degree busy cursor indicates app doing something. if wanted to, replace busy cursor titlewindow indicating busy, etc.

(2) changing timeout 100 ms 50 ms still produces results. reducing 10 ms causes busy cursor appear when components built , displayed. it's expected reducing timeout below threshold cause such behavior. wonder if threshold timeout value (e.g. somewhere between 10 , 50 ms) depends on client computer? or, if used 100 ms, safely cover client machines? (how know will?)

(3) have expected replacing settimeout(start2,100); calllater(start2); , deleting creationpolicy="none" should produce similar result, doesn't (e.g. busy cursor never appears , app freezes few seconds until tab 2 gets displayed). i've never used calllater() before, maybe did wrong (?).

in case have heavy calculations during tab2 initializaition can split them little chunks , execute them consecutively using calllater mechanism.

here simplified example:

<?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"> <fx:script> <![cdata[ import mx.core.flexglobals; import mx.events.flexevent; import mx.managers.cursormanager; private var i:int = 0; protected function nc2_initializehandler(event:flexevent):void { flexglobals.toplevelapplication.enabled = false; cursormanager.setbusycursor(); calllater(inittab2); } protected function inittab2():void { var j:int; //part of calculations (j=0; j< 10000; j++) { i++; } //check if completed if (i<1000000) { //if not phone call 1 time again calllater(inittab2); } else { //finished cursormanager.removebusycursor(); flexglobals.toplevelapplication.enabled = true; } } ]]> </fx:script> <fx:declarations> <!-- place non-visual elements (e.g., services, value objects) here --> </fx:declarations> <s:vgroup gap="10" top="10" left="10"> <s:tabbar id="tabs" dataprovider="{vs}"/> <mx:viewstack id="vs" width="100%" > <s:navigatorcontent label="tab 1" width="100%" height="100%" > <s:label text="tab1 content"/> </s:navigatorcontent> <s:navigatorcontent id="nc2" label="tab 2" width="100%" height="100%"> <s:label text="tab2 content" initialize="nc2_initializehandler(event)"/> </s:navigatorcontent> <s:navigatorcontent label="tab 3" width="100%" height="100%"> <s:label text="tab3 content"/> </s:navigatorcontent> </mx:viewstack> </s:vgroup>

actionscript-3 flex