function call on child object in adobe flex

Question

i have generated parent(label) object and it's child object(button) pragmatically with function named "addButton()" in adobe flex. now i want to call a function named "lable()" on parent object and want to call function named "btn()" on child object. but on every click my script call same function "lable()".

   <?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="127" minHeight="34" backgroundColor="#F4E8E8">
    <s:layout>
        <s:FormItemLayout/>
    </s:layout>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import spark.components.Button;
            import mx.controls.Alert;

            public function addButton():void {

                //Child Object
                var myButton:Button = new Button();
                myButton.id = "dd";
                myButton.label="X";
                myButton.width = 20;
                myButton.height = 20;   
                myButton.depth =1;
                myButton.x=105;
                myButton.setStyle("color",'red');
                myButton.addEventListener(MouseEvent.CLICK, btn);

                //Parent Object
                var lble:Label = new Label();
                lble.width = 127;
                lble.height = 34;
                lble.depth =0;
                lble.setStyle("backgroundColor",'red');
                lble.addEventListener(MouseEvent.CLICK, lable);
                lble.addChild(myButton);
                myGroup.addElement(lble);

            }

            private function btn(e:Event):void {
                jj.text = 'Text For Button';
            }

            private function lable(e:Event):void {
                kk.text = "Text For Label";
            }

        ]]> 
    </fx:Script>

    <s:HGroup id="myGroup">
        <s:Button width="126" height="34" click="addButton();" label="Click" skinClass="spark.skins.spark.ButtonSkin"/>
    </s:HGroup>

    <s:Label id="jj" x="14" y="150" width="1200" height="50" backgroundColor="gray" text="Button"/>
    <s:Label id="kk" x="14" y="69" width="1200" height="50" backgroundColor="gray" text="Label"/>

</s:Application>

please help me

Answer 1

As I understood - you need possibility to add Button on top to Label when you add elements to Group. From my experience I use the next - create main container for child elements and then add him to HGroup. See my implementation of addButton() method below.

public function addButton():void
{
            //First Child Object
            var myButton:Button = new Button();
            myButton.id = "dd";
            myButton.label = "X";
            myButton.width = 20;
            myButton.height = 20;   
            myButton.depth = 1;
            myButton.x = 105;
            myButton.setStyle("color",'red');
            myButton.addEventListener(MouseEvent.CLICK, btn);

            //Second Object
            var lble:Label = new Label();
            lble.width = 127;
            lble.height = 34;
            lble.depth = 0;
            lble.setStyle("backgroundColor",'red');
            lble.addEventListener(MouseEvent.CLICK, lable);

            //Parent Object
            var grp:Group = new Group();
            grp.addElement(lble);
            grp.addElement(myButton);
            myGroup.addElement(grp);

}