Question

Just wondering if anyone has encountered this and has a good fix.

Here is how to reproduce:

Create a tab navigator (or viewstack, whatever) and add a couple tabs.

On your tab add a show event handler. Inside the event handler call invalidateProperties() and invalidateDisplayList() on one of the children of your tab. Put a break point on the childs commitProperties() and updateDisplayList(). You’ll notice that the updateDisplayList() gets called before commitProperties() which results in incorrect behaviour.

I noticed this problem when setting a DataGrid’s dataprovider from inside the show handler. Setting the dataProvider causes the grid to invalidate both properties and displayList, updateDisplayList() will get called first, then commitProperties() which will result in the grid not updating the rows.

It appears the root of the problem is that the show event gets dispatched from within LayoutManagers validateDisplayList() loop, so invalidating a child object from within the show handler results in its updateDisplayList() getting called immediately.

I’m aware that I can use callLater() inside the show handler or several other hacky solutions but I would prefer to fix the root of the problem as I dont want to be finding / fixing this issue every time someone uses the show event and bad things happen.

I’m considering changing UIComponent.setVisible() which dispatches the show event and using callLater() on the dispatchEvent() so the show event wont get dispatched mid validation cycle unless anyone has a better idea.

<mx:Script>
    <![CDATA[
        import mx.controls.Label;

        private var tabLabel:Label;
        private function onCreationComplete():void
        {
            var ifactory:IFactory = TestLabel;
            tabLabel = Label(ifactory.newInstance());
            tab1.addChild(tabLabel);
        }


        private function onTab1Show():void
        {
            tabLabel.invalidateProperties();
            tabLabel.invalidateDisplayList();
        }

    ]]>
</mx:Script>

<mx:Component id="TestLabel">
    <mx:Label text="Test">
        <mx:Script>
            <![CDATA[

                override protected function commitProperties():void
                {
                    super.commitProperties();   
                }
                override protected function updateDisplayList(w:Number, h:Number):void
                {
                    super.updateDisplayList(w, h);                  
                }

            ]]>
        </mx:Script>
    </mx:Label>
</mx:Component>

<mx:TabNavigator height="200" width="200" creationComplete="onCreationComplete()">
    <mx:Canvas id="tab1" height="100%" width="100%" label="Tab 1" show="onTab1Show()" />
    <mx:Canvas height="100%" width="100%" label="Tab 2" />
</mx:TabNavigator>

Answer 1

I decided a better solution to this issue was a small tweak to LayoutManager. It should be smart enough to know when validating an object if any of the previous phases are invalid.

This problem can manifest itself in several ways. Essentially invalidating objects from within the measure() or the updateDisplayList() methods can cause this. For instance, if an event is dispatched from within the measure() function, and the handler for the event happens to invalidate an objects size and properties, the measure() function may get ran before commitProperties() potentially breaking the component.

The show event is dispatched from within UIComponent’s updateDisplayList() which is why it is subject to this failure.

I ended up modifying validateSize() and validateDisplayList() slightly. Added a bit of code to check for the invalid flags of previous phases and to re-invalidate the object if necessary. Also added a flag to force LayoutManager to run another cycle immediately if an object is re-invalidated due to the above condition.

Just as an FYI, its usually not a good idea to modify the SDK but it can be done on a per-project basis by copying the SDK file into a matching folder structure in your project and doing a clean on the project. The file in your project will be used rather than the one in the SDK.

private function validateSize():void
{
    // trace("--- LayoutManager: validateSize --->");

    //SDK Mod - Storage for items to be re-invalidated.
    var reInvalidate:Array = [];

    var obj:ILayoutManagerClient = ILayoutManagerClient(invalidateSizeQueue.removeLargest());
    while (obj)
    {
        // trace("LayoutManager calling validateSize() on " + Object(obj));


        //SDK Mod - Check if we need to record this item due to invalid dependencies.
        if (obj is UIComponent)
        {
            if (UIComponent(obj).mx_internal::invalidatePropertiesFlag == true)
            {
                //Record the invalid item.
                reInvalidate.push(obj);
                //Set flag so LayoutManager immediately runs another cycle
                recycleImmediately = true;
            }
        }

        obj.validateSize();
        if (!obj.updateCompletePendingFlag)
        {
            updateCompleteQueue.addObject(obj, obj.nestLevel);
            obj.updateCompletePendingFlag = true;
        }

        // trace("LayoutManager validateSize: " + Object(obj) + " " + IFlexDisplayObject(obj).measuredWidth + " " + IFlexDisplayObject(obj).measuredHeight);

        obj = ILayoutManagerClient(invalidateSizeQueue.removeLargest());
    }

    //Re-invalidate any items with invalid dependencies.
    while (reInvalidate.length > 0)
        invalidateSize(ILayoutManagerClient(reInvalidate.shift()));

    if (invalidateSizeQueue.isEmpty())
    {
        // trace("Measurement Queue is empty");

        invalidateSizeFlag = false;
    }

    // trace("<--- LayoutManager: validateSize ---");
}
private function validateDisplayList():void
{

    // trace("--- LayoutManager: validateDisplayList --->");

    //SDK Mod - Storage for items to be re-invalidated.
    var reInvalidate:Array = [];

    var obj:ILayoutManagerClient = ILayoutManagerClient(invalidateDisplayListQueue.removeSmallest());
    while (obj)
    {
        // trace("LayoutManager calling validateDisplayList on " + Object(obj) + " " + DisplayObject(obj).width + " " + DisplayObject(obj).height);



        //SDK Mod - Check if we need to record this item due to invalid dependencies.
        if (obj is UIComponent)
        {
            if (UIComponent(obj).mx_internal::invalidatePropertiesFlag == true ||
                UIComponent(obj).mx_internal::invalidateSizeFlag == true)
            {
                //Record the invalid item.
                reInvalidate.push(obj);
                //Set flag so LayoutManager immediately runs another cycle
                recycleImmediately = true;
            }
        }

        obj.validateDisplayList();
        if (!obj.updateCompletePendingFlag)
        {
            updateCompleteQueue.addObject(obj, obj.nestLevel);
            obj.updateCompletePendingFlag = true;
        }

        // trace("LayoutManager return from validateDisplayList on " + Object(obj) + " " + DisplayObject(obj).width + " " + DisplayObject(obj).height);

        // Once we start, don't stop.
        obj = ILayoutManagerClient(invalidateDisplayListQueue.removeSmallest());
    }

    //Re-invalidate any items with invalid dependencies.
    while (reInvalidate.length > 0)
        invalidateDisplayList(ILayoutManagerClient(reInvalidate.shift()));

    if (invalidateDisplayListQueue.isEmpty())
    {
        // trace("Layout Queue is empty");

        invalidateDisplayListFlag = false;
    }

    // trace("<--- LayoutManager: validateDisplayList ---");
}

Then inside doPhasedInstantiation()
.
.
.

if (invalidatePropertiesFlag ||
        invalidateSizeFlag ||
        invalidateDisplayListFlag)
    {
        //SDK Mod - Check if we re-invalidated any items durring the cycle. 
        if (recycleImmediately == false)
        {
            //No items were re-invalidated, default behavior.
            callLaterObject.callLater(doPhasedInstantiation);
        }
        else
        {
            //We re-invalidated items durring the current cycle, run another cycle immediately and bail out.
            recycleImmediately = false;
            doPhasedInstantiation();
            return;
        }
    }