TileList 创建 Adobe Flex 3.0 中的完整问题
我已经制作了一个 Adobe Flex 的图块列表
<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>
问题是不会为每个 PageImageRenderer 触发creationComplete 事件,并且仅针对开始时可见的图块触发该事件,因此在 initComponents() 中绘制的矩形仅针对具有有效值的图块绘制,当我使用scrollToIndex()函数滚动到下一行时,矩形将显示以前的值。并且没有为这些图块调用 initComponents() ?但是 data.name、data.class 正确显示,但矩形不正确,为什么会这样?我应该调用 initComponents() 的正确事件是什么?
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()?
请参阅以下帖子以获得答案
www.codeproblem.com
see following post for answer
www.codeproblem.com