|
Vamos ver como criar tabs dinamicamente com o componente TabNavigator.
Primeiro temos nosso código MXML:
<mx:Panel title="Adicione novas abas" width="400" height="500" layout="absolute">
<mx:VBox x="20" y="20" width="90%" height="100%">
<mx:TabNavigator x="10" y="10" id="tbMain" width="300" height="400" />
<mx:HBox>
<mx:TextInput id="tName" text="Digite um Label para a aba" click="{tName.text = '}"/>
<mx:Button id="addAbas" label="Add new tab" />
</mx:HBox>
</mx:VBox>
</mx:Panel>
Em seguida temos criamos um componenete extendido de Canvas ou de qualquer contaner que sirva para usar em TabNavigator. Eu estou implementando com Canvas.
componentes.tabs
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas label="" xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.core.Application;
private function init():void
{
this.label = Application.application.tName.text;
}
]]>
</mx:Script>
<mx:Text text="Nova aba!" />
</mx:Canvas>
Agora vamos ao script da tala da Applicação inicial:
<mx:Script>
<![CDATA[
import componentes.tabs;
private var tabObject:tabs;
private function init():void
{
addAbas.addEventListener(MouseEvent.CLICK,HandlerAddNewTab);
}
private function HandlerAddNewTab(event:MouseEvent):void
{
tabObject = new tabs();
tbMain.addChild(new tabs());
tbMain.selectedIndex = (tbMain.getChildren().length - 1);
}
]]>
</mx:Script>
Bom, o resultado da o exemplo abaixo:
E pode ser visto separadamente em: AddTabs
|
