I've written two new components called
TitledBorderWindowthat 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
TitledBorderBoxcomponents 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
TitledBorderWindowthat 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
cornerRadiusstyle to have rounded corners. The TitledBorderWindow also supports the
roundedBottomCornersboolean style too if you only want rounded corners at the top. And both components can have an optional drop shadow filter as well.
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
TitledBorderWindowclass wasn't properly laying out the
Panelclass 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.