Dynamic Flex Form Duplication

I'm designing a data entry app that allows multiple entries to its subject. For example, a person might have received education from multiple institutions. Each educational entry is a form and app user can click on a button to add another entry, which is a blank but identical form.

I figure it involves states and 开发者_运维问答custom form components but not sure how everything fits together. Can someone shed some lights on how to accomplish that? Some sample codes would be greatly appreciated.

Thanks in advance,

---

Required flex version if there is a requirement? or just going with the newest available Flex 4 code? Generally speaking this is a very easy task in Flex, you create a class definition in MXML of AnEntry.mxml which is just a TextInput (or a label and TextInput or whatever you need for each entry). In the click handler of the a button you in Flex 3 call this.addChild(new AnEntry()) or in Flex 4 call this.addElement(new AnEntry());. To submit you'd do a loop starting at 0 and going to this.numChildren and for each TextInput pass along as params to an HTTPService.

Two files below compiled against Flex 3.4

[AnEntry.mxml]

<?xml version="1.0" encoding="utf-8"?>
<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Label text="Link:"/>
    <mx:TextInput id="theTextInput"/>
</mx:Box>

[MainApplication.mxml]

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="vertical"
                minWidth="955"
                minHeight="600">

    <mx:Script>
        <![CDATA[
            import mx.rpc.http.HTTPService;
            protected function button1_clickHandler(event:MouseEvent):void
            {
                var params:Object = {};
                var paramCount:Number=0;
                // TODO Auto-generated method stub
                for(var i:Number = 0; i<numChildren; i++)
                {
                    var currentChild:DisplayObject = getChildAt(i);
                    if(currentChild is  AnEntry)
                    {
                        params[paramCount++] = (currentChild as AnEntry).theTextInput.text;
                    }
                }
                var httpService:HTTPService = new HTTPService();
                httpService.method = "POST"
                httpService.url = "http://www.shaunhusain.com/somewhere.php";
                httpService.send(params);
            }
        ]]>
    </mx:Script>


    <mx:Button label="Add Entry" click="this.addChild(new AnEntry())"/>
    <mx:Button label="Submit Info" click="button1_clickHandler(event)"/>
</mx:Application>

Please let me know if this gets you going in the right direction, if you're a beginner at Flex search for the Flex in a week videos, they're a great tutorial to get you started on Flex development.

Amendment for Flex 4:

[MainApplication.mxml]

<?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="955" minHeight="600">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
        import mx.rpc.http.HTTPService;
        protected function button1_clickHandler(event:MouseEvent):void
        {
        var params:Object = {};
        var paramCount:Number=0;
        // TODO Auto-generated method stub
        for(var i:Number = 0; i<numChildren; i++)
        {
        var currentChild:DisplayObject = getChildAt(i);
        if(currentChild is  AnEntry)
        {
        params[paramCount++] = (currentChild as AnEntry).theTextInput.text;
        }
        }
        var httpService:HTTPService = new HTTPService();
        httpService.method = "POST"
        httpService.url = "http://www.shaunhusain.com/somewhere.php";
        httpService.send(params);
        }
        ]]>
    </fx:Script>


    <mx:Button label="Add Entry" click="this.addElement(new AnEntry())"/>
    <mx:Button label="Submit Info" click="button1_clickHandler(event)"/>

</s:Application>

[AnEntry.mxml]

<?xml version="1.0" encoding="utf-8"?>
<mx:Box xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <mx:Label text="Link:"/>
    <mx:TextInput id="theTextInput"/>
</mx:Box>