11 Replies Latest reply on Apr 10, 2014 12:23 AM by xiaoyuandlg

    How to clone a UIComponent ?




      Is there a solution to clone a UIComponent? There is a solution using ObjectUtil.copy method but it doesn't work for UIComponents. I have also tried using properties reflection, but it doesn't work either.


      Thank you.


        • 1. Re: How to clone a UIComponent ?
          Flex harUI Adobe Employee

          There is no way to clone.  You have to know which properties to copy to the

          new instance.

          • 2. Re: How to clone a UIComponent ?
            Sophie_cordier Level 1



            Thank you for your quick reply. But I still have a question: how do I know what properties to copy. I tried the code below and I get an error:


            private function clone(uicomp:UIComponent):UIComponent {
                        var classInfo:Object = ObjectUtil.getClassInfo(uicomp);
                        var result:UIComponent = new UIComponent();
                        for each (var p:Object in classInfo.properties)
                            result[p] = uicomp[p];
                        result.styleName = uicomp;
                        return result;


            And the error:

                 ReferenceError: Error #1074: Illegal write to read-only property activeEffects on mx.core.UIComponent.



            • 3. Re: How to clone a UIComponent ?
              archemedia Level 4

              You can use a try..catch statement to catch the error.



              • 4. Re: How to clone a UIComponent ?
                Sebastien V. Level 3

                This means that the activeEffects of UIComponent is only a getter with no associated setter, so you can not write in it, and your method can not work...

                As previous poster said, you can try to catch the errors to ignore such fields and see what happens once all the writable properties have been copied.


                Why exactly do you need to clone such a UIComponent?

                • 5. Re: How to clone a UIComponent ?
                  Sophie_cordier Level 1

                  Thank you for your answers. I managed to solve the problem without cloning the component any more.



                  • 6. Re: How to clone a UIComponent ?
                    injpix Level 3

                    You can clone an Image like using the following, right?:


                         import flash.display.Bitmap;
                         import flash.display.BitmapData;
                         import mx.controls.Image;
                          * This class is used to clone an image for that it can be used
                          * in multiple places simultaneously.
                         public class ImageClonerUtil
                              public static function cloneImage(image:Image):Image
                                   var clone:BitmapData = Bitmap(image.source).bitmapData.clone();
                                   var bitmap:Bitmap           = new Bitmap(clone);
                                   var newImage:Image          = new Image();
                                   newImage.source           = bitmap;
                                   return newImage;
                    • 7. Re: How to clone a UIComponent ?
                      Sophie_cordier Level 1

                      Yes, this is true. But there is a problem : The maximum width and maximum height of a BitmapData object is 2880 pixels (http://www.adobe.com/livedocs/flex/2/langref/flash/display/BitmapData.html). So, for an object bigger than this, a Canvas with scrollbars for example, it is impossible.




                      • 8. Re: How to clone a UIComponent ?

                        Hi! I'm getting kinda late here but I'm still posting my workarround and see if it helps anyone, I managed to clone a component using the containers childDescriptors and createComponentFromDescriptor (click here to read a note on the functions - although is for flex 2, works in flex 3).


                        This is a demo for the clonning in which all the children from a Canvas are cloned into another one....


                        <?xml version="1.0" encoding="utf-8"?>
                        <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
                                       private function cloneButton_clickHandler (event:MouseEvent):void
                                            var childDescriptors:Array = original.childDescriptors;
                                            var descriptorsCount:int = childDescriptors.length;
                                            for (var i:int; i < descriptorsCount; i++)
                             <mx:Button label="Clone Canvas" click="cloneButton_clickHandler(event);" />
                             <mx:Canvas id="original" width="100" height="100" borderStyle="solid" >
                                  <mx:Label text="Some Label" />
                                  <mx:ComboBox dataProvider="{['data1', 'data2']}" bottom="0" />
                             <mx:Canvas id="cloned" width="100" height="100" borderStyle="solid" >


                        Hope This Helps!


                        1 person found this helpful
                        • 9. Re: How to clone a UIComponent ?
                          Sophie_cordier Level 1

                          Thank you for your post, Gus!



                          • 10. Re: How to clone a UIComponent ?

                            This way to make clone is better but I am facing an issue here, If we add UIComponents dynamically in "original" canvas instead of adding in tags , the "childDescriptors"  is null value and unable to make clone in this way.


                            anyone having soluiton... please share with me.





                            • 11. Re: How to clone a UIComponent ?

                              That's a good question, exactly the same as the one I have with the winforms UI component.