Question

Ok I have a List with an IconItemRenderer in it. When I set it’s dataprovider in AS3 and I begin scrolling, the list is flickering one time (gets white for one frame). This only happens when the messageField/messageFunction is set and there is a different number of lines in the message areas. I’m sure this is a framework bug. Has anyone had the same experience? I would be glad if someone knows a workaround for this. Thanks in advance.

---

Here’s an example code for a view component. Strange to say the flickering seems to take sometimes more, sometimes less time. I tested it on Android and in Desktop mode (adl), error occures on both. The “blabla..” is just to get a string with a random number of lines.

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView">
    <s:actionContent>
        <s:Button label="Set List" click="btn_click(event)"/>
    </s:actionContent>
    <s:List width="100%" height="100%" id="list">
        <s:itemRenderer>
            <fx:Component>
                <s:IconItemRenderer messageField="text"/>
            </fx:Component>
        </s:itemRenderer>
    </s:List>
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayList;

            protected function btn_click(event:MouseEvent):void
            {
                var al:ArrayList = new ArrayList;
                var obj:Object;
                var str:String = "blablablablablablablablablablablablablablablablablablablablabblablablablablablablablablablablablablablablablablablablablabblablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla";
                for(var i:int = 0; i < 20; i++) {
                    obj = new Object;
                    obj.text = str.substr(0, Math.random()*str.length);
                    al.addItem(obj);
                }
                list.dataProvider = al;
            }

        ]]>
    </fx:Script>
</s:View>

---

See bug report: https://issues.apache.org/jira/browse/FLEX-33383

For the workaround see the correct answer below.

Answer 1

I eventually found a workaround. Basically it’s just faking a drag event when the list dispatches the updateComplete event. This prevents the flickering when the user first starts to scroll and since updateComplete is called before the list is initially shown, there is no flickering at all. The positive side effect is that every time you change to a view with this list in it or when the list gets another data provider, the scroll bar is shown for a moment, so you can guess how large the list is without touching it.

So here’s the code. I use this list as a superclass for all of my lists:

import mx.events.FlexEvent;
import mx.events.TouchInteractionEvent;
import spark.components.List;

public class MyList extends List
{
    public function MyList()
    {
        super();

        //add event listeners
        addEventListener(FlexEvent.UPDATE_COMPLETE, updateCompleteHandler);
    }

    //update complete
    protected function updateCompleteHandler(event:FlexEvent):void
    {
        //fake touch start
        fakeTouchEvent(TouchInteractionEvent.TOUCH_INTERACTION_START);
        callLater(endTouch);
    }

    //quit touch event
    protected function endTouch():void {
        //fake touch end
        fakeTouchEvent(TouchInteractionEvent.TOUCH_INTERACTION_END);
    }

    //fake touch event
    protected function fakeTouchEvent(type:String):void {
        var evt:TouchInteractionEvent = new TouchInteractionEvent(type);
        evt.relatedObject = scroller;
        scroller.dispatchEvent(evt);
    }
}