Titled Border Box and Titled Border Panel

** There is a Flex 4/Spark version of this control which can be found here.

I've written two new components called TitledBorderBox and TitledBorderWindow that both render a solid border around the component with a title textfield at the top. They are similar to TitledBorder in Java, and the <Fieldset> tag in HTML.

Skip straight to the examples - here are three TitledBorderBox components that illustrate the three layouts (vertical, horizontal, and absolute) and various title styles (right-click to View Source):


And here is an example of the TitledBorderWindow that illustrate how the border and background changes with the various properties (right-click to View Source):


Here are the properties and styles:

<ui:TitledBorderBox
  Properties
layout="vertical|horizontal|absolute"
title=""
borderDropShadow="false"
Styles
backgroundAlpha="0"
backgroundColor="0xffffff"
borderAlpha="1"
borderColor="#000000"
borderThickness="1"
cornerRadius="0"
horizontalGap="8"
paddingLeft="5"
paddingTop="5"
paddingRight="5"
paddingTop="5"
verticalGap="6"
titleStyleName="windowStyles"/>

<ui:TitledBorderWindow
  Properties
layout="vertical|horizontal|absolute"
title=""
borderDropShadow="false"
Styles
backgroundAlpha="0"
backgroundColor="0xffffff"
borderColor="#000000"
borderThickness="1"
borderAlpha="1"
cornerRadius="0"/>

Set the cornerRadius style to have rounded corners. The TitledBorderWindow also supports the roundedBottomCorners boolean style too if you only want rounded corners at the top. And both components can have an optional drop shadow filter as well.

The TitledBorderWindow extends TitleWindow (which extends Panel) so it has all the same properties and styles. The styles that have changed from the Panel/TitleWindow defaults are listed above. I've also added support for adding custom buttons to the titleBar (next to the closeButton).

Update (April 14th 2009): The TitledBorderWindow class wasn't properly laying out the ControlBar like the Panel class does, so I've added a fix for it.

Update (March 17th 2010): scrollbars weren't correctly on the TitleBorderBox class when you use either the horizontal or vertical layout (and you restrict the size of the box). I've fixed up the borderMetrics function to property return the size of the border and now the scrollbars work properly. I also noticed that the background color didn't work if you set the layout to absolute, and that is fixed too.

Update (June 1st, 2010): I've made a Flex 4/Spark version which can be found here.