Deep Dive into Flex Mobile Item Renderers

DEEP DIVE into FLEXMOBILE ITEM RENDERERS Flex SDK 4.5 (Hero)

• Jason Hanson • twitter @jayfour000 • ﬂexfood.blogspot.com • www.jasonhanson.com• Building for Flash Platform since 1999• Working with Hero SDK since Aug, 2010 (beta)

DISCLAIMER• Intended to be a 300 level session (I’ll let you judge that for yourself :)• You should be familiar with the concept of writing Flex components in AS3• Knowledge of the Flex component lifecycle helpful• We will be looking at CODE

Stuff to check out if you get bored• http://www.jasonhanson.com/360ﬂex © @atomic_playboy

• Special thanks to Ryan Frishberg for technical review. @frishy• All photos © Michael Schoenewies @atomic_playboy

New Project Type in Flash Builder 4.5• Flex Mobile Project

Rendering a Listof Items is Hard

Scrolling a Listof Items is Harder

Scroll Performance & User Experience• Slow or jerky scrolling comes off as an error in your app• Makes your app seem sluggish• Distracting at best• Causes loss of user at worst

Rendering Items is Expensive• Look! new data. • commitProperties()• How big am I? • measure()• Update display • updateDisplayList()• > Draw background • > drawBackground()• > Layout • > layoutContents()

Draw Faster & Draw Less Often• Regular Spark ItemRenderer just not fast enough for most mobile devices• Adobe SDK devs spent months optimizing List scrolling and mobile ItemRenderers• Slightly different approach then standard Flex

What About the MXML ItemRender.as• Extends Group• Has signiﬁcant overhead• Encourages data binding (expensive)• Layouts are expensive• States add weight• Very convenient features, but they all add up to lower performance on mobile

New Classes on Next Slide (Don’t Panic)

New Classes• spark.components.supportClasses • StyleableTextField.as• spark.components • LabelItemRenderer.as • > IconItemRenderer.as• spark.primitives • BitmapImage.as (updated in 4.5)• spark.core • ContentCache.as

Sample ItemRenderer (show code)

StyleableTextField.as• Lightweight text control that supports Styles

• The StyleableTextField class is a text primitive for use in ActionScript skins and item renderers.• It cannot be used in MXML markup and is not compatible with effects.• styleName• setStyle()

LabelItemRenderer.as• Optimized default ItemRenderer

• Extends UIComponent• Limited Style Support alternatingItemColors, chromeColor, downColor, focusColor, paddingBottom, paddingTop, rollOverColor, selectionColor, symbolColor, verticalAlign• Great for simple text renderers• Renders the ‘data’ property as a string• Inherits the labelField and labelFunction from the s:List

IconItemRenderer• Image and text

• Uses ContentCache to cache the ‘icon’ images so that they don’t ﬂash when scrolled to again• The ‘decorator’ and ‘iconPlaceholder’ should be an embeded asset for best performance• Supports both a ‘label’ and ‘message’

BitmapImage• Lightweight image component

ContentCache• LIFO Cache Object

• .maxCacheEntries• .maxActiveRequests

What If I’m Special?

Roll Your Own• Options • Extend UIComponent • Extend LabelItemRenderer • Extend IconItemRenderer

• Write the custom component in AS3, not in MXML• Look to LabelItemRenderer and IconItemRenderer for best practices• Extending UIComponent is more complicated since you have to implement IItemRenderer

iconDisplay

labelDisplayiconDisplay

labelDisplay iconDisplaymessageDisplay

labelDisplay iconDisplay decoratorDisplaymessageDisplay

Custom Component starRating

ItemPreviewImageRenderer (Show Code) • set defaults in constructor • override createChildren() • override createLabelDisplay() • override createMessageDisplay() • set labelFunction • set messageFunction • set iconFunction • override layoutContents() • override measure()

Renderer Virtualization• Ensure useVirtualLayout="true"• Recycles itemRenderers by setting the data property to null when off screen• Saves time on createChildren() calls• Essential for longs lists of data• Set to true by default

Tips!• getting style cheaper then setting style• setElementSize() is cheaper then setting width / height• setElementPosition() is cheaper then setting x / y• Use ContentCache to prevent image ﬂicker

Intentional Left Blank

• Extra Slides After This Point

A Note onDisplayObjectSharingMode • Can reuse a displayobject in multiple location (TODO: ﬁll this out)

MultiDPIBitmapSource• Optional source object for images

http://iuricmp.wordpress.com	23
http://paper.li	6
http://www.techgig.com	5
http://a0.twimg.com	3

Deep Dive into Flex Mobile Item Renderers

by Jason Hanson on Apr 03, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 37

Statistics

Deep Dive into Flex Mobile Item Renderers — Presentation Transcript