TabNavigator Avançado em flex (AdvanceTabNavigator)

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

CODE:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.     layout="absolute" xmlns:ns1="sjd.containers.*">
  4.  
  5.     <ns1:AdvanceTabNavigator id="tab" x="10" y="10"
  6.         width="371" height="204" tabCloseEnable="true"/>
  7.  
  8.     <mx:Button x="122.5" y="222" label="Adicionar Canvas"
  9.         id="btnAdicionar" click="{adicionar();}"/>
  10.  
  11.     <mx:Script>
  12.         <![CDATA[
  13.             import mx.containers.Canvas;
  14.  
  15.             private function adicionar():void{
  16.  
  17.                 var canvas:Canvas = new Canvas();
  18.  
  19.                 canvas.label = "Teste de Tab   ";
  20.  
  21.                 tab.addChild(canvas);
  22.  
  23.             }
  24.  
  25.         ]]>
  26.     </mx:Script>
  27.  
  28. </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

o Código Fonte está aqui !!!

Link de Referência
http://www.flex-flex.net/blog/article.asp?id=4

bom estudos a até a próx. ;)

Popularity: 7% [?]

Tags: , , ,

Categoria(s):Adobe Flex, Componentes


Outros Artigos:

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

Leave a Reply