Flex: Copy UI elements on click

Question

Hi,

I have a panel with several canvases and buttons on it. I want to implement a feature: when I click next button I want the whole Panel and canvases to be copied and placed below the current one. Also I want to make it possible to do this operation several times.

How do I dynamically generate UI elements? (and maybe I will need some new Arrays, e.g. state1, state2, etc)

Please help

Answer 1

I would propose to start with an object model that describes the panel and it components and implement all copy and edit functionality there. Once you have that, you can assign the model as a dataprovider to the UIComponent you are creating. If you let your model dispatch events when it is changed or updated, your view can listen to it and update itself via the UIComponent lifecycle (createChildren, commitProperties, updateDisplayList, ...).

Here's more info on the component lifecylcle:

http://livedocs.adobe.com/flex/3/html/help.html?content=ascomponents_advanced_2.html

Answer 2

I have written a small example.Hope this helps.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
    <mx:Script>
     <![CDATA[
      import mx.containers.Panel;
      import mx.controls.Text;
         var i:int = 1;
      function addPanel() {
       var p:Panel = new Panel();
       var pnlID:String = "panel" + i;
           p.id = pnlID;
           p.title = "New Panel ---> " + pnlID;
       var plainTxt:Text = new Text();
           plainTxt.text = "This is panel " + pnlID;

           p.addChild(plainTxt);

       this.addChild(p);
       i++;
      }
     ]]>
    </mx:Script>
    <mx:Button id="btn" label="ADD NEW PANEL" click="addPanel()"/>


</mx:Application>