Group Element not working in adobe flex 3 - actionscript-3

Question

i am trying to create multiple tab with close button in adobe flex 3. for this i have created parent and child object. parent object for tab and child object for close button and place both object in Group container grammatically in function called "addButton()". my code working fine in adobe flex 4.5 but not working in adobe flex 3. due to some reason i have to use adobe flex 3. i have try other container like: HBox, controllbar etc but these are unable to make proper tab view. below is code.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="127" minHeight="34" backgroundColor="#F4E8E8">
<s:layout>
<s:FormItemLayout/>
</s:layout>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.graphics.SolidColor;
import spark.components.Button;
import spark.components.Group;
import spark.primitives.Rect;
public function addButton():void {
//Child Object
var myButton:Button = new Button();
myButton.id = "dd";
myButton.label="X";
myButton.width = 40;
myButton.height = 20;
myButton.depth =1;
myButton.x=50;
myButton.setStyle("color",'red');
myButton.addEventListener(MouseEvent.CLICK, btn);
//Parent Object
var lble:Group = new Group();
var solidColor:SolidColor = new SolidColor(0xFF0000);
var rec:Rect = new Rect();
rec.fill = solidColor;
rec.percentWidth = 100;
rec.percentHeight = 100;
lble.width = 127;
lble.height = 34;
lble.depth =0;
lble.addElement(rec);
lble.addEventListener(MouseEvent.CLICK, lable);
lble.addElement(myButton);
myGroup.addElement(lble);
}
private function btn(e:Event):void {
e.stopPropagation();
jj.text = 'Text For Button';
}
private function lable(e:Event):void {
kk.text = "Text For Label";
}
]]>
</fx:Script>
<s:HGroup id="myGroup">
<s:Button width="126" height="34" click="addButton();" label="Click" skinClass="spark.skins.spark.ButtonSkin"/>
</s:HGroup>
<s:Label id="jj" x="14" y="150" width="1200" height="50" backgroundColor="gray" text="Button"/>
<s:Label id="kk" x="14" y="69" width="1200" height="50" backgroundColor="gray" text="Label"/>
</s:Application>
please help me

Answer 1

1) Group Element (container) Not working in Flex 3 :
Definitely it won't work in Flex 3, there is major difference between Flex 3 and Flex 4 or mx(halo) and spark(Gumbo) respectively. You need to have clear understanding of both the things if you want to convert a component from spark to mx or vice versa.
Here is a nice article that explain the
Difference between Flex 3 and Flex 4
2) I am trying to create multiple tab with close button in adobe flex 3:
Since Flex is a 10 years matured framework there are plenty of open source components available out there you don't have to create a component from scratch. But i appreciate your attempt to do it on your own way.
Have a look in to this before you start creating components
Flex 3 Component Life cycle
Flex 4 Component Life cycle and Creating Advanced spark components
Spark Tab with close button
Flex 3 SuperTabNavigator FlexLib component
Flex: How to add a tab close button for TabNavigator component

Answer 2

You can use Box as mx component. Here is what you can do in flex 3:
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.containers.Box;
public function addButton():void {
//Child Object
var myButton:Button = new Button();
myButton.id = "dd";
myButton.label="X";
myButton.width = 40;
myButton.height = 20;
myButton.x=50;
myButton.setStyle("color",'red');
myButton.addEventListener(MouseEvent.CLICK, btn);
//Parent Object
var box:Box = new Box();
box.setStyle("borderThickness", "1");
box.setStyle("borderStyle", "solid");
box.setStyle("borderColor", "black");
box.setStyle("backgroundColor", "0xFF0000");
box.width = 127;
box.height = 34;
box.addEventListener(MouseEvent.CLICK, lable);
box.addChild(myButton);
myHBox.addChild(box);
}
private function btn(e:Event):void {
e.stopPropagation();
jj.text = 'Text For Button';
}
private function lable(e:Event):void {
kk.text = "Text For Label";
}
]]>
</mx:Script>
<mx:HBox id="myHBox">
<mx:Button width="126" height="34" click="{addButton();}" label="Click"/>
</mx:HBox>
<mx:Label id="jj" x="14" y="150" width="1200" height="50" text="Button"/>
<mx:Label id="kk" x="14" y="69" width="1200" height="50" text="Label"/>
</mx:Application>