Soliant Consulting | Custom Software Consulting, Development, and Programming

Flex TitleBox Component

For a recent project I was working on, I needed a re-usable rounded TitleBox component. Here is what I created.

Important
This example uses Flex 4. You will need to download and install the Flex 4 sdk before this example will work.

Here is a box component with a header and configurable size and corner radius.

Here is the source for this component.

This component is composed of two elements: The first is the TitleBox.mxml object, part of which is shown below:

TitleBox Component Snippet:

<Group 	xmlns="http://ns.adobe.com/mxml/2009"
		xmlns:caspar="com.caspar.*">
	<Group top="0" left="0">
		<filters>
			<DropShadowFilter alpha="0.5" angle="0" blurX="6" blurY="6" distance="0" quality="3" />
		</filters>
		<caspar:ComplexRect radiusTopLeft="{cr}" radiusTopRight="{cr}"
				    radiusBottomLeft="{cr}" radiusBottomRight="{cr}"
                                    height="{bh}" width="{bw}">
			<caspar:fill>
				<SolidColor color="0xffffff"/>
			</caspar:fill>
		</caspar:ComplexRect>
	</Group>
</Group>

For the full code, click “view source” on the example.

In the MXML code above, you can see a reference to a “ComplexRect” Object. This object is much the same as a normal rect obeject definable in MXML, except you can set the corner radius for any of the corners independently of the others. Here is the key part of the complex rect code below:

ComplexRect Object Snippet:

public function ComplexRect()
{
	super();
}

/**
*  @inheritDoc
*/
override protected function drawElement(g:Graphics):void{

	if ( _radiusTopLeft || _radiusTopRight || _radiusBottomLeft || _radiusBottomRight )
	{
		g.drawRoundRectComplex(	super.drawX, super.drawY ,
								super.width, super.height,
								_radiusTopLeft , _radiusTopRight ,
								_radiusBottomLeft , _radiusBottomRight );
		//calc as min, which will ensure bounds calcs by the parent work properly
		calcEllipseRadiiValues ();
	}
	else {
		super.drawElement(g);
	}
}

In the TitleBox.mxml file, you could add getters / setters to change the box border or header color.

Currently to add content to the box, you need to call it’s “addElement” method on creationComplete. This is shown below:

How to Add an Element to the Box:

<Script>
	<![CDATA[
		private function init() : void {
			myHeaderBox.addElement(boxText);
		}
	]]>
</Script>

<caspar:TitleBox id="myHeaderBox" headerText="My Title Box!!" boxWidth="300" boxHeight="200"/>

<Text x="10" y="30" id="boxText" text="Box Contents"/>