Unexpected Behavior when dynamically creating containers in AS3

I am probably trying to do something a little too fancy for my level of experience, but its sort of intriguing me. I am creating a dynamic tabNavigator based on an Array. I have created a for loop to dynamically create this it run time.

In the first Tab, I am trying to add an image and a rich text editor in an HBOX, but it only shows the second child that I added. i cannot find an example online on how to make this work and i couldnt find anything on the livedocs.adobe site either.

I have attached the code below. This site has been very helpful and I have learned more in the last week from this site then I have from reading 3 FLex books.

//Lets build the TabNavigtor.
for (var i:int = 0; i < prodEditArray.length; i++)
{
	var source:String = new String();					
	var _canvas:Canvas = new Canvas();	
	var _image:Image = new Image();	
	var _vboxLeft:HBox = new HBox();	
	var _vboxRight:HBox = new HBox();
	var _hboxParent:HBox = new HBox();	
	var _rte:RichTextEditor = new RichTextEditor();	
	var _textArea:TextArea = new TextArea();	
 
	_image.height = 1104;
	_image.width = 816;
	_image.source = prodEditArray[i].imageDir + prodEditArray[i].imageName;
 
	_textArea.id = prodEditArray[i].labelID;
	_textArea.editable = "true";
	_textArea.width = 100;
	_textArea.height = 200;
	_textArea.x = 300;
	_textArea.y = 300;
	_textArea.enabled = "true";
	_textArea.text = "who knew this would work";
 
	_canvas.addChild(_image);
	_canvas.addChild(_textArea);
	_canvas.visible = "true";
 
	_vboxLeft.addChild(_canvas);
	_vboxLeft.visible = "true";					
	_vboxLeft.verticalScrollPolicy = "on";	
 
	_vboxRight.addChild(_rte);
	_vboxRight.visible = "true";					
 
	_hboxParent.label = prodEditArray[i].page;	
	_hboxParent.addChild(_vboxLeft);
	_hboxParent.addChild(_vboxRight);	
 
	trace (_hboxParent.numChildren); //this always says 2.					
 
	this.TabEdit.addChild(_hboxParent);						
}

Select allOpen in new window