Flex Mobile - TileLayout performance issues - apache-flex

Question

I'm building mobile application for tablet devices.
I have huge performance issue with List component with tile layout.
I'm showing pages with around 20-24 items on the screen and the user can scroll trough the pages. Unfortunately the list component generates the new page extremely slow.
Overall I tested standalone List with tile layout and it's performance in every scenario is extremely slow (I have tested it on iPad1 & iPad2 ).
Please advice if you know some solution to the problem.
Thanks.

Answer 1

Generally the Tile is very slow in flex. This is because it allows variable size for each item renderer and the measure / updateDisplayList takes a lot of time.
I would suggest you use a custom (own made) tile list and drop the flex component in this case. If you use it just for layout you can manually/programaticaly compute the positions of each item in the tile and move it to right x/y pixel.
Also be careful with effects! They may work ok in an AIR simulator or in the desktop browser but eat a lot of resources on mobile devices.
If you still want to go for the flex tile component, and not create your own tile control, then I suggest you use fixed with renderers for all items you display inside, and also specify columnWidth and rowHeight inside the TileList declatation. This may improve a little the performance... :)
Also positing some sample code does not hurt. Maybe you are doing somethig wrong somehwre... donno: extra invalidation, bad rendering etc...!

Answer 2

Its been a while so I don't remember specifics. Here is the code that I used but please keep in mind, that the components I wrote are are for specific purpose and include some bad practices to accomplish a specific problem for very short time. However I hope to be useful.
pagedList
package components.pagedList
{
import components.pagedList.vo.PageItemVo;
import mx.collections.ArrayCollection;
import mx.collections.IList;
import mx.core.IFactory;
import mx.core.UIComponentGlobals;
import mx.events.CollectionEvent;
import mx.events.CollectionEventKind;
import spark.components.List;
import spark.layouts.HorizontalLayout;
/**
*
*/
public class PagedList extends List
{
//--------------------------------------------------------------------------
//
// Constructor
//
//--------------------------------------------------------------------------
public function PagedList()
{
super();
}
//--------------------------------------------------------------------------
//
// Variables
//
//--------------------------------------------------------------------------
/**
* Dimentions for the inner items should be specifyed because
* this component needs to know how many items can be placed in
* one page, but don't have the ability to create this items.
* Default value is 1 to avoid division by zero.
*/
public var innerItemWidth:Number = 1;
public var innerItemHeight:Number = 1;
/**
* When inner item dimentions are set the component calculates how many items
* (per row and col) can be shown on one scren and pass these data to the page
* trough the dataProvider for the page.
*/
private var pageRowCount:int = 1;
private var pageColCount:int = 1;
/**
* Count of the items that can fit in one page.
* This count is used to slice the data into picies
* with the same length.
*/
private var itemsPerPage:int = 0;
/**
* Original data provider is saved here so we can re-slice it when
* size change occure and listen for data change event.
*
* TODO: implement the data chage listener
*/
private var _originalDataProvider:IList;
/**
*
*/
private var cachedUnscaledWidth:Number = 0;
private var cachedUnscaledHeight:Number = 0;
//----------------------------------
// Custom tiles data
//----------------------------------
private var _customTilesData:Array;
private var customTilesDataChanged:Boolean;
public function set customTilesData(value:Array):void
{
_customTilesData = value;
customTilesDataChanged = true;
invalidateProperties();
}
public function get customTilesData():Array
{
return _customTilesData;
}
//----------------------------------
// dataProvider
//----------------------------------
private var originalDataProviderChanged:Boolean;
[Inspectable(category="Data")]
/**
*
*/
override public function set dataProvider(value:IList):void
{
if (_originalDataProvider)
_originalDataProvider.removeEventListener(CollectionEvent.COLLECTION_CHANGE, originalDataProvider_collectionChangeHandler);
originalDataProviderChanged = true;
if (value)
value.addEventListener(CollectionEvent.COLLECTION_CHANGE, originalDataProvider_collectionChangeHandler, false, 0, true);
_originalDataProvider = value;
updatePagedData();
}
/**
*
*/
private function originalDataProvider_collectionChangeHandler(event:CollectionEvent):void
{
//trace('data changed:', event.kind, 'location:', event.location);
if (event.kind == CollectionEventKind.REPLACE)
{
updateReplacedItem(event.location);
}
}
/**
*
*/
private function updateReplacedItem(index:int):void
{
if (dataProvider)
{
var pageNumber:int = int(index / itemsPerPage);
var itemIndex:int = index - (pageNumber * itemsPerPage);
if (dataProvider[pageNumber])
{
var pageData:PageItemVo = PageItemVo(dataProvider[pageNumber])
pageData.data[itemIndex] = _originalDataProvider[index];
}
}
}
//----------------------------------
// innerItemRenderer
//----------------------------------
private var _innerItemRenderer:IFactory;
private var innerItemRendererChanged:Boolean;
public function set innerItemRenderer(value:IFactory):void
{
_innerItemRenderer = value;
innerItemRendererChanged = true;
invalidateProperties();
}
public function get innerItemRenderer():IFactory
{
return _innerItemRenderer;
}
//----------------------------------
// gaps
//----------------------------------
/**
*
*/
public function set verticalGap(value:Number):void
{
_verticalGap = value;
gapsChanged = true;
invalidateProperties();
}
public function get verticalGap():Number
{
return _verticalGap;
}
/**
*
*/
public function set horizontalGap(value:Number):void
{
_horizontalGap = value;
gapsChanged = true;
invalidateProperties();
}
public function get horizontalGap():Number
{
return _horizontalGap;
}
private var _verticalGap:Number;
private var _horizontalGap:Number;
private var gapsChanged:Boolean;
//--------------------------------------------------------------------------
//
// Overridden methods
//
//--------------------------------------------------------------------------
protected function updatePagedData():void
{
if (_originalDataProvider)
{
var pagedData:IList = createPagedData(_originalDataProvider);
super.dataProvider = pagedData;
invalidateProperties();
}
}
private function createPagedData(value:IList):IList
{
var nestedData:Array = [];
var dataList:Array = value.toArray();
var pageData:PageItemVo;
if (itemsPerPage)
{
var customTilesCount:int = customTilesData ? customTilesData.length : 0;
var normalItemsPerPage:int = itemsPerPage - customTilesCount;
while (dataList.length)
{
pageData = new PageItemVo();
var data:Array = dataList.splice(0, normalItemsPerPage);
for (var i:int = 0 ; i < customTilesCount ; i++)
{
data.push( customTilesData[i] );
}
pageData.data = new ArrayCollection( data );
pageData.colsCount = pageColCount;
pageData.rowsCount = pageRowCount;
pageData.itemWidth = innerItemWidth
pageData.itemHeight = innerItemHeight;
pageData.horizontalGap = horizontalGap;
pageData.verticalGap = verticalGap;
pageData.innerItemRenderer = _innerItemRenderer;
nestedData.push(pageData);
}
}
return new ArrayCollection(nestedData);
}
//----------------------------------
// Component lifecycle
//----------------------------------
override protected function commitProperties():void
{
if (gapsChanged || innerItemRendererChanged || customTilesDataChanged)
{
updatePagedData();
gapsChanged = false;
innerItemRendererChanged = false;
customTilesDataChanged = false;
}
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
caluclateItemsPerPage(unscaledWidth, unscaledHeight);
// We have to update the dataProvider so it can re-slice the pages
// in case of orientation rotation or some other resize
if (_originalDataProvider)
if ( cachedUnscaledWidth != unscaledWidth || cachedUnscaledHeight != unscaledHeight )
dataProvider = _originalDataProvider;
cachedUnscaledWidth = unscaledWidth;
cachedUnscaledHeight = unscaledHeight;
}
protected function caluclateItemsPerPage(unscaledWidth:Number, unscaledHeight:Number):void
{
var myLayout:HorizontalLayout = HorizontalLayout(layout);
var horizontalPaddings:Number = myLayout.paddingLeft + myLayout.paddingRight;
var verticalPaddings:Number = myLayout.paddingTop + myLayout.paddingRight;
pageRowCount = (unscaledHeight - verticalPaddings) / (innerItemHeight + verticalGap);
pageColCount = (unscaledWidth - horizontalPaddings) / (innerItemWidth + horizontalGap);
itemsPerPage = pageRowCount * pageColCount;
}
}
}
PageItemRenderer
package skins.pagedList
{
import components.pagedList.vo.PageItemVo;
import flash.display.DisplayObject;
import mx.collections.ArrayCollection;
import mx.core.IDataRenderer;
import mx.core.IFactory;
import mx.core.UIComponent;
import mx.events.FlexEvent;
import spark.components.IItemRenderer;
//--------------------------------------
// Events
//--------------------------------------
/**
* Dispatched when the <code>data</code> property changes.
*
* <p>When you use a component as an item renderer,
* the <code>data</code> property contains the data to display.
* You can listen for this event and update the component
* when the <code>data</code> property changes.</p>
*
* #eventType mx.events.FlexEvent.DATA_CHANGE
*/
[Event(name="dataChange", type="mx.events.FlexEvent")]
/**
*
* ASDoc comments for this item renderer class
*
*/
public class PageItemRenderer extends UIComponent
implements IDataRenderer, IItemRenderer
{
//--------------------------------------------------------------------------
//
// Constructor
//
//--------------------------------------------------------------------------
public function PageItemRenderer()
{
super();
cacheAsBitmap = true;
}
//--------------------------------------------------------------------------
//
// Variables
//
//--------------------------------------------------------------------------
//----------------------------------
// data
//----------------------------------
/**
* #private
*/
private var _data:PageItemVo;
private var dataChanged:Boolean;
[Bindable("dataChange")]
/**
* The implementation of the <code>data</code> property
* as defined by the IDataRenderer interface.
* When set, it stores the value and invalidates the component
* to trigger a relayout of the component.
*/
public function get data():Object
{
return _data;
}
/**
* #private
*/
public function set data(value:Object):void
{
_data = PageItemVo(value);
colCount = _data.colsCount;
rowCount = _data.rowsCount;
itemWidth = _data.itemWidth;
itemHeight = _data.itemHeight;
horizontalGap = _data.horizontalGap;
verticalGap = _data.verticalGap;
innerItemRenderer = _data.innerItemRenderer;
_tilesData = ArrayCollection(_data.data);
dataChanged = true;
if (hasEventListener(FlexEvent.DATA_CHANGE))
dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
invalidateProperties();
}
//----------------------------------
// gaps
//----------------------------------
/**
*
*/
public function set verticalGap(value:Number):void
{
_verticalGap = value;
gapsChanged = true;
invalidateProperties();
}
public function get verticalGap():Number
{
return _verticalGap;
}
/**
*
*/
public function set horizontalGap(value:Number):void
{
_horizontalGap = value;
gapsChanged = true;
invalidateProperties();
}
public function get horizontalGap():Number
{
return _horizontalGap;
}
private var _verticalGap:Number = 5;
private var _horizontalGap:Number = 5;
private var gapsChanged:Boolean;
//----------------------------------
// itemIndex
//----------------------------------
private var _itemIndex:int;
public function get itemIndex():int
{
return _itemIndex;
}
public function set itemIndex(value:int):void
{
if (value == _itemIndex)
return;
invalidateDisplayList();
_itemIndex = value;
}
//----------------------------------
// showsCaret
//----------------------------------
private var _showsCaret:Boolean = false;
public function get showsCaret():Boolean
{
return _showsCaret;
}
/**
* #private
*/
public function set showsCaret(value:Boolean):void
{
if (value == _showsCaret)
return;
_showsCaret = value;
invalidateDisplayList();
}
//----------------------------------
// selected
//----------------------------------
private var _selected:Boolean = false;
public function get selected():Boolean
{
return _selected;
}
public function set selected(value:Boolean):void
{
if (value == _selected)
return;
_selected = value;
}
//----------------------------------
// dragging
//----------------------------------
private var _dragging:Boolean = false;
public function get dragging():Boolean
{
return _dragging;
}
public function set dragging(value:Boolean):void
{
_dragging = value;
}
//----------------------------------
// label
//----------------------------------
private var _label:String;
public function get label():String
{
return _label;
}
/**
* #private
*/
public function set label(value:String):void
{
_label = value;
}
//----------------------------------
// item properties
//----------------------------------
/**
* Dimentions for the inner items should be specifyed because
* this component needs to know how many items can be placed in
* one page, but don't have the ability to create this items.
* Default value is 1 to avoid division by zero.
*/
public var itemWidth:Number = 1;
public var itemHeight:Number = 1;
/**
* When inner item dimentions are set the component calculates how many items
* (per row and col) can be shown on one scren and pass these data to the page
* trough the dataProvider for the page.
*/
public var rowCount:int = 1;
public var colCount:int = 1;
private var _tilesData:ArrayCollection;
private var sizeChanged:Boolean;
private var _tileContainer:UIComponent;
/**
*
*/
private var innerItemRenderer:IFactory;
//--------------------------------------------------------------------------
//
// Overridden methods
//
//--------------------------------------------------------------------------
//----------------------------------
// Component lifecycle
//----------------------------------
override protected function commitProperties():void
{
super.commitProperties();
if (dataChanged)
{
dataChanged = false;
createTiledContent();
}
if (gapsChanged)
{
createTiledContent();
}
}
override protected function measure():void
{
super.measure();
measuredMinHeight = measuredWidth = parent.width;
measuredMinHeight = measuredHeight = parent.height;
}
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
var tileCntWidth:Number = colCount * (itemWidth + horizontalGap);
_tileContainer.x = 0.5 * (unscaledWidth - tileCntWidth);
}
//--------------------------------------------------------------------------
//
// Methods
//
//--------------------------------------------------------------------------
protected function createTiledContent():void
{
clearChildren();
_tileContainer = new UIComponent();
var itemsCount:int = _tilesData.length;
var row:int, col:int, item:DisplayObject;
for (var i:int = 0 ; i < itemsCount ; i++ )
{
row = int( i / colCount );
col = i - row * colCount;
if (_tilesData[i].hasOwnProperty("itemFactory"))
{
item = IFactory(_tilesData[i].itemFactory).newInstance();
}
else
{
item = innerItemRenderer.newInstance();
}
Object(item).data = _tilesData[i];
item.x = col * (itemWidth + horizontalGap);
item.y = row * (itemHeight + verticalGap);
_tileContainer.addChild(item);
}
addChild(_tileContainer);
invalidateSize();
invalidateDisplayList();
}
//--------------------------------------------------------------------------
//
// Helper methods
//
//--------------------------------------------------------------------------
private function clearChildren():void
{
var numChildren:int = this.numChildren;
for (var i:int = 0 ; i < numChildren ; i++ )
{
this.removeChildAt(0);
}
}
}
}
PagedItemVo
package components.pagedList.vo
{
import flash.events.EventDispatcher;
import flash.events.IEventDispatcher;
import mx.collections.IList;
import mx.core.IFactory;
[Bindable]
public class PageItemVo extends EventDispatcher
{
public var data:IList;
public var rowsCount:int;
public var colsCount:int;
public var itemWidth:Number;
public var itemHeight:Number;
public var verticalGap:Number;
public var horizontalGap:Number;
public var innerItemRenderer:IFactory;
public function PageItemVo(target:IEventDispatcher=null)
{
super(target);
}
}
}
ScrollingListSkin
package skins.pagedList
{
import flash.display.Graphics;
import flash.display.Sprite;
import flash.events.MouseEvent;
import mx.core.DPIClassification;
import mx.core.ScrollPolicy;
import mx.events.FlexEvent;
import mx.events.TouchInteractionEvent;
import spark.events.IndexChangeEvent;
import spark.events.RendererExistenceEvent;
import spark.skins.mobile.ListSkin;
import spark.skins.mobile.supportClasses.MobileSkin;
public class ScrollingListSkin extends ListSkin
{
private var pageIndicator:Sprite;
private var indicatorSize:uint;
private var _isHorizontal:Boolean;
private var _suspendPageIndicatorShortcut:Boolean;
public function ScrollingListSkin()
{
super();
switch (applicationDPI)
{
case DPIClassification.DPI_320:
{
indicatorSize = 32;
break;
}
case DPIClassification.DPI_240:
{
indicatorSize = 24;
break;
}
default:
{
indicatorSize = 16;
break;
}
}
}
//--------------------------------------------------------------------------
//
// Overridden methods
//
//--------------------------------------------------------------------------
override protected function createChildren():void
{
super.createChildren();
scroller.setStyle("skinClass", PagedListScrollerSkin);
// page indicator
pageIndicator = new Sprite();
// TODO (jasonsj): extend pageIndicator hit area to use the entire
// width/height of the List as a shortcut. Currently this only works
// in the tiny area where the indicators are.
//pageIndicator.addEventListener(MouseEvent.MOUSE_DOWN, pageIndicaterMouseHandler);
//pageIndicator.addEventListener(MouseEvent.MOUSE_UP, pageIndicaterMouseHandler);
//pageIndicator.addEventListener(MouseEvent.MOUSE_MOVE, pageIndicaterMouseHandler);
addChild(pageIndicator);
// listen for changes to the list
dataGroup.addEventListener(FlexEvent.UPDATE_COMPLETE, dataGroupUpdateComplete);
scroller.addEventListener(TouchInteractionEvent.TOUCH_INTERACTION_START, touchInteractionStart);
scroller.addEventListener(TouchInteractionEvent.TOUCH_INTERACTION_END, positionChanged);
}
override protected function commitProperties():void
{
super.commitProperties();
// isHorizontal
/*var hScrollPolicy:Boolean = getStyle("horizontalScrollPolicy") == ScrollPolicy.ON;
var vScrollPolicy:Boolean = getStyle("verticalScrollPolicy") == ScrollPolicy.ON;
_isHorizontal = hScrollPolicy && !vScrollPolicy;*/
_isHorizontal = true;
}
override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
{
super.drawBackground(unscaledWidth, unscaledHeight);
var pos:Number = (isHorizontal) ? scroller.viewport.horizontalScrollPosition :
scroller.viewport.verticalScrollPosition;
var viewportSize:Number = (isHorizontal) ? scroller.viewport.width :
scroller.viewport.height;
var selectedIndex:int = Math.round(pos / viewportSize);
var numElements:int = dataGroup.numElements;
var g:Graphics = pageIndicator.graphics;
g.clear();
// if we have only one page there shouldn't be any scrollbar visuals
if (numElements == 1) return;
var axisPos:Number = 0;
var centerPos:Number = indicatorSize / 2;
var radius:Number = indicatorSize / 4;
//TODO: make so the color could be specifyed outisde
var selectionColor:Number = 0x000000; //getStyle("selectionColor");
//var elementsPerPage:int = Math.floor(unscaledWidth/FileIconItemRenderer.ITEM_WIDTH) * Math.floor(unscaledHeight/FileIconItemRenderer.ITEM_HEIGHT);
for (var i:uint = 0; i < numElements; i++)
{
if (i == selectedIndex)
g.beginFill(selectionColor, 1);
else
g.beginFill(0, .25);
if (isHorizontal)
g.drawCircle(axisPos + centerPos, centerPos, radius);
else
g.drawCircle(centerPos, axisPos + centerPos, radius);
g.endFill();
axisPos += indicatorSize;
}
var pageIndicatorX:Number = (isHorizontal) ? (unscaledWidth - axisPos) / 2 :
unscaledWidth - (indicatorSize * 1.5);
var pageIndicatorY:Number = (isHorizontal) ? unscaledHeight - (indicatorSize * 1.5):
(unscaledHeight - axisPos) / 2;
setElementPosition(pageIndicator, Math.floor(pageIndicatorX), Math.floor(pageIndicatorY));
}
override public function styleChanged(styleProp:String):void
{
super.styleChanged(styleProp);
var allStyles:Boolean = !styleProp || styleProp == "styleName";
if (allStyles || styleProp == "horizontalScrollPolicy" ||
styleProp == "verticalScrollPolicy")
{
invalidateProperties();
invalidateDisplayList();
}
}
private function get isHorizontal():Boolean
{
return _isHorizontal;
}
//--------------------------------------------------------------------------
//
// Event Handlers
//
//--------------------------------------------------------------------------
private function dataGroupUpdateComplete(event:FlexEvent):void
{
invalidateDisplayList();
}
private function touchInteractionStart(event:TouchInteractionEvent):void
{
_suspendPageIndicatorShortcut = true;
}
private function positionChanged(event:TouchInteractionEvent):void
{
invalidateDisplayList();
_suspendPageIndicatorShortcut = false;
}
private function pageIndicaterMouseHandler(event:MouseEvent):void
{
event.preventDefault();
if (_suspendPageIndicatorShortcut)
return;
// Mouse events on the pageIndicator sprite will jump to the selected page
var pos:Number = (isHorizontal) ? event.localX : event.localY;
var size:Number = (isHorizontal) ? pageIndicator.width : pageIndicator.height;
pos = Math.min(Math.max(pos, 0), size) - (indicatorSize / 2);
var viewportSize:Number = (isHorizontal) ? scroller.viewport.width : scroller.viewport.height;
viewportSize = viewportSize * dataGroup.numElements;
var viewportPosition:Number = (pos / size) * viewportSize;
if (isHorizontal)
scroller.viewport.horizontalScrollPosition = viewportPosition;
else
scroller.viewport.verticalScrollPosition = viewportPosition;
}
}
}
Example:
<pagedList:PagedList id="displayList"
width="100%" height="100%"
itemRenderer="skins.pagedList.PageItemRenderer"
innerItemRenderer="components.pagedList.tiles.FolderTileItem"
innerItemWidth="146" innerItemHeight="150"
skinClass="skins.pagedList.ScrollingListSkin"
verticalScrollPolicy="off"
horizontalScrollPolicy="on"
pageScrollingEnabled="true"
horizontalGap="15" verticalGap="20"
contentBackgroundAlpha="0"
selectionColor="0xFFFFFF">
<pagedList:layout>
<s:HorizontalLayout columnWidth="{displayList.width}"
variableColumnWidth="false"
gap="0"
paddingTop="30"/>
</pagedList:layout>
Unfortunatly I can't share the FolderTileItem source with you, but its simple a simple component that extends Sprite.