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

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.