<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:cc="customComponents.*"
    layout="absolute" creationComplete="init()" 
    width="100%" height="100%"
    backgroundGradientColors="[#ffffff, #ffffff]" viewSourceURL="srcview/index.html">
    <mx:Script>
        <![CDATA[
            import customComponents.CustomTextInput;
            import mx.collections.ArrayCollection;
            import mx.containers.FormItem;
            import mx.core.Container;
            import mx.rpc.events.ResultEvent;
            import mx.controls.Alert;
            
            //declare vars
            //aNormalFormFields Used on the saving event
            private var aFormFields:Array = new Array();
            
            
            private function init():void{
                //call the httpService to fetch xml
                formsService.send();
            }
            private function xmlReturned(event:ResultEvent):void{
                //fill our form from our xml.
                var rawXML:XML = event.result as XML;
                
                for each (var n:XML in rawXML.displayObjectContainer.displayObject){
                    //create a formItem to put in the form
                    var newObjectContainer:FormItem = new FormItem();
                    newObjectContainer.label = n.label;
                    
                    //create the TextInput instance
                    var newObject:CustomTextInput = new CustomTextInput();
                    newObject.addEventListener("change",saveEvent);
                    newObject.custom_id = n.id;
                    newObject.text = n.text;
                    
                    //add the Object to the array that we will loop through on save...
                    addObjectToArray(newObject);
                    
                    //add the TextInput to the FormItem
                    newObjectContainer.addChild(newObject);
                    
                    //Finally add the FormItem to the Form
                    myDynamicForm.addChild(newObjectContainer);
                }
            }
            
            
            //use the following to add the form field to an array that 
            //we will loop over when we save our data...
            private function addObjectToArray(formField:DisplayObject):void{
                this.aFormFields.push(formField);
            }
            
            private function saveEvent(event:Event):void{
                var i:int;
                var tempAFormIDS:Array = new Array(); //this will be a csv list of values, we will use this in sql for a Where IN '12,12,34,34...'
                var tempAFormValues:Array = new Array(); //hold list of new form values
                var tempIDList:String;
                for(i = 0; i < aFormFields.length; i++){
                    tempAFormIDS.push(aFormFields[i]['custom_id']);
                    tempAFormValues.push(aFormFields[i]['text']);
                }
                tempIDList = tempAFormIDS.toString();
                
                formIDS.text = tempIDList;
                formValues.text = tempAFormValues.toString();
                
                
                //I use cairngorm, this is where i would put my event to save the data.
                //var cgEvent:SomeSaveEvent = new SomeSaveEvent(tempAFormValues,tempIDList);
                //CairngormEventDispatcher.getInstance().dispatchEvent(cgEvent);
            }
        ]]>
    </mx:Script>
    <mx:HTTPService id="formsService" url="assets/data/MyForms.xml" result="xmlReturned(event)" resultFormat="e4x" />
    <!-- set up the containers we are going to use to add things too dynamically -->
    <mx:VBox width="100%" height="100%">
        <mx:HBox width="100%" height="50%">
            <!-- this one will be used to add regular text inputs to -->
            <!-- 
                the reason you would use custom
                text inputs here is if you wanted
                to add an id to the input to put
                into an array of id's to loop through
                on the server side of things.
            -->
            <mx:Form id="myDynamicForm">
                
            </mx:Form>
            <mx:Button label="Save" click="saveEvent(event)"/>
        </mx:HBox>
        <mx:HBox width="100%" height="50%">
            <mx:Label text="the form id's"/>
            <mx:TextArea id="formIDS"/>
            <mx:Label text="the form values"/>
            <mx:TextArea id="formValues"/>
        </mx:HBox>
    </mx:VBox>
    
    

</mx:Application>