The profiler can help measure performance. Besides creation and
validation, another issue may be rendering. Look for [render] near the
top of the performance profile.
I recently discovered that fxg can be very non-optimal. There can be lots
of empty groups or unnecessary levels of groups and that can make fxg
images very costly. The authoring tools do that to preserve layers needed
at authoring but there can be a cost at runtime. One quick test: comment
out the FXG images and/or replace them with pngs and see if scrolling is
better.
On 7/18/13 11:25 AM, "flexcapaci...@gmail.com" <flexcapaci...@gmail.com>
wrote:
>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);
>> }
>>
>>
>>
>> }
>>
>> }
>>
