VBox with only one rounded corner and gradient background
I am working with Flex 3.4 SDK.
I'm trying to programmatically (yes it should be) styling / skinning a VBox so that its top-right corner is rounded and it gets a two-sided color gradient.
The modifying examples I found around I was able to accomplish both effects (corner and background), but only separately:
VBox with not all rounded corners: http://livedocs.adobe.com/flex/3/html/help.html?content=skinning_6.html
VBox with gradient background: http://butterfliesandbugs.wordpress.com/2007/06/08/generic-background-gradient-for-containers/
But I need to do it at the same time. And all my attempts at coding have failed so far.
Does anyone know how to do this correctly?
source to share
I have a post on my blog on how to make this exact component Here .
A basic custom MXML component (in this case, a VBox) is created. You specify the software skin in which the bevel and gradient are applied.
The software skin does everything it draws in the updateDisplayList function.
Here are some of the code (the rest is on my blog, with a demo)
var g:Graphics = graphics;
var cn:Number = this.getStyle("cornerRadius");
var crtl:Number = this.getStyle("cornerRadiusTopLeft") > 0 ? this.getStyle("cornerRadiusTopLeft") : cn;
var crtr:Number = this.getStyle("cornerRadiusTopRight") > 0 ? this.getStyle("cornerRadiusTopRight") : cn;
var crbl:Number = this.getStyle("cornerRadiusBottomLeft") > 0 ? this.getStyle("cornerRadiusBottomLeft") : cn;
var crbr:Number = this.getStyle("cornerRadiusBottomRight") > 0 ? this.getStyle("cornerRadiusBottomRight") : cn;
var gradFrom:Number = this.getStyle("gradientFrom");
var gradTo:Number = this.getStyle("gradientTo");
var b:EdgeMetrics = borderMetrics;
var w:Number = unscaledWidth - b.left - b.right;
var h:Number = unscaledHeight - b.top - b.bottom;
var m:Matrix = verticalGradientMatrix(0, 0, w, h);
g.clear();
g.beginGradientFill("linear", [gradFrom, gradTo], [1, 1], [0, 255], m);
g.lineStyle(1,borderColor,1,true,LineScaleMode.NORMAL,CapsStyle.ROUND,JointStyle.ROUND);
GraphicsUtil.drawRoundRectComplex(g, b.left, b.top, w, h, crtl, crtr, crbl, crbr);
g.endFill();
}
for a demo, take a look here . Hope this helps.
source to share
Follow the steps from your second link, but instead of using "drawRect" you should use "drawRoundRectComplex". You may need to play with some of the matrix parameters. I seem to remember that I had problems.
Another option is to use degrafa . There may be a bit of a learning curve, but it's powerful and can do it.
source to share