Question

I have a mobile app that populates a list. This takes a couple of seconds so I am trying to display the busyindicator. I display the busy indicator when the view is activated and then when the list is complete I want to turn off the busy indicator.

My MXML for the busy indicator and the list declaration is like so:

<s:BusyIndicator id="BI"  visible="true" />

<s:List id="lst"  effectStart="lstStartHandler(event)"  effectEnd="lstFinishHandler(event)" fontSize="20" horizontalCenter="0" textAlign="right"  dataProvider="{dp}" useVirtualLayout="true" width="100%" height="100%" top="30" alternatingItemColors="[#66FFFF, #33CCCC]">

My event listeners are like so:

private function lstFinishHandler(event:EffectEvent):void {
            BI.visible = false
        }

        private function lstStartHandler(event:EffectEvent):void {
            BI.visible = true
        }

My busy indicator always stays on and never goes invisible. It appears the event functions do not execute.

Obviously I am doing something wrong but cannot figure it out. Any ideas would be appreciated.

cheers,

Answer 1

The effectStart and effectEnd properties in MXML are to add event handlers when a Flex effect class is playing an effect on your component.

If you are not triggering any effects on the List, then those event handlers are not going to be executed.

You need to tell the busy indicator to go away by some other means:

• dispatch your own event
• use data binding
• use view states and the currentState property
• etc…

You are already using data binding to set the dataProvider for the list, you could simply add another variable and bind to the visible property of the BusyIndicator:

<s:BusyIndicator visible="{isServerResponseComplete}" />

It feels wrong to add a bindable variable (`isServerResponseComplete’) just to do this, but it’s the simplest answer. Dispatching an event is probably a better approach, but it’s difficult to say exactly how you should do it w/out knowing how your app is structured.