About the itemRenderer-Performance-Issues...
I've written an itemRenderer based no IconItemRenderer with some texts
and a lot of (fxg) images... and the scrolling is horrible...
Maybe someone can tell me what's wrong with my itemRenderer as all my
other renderers performe quite good...
Code is something like that (replaced some things with pseudo code...
for better understanding)...
/**
* Created with IntelliJ IDEA.
* User: Christian
* Date: 11.03.13
* Time: 14:09
* To change this template use File | Settings | File Templates.
*/
package de.somePackage {
import flash.display.GradientType;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Matrix;
import spark.components.IconItemRenderer;
import spark.components.supportClasses.StyleableTextField;
import spark.core.SpriteVisualElement;
import spark.primitives.BitmapImage;
public class MyRenderer extends IconItemRenderer{
////////////////////////////////////////////////////////////////////////////
// CONSTANTS
////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////
// FIELDS
////////////////////////////////////////////////////////////////////////////
private var matrix:Matrix;
////////////////////////////////////////////////////////////////////////////
// USER INTERFACE COMPONENTS
////////////////////////////////////////////////////////////////////////////
private var textDisplay1:StyleableTextField;
private var textDisplay2:StyleableTextField;
private var textDisplay3:StyleableTextField;
private var fxgImg1:SpriteVisualElement;
private var fxgImg2:SpriteVisualElement;
private var fxgImg3:SpriteVisualElement;
private var fxgImg4:SpriteVisualElement;
private var fxgImg5:SpriteVisualElement;
private var fxgImg6:SpriteVisualElement;
private var dataChanged:Boolean;
override public function set data(value:Object):void
{
super.data = value;
dataChanged = true;
invalidateProperties();
invalidateDisplayList()
}
////////////////////////////////////////////////////////////////////////////
// CONSTRUCTOR
////////////////////////////////////////////////////////////////////////////
public function MyRenderer ()
{
super();
//cacheAsBitmap = true; -> Already setted in LabelItemRenderer
height = 55;
iconWidth = 51;
iconHeight = 51;
mouseChildren = false;
addEventListener(MouseEvent.CLICK, handleMouseClick);
iconScaleMode = "letterbox";
iconFunction = assignBitmap;
messageFunction = assignMessage;
labelFunction = assignLabel;
}
////////////////////////////////////////////////////////////////////////////
// ITEM RENDERER OVERRIDES
////////////////////////////////////////////////////////////////////////////
override protected function createLabelDisplay():void
{
labelDisplay =
StyleableTextField(createInFontContext(StyleableTextField));
labelDisplay.styleName = this;
labelDisplay.editable = false;
labelDisplay.selectable = false;
labelDisplay.multiline = false;
labelDisplay.wordWrap = false;
labelDisplay.styleDeclaration =
styleManager.getStyleDeclaration(".textField_S3_C1");
labelDisplay.commitStyles();
addChild(labelDisplay);
}
override protected function createMessageDisplay():void
{
messageDisplay =
StyleableTextField(createInFontContext(StyleableTextField));
messageDisplay.styleName = this;
messageDisplay.editable = false;
messageDisplay.selectable = false;
messageDisplay.multiline = false;
messageDisplay.wordWrap = false;
messageDisplay.styleDeclaration =
styleManager.getStyleDeclaration(".textField_S3_C1");
messageDisplay.commitStyles();
messageDisplay.setStyle("textAlign", "center");
addChild(messageDisplay);
}
protected function createTextDisplay1():void
{
textDisplay1 =
StyleableTextField(createInFontContext(StyleableTextField));
textDisplay1.styleName = this;
textDisplay1.editable = false;
textDisplay1.selectable = false;
textDisplay1.multiline = false;
textDisplay1.wordWrap = false;
textDisplay1.styleDeclaration =
styleManager.getStyleDeclaration(".textField_S3_C1");
textDisplay1.commitStyles();
textDisplay1.setStyle("textAlign", "center");
addChild(textDisplay1);
}
protected function createTextDisplay2():void
{
textDisplay2 =
StyleableTextField(createInFontContext(StyleableTextField));
textDisplay2.styleName = this;
textDisplay2.editable = false;
textDisplay2.selectable = false;
textDisplay2.multiline = false;
textDisplay2.wordWrap = false;
textDisplay2.styleDeclaration =
styleManager.getStyleDeclaration(".textField_S3_C0");
textDisplay2.commitStyles();
textDisplay2.setStyle("textAlign", "center");
addChild(textDisplay2);
}
protected function createTextDisplay3():void
{
textDisplay3 =
StyleableTextField(createInFontContext(StyleableTextField));
textDisplay3.styleName = this;
textDisplay3.editable = false;
textDisplay3.selectable = false;
textDisplay3.multiline = false;
textDisplay3.wordWrap = false;
textDisplay3.styleDeclaration =
styleManager.getStyleDeclaration(".textField_S3_C0");
textDisplay3.commitStyles();
textDisplay3.setStyle("textAlign", "center");
addChild(textDisplay3);
}
private function get nameDisplay():StyleableTextField
{
return labelDisplay;
}
private function get ageDisplay():StyleableTextField
{
return messageDisplay;
}
////////////////////////////////////////////////////////////////////////////
//
////////////////////////////////////////////////////////////////////////////
protected function assignMessage(value:Object):String
{
return value.age + "";
}
protected function assignLabel(value:Object):String
{
return value.firstName.charAt(0) + ". " + value.lastName;
}
protected function assignBitmap(value:Object):Object
{
if(value == null)
{
return null;
}
return "GET_IMAGE_FROM_A_CACHE";
}
////////////////////////////////////////////////////////////////////////////
// LIFECYCLE STANDARD METHODS
////////////////////////////////////////////////////////////////////////////
override protected function createChildren():void
{
super.createChildren();
fxgImg1 = new FXG1();
addChild(fxgImg1);
fxgImg2 = new FXG2();
addChild(fxgImg2);
fxgImg3 = new FXG3();
addChild(fxgImg3);
fxgImg4 = new FXG4();
addChild(fxgImg4);
fxgImg5 = new FXG5();
addChild(fxgImg5);
fxgImg6 = new FXG6();
addChild(fxgImg6);
createTextDisplay1();
createTextDisplay2();
createTextDisplay3();
}
override protected function commitProperties():void
{
if(dataChanged)
{
setImportantIcon();
}
super.commitProperties();
if(dataChanged)
{
textDisplay1.text = data.someText + "";
dataChanged = false;
}
}
override protected function measure():void
{
super.measure();
}
override protected function
updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
if(iconDisplay && iconDisplay is BitmapImage)
{
BitmapImage(iconDisplay).smooth = true;
}
}
override protected function
drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
{
if(!matrix)
{
matrix = new Matrix();
}
matrix.createGradientBox(unscaledWidth, unscaledHeight ,
Math.PI/2);
graphics.clear();
graphics.beginGradientFill(GradientType.LINEAR, [0x333333,
0x353535, 0x232323, 0x4E4E4E], [1,1,1,1], [0, 110, 115, 255], matrix);
graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
graphics.endFill();
drawVerticalStroke(56, unscaledHeight);
drawVerticalStroke(125, unscaledHeight);
drawVerticalStroke(406, unscaledHeight);
drawVerticalStroke(446, unscaledHeight);
drawVerticalStroke(495, unscaledHeight);
drawVerticalStroke(546, unscaledHeight);
}
override protected function layoutContents(unscaledWidth:Number,
unscaledHeight:Number):void
{
var yPosForTexts:Number = (unscaledHeight -
getElementPreferredHeight(nameDisplay)) / 2;
setElementSize(ageDisplay, 35,
getElementPreferredHeight(ageDisplay));
setElementPosition(ageDisplay, 408, yPosForTexts);
setElementSize(nameDisplay, 236,
getElementPreferredHeight(nameDisplay));
setElementPosition(nameDisplay, 148, yPosForTexts);
setElementSize(textDisplay1, 45,
getElementPreferredHeight(textDisplay1));
setElementPosition(textDisplay1, 550, yPosForTexts);
setElementSize(iconDisplay, this.iconWidth, this.iconHeight);
setElementPosition(iconDisplay, 67, 2);
if(decoratorDisplay)
{
decoratorDisplay.smooth = true;
setElementSize(decoratorDisplay, 55, 55);
setElementPosition(decoratorDisplay, 0, 0);
}
setElementPosition(fxgImg1, 502, 13);
setElementPosition(fxgImg2, 502, 13);
setElementPosition(fxgImg3, 510, 4);
setElementPosition(fxgImg4, 452, 13);
setElementPosition(fxgImg5, 452, 13);
setElementPosition(fxgImg6, 460, 4);
setElementPosition(textDisplay3, 457, 23);
setElementSize(textDisplay3,
textDisplay3.getPreferredBoundsWidth(),
textDisplay3.getPreferredBoundsHeight());
setElementPosition(textDisplay2, 507, 23);
setElementSize(textDisplay2,
textDisplay2.getPreferredBoundsWidth(),
textDisplay2.getPreferredBoundsHeight());
}
////////////////////////////////////////////////////////////////////////////
// EVENT HANDLER
////////////////////////////////////////////////////////////////////////////
private function handleMouseClick(event:MouseEvent):void
{
dispatchEvent(new Event("SomeEvent"));
}
////////////////////////////////////////////////////////////////////////////
// HELPER METHODS
////////////////////////////////////////////////////////////////////////////
protected function drawVerticalStroke(xPos:int,
unscaledHeight:Number):void
{
graphics.beginFill(0xCCCCCC);
graphics.drawRect(xPos, 0, 3, unscaledHeight);
graphics.endFill();
graphics.beginFill(0x666666);
graphics.drawRect(xPos + 1, 0, 1, unscaledHeight);
graphics.endFill();
}
private function setImportantIcon():void
{
if(decoratorDisplay)
{
decoratorDisplay.visible = true;
}
if(data.important1)
{
decorator = FXGImg1;
}
else if(data.important2)
{
decorator = FXGImg2;
}
else if(data.important3)
{
decorator = FXGImg3;
}
else
{
if(decoratorDisplay)
{
decoratorDisplay.visible = false;
}
decorator = null;
}
invalidateDisplayList();
}
override public function styleChanged(styleName:String):void
{
if(getStyle("messageStyleName"))
{
setStyle("messageStyleName", null);
}
super.styleChanged(styleName);
}
}
}
