After doing some actionscript-only projects for a while I’m back working with Flex now. It’s good to not have to build my scrollbars and such entirely by hand.
Unfortunately, some things that take a few seconds in flash to build sometimes take a few hours in Flex, like this for instance:
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.
This to me seem like a good flexible (excuse the pun) solution and not something that should take hours.
Stuff like this only takes hours when you don’t know how to approach it. The same can be said for Flash. If you didn’t know about listening to the Stage for a resize and how to draw gradients etc.
I wasn’t referring to this example as something that took me hours, although it took me some time to figure out that I had to use the backgroundImage (note the word “image”) property to set the backgroundGradient to.
It just takes me more time to figure these things out in the Flex Framework than in plain Actionscript. I’ve been working with Flex since Flex 1.5 and still I discover things like this.
For what it’s worth in Flex 4 you can create a simple custom Application skin (MXML) and use the following declarative fill (sample radial gradient):
Trying again w/code:
Giving up pasting code. Anyways, in Flex 4 you can use FXG to easily declare a radial gradient fill in a custom Application skin.
http://blog.flexexamples.com/2008/12/23/creating-a-radial-gradient-fill-on-a-rect-object-in-flex-gumbo/
I’ve seen this before when I was looking into Microsoft Silverlight, or more specific Expression Blend. Blend generates similar xml. MXML has always been clean and readable but if it’s going to be like this we’ll need a better editor. Eclipse may not even be the right platform for what we’ll need then.
I’ve also heard that the fla file format’s going to be text based rather than binary (hooray, source control). I wonder what that will look like.