How to implement a GroupBox component?

[villin.zhou]

Hi guys, I want to implement a GroupBox component(just like GroupBox control in visual studio, fieldset in html). Now I have got the figure like below, but I can not put other controls(like Button, Label) to the GroupBox in Flex Builder design view. do you have any solutions?
thanks!

reproduce steps:
1. compile GroupBox.mxml to swc
2. add the swc to flex project
3. run test.mxml to see the result

GroupBox.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:UIComponent xmlns:mx="http://www.adobe.com/2006/mxml" width="260" height="220">
<mx:Script>
<![CDATA[
import mx.controls.Label;
import mx.containers.Box;
import mx.core.Container;

public static var ABSOLUTE:String = "absolute";
public static var VERTICAL:String = "vertical";
public static var HORIZONTAL:String = "horizontal";

private var titleBar:Container;
private var body:Container;
private var box:Box;
private var titleBox:Container;
private var titleLabel:Label;
private var _title:String;
private var _layout:String;

[Inspectable(category="General", name="lout", enumeration="vertical,horizontal,absolute", defaultValue="vertical")]
public function get layout():String{
return _layout;
}
public function set layout(l:String):void{
_layout = l;
}

[Inspectable(category="General", defaultValue="afdge")]
public function get title():String{
return _title;
}

public function set title(t:String):void{
_title = t;
}

override protected function commitProperties():void{
super.commitProperties();

titleLabel.text = _title;
var tlm:TextLineMetrics = titleLabel.measureText(_title);

titleLabel.x = 0;
titleLabel.y = 0;
titleBox.width = titleLabel.width = tlm.x + tlm.width + 4;
titleBox.height = titleLabel.height = tlm.ascent+tlm.descent+tlm.leading + 4;

titleBox.x = 10;
titleBox.y = 0;

switch(_layout){
case ABSOLUTE:

break;
case VERTICAL:
case HORIZONTAL:
default:
}


}

override protected function measure():void{
// var tlm:TextLineMetrics = titleLabel.measureText(_title);
// titleLabel.width = tlm.width;
// titleLabel.height = tlm.height;
}

override protected function createChildren():void{
super.createChildren();

if(!body){
body = new Container();
body.setStyle("borderStyle","solid");
body.setStyle("cornerRadius","5");
this.addChild(body);
}
if(!titleBar){
titleBar = new Container();
titleBar.verticalScrollPolicy = "off";
titleBar.horizontalScrollPolicy = "off";
this.addChild(titleBar);
}
if(!box){
box = new Box();
}
if(!titleBox){
titleBox = new Container();
titleBox.setStyle("borderStyle","solid");
titleBox.setStyle("backgroundColor","0x00B1A690");
titleBar.addChild(titleBox);
}
if(!titleLabel){
titleLabel = new Label();
titleLabel.setStyle("fontSize","12");
//body.setStyle("cornerRadius","5");
titleBox.addChild(titleLabel);
}
}

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
super.updateDisplayList(unscaledWidth,unscaledHeig ht);

body.setStyle("borderStyle","solid");
body.setStyle("cornerRadius","5");
titleBar.setActualSize(this.width, titleLabel.height);
titleBar.move(0,0);
body.setActualSize(this.width-2,this.height-titleBar.height/2-1);
body.move(1,titleBar.height/2);

}

]]>
</mx:Script>
</mx:UIComponent>


test.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:custom="components.*"
viewSourceURL="src/ASComponentComposite/index.html"
width="428" height="283"
xmlns:local="*" xmlns:ns1="com.*" layout="absolute">
<local:GroupBox x="116.5" y="63" title="mywindow" width="195" height="159"/>
</mx:Application>

[villin.zhou]

it's impossible?