Gostaria de um componente que fosse igual o editor do eclipse por exemplo, que ao clicar em um button abra em abas as telas, e tenha nas abas a opção de fechar, "seus problemas acabaram"
chegou o AdvanceTabNavigator, um componente que tem essa funcionalidade, e o melhor é moleza usar, iremos mostrar como funciona e dar algumas idéias de onde usar.
primeiro baixe o componente aqui.
Ao baixar e descompactar esse arquivo, encontraremos uma pasta src, ao contrário de muitos não temos o .swc, somente o código fonte, ideal para colocar na nossa library, se você não trabalha com library pode colocar direto no seu projeto, é o que vamos fazer para exemplificar o entendimento somente do componente. Mais se tem interesse de saber como fazer uma library em flex acesse esse post.
vamos ao nosso exemplo, crie um novo projeto flex, com o nome que desejar, copie a pasta sjd dentro do src que foi descompactado e cole no src do nosso projeto.
Pronto depois já podemos usar o nosso componente, além desse tem outros componentes neste pacote que fizemos o download, mais hoje vamos falar somente deste. Vamos ao nosso código Fonte.
na aplicação principal
-
<?xml version="1.0" encoding="utf-8"?>
-
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
-
layout="absolute" xmlns:ns1="sjd.containers.*">
-
-
<ns1:AdvanceTabNavigator id="tab" x="10" y="10"
-
width="371" height="204" tabCloseEnable="true"/>
-
-
<mx:Button x="122.5" y="222" label="Adicionar Canvas"
-
id="btnAdicionar" click="{adicionar();}"/>
-
-
<mx:Script>
-
<![CDATA[
-
import mx.containers.Canvas;
-
-
private function adicionar():void{
-
-
var canvas:Canvas = new Canvas();
-
-
canvas.label = "Teste de Tab ";
-
-
tab.addChild(canvas);
-
-
}
-
-
]]>
-
</mx:Script>
-
-
</mx:Application>
somente com essa codificação já podemos usar o AdvanceTabNavigator, destacando apenas o atributo "tabCloseEnable=true" sem isso não temos o botão de fechar.
Eu usei este componente em um módulo de administração de um site, sendo assim se o usuário está cadastrando um produto, por exemplo, normalmente ele vai abrir vários cadastro como tipo de produto, modelo... , usando o AdvanceTabNavigator há esta mobilidade, assim deixando usuário com mais agilidade e mais familiarizado, já que os navegadores de internet já funciona assim.
Bem, um exemplo legal que usa também um tab neste estilo é esse que já citei neste post
Link de Referência
http://www.flex-flex.net/blog/article.asp?id=4
bom estudos a até a próx.
Popularity: 7% [?]
Tags: AdvanceTabNavigator, Tab Avançado, Tab Avançado flex, Tab Navigator Advance flex
Categoria(s):Adobe Flex, Componentes











