Over a million developers have joined DZone.

TitledBorderBox (Flex 4/Spark)

DZone 's Guide to

TitledBorderBox (Flex 4/Spark)

· Web Dev Zone ·
Free Resource
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):

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}