Dynamically creating a text area onclick in AS3

I am newbie to AS3 and Flex. I want to add a text area on the click or a button, for example lets say if a person has multiple addresses and they want to add more address. When the user clicks 'add address' a new text area should appear.I have looked everywhere for the solution but no luck

Hear is the code that I have tried (and this could be very wrong):

import mx.controls.Alert;
import mx.events.CloseEvent;
private function createTextField(evt:Event):void{
    var theTextField:TextField = new TextField();
    theTextField.type = TextFieldType.INPUT;
    theTextField.border = true;
    theTextField.x = 10;
    theTextField.y = 10开发者_StackOverflow中文版;
    theTextField.multiline = true;
    theTextField.wordWrap = true;
    addChild(theTextField);
}

<mx:FormItem>
<mx:Button label="Add Text Area" click="createTextField(event);"/>
</mx:FormItem>

thanks in advance to anyone who can help.

you're mixing flash-based and flex-based components - because you're using mxml i assume you're using flex.

the mx namespace are the "old" (pre flex4 components) - you may want to use spark-components and therefore the s-namespace.

<s:Button />

and if you want to add a component to your mxml dynamically you don't use addChild (as/flash) but addElement(). at last, you don't create a flash-based TextField but a flex-bases TextInput:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                   xmlns:s="library://ns.adobe.com/flex/spark" 
                   xmlns:mx="library://ns.adobe.com/flex/mx"
                   creationComplete="onCreationComplete(event);"
                   >
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

    <fx:Script>
      <![CDATA[

        import spark.components.TextInput;

        private function onCreationComplete(evt:Event):void
        {
            trace("onCreationComplete()");
            var txt:TextInput = new TextInput();
            grp.addElement(txt);
        }

    ]]>
  </fx:Script>

  <s:VGroup id="grp">
  </s:VGroup>

</s:WindowedApplication>

Its really simple, look at the following example I made:

<?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"
               width="250" height="250">

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <fx:Script>
        <![CDATA[

        import flash.events.Event;
        import spark.components.TextArea;

        protected function onButtonClick(e:Event):void
        {
            var textArea:TextArea = new TextArea();
            textArea.id = "textArea";
            addElement(textArea);

        }// end function

        ]]>
    </fx:Script>

    <s:layout>
        <s:VerticalLayout></s:VerticalLayout>
    </s:layout>

    <s:Button id="button" click="onButtonClick(event)">Add Text Area</s:Button>

</s:Application>

Simply add an event listener to a Button element using its click property. Then in the event handler create a TextArea object and add it to the application using its addElement() method.

Here is an image of the flex application being run: