3 Replies Latest reply on Aug 7, 2011 11:07 PM by Flex harUI

    Adding child components to SkinnableContainer vs Group

    numisalati

      I've a custom component where I do some graphics (e.g draw a line) and dynamically add a subcomponent (e.g a label) to it.

       

      If I base the custom component off Group then when I dynamically add a label, the graphics part disappears.

       

      However if I base it off SkinnableContainer then things are fine.

       

      I am trying to understand why that is the case. What is graphic element part disappreaing on the Group but not the SkinnableContainer when I add a label?

       

       

      Here is the sample code:

       

      MyComponent.as

      public class MyComponent extends Group //change to SkinnableContainer 
         
      {
             
      public var x1:int;
             
      public var y1:int;

             
      public function MyComponent()
             
      {
                  super
      ();

                  addEventListener
      (MouseEvent.MOUSE_DOWN, function(event:MouseEvent):void {
                      x1
      = mouseX;
                      y1
      = mouseY;
                 
      });

                  addEventListener
      (MouseEvent.MOUSE_MOVE, function(event:MouseEvent):void {
                     
      if (event.buttonDown) {
                          graphics
      .lineStyle(3, 0x000000);
                          graphics
      .moveTo(x1, y1)
                          graphics
      .lineTo(mouseX, mouseY);
                          x1
      = mouseX;
                          y1
      = mouseY;
                     
      }
                 
      });
             
      }

             
      public function addLabel():void
             
      {
                 
      var label:Label = new Label();
                  label
      .x = 100;
                  label
      .y = 100;
                  label
      .text = "new label ";
                  addElement
      (label); 
             
      }
         
      }

       

      Main.xml

      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                     xmlns
      :s="library://ns.adobe.com/flex/spark"
                     xmlns
      :mx="library://ns.adobe.com/flex/mx"
                     xmlns
      :local="*">

         
      <s:Panel width="50%" height="50%" verticalCenter="0" horizontalCenter="0" title="Sample app">

             
      <MyComponent id="drawingArea" xmlns="*" width="100%" height="100%" />

             
      <s:controlBarContent>
                 
      <s:Button label="Add label" click="drawingArea.addLabel()"/>
             
      </s:controlBarContent>
          </
      s:Panel>
      </s:Application>