Why does putting these objects into the MXML break this function?

Question

I've got two classes, VideoPod and RemotePod, RemotePod inheriting from VideoPod. Without showing all the code in these classes, basicall here's part of VideoPod:

        public function showPanel():void {
            if (!pnl.visible) {
                pnl.visible = true;
                pnl.addElement(removeElement(vg));
            }
        }
                .
                .
                .
<s:Panel id="pnl" width="100%" height="100%" fontWeight="normal" visible="false" />
<s:VGroup id="vg" left="0" resize="onResize()" right="0" top="0" bottom="0">

and here's part of RemotePod:

        private function onCreationComplete():void {
            m_tmrHeartbeat.addEventListener(TimerEvent.TIMER, checkPulse);

            var arrBtns:Array = new Array(4);
            for (var i:int = 0; i < arrBtns.length; i++) {
                arrBtns[i] = new Button();
                arrBtns[i].width = 28;
                arrBtns[i].height = 25;
                arrBtns[i].top = 10;//-28;
            }

            arrBtns[0].right = 10;
            arrBtns[0].setStyle("icon", Images.PATH + "view-fullscreen-3.png");
            arrBtns[0].addEventListener(MouseEvent.CLICK, maximize);
                .
                .
                .
            for each (var btn:Button in arrBtns) {
                addElement(btn);
            }

            m_lblSize.right = 154;
            m_lblSize.top = 18;//-20;
            m_lblSize.text = FULLSCREEN;
            addElement(m_lblSize);

where onCreationComplete() is called for the creationComplete event in RemotePod. A few minutes ago, I tried moving the buttons and label in RemotePod into the actual MXML, but that broke the showPanel() function. The error it was raising had basically the following message: "vg is not found in this Group." (VideoPod inherits from s:Group.)

I don't understand. I also started testing to see what the width of vg was at runtime, and it apparently just stayed at 0. What's the obscure language feature that's causing this? Thanks!

Answer 1

MXML classes don't inherit their parents' MXML sub-components. You should create the Panel and the VGroup with pure AS3 in your class constructor (if .as) or in an initialize listener (if .mxml).

protected var pnl:Panel;
protected var vg:VGroup;

private function onInitialize():void
{
    pnl = new Panel();
    //set pnl properties such as width, height...
    addComponent(pnl);

    vg = new VGRoup();
    //set vg properties such as width, height...
    addComponent(vg);
}

Another solution would be to use a skin for your base class.