6 Replies Latest reply on Nov 15, 2009 7:50 PM by sagisid

    Duplicate Canvas

    sagisid

      hi,

       

      i have a smal canvas in which i have two text boxes and a button.

      now, when i click on button, i want a new canvas exactly similar to my earlier one to be generated and placed right below the first one.

      how to do it ?

        • 1. Re: Duplicate Canvas
          _Natasha_ Level 4

          Hi,

          there is no copy() methods to copy UI elements in SDK.

          You should create a copy manually. There are two variants for you:

          1. create a custom control with this canvas and just create an instance.

          2. dinamicaly read childrens and create a new canvas.

          • 2. Re: Duplicate Canvas
            sagisid Level 1

            hi natasha,

             

            what i did was,

            1. on click of button i created the canvas.

            2. manually i created the text boxes and button.

            3. i then added these components to the canvas.

            4. i set the canvas's x and y co-ordinates as i wanted.

             

            the canvas is getting created and placed wherever i want.

             

            but i want to change the color of canvas

            and also i want to add event listener to the button inside the canvas...

             

            how to do that ?

            • 3. Re: Duplicate Canvas
              _Natasha_ Level 4

              Can you post your code with comments what you want to add.

              • 4. Re: Duplicate Canvas
                sagisid Level 1

                private function addRow():void
                {
                var cn:Canvas = new Canvas();
                //cn.id = "c"+cnt;
                cnt++;
                cn.y = cntYAxis + 61;
                cntYAxis+=61;
                cn.setStyle("backgroundColor:","#c0bfec;");


                //Alert.show(cn.y.toString());
                var t:TextInput = new TextInput();
                var t1:TextInput = new TextInput();
                var b:Button = new Button();

                t.x = 20;
                t.y = 10;

                t1.x = 188;
                t1.y = 10;
                t1.width = 98;

                b.x = 297;
                b.y = 10;
                b.label = "Add"
                b.addEventListener(MouseEvent.CLICK,addRow,false,cnt);
                 
                cn.addChild(t);
                cn.addChild(t1);
                cn.addChild(b);

                expPanel.addChild(cn);
                }

                 

                 

                this is my code...

                • 5. Re: Duplicate Canvas
                  Ramakrishnan SRK

                  Can you try this sample,

                   

                   

                   

                   

                  private function createCanvas(event: MouseEvent): void {
                  var canvas: Canvas = event.target.parent as Canvas;
                  var newCanvas: Canvas = new Canvas();
                  newCanvas.width = canvas.width;
                  newCanvas.height = canvas.height;
                  newCanvas.x = canvas.x;
                  newCanvas.y = (canvas.y + canvas.height);
                  newCanvas.setStyle("backgroundColor", canvas.getStyle("backgroundColor"));

                   

                  for (var i: int = 0; i < canvas.getChildren().length; i++) {
                    var obj: DisplayObject = canvas.getChildAt(i);
                    if (obj is TextInput) {
                     var txtInput: TextInput = obj as TextInput;
                     var newTxtInput: TextInput = new TextInput();
                     newTxtInput.width = txtInput.width;
                     newTxtInput.height = txtInput.height;
                     newTxtInput.x = txtInput.x;
                     newTxtInput.y = txtInput.y;
                     newCanvas.addChild(newTxtInput);
                    } else if (obj is Button) {
                     var btn: Button = obj as Button;
                     var newBtn: Button = new Button();
                     newBtn.width = btn.width;
                     newBtn.height = btn.height;
                     newBtn.x = btn.x;
                     newBtn.y = btn.y;
                     newBtn.label = btn.label;
                     newBtn.addEventListener(MouseEvent.CLICK, createCanvas);
                     newCanvas.addChild(newBtn);
                    }
                  }
                  this.addChild(newCanvas);
                  }

                   

                  • 6. Re: Duplicate Canvas
                    sagisid Level 1

                    hi...

                     

                    i tried your example...but the same problem persists.

                    the event listener is not getting added to the button.

                    rest all the things are working fine...