Flex Mobile Item Renderer in List

Question

I use an item renderer in flex mobile List component, item renderer have to display different images row by row according to received input data. I do these all controls in creationComplete of item renderer so that if its "X" make the source of image this one etc. But when I scroll it after List is created it resettles items but in different order, so that if "Item1" is on the first row of List after scrolling it goes to the last row and the last row comes to first place.

List component code:

<s:List id="lst" dataProvider="{dp}" width="100%" height="100%" 
        itemRenderer="renderer.YataklarViewRenderer"
        contentBackgroundAlpha="0" borderColor="#FFFFFF" borderVisible="true" >

    <s:layout>
        <s:VerticalLayout 
            horizontalAlign="center" 
            paddingBottom="10"
            paddingTop="10"
            paddingLeft="10"
            paddingRight="10"
            />
    </s:layout>
</s:List>

Item Renderer code:

protected function yataklarItem_creationCompleteHandler(event:FlexEvent):void
            {
                trace("Creation complete: "+ data['servisAdi']);    


                var servisAdi:String = data['servisAdi'];

                //header text ekle
                this.addElement(header);
                header_text.text = servisAdi;


                var odalar:ArrayCollection = new ArrayCollection();

                odalar = data['odalar'];

                for(var i:int=0;i<odalar.length;i++){



                    var mainContent:VGroup = new VGroup();
                    //                  mainContent.paddingBottom
                    mainContent.percentWidth = 100;
                    mainContent.percentWidth = 100;
                    mainContent.horizontalAlign = "center";
                    mainContent.verticalAlign = "middle";


                    var hContent:HGroup = new HGroup();
                    hContent.percentWidth = 100;
                    hContent.verticalAlign = "middle";
                    hContent.horizontalAlign = "left";


                    var col1:HGroup = new HGroup();
                    col1.percentWidth = 10;
                    col1.verticalAlign = "middle";
                    col1.horizontalAlign = "center";

                    var col2:HGroup = new HGroup();
                    col2.percentWidth = 20;
                    col2.verticalAlign = "middle";
                    col2.horizontalAlign = "center";


                    var imgCol:Image = new Image();
                    var txtOdaAdi:Label = new Label();

                    var oda:Object = new Object();
                    oda = odalar.getItemAt(i);

                    var odaAdi:String = oda['odaAdi'];
                    var baskinCinsiyyet:String = oda['baskinCinsiyet'];

                    txtOdaAdi.text = odaAdi;
                    imgCol.source = "images/yataklar/baskin"+baskinCinsiyyet+".png";

                    col1.addElement(imgCol);
                    col2.addElement(txtOdaAdi);


                    var ytk:ArrayCollection = new ArrayCollection();
                    ytk = oda['yataklar'];

                    var yataklarCol:HGroup = new HGroup();
                    yataklarCol.percentWidth = 70;
                    yataklarCol.horizontalAlign = "left";
                    yataklarCol.verticalAlign = "center";


                    for( var j:int=0;j<ytk.length;j++){

                        var yatakG:VGroup = new VGroup();
                        yatakG.gap = 5;
                        yatakG.horizontalAlign = "center";
                        yatakG.verticalAlign = "middle";

                        var yatak:Object = new Object();
                        yatak = ytk.getItemAt(j);

                        var yatakNo:int = yatak['yatakNo'];
                        var durumu:String = yatak['durumu'];

                        //uzerine tiklandiginda
                        var vizitId:String = yatak['vizitId'];
                        var hastaId:String = yatak['hastaId'];
                        var adiSoyadi:String = yatak['adiSoyadi'];


                        var txtYatakNo:Label = new Label();
                        txtYatakNo.text = yatakNo.toString();

                        var imgYatakImg:Image = new Image();
                        imgYatakImg.source = "images/yataklar/yatak"+durumu+".png";

                        yatakG.addElement(imgYatakImg);
                        yatakG.addElement(txtYatakNo);


                        yataklarCol.addElement(yatakG);
                    }


                    hContent.addElement(col1);
                    hContent.addElement(col2);
                    hContent.addElement(yataklarCol);

                    mainContent.addElement(hContent);
                    mainContent.addElement(line);

                    this.addElement(mainContent);
                }




            }
<fx:Declarations>


        <s:Group id="header" width="100%" height="50">

            <s:Rect 
                width="100%" height="100%">
                <s:fill>
                    <s:LinearGradient rotation="90">
                        <s:GradientEntry color="0x314F83" />
                    </s:LinearGradient>
                </s:fill>
            </s:Rect>

            <s:VGroup id="vgt" paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" gap="10" width="100%" 
                      verticalAlign="middle" horizontalAlign="left" height="100%">
                <s:Label id="header_text" color="#FFFFFF" verticalAlign="middle" height="100%"/> 
            </s:VGroup>

        </s:Group>


        <s:Line id="line" width="100%">
            <s:stroke>
                <s:SolidColorStroke color="0x5b5b5b" weight="2"/>
            </s:stroke>
        </s:Line>






    </fx:Declarations>


    <s:layout>
        <s:VerticalLayout verticalAlign="top" horizontalAlign="center" />       
    </s:layout>

I think everything is correct in my codes but I have to add some extra lines. Can anybody help me with that tricky line?

JeffryHouser JeffryHouser · Accepted Answer · 2012-04-26T13:46:35

do these all controls in creationComplete of item renderer so that if its "X" make the source of image this one etc.

That's a problem. A Flex List only renders what is shown on screen, they do not render what is off screen. When you scroll the renderer is re-used, new renderers are not created. The creationComplete event will not be fired again to update the render for the data that is being displayed.

The process of reusing renderers is called Renderer recycling. To properly create a renderer, you must listen for the dataChange event to tweak the renderers display based on the data.

Some people prefer to override the set data method in the itemRenderer and make their changes there. This is also an equally acceptable approach.

The reason setting useVirtualLayout to false worked is because that tells the list to render every item separately without making use of renderer recycling. This is not the best choice for performance or memory usage reasons on mobile.

Please read the docs on using the data property in itemRenderers.

Flex Mobile Item Renderer in List

2 Answers