TileList creationComplete problem in Adobe Flex 3.0

Question

I have made a tile list is Adobe Flex as follows

<mx:TileList height="130" width="636" rowCount="1" 
    columnCount="8" columnWidth="150" direction="horizontal" 
    allowMultipleSelection="false" enabled="true" borderStyle="solid" 
    id="profilelist" verticalScrollPolicy="off" dataProvider="{xmlListColl}" itemRenderer="PageImageRenderer" cornerRadius="5" alpha="1.0" themeColor="#8791F3" x="36.5" y="29" change="openThisPage(event)">
    </mx:TileList>

and here is the code for PageImageRenderer

    <?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="146" height="130" creationComplete="{initComponents()}">
<mx:Script>
    <![CDATA[
        import mx.controls.Alert;

        private function initComponents():void
        {
            var rectWidth:uint = 75;
            var rectHeight:uint = 10;
            var profilePopularity:Number = data.popularity;
            var gradientFillColors:Array = [0x000000,0x000000];
            var gradientAlpha:Array = [1,1];
            var gradientRatio:Array = [220,255];
            var fillAreaWidth:uint = 0;

            this.graphics.lineStyle(1,0x000000);
            this.graphics.moveTo(70,70);
            this.graphics.lineTo(70+rectWidth,70);
            this.graphics.lineTo(70+rectWidth,70+rectHeight);
            this.graphics.lineTo(70,70+rectHeight);
            this.graphics.lineTo(70,70);
            this.graphics.lineStyle();
            //border of rectangle has been drawn

            //first calculate the width of filled area
            fillAreaWidth = (rectWidth * profilePopularity)/100;

            //now on the basis of popularity set the colors and width of filling area
            if(profilePopularity<=10)
            {

                gradientFillColors[0] = 0x8ebc03;
                gradientFillColors[1] = 0xc9f936;

            }
            else if(profilePopularity>10 && profilePopularity<=40)
            {

                gradientFillColors[0] = 0xe7e405;
                gradientFillColors[1] = 0xf9f768;
            }
            else if(profilePopularity>40 && profilePopularity<=60)
            {

                gradientFillColors[0] = 0xeeb00a;
                gradientFillColors[1] = 0xfbcf57;
            }
            else if(profilePopularity>60 && profilePopularity<=75)
            {

                gradientFillColors[0] = 0xb38404;
                gradientFillColors[1] = 0xecad05;
            }
            else if(profilePopularity>75 && profilePopularity<=90)
            {

                gradientFillColors[0] = 0xf2a010;
                gradientFillColors[1] = 0xf3b851;
            }
            else if(profilePopularity>90 && profilePopularity<=99)
            {

                gradientFillColors[0] = 0xec4004;
                gradientFillColors[1] = 0xf18964;
            }
            else if(profilePopularity==100)
            {
                gradientFillColors[0] = 0xff0000;
                gradientFillColors[1] = 0xff8a00;
            }

            this.graphics.beginGradientFill(GradientType.LINEAR,gradientFillColors,gradientAlpha,gradientRatio);

            this.graphics.drawRect(70, 71, fillAreaWidth, rectHeight-1);

            this.graphics.endFill();
        }
    ]]>
</mx:Script>
    <!-- Effects -->
    <mx:Fade id="fadeIn" duration="2500" alphaFrom="0" alphaTo="1"/>
    <mx:Fade id="fadeOut" duration="2500" alphaFrom="1" alphaTo="0"/>

    <!-- Images and labels -->
    <mx:Image source="{data.thumbnail}" x="10" y="10" height="48" width="48" completeEffect="{fadeIn}"/>
    <mx:Label x="68" y="10" text="{data.name}" width="71"/>
    <mx:Label x="68" y="27" text="{data.class}"/>
    <mx:Label x="68" y="44" text="{data.school}"/>

</mx:Canvas>

the problem is the creationComplete event is not fired for each PageImageRenderer, and it is fired only for the tiles visible at start so the rectangles drawn in initComponents() is only drawn for those tiles with valid values, and when I scroll to next row using scrollToIndex() function the rectangles are shown with previous values. and no initComponents() is called for these tiles? however the data.name, data.class are correctly displayed but not the rectangles, why it is so? What is the proper event against which I should call initComponents()?

Answer 1

see following post for answer

www.codeproblem.com