I would try creating a MXML based renderer, turn off virtualization on the
list and then compare the results. Virtualization allows reusing a renderer
but if you are seeing issues during scrolling then either creation or
validation is too heavy. When you turn off virtualization the row is only
created once. The tradeoff is you use more memory.
You might also try to optimize the FXG (either manually or with the
compiler).
Also, things like this,
BitmapImage(iconDisplay).smooth = true;
could be costly. Also, try disabling cacheAsBitmap.
But you won't know unless you measure the performance. I had some code for
testing an item renderer. I'll see if I can dig it up.
On Wed, Jul 17, 2013 at 4:29 AM, Christian Kiefer <
christian.kie...@goal-games.de> wrote:
> 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);
> }
>
>
>
> }
>
> }
>
