Most of the Flex Containers have the cornerRadius attribute. This is a lovely attribute which allows you to round the corners of layout objects. Better yet, the Panel and TitleWindow components let you round the just top corners – YAY! So… why the HELL didn’t Adobe implement the rounding of SPECIFIC corners on any component that had a cornerRadius attribute?!
Anyways, I wanted something like this that I could use in applications for aesthetic purposes. I found a few solutions here and there which would have been adequate. However, for educational purposes, I decided to just roll out my own. Now, there are a few quirks here and there, but overall I am satisfied with the outcome. Just be careful if you are placing children inside ( take into account padding if you are giving the box heavily rounded corners ). Additionally, when rounding the corners and using a height / width that scales ( percentage ), it is important to find and use a minHeight and minWidth or else the box WILL become all wacked out when it gets small. It is all relative to the amount of corner radius you specify. Use the style explorer to see what I mean.
Below is a screen shot of what can be created using this component.
A style explorer can be found here ( with a link to source ).
Source can be downloaded here.
Enjoy!
Great component! It truly is a shame that Adobe has not built in this type of functionality… Oh well, it opens doors for the component development communities I suppose.
I do have one question; I’d like to add a gradient background instead of a solid fill color… I’ve tried a few things but haven’t had any luck. Any help would be greatly appreciated. Thanks a lot and again, great work.
Thanks for the feedback.
What have you tried thus far to get a gradient to work?
In order to get the Gradient to work you have to apply it to the Graphics Object prior to calling
drawRoundRectComplex()If you haven’t already checked out the ActionScript reference on Graphics it may help. Specifically the
beginGradientFill()method. You probably need to expose styles to use as the parameters tobeginGradientFill()and replace line 122 of the StyledBox code ( Graphics.beginFill() ) with the this method.Drop me an e-mail at djarvis270@gmail.com or just reply here…