Question

I’m currently working on an Adobe AIR application which is targeting the iPad2 as the hardware platform, and can not get decent scrolling performance on one of the screens. I’m using a spark list, with a custom item renderer like so:

<s:List id="productList" top="116" bottom="0" left="10" right="10" 
    width="100%"
    visible="true" includeInLayout="true"
    height="0"
    maxHeight="500"
    opaqueBackground="#ffffff"
    itemRenderer="myRenderer">
</s:List>

Originally, I was using an .mxml renderer, but after seeing the nasty performance I decided to roll my own, extending UIComponent (I’ve left off the package and braces to save on horizontal space):

import mx.controls.listClasses.IListItemRenderer;
import mx.core.UIComponent;
import mx.events.FlexEvent;
import mx.utils.ColorUtil;

import spark.components.Label;
import spark.components.TextInput;

public final class OrderViewProductLineTestIR extends UIComponent implements IListItemRenderer 
{
    public function OrderViewProductLineTestIR()
    {
        super();
    }

    // Internal variable for the property value.
    private var _data:Object;

    private var productName:Label;
    private var orderQty:TextInput;
    private var stockQty:TextInput;


    // Make the data property bindable.
    [Bindable("dataChange")]

    // Define the getter method.
    public function get data():Object
    {
        return _data;
    }

    // Define the setter method, and dispatch an event when the property
    // changes to support data binding.
    public function set data(value:Object):void
    {
        _data = value;
        invalidateProperties();
        dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
    }

    override protected function createChildren():void
    {
        super.createChildren();

        productName = new Label();
        // productName.visible = true;
        addChild(productName);

        orderQty = new TextInput();
        addChild(orderQty);

        stockQty = new TextInput();
        addChild(stockQty);

    }

    override protected function commitProperties():void
    {
        super.commitProperties();
        productName.text = _data.Name;
    }

    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
        super.updateDisplayList(unscaledWidth, unscaledHeight);
        productName.move(0, 0);
        productName.setActualSize(250, 48);

        orderQty.move(270, 0);
        orderQty.setActualSize(100, 48);

        stockQty.move(390, 0);
        stockQty.setActualSize(100, 48);
    }

    override protected function measure():void
    {
        super.measure();

        measuredWidth = 490;
        measuredHeight = 48; 
    }
}

As you can see this is pretty light-weight, yet my dataprovider contains upwards of 100 items, and 11 of them can be on screen at any one time. Everything I’ve read around increasing performance for scrolling revolves around using opaqueBackground and cacheAsBitmap, however no matter what I try neither help here. Using cacheAsBitmap at the list level doesn’t help as the item renderer recycling kicks in once you’ve scrolled more than a couple of lines requiring the whole thing to be re-rendered, and using it at the item renderer level is still horribly slow when scrolling fast — presumably because many are being recycled at once during a very fast scroll.

I know the iPad should have no problem blitting a screenful of information in a frame at 60 fps, yet when I scroll quickly I’m seeing it struggle to make 10 fps (from sight). So the question: have I missed something obvious, or is this to be expected due to the number of layers (and vector rendering) involved when using AIR? For the record, I have tried changing the render mode for the application and tried changing the frame rate to eliminate the obvious.

Answer 1

This is a bit of guessing, but can the itemRenderer be optimized? Do all the children need to be positioned and sized every time component redraws? Do you need to update productName.text every time commitProperties run?

Here is how I might modify things:

import mx.controls.listClasses.IListItemRenderer;
import mx.core.UIComponent;
import mx.events.FlexEvent;
import mx.utils.ColorUtil;

import spark.components.Label;
import spark.components.TextInput;

public final class OrderViewProductLineTestIR extends UIComponent implements IListItemRenderer 
{
    public function OrderViewProductLineTestIR()
    {
        super();
    }

    // Internal variable for the property value.

private var _data:Object;

// Add a dataChanged property 
private var dataChanged :Boolean = false

private var productName:Label;
private var orderQty:TextInput;
private var stockQty:TextInput;


// Make the data property bindable.
[Bindable("dataChange")]

// Define the getter method.
public function get data():Object
{
    return _data;
}

// Define the setter method, and dispatch an event when the property
// changes to support data binding.
public function set data(value:Object):void
{
    _data = value;
    // switch the dataChanged flag 
    dataChanged = true;
    invalidateProperties();
    dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
}

override protected function createChildren():void
{
    super.createChildren();

    productName = new Label();
    // productName.visible = true;
    addChild(productName);

    orderQty = new TextInput();
    addChild(orderQty);

    stockQty = new TextInput();
    addChild(stockQty);

}

override protected function commitProperties():void
{
    super.commitProperties();
    // Only update the display if the data actually changed 
    If(dataChanged){
      productName.text = _data.Name;
      dataChanged = false;
    }
}


// add variable to tell whether the component's children have been sized and positioned or not
// since they have static locations, no need to set these each time
protected var compChildrenSized :Boolean = false;
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
    super.updateDisplayList(unscaledWidth, unscaledHeight);
    if(!compChildrenSized){
     productName.move(0, 0);
     productName.setActualSize(250, 48);

     orderQty.move(270, 0);
     orderQty.setActualSize(100, 48);

     stockQty.move(390, 0);
     stockQty.setActualSize(100, 48);

     compChildrenSized = true;
    }
}

override protected function measure():void
{
    super.measure();

    measuredWidth = 490;
    measuredHeight = 48; 
}
}

I guess I’ll add that I’m not sure measure will ever run. What happens if you replace the textInputs with labels? Are you using Flex 4.6, and if so are you using StyleableStageText (AKA StageText) or the 4.5 skin which uses StyleableTextField? I wonder if StageText scrolling could kill performance because it hangs out above the Flash Display list.

What happens if you remove the textInput completely and replace with labels?

These are little things, and I’m not sure if they’ll help.