TileList problème creationComplete dans Adobe Flex 3.0

Question

Je l'ai fait une liste de tuiles est Adobe Flex comme suit

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

et est ici le code pour 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>

le problème est l'événement creationComplete ne se déclenche pas pour chaque PageImageRenderer, et il est tiré que pour les tuiles visibles au début de sorte que les rectangles dessinés dans initComponents () est seulement tirer pour les carreaux avec des valeurs valides, et quand je défiler à rangée suivante en utilisant la fonction scrollToIndex () les rectangles sont présentées avec des valeurs précédentes. et pas initComponents () est appelé pour ces tuiles? mais le data.name, data.class sont affichés correctement mais pas les rectangles, pourquoi il est si? Quel est l'événement approprié contre lequel je devrais appeler initComponents ()?

Answer 1

voir la suite après pour la réponse

www.codeproblem.com