TitledBorderBox (Flex 4/Spark)

I've re-written my original TitledBorderBox class (Flex 3) to use Spark/Flex 4 components. It is slightly simpler, and hopefully more lightweight. It extends the SkinnableContainer class, and uses it's own skin (flex.utils.ui.TitledBorderBoxSkin).

Here are the properties on the component:

• backgroundAlpha - the background alpha for the box (default: 1)
• backgroundColor - the background color for the box (default: white)
• backgroundVisible - if the background should be shown (default: true)
• borderAlpha - the border alpha for the box (default: 1)
• borderColor - the border color for the box (default: black)
• borderWeight - the thickness of the border (default: 1)
• borderVisible - if the border should be shown (default: true)
• cornerRadius - the corner radius for rounded corners (default: 0)
• dropShadowVisible - if a drop shadow is shown (default: false)
• titleStyleName - the style name for the title label (default "windowStyles")
• title - the title to show in the border

It also supports most of the layout properties too as styles (paddingLeft/Right/Top/Bottom, gap/horizontalGap/verticalGap, horizontal/verticalAlign, etc) for convenience.

The way the border is drawn is to simply draw a line over top of the border, but underneath the title that is the same color as the background. If you set borderVisible="false", then it will attempt to find the background color of the parent and use that instead.

Here it is in action (view source enabled, right click):