[jira] [Created] (FLEX-33383) List is Flickering on mobile when different number of lines in message

["Merten P. (JIRA)" <ji...@apache.org>]

Merten P. created FLEX-33383:
--------------------------------

             Summary: List is Flickering on mobile when different number of lines in message
                 Key: FLEX-33383
                 URL: https://issues.apache.org/jira/browse/FLEX-33383
             Project: Apache Flex
          Issue Type: Bug
          Components: Mobile: List
    Affects Versions: Apache Flex 4.9.0
            Reporter: Merten P.


On a List with an IconItemRenderer in it. When beginning to scroll on mobile, the list is flickering on the first 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.

Sample Code:

<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>

Solution:

Either in the list component:

<s:List xmlns:s="library://ns.adobe.com/flex/spark"
        initialize="initializeHandler(event)" horizontalScrollPolicy="off">
    <fx:Script>
        <![CDATA[
            import spark.layouts.HorizontalAlign;
            import spark.layouts.VerticalLayout;

            //init
            protected override function initializeHandler(e:FlexEvent):void
            {
                (dataGroup.layout as VerticalLayout).horizontalAlign = HorizontalAlign.CONTENT_JUSTIFY;
            }
        ]]>
    </fx:Script>
</s:List>

Or via Skinning:

package skins
{
    import spark.layouts.HorizontalAlign;
    import spark.layouts.VerticalLayout;
    import spark.skins.mobile.ListSkin;

    public class MyListSkin extends ListSkin
    {
        public function MyListSkin()
        {
            super();
        }

        //create children
        override protected function createChildren():void
        {
            super.createChildren();

            //change align on vertical layout
            if(dataGroup && dataGroup.layout && dataGroup.layout is VerticalLayout)
            {
                var layout:VerticalLayout = dataGroup.layout as VerticalLayout;
                layout.horizontalAlign = HorizontalAlign.CONTENT_JUSTIFY;
            }
        }
    }
}

with CSS:

s|List
{
    skinClass: ClassReference("skins.MyListSkin");
    horizontalScrollPolicy: off;
}

See: http://stackoverflow.com/questions/10490117/flex-mobile-list-flickers/14714690 for more info

--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators
For more information on JIRA, see: http://www.atlassian.com/software/jira