6 Replies Latest reply on Apr 23, 2010 8:41 AM by RandomReado

    Insert an object from AS3 method underneath MXML component?

    RandomReado Level 1

      Here's my AS3 code (Method.as):

       

      public function myMethod():void
      {
          var com:MyCom = new MyCom();
          com.text = 'Title';
          com.visible = true;
      }
      

       

      And the MXML code (MainApp.mxml):

       

      <fx:Script>
          <![CDATA[
              import components.engine.Method;
      
              private var M:Method = new Method();
          ]]>
      </fx:Script>
      
      <s:Button id="btn" click="M.myMethod()"/>
      

       

      When I click the button "btn", the "myMethod()" method is called, which creates the "com" custom component. I then need to have the custom component returned to the MXML app and appear underneath the button I clicked. Is there any easy way to do this?

       

      I've already tried the following:

       

      public function myMethod(e:Event):void
      {
          var com:MyCom = new MyCom();
          com.text = 'Title';
          com.visible = true;
      
          e.currentTarget.addChild(com);
      }
      

       

      This didn't work and Flex suggested I used addElement instead of addChild, but this also returned an error.

       

      Does anyone know how I achieve this please? Thanks in advance.

        • 1. Re: Insert an object from AS3 method underneath MXML component?
          RandomReado Level 1

          Sorry if that sounds confusing/impossible - I'm really new to this stuff.

           

          A better way of describing what I'm trying to achieve is the ability to dynamically load custom components. If anyone has any useful URLs or tips they can share that could point me in the right direction, I would greatly appreciate it.

           

          Thanks.

          • 2. Re: Insert an object from AS3 method underneath MXML component?
            David_F57 Level 5

            hi,

             

            there is loads of information around but visual tutorials are always better, tv.adobe.com has several.

             

            Now when adding a new component with flex 4 all spark display objects are visual elements so when you add your custom component  to a container say a group called mainDisplay you use something like

             

            var comp1:myCustomComponent = new myCustomComponent();

            comp1.width = 100;

            comp1.height = 100;

             

            mainDisplayContainer.addElement(comp1)

             

            if you don't set any parameters for comp1 then you need to make sure that myCustomComponent has some sorts of defaults or it will have no size. So if you add it you wouldn't see it (no width or height)

             

            Also as you add components they have a z-order so if you add 2 components to the same container the second one would be over the top of the first one if they have the same position, you also need to take care of that.

             

            To give you an idea the following example can load some local images into a list box, you can then drag those images over the main app and when you drop them it adds a complex component into the maindisplay container, drag them around and you will see what happens with z-order

             

            http://gumbo.flashhub.net/pagedrop/

             

            David.

            • 3. Re: Insert an object from AS3 method underneath MXML component?
              RandomReado Level 1

              I see what you mean about the z-order. I've tried adding a Group container to my MainApp.mxml file with an ID of "myGroup", and then in the Method.as file under the myMethod() method I've added:

               

              myGroup.addElement(com);

               

              However Flex says "1120: Access of undefined property myGroup".

               

              Is there something I'm doing wrong?

              • 4. Re: Insert an object from AS3 method underneath MXML component?
                David_F57 Level 5

                hi

                 

                to add a group to the main app

                 

                 

                var myGroup:Group = new Group();

                mygroup.top = 10;mygroup.left = 10;mygroup.bottom = 10;mygroup.right = 10;

                this.addElement(myGroup);

                 

                .....

                .....

                 

                 

                myGroup.addElement(myComp);

                 

                David.

                • 5. Re: Insert an object from AS3 method underneath MXML component?
                  David_F57 Level 5

                  just a note, always make sure the naming is correct actionscript is case sensitive, the above code would not work as I declared myGroup then called it mygroup--

                  • 6. Re: Insert an object from AS3 method underneath MXML component?
                    RandomReado Level 1

                    I've tried what you've suggested but it doesn't work... Here's what I have...

                     

                    MainApp.mxml:

                     

                    <s:Button id="btn" click="M.myMethod()"/>
                    <s:Group id="myGroup" width="100%" height="100%"/>
                    

                     

                    Method.as:

                     

                    public function myMethod():void
                    {
                        var myGroup:Group = new Group();
                        var com:MyCom = new MyCom();
                    
                        com.text = 'Title';
                        com.visible = true;
                    
                        trace(com);
                    
                        myGroup.addElement(com);
                    }
                    

                     

                    To make sure the function was being called I added trace().

                     

                    When I run the application and click the button, the Console returns "MyCom<number>". Each time I click the button, the same output appears, but the number has incremented each time by 2 or more. Is there any reason why?

                     

                    Additionally, nothing appears in the Group container, and Flex doesn't report any errors either.

                     

                    Any ideas?