freelance developer of javascript, python and more!

The ItemRenderer in the Flex 4 Spark components provides the useful ability to automatically draw the backgrounds of the item renderers, however it is limited to only drawing them with an alpha of 1 or 0.

By extending the ItemRenderer class and overriding the mx_internal drawBackground() method, we are able to set the fill alpha to a value retrieved from the “backgoundAlpha” style. To do this, I have simply copied the drawBackground method from ItemRenderer and added a call to getStyle(“backgroundAlpha”) in the appropriate place.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
package uk.co.tangentlabs.hyperbola.components
{
import mx.core.mx_internal;

import spark.components.ResizeMode;
import spark.components.supportClasses.ItemRenderer;

use namespace mx_internal;

[Style(name="backgroundAlpha", type="Number")]

public class CustomItemRenderer extends ItemRenderer
{
public function CustomItemRenderer()
{
super();
}

override mx_internal function drawBackground():void
{
// if autoDrawBackground is set to true, we always
// draw a background and don't need to worry about mouseEnabledWhereTransparent.
// However, if it's false, then we should just let super.drawBackground()
// do its job.
if (!autoDrawBackground)
{
super.drawBackground();
return;
}

// TODO (rfrishbe): Would be good to remove this duplicate code with the
// super.drawBackground() version
var w:Number = (resizeMode == ResizeMode.SCALE) ? measuredWidth : unscaledWidth;
var h:Number = (resizeMode == ResizeMode.SCALE) ? measuredHeight : unscaledHeight;

if (isNaN(w) || isNaN(h))
return;

graphics.clear();

var backgroundColor:uint;
var backgroundAlpha:Number = getStyle("backgroundAlpha");

if (selected)
backgroundColor = getStyle("selectionColor");
else if (hovered)
backgroundColor = getStyle("rollOverColor");
else
{
var alternatingColors:Array = getStyle("alternatingItemColors");

if (alternatingColors && alternatingColors.length > 0)
{
// translate these colors into uints
styleManager.getColorNames(alternatingColors);

backgroundColor = alternatingColors[itemIndex % alternatingColors.length];
}
else
{
// don't draw background if it is the contentBackgroundColor. The
// list skin handles the background drawing for us.
backgroundAlpha = 0;
}
}

graphics.beginFill(backgroundColor, backgroundAlpha);

if (showsCaret)
{
graphics.lineStyle(1, getStyle("selectionColor"));
graphics.drawRect(0.5, 0.5, w-1, h-1);
}
else
{
graphics.lineStyle();
graphics.drawRect(0, 0, w, h);
}

graphics.endFill();
}
}
}

Note that this will always use the same backgroundAlpha for all states, but could be extended to add “backgoundAlphaOver” and “backgroundAlphaSelected” styles that will be used in the appropriate states.

§31 · February 17, 2010 · Spark · Tags: , , · [Print]

  • David

    Awesome!  I spent a day trying to find out how to get my gradient to show thru my mobile list! 

    Thanks for posting this!