clone flex component

Question

Hey I am trying to duplicate a flex component at run time.

For example if i have this

mx:Button label="btn" id="btn" click="handleClick(event)"/>

i should be able to call a function called DuplicateComponent() and it should return me a UI component thts exactly same as above button including the event listeners with it.

Can some one help me please?? Thanks in advance

Answer 1

You can't take a deep copy of UIComponents natively. You're best bet would be to create a new one and analyse the one you have to add a duplicate setup. To be honest this does sound like a bit of a code smell. I wonder if there may be a better solution to the problem with a bit of a rethink..

Answer 2

Same question as: http://www.flexforum.org/viewtopic.php?f=4&t=1421

Showing up in a google search for the same thing. So you've cut&pasted the same question a month later. No luck eh?

There is no easy way to do this that I know of. Many of a component's settings are dependent on the container/context/etc... and get instantiated during the creation process, so there's no reason to clone from that perspective.

You can clone key settings in actionscript and use those when creating new elements.

For instance, assuming you only care about properties, you might have an array ["styleName","width","height",...], and you can maybe use the array like this:

var newUI:UIComponent = new UIComponent();
for each(var s:String in propArray) {
   newUI[s] = clonedUI[s];
}

If you want more bites on your question (rather than waiting a month), tell us what you are trying to achieve.

Answer 3

To solve that problem you should use actionscript and create the buttons dynamically.

Lets say you want the button(s) to go in a VBox called 'someVbox'

for (var i:uint = 0; i< 10; i++){
    var but:Button = new Button();
    but.label = 'some_id_'+i;
    but.id = 'some_id_'+i;
    but.addEventListener(MouseEvent.CLICK, 'handleClick');
    someVbox.addChild(but);
}

I haven't tested it, but that should add 10 buttons to a vbox with a bit of luck.

Answer 4

Do a Byte Array Copy. This code segment should do it for you:

// ActionScript file
import flash.utils.ByteArray;

private function clone(source:Object):*
{
    var myBA:ByteArray = new ByteArray();
    myBA.writeObject(source);
    myBA.position = 0;
    return(myBA.readObject());
}

One note, I did not write this code myself, I'm pretty sure I got it from a post on the Flex Coder's list.

Answer 5

mx.utils.ObjectUtil often comes in handy, however for complex object types, it's typically good practice to implement an interface that requires a .clone() method, similar to how Events are cloned.

For example:

class MyClass implements ICanvasObject
{
    ...

    public function clone():ICanvasObject
    {
         var obj:MyClass = new MyClass(parameters...);
         return obj;
    }
}

This gives your code more clarity and properly encapsulates concerns in the context of how the object is being used / cloned.

Answer 6

Hi lukesh,

You are right but as per my understanding UI Components are not cloned by mx.utils.ObjectUtil.

from : http://livedocs.adobe.com/flex/201/langref/mx/utils/ObjectUtil.html#copy()

copy () method

public static function copy(value:Object):Object Copies the specified Object and returns a reference to the copy. The copy is made using a native serialization technique. This means that custom serialization will be respected during the copy.

This method is designed for copying data objects, such as elements of a collection. It is not intended for copying a UIComponent object, such as a TextInput control. If you want to create copies of specific UIComponent objects, you can create a subclass of the component and implement a clone() method, or other method to perform the copy.

Parameters value:Object — Object that should be copied.

Returns Object — Copy of the specified Object