While loading data make all the components disabled in adobe flex

Question

I have a vertical tab-bar with 4 items with different sub tabs. All the four items use data from a single xml file, which is a big file. When the user clicks on a tab, while the data is being loaded this error is shown.

TypeError: Error #1009: Cannot access a property or method of a null object reference.

I want to disable all the tabs while the xml file is being loaded.

Answer 1

you can display an overlay component which will block all events. and that overlay can be removed once all data is loaded.

to make it more cool overlay can have background partially transparent.

Answer 2

You can set the main application to disabled; which should disable all children. Use the enabled property and set it to false. IF you want to stop mouse interaction too, be sure to set the mouseEnabled property to false.

Answer 3

Control the enabled/disabled property by binding to getters and setters on the data you're working with. For example:

<mx:Script>
    <![CDATA[
        [Bindable]
        public var myParsedXML:Object;

        private var _myData:Object;

        public function set myData(value:Object):void
        {
            //Check for null
            if(value)
            {
                myTabs.enabled = true;
            }
            else
            {
                myTabs.enabled = false;
            }
            _myData = value;
        }

        public function get myData(value:Object):void
        {
            return _myData;
        }
    ]]>
</mx:Script>
<mx:Binding source="myParsedXML" destination="myData" />
<mx:TabNavigator id="myTabs">
    <mx:VBox label="tab 1">

    </mx:VBox>
    <mx:VBox label="tab 2">

    </mx:VBox>
</mx:TabNavigator>    

Once you've created this property, you can bind to it and be sure that it will be notified when the data is set.