GroubBox in Flex 3 with heading

I need to have a group box in flex 3 - simple border with a heading at the top but the heading at the top should not have any border line through it.

I searched on the Net and the closest that I could get with source is

http://keg.cs.uvic.ca/flexdevtips/titledborder/srcview/

But the problem with this is that I can’t view in design mode what is on the group box. Does anyone know how to fix this?

Then I decided to go with canvases and an input box

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
<mx:TextInput 
        text="This should be my label" 
        x="124" y="72" 
        width="166" height="32" 
        borderStyle="solid" 
        fontWeight="bold" 
        color="#003366" backgroundColor="#D81010"/>

<mx:Canvas x="107" y="88" width="263" height="200" borderStyle="solid" label="Testst">
</mx:Canvas>            
</mx:Application>

But I can't seem to get the Textinput to be ontop of the canvas. There is a line through the box as in the below picture

enter image description here

Does anyone know how to resolve this or have a better idea?

thanks

Solution

To get a custom component to work in design mode, you need to compile the code into a SWC library. Then reference the SWC library in your application project. I've never bothered to do this, I imagine you may get mixed results. I haven't bothered w/design mode in over 5 years :)

The reason the "window" component (in the URL that you linked to in the question) works in design mode is that it extends the Flex component TitleWindow. Since it extends an existing Flex component, I am assuming design mode knows how to render it.