UI Componente: due classi - una richiama l'altra non lo fa (Flex / AS)

Question

Sto lavorando con un progetto flessibile con un file MXML principale e due classi ActionScript che disegnano la grafica. Dalla lettura tonnellate di articoli e post ho scoperto che essi devono estendersi UIComponent, che lo fanno. La prima classe ActionScript disegna la bella immagine. La prima classe rende poi la chiamata a creare un nuovo oggetto. Il secondo oggetto non viene visualizzata. Nella versione di ActionScript pura ho dovuto passare alla fase come riferimento per la seconda classe per disegnare.

Ho anche trovato una domanda simile qui a StackOverflow: UIComponent classe estesa non mostra UIComponent esteso classe . Ma non ero sicuro di come applicarla al mio esempio.

Il che, se i metodi UIComponent devono essere overrided per il secondo oggetto di visualizzazione? Come specificamente non li ho implementare in questo esempio?

Se c'è una risposta migliore o più semplice a questo problema, che è anche apprezzato. Questo è un esempio semplificato di un problema che sto avendo con un progetto più complesso.

// First class "Ball" draws a circle successfully then creates a second object "MyRect" 

        package dr {
        import flash.display.*;
        import flash.display.Sprite;

        import mx.core.*;

        public class Ball extends UIComponent {
            public function Ball()
            {
                var vCircle:Sprite = new Sprite();
                vCircle.graphics.beginFill(0xff0000);
                vCircle.graphics.drawCircle(100, 150, 40);
                vCircle.graphics.endFill();
                addChild(vCircle);

                var rect:MyRect = new MyRect();
            }   
        }
    }



    // Second class "MyRect" (does not display)

    package dr {
    import flash.display.*;
    import flash.display.Sprite;
    import flash.events.*;
    import flash.geom.*;

    import mx.core.*;

    public class MyRect extends UIComponent
    {
        public function MyRect()
        {   

            var vRect:Sprite = new Sprite();
            vRect.graphics.beginFill(0x0000ff, 1);
            vRect.graphics.drawRect(300, 150, 150, 75);
            addChild(vRect);

            //var ui:UIComponent = new UIComponent();
            //addChild(ui);
            //ui.addChild(vRect);
            //UpdateDisplayList();  
        }

    }   
}

    //Here is the MXML main file:

    <?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:dr="dr.*"
                   minWidth="955" minHeight="600">
        <fx:Declarations>
            <!-- Place non-visual elements (e.g., services, value objects) here -->
        </fx:Declarations>
        <mx:Panel id="myPanel" width="700" height="600" paddingLeft="10" paddingTop="10">   
                <dr:Ball></dr:Ball>
        </mx:Panel>
    </s:Application>

Answer 1

Nella classe sfera, si crea un'istanza di una nuova classe myRect; tuttavia, non si aggiungi alla fase:

var rect:MyRect = new MyRect();
addChild(rect);

Answer 2

Il vRect.graphics.endFill(); manca.