Я сделал список плитки является Adobe Flex следующимпроблема TileList creationComplete в Adobe Flex 3.0
<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>
и вот код для 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>
проблема событие creationComplete не уволен для каждого PageImageRenderer, и он запускается только для видимых в начале фрагментов, поэтому прямоугольники, нарисованные в initComponents(), отображаются только для этих фрагментов с допустимыми значениями, а когда я прокручиваю страницу до следующей строки с помощью функции scrollToIndex(), отображаются прямоугольники с предыдущими значениями. и для этих фрагментов не вызывается initComponents()? однако data.name, data.class отображаются правильно, но не прямоугольники, почему это так? Какое правильное событие, против которого я должен назвать initComponents()?