Creating custom List renderers, the complete guide (Part II)

Continuing from the last post, this entry just adds a few more tips for working with List controls.

Creating RollOver/hit states:
In the last entry I had shown how to create custom renderers that respected their position in the List. The next thing you will probably need to do is create custom rollover effects. One way to do is to add event listeners to Mouse Events in your renderer. However there is a better way. Since your renderer is aware of the List it is a part of, you can modify your updateDisplayList function with the following snippet:
[AS]
if(this.owner as List &&
((this.owner as List).isItemHighlighted(this._data)){
// instructions on how to draw out the over state
}
[/AS]

It should be noted that this function will only work if the useRollOver is set to true and will not be executed otherwise. Once again this lets you create renderers whose behavior can be controlled by the List settings.

To create a hit state, you can use the isItemSelected() method the same way.

Attaching your renderer via actionscript:
The final tip I would like to mention is the way you can attach your renderer using actionscript. This technique is more useful if you want to create a list with multiple views, for example a simple text, image+text and just image view of some kind of data. The first time I implemented this was by creating two Lists and switching between them. A better way is to switch item renderers via actionscript. To do this we must remember that Lists use a ClassFactory to generate new item renderers as needed. So assigning the renderer to the list is as easy as shown:

[AS]
list.itemRenderer = new ClassFactory(YourCustomRendererClass);
[/AS]

Thats it. Hopefully these 5 tips will help you create lighter item renderers and get better performance off your Lists.

Creating custom List renderers, the complete guide (Part II)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s