[flexcoders] how do I loop thru dynamically created UI components?

[hoytlee2000]

Hello,

I've created a button to let users add text input fields to the app so they can 
add additional information.  That works fine, however I am at a 
lost on how to loop thru the newly added fields to get the input so I can send 
it to a php script to store in a sqlite database.  I thought I could 
iterate through the container using the numchild attr of the enclosing 
container, but it returns a DisplayObject and that's where I get stuck.

I don't know how to access the individual attrs (such as the .text property) of 
the DisplayObject.  I have the label and textinput components 
wrapped in a hbox for formatting purposes.

Also I noticed that when I try to set the id attr of the textfield explicitly 
the getName method returns something entirely differemt (see output 
after code below).

Any help, tips, or web link would be appreciated.  I'm stumped.

Thanks,
Hoyt

my code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute">
<mx:Script>
        <![CDATA[
                import mx.controls.Label;
                
                private var numCount:int = 0;
                
                // this adds text input fields, it also adds an hbox for 
formating
                private function addField():void {
                        var newHbox:HBox = new HBox();
                        var newLabel:Label = new Label();
                        var newTextInput:TextInput = new TextInput();
                        
                        numCount = numCount + 1;
                        debugField.text = numCount + "\n";
                        
                        newLabel.text = "Field " + numCount;
                        newLabel.width = 50;
                        newTextInput.width = 400;
                        
                        newHbox.id = "bbox" + numCount;
                        debugField.text += newHbox.id + "\n";
                        
                        newHbox.addChild(newLabel);
                        newHbox.addChild(newTextInput);
                        
                        vbox.addChild(newHbox);                 
                }
                
               // I use this function to test output and this is where I need 
help.  I want to
               // iterate through all the text input fields and read the user 
input
                private function getInfo():void {
                        var i:int = 0;
                        for (i = 0; i < vbox.numChildren ; i++) {
                                var tmpName:String = "hbox" + i;
                                var tmpObj:DisplayObject = vbox.getChildAt(i);
                                
                                debugField.text += "Index is: " + i + "\n";
                                debugField.text += tmpObj.toString() + "\n";    
                        
                        }
                }
                
        ]]>
</mx:Script>
        <mx:Panel id="myPanel" x="460" y="10" width="513" height="297" 
layout="absolute">
                <mx:VBox id="vbox" x="10" y="10" height="237" width="473">
                        <mx:HBox id="hbox0" width="528" 
backgroundColor="#0A7C55">
                                <mx:Label text="Url" width="49" color="#FFFFFF" 
textAlign="center" height="20"/>
                                <mx:TextInput width="412"/>
                        </mx:HBox>
                </mx:VBox>
        </mx:Panel>
        
        <mx:TextArea x="44" y="162" height="145" id="debugField" 
wordWrap="true" width="408"/>
        
        <mx:Button x="44" y="315" label="GetInfo" click="getInfo();"/>
        
</mx:Application>


This is the printout I get from the code:

Index is: 0
sandbox0.myPanel.vbox.hbox0
Index is: 1
sandbox0.myPanel.vbox.HBox89
Index is: 2
sandbox0.myPanel.vbox.HBox96
Index is: 3
sandbox0.myPanel.vbox.HBox104

why is the id of the added HBox's Hbox89, HBox96, and HBox104? instead of 
Hbox1, Hbox2, Hbox3?