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" icon smile TabNavigator Avançado em flex (AdvanceTabNavigator) 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. layout="absolute" xmlns:ns1="sjd.containers.*"&gt;
  3.  
  4. width="371" height="204" tabCloseEnable="true"/&gt;
  5.  
  6. id="btnAdicionar" click="{adicionar();}"/&gt;
  7. <![CDATA[
  8. import mx.containers.Canvas;
  9.  
  10. private function adicionar():void{
  11.  
  12. var canvas:Canvas = new Canvas();
  13.  
  14. canvas.label = "Teste de Tab   ";
  15.  
  16. tab.addChild(canvas);
  17.  
  18. }
  19.  
  20. ]]>
  21.  
  22. &nbsp;

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. icon wink TabNavigator Avançado em flex (AdvanceTabNavigator)

{lang: 'pt-BR'}

You can leave a response, or trackback from your own site.
Subscribe to RSS Feed Follow me on Twitter!