Controlando o ViewStack por um MenuBar

Bha, depois de um bom tempo sem postar aqui, vamos a mais uma. Esta semana andei notando as dúvidas entre Menubar e ViewStack.

[Bindable]
private var menubarXML:XMLList =
    <>
        <menuitem label="Paisagem" >
            <menuitem label="Abrir Paisagem 1"  data="0" />
            <menuitem label="Abrir Paisagem 2"  data="1" />
            <menuitem label="Abrir Paisagem 3"  data="2" />
        </menuitem>
        <menuitem label="Animais" >
            <menuitem label="Abrir Animais 1"  data="3" />
            <menuitem label="Abrir Animais 2"  data="4" />
            <menuitem label="Abrir Animais 3"  data="5" />
        </menuitem>
    </>;

// Controla o evento de clic do menu principal
private function menuPrincipalClicado(e:MenuEvent):void
{
    viewstack1.selectedIndex = Number(e.item.@data);
}

Acima temos o XML que montará o Menubar, e este ao receber o evento de Click chamará a função menuPrincipalClicado.  Este por sua vês é responsável por selecionar o ViewStack.

<mx:ApplicationControlBar width="100%" dock="true">
    <mx:HBox width="100%">
        <mx:MenuBar labelField="@label" itemClick="menuPrincipalClicado(event);"
                    dataProvider="{menubarXML}"/>
    </mx:HBox>
</mx:ApplicationControlBar>  

<mx:Canvas width="100%" height="100%">
    <mx:ViewStack id="viewstack1" left="10" right="10" top="10" bottom="10">
        <mx:Box width="100%" height="100%">
            <Telas:Paisagem1 width="100%" height="100%"/>
        </mx:Box>
        <mx:Box width="100%" height="100%">
            <Telas:Paisagem2 width="100%" height="100%"/>
        </mx:Box>
        <mx:Box width="100%" height="100%">
            <Telas:Paisagem3 width="100%" height="100%"/>
        </mx:Box>
        <mx:Box width="100%" height="100%">
            <Telas:Animais1 width="100%" height="100%"/>
        </mx:Box>
        <mx:Box width="100%" height="100%">
            <Telas:Animais2 width="100%" height="100%"/>
        </mx:Box>
        <mx:Box width="100%" height="100%">
            <Telas:Animais3 width="100%" height="100%"/>
        </mx:Box>
    </mx:ViewStack>
</mx:Canvas>

Bom, então agora divirtam-se com o fonte.