I wanted a radial gradient graphic as a background in my application. The Flex application tag supports linear gradients but not the radial one. I could set a huge graphic (png) as the backgroundImage for the Application, but that would add filesize to my swf file. I could extendApplication and override the updateDisplayList function and draw my graphic there, but I don’t think that’s the way to go either.

So I tried creating a programmatic skin which may sound like the right solution, but which styleable property do we need to attach the Classreference to? Here’s the solution:

Style the Application tag. Set the Classreference on the backgroundImage property (who would have guessed that one). Don’t forget to set the backgroundSize property to 100%, otherwise our graphic won’t stretch to the full size of the container.

1
2
3
4

Application {
backgroundImage: ClassReference("test.skins.ApplicationBackgroundSkin");
backgroundSize: "100%";
}

Then create a programmatic skin class by extending the ProgrammaticSkin class and override the following functions:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

override public function get measuredWidth():Number
{
return 200;
}
 
override public function get measuredHeight():Number
{
return 200;
}
 
protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
var mat:Matrix = new Matrix();
var colors:Array = [0xEAEAEA, 0xFFFFFF];
var alphas:Array = [1, 1];
var ratios:Array = [0, 255];
 
mat.createGradientBox(200,200, 0);
graphics.lineStyle();
graphics.beginGradientFill(GradientType.RADIAL, colors, alphas, ratios, mat);
graphics.drawRect(0,0,200,200);
graphics.endFill();
}

Draw the graphic in the updateDisplayList function. Don’t forget to override the getters for measuredWidth and measuredHeight. If you don’t, the programmatic skin doesn’t have a width and height and the graphic wil not be visible.