动态Flex表单复制

时间:2011-02-03 15:57:50

标签: flex forms

我正在设计一个数据输入应用程序,允许多个条目进入其主题。例如,一个人可能已经接受过多个机构的教育。每个教育条目都是一个表单,应用程序用户可以单击按钮添加另一个条目,这是一个空白但相同的表单。

我认为它涉及状态和自定义表单组件,但不确定所有内容是如何组合在一起的。有人可以说明如何实现这一目标吗?一些示例代码将不胜感激。

提前致谢,

1 个答案:

答案 0 :(得分:0)

如果有要求,是否需要灵活版?或者只是使用最新的Flex 4代码?一般来说,这在Flex中是一项非常简单的任务,您可以在AnEntry.mxml的MXML中创建一个类定义,它只是一个TextInput(或者一个标签和TextInput,或者每个条目需要的任何内容)。在a按钮的单击处理程序中,您在Flex 3中调用this.addChild(new AnEntry())或在Flex 4中调用this.addElement(new AnEntry());.要提交,你要做一个从0开始的循环,然后转到this.numChildren,并将每个TextInput传递给作为HTTPService的参数。

以下两个针对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>

请让我知道,如果这让你朝着正确的方向前进,如果你是Flex的初学者,在一周的视频中搜索Flex,那么它们是一个很好的教程,可以帮助你开始Flex开发。

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>