Other Resources:
Alex’s Blog – http://blogs.adobe.com/aharui
Peter Ent’s Blog – http://weblogs.macromedia.com/pent
Spark Containers – http://blogs.adobe.com/flexdoc/pdf/sparkContainersAndRenderers.pdf
What is an itemRenderer?
a list renders data usually in a label
property on list classes typed to take an IFactory
Types of ItemRenderers
2 main types: custom and drop-in item rendereres
3 ways to create them:
Custom MXML Class
Separate Actionscript 3 file
Inline with mx:Component tag
Custom IR
Most basic is just a label with two pieces of data
Drop-in IR
Some flex framework components implement this.
implement IDropInListItemRenderer
doesn’t give you the data property but gives you listData
doesn’t care what the data is. just display it.
Reusable Renderers
do not associate it with a column
to use listData, your IR must implement IDropInListItemRenderer
some such as checkbox, button, numericsteper, text, and datefield already do this
you have to define the getters/setters for listData in the custom IR
Sizing an IR
always the width of the container
height is the rowHeight unless variableRowHeight = true
Virtualization of ItemRenderers/Renderer Recycling
if value>10 then turn color = red. make sure to say “else color = default” as well otherwise you will have scrolling problems.
renderers are only created for the cells that are shown on screen then re-used when those are scrolled off the screen and others are shown.
Renderers as Editors
there isn’t any connection to data by default.
set list component to editable
set rendererIsEditor=true
set editorDataField property if your renderer is not “text”
Example: Slider as Renderer and Editor
slider does not implement IDataRenderer
set editable=true, itemRenderer=MySlider, rendererIsEditor=true, editorDataField=value
further code on their blog
Building for Performance
we are smart about creating them but if you have a 20×20 grid then there are 400 on the screen.
layout’s are expensive an unnessary for IR.
- instead base your renderers on UIComponent and layout stuff yourself.
developing your IR’s in MXML can be more expensive. you won’t need data binding (sets up lots of listeners).
- instead use ActionScript – you know when data is changing
example shown changing from HBox to UIComponent increased performance by around 33% with a decent amount of data and 5 children.
alway use UIComponent if you know how its going to look
Flex 4 IR’s
DataGroup is the basic, skinless component used to render data on screen
SkinnableDataContainer is skinnable version of DataGroup
list extends SkinnableDataContainer and adds selection, keyboard handling, and a few other things
itemRendererFunctions make it easy to deal with heterogeneous data items
data containers support both data items and visual elements
no more IDropInListItemRenderer – those props are pushed down to item renderer directly now
IR are in charge of all aspects of it’s visuals, which means it must draw highlighting for hover selection
support for differently sized IR is much improved – new typicalItem prop
Ryan’s Blog – http://frishy.blogspot.com
Joan’s Blog – http://butterfliesandbugs.wordpress.com
Tags: 360flex, conference, flex, itemRenderer, note, notes, session