Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ederlima/TreeView

An ActionScript 3 custom TreeView
https://github.com/ederlima/TreeView

Last synced: 3 months ago
JSON representation

An ActionScript 3 custom TreeView

Awesome Lists containing this project

README 

        
TreeView 


A Classe TreeView, primeira parte do pacote br.ederlima.ui tem como funcao criar uma TreeView atraves de um XML devidamente configurado e gerenciar eventos e estilos visuais para cada item da TreeView. 


A Classe permite personalizar:

    

      
  • Largura
    • 

      
  • Altura
    • 

      
  • Estilos para Itens (cor de fundo, formato do texto, cor de foco)
    • 

      
  • Estilos para os Itens do tipo Folder (pastas)
    • 

      
  • Eventos para over, out e click tanto para Itens quanto para Itens do tipo Folder
    • 



Como Utilizar: 


Formato do XML




  

  
<data>


    <item name="Rotulo para o Item" id="identificador unico" primaryValue="valor primario" secondaryValue="valor secundario">


    </item>


    </data> 






Varios itens podem ser aninhados <item><item></item></item> transformando automaticamente Itens em Itens Folder, infinitamente.

Instanciado a Classe TreeView


Primeiros passos:


    

      
  1. Certifique-se do pacote br.ederlima.ui estar configurado no ClassPath do Flash ou que a pasta "com" esteja no mesmo diretorio que o Fla do arquivo;
    2. 

      
  2. Arraste um componente "ScrollPane" para a biblioteca do Flash (nao e necessario sua presencao no palco, ele e utilizado pela TreeView para criar a rolagem para os itens)
    3. 



Importando e Instanciando a Classe, importando as Classes de Eventos e iniciando uma TreeView padrao:


Neste exemplo estamos criando uma TreeView onde o clique sobre o Item dispara um "trace" na tela informando os dois valores (primaryValue e secondaryValue)




  

  
importando as Classes TreeView e TreeItemEvent


    import br.ederlima.ui.TreeView;


    import br.ederlima.ui.events.TreeItemEvent; 


  
Criando o objeto XML que serve de dataProvider para a TreeView


    var dataProvider:XML = 


    <data>


    <item name="Rotulo para o Item" id="identificador unico" primaryValue="valor primario" secondaryValue="valor secundario">


    </item>


    </data>; 


  
criando a instancia da Treeview


    var myTree:TreeView = new TreeView();


    informando o XML como dataProvider 


    myTree.dataProvider = dataProvider;


    Adicionando um ouvinte para responder ao click sobre cada item 


    myTree.addEventListener(TreeItemEvent.CLICK, itemClickHandler);


    iniciando a treeview adicionando-a ao palco 


    addChild(myTree); 


  
funcao que responde ao click sobre o item


    function itemClickHandler(event:TreeItemEvent):void


    {


    trace(event.currentItem.primaryValue, event.currentItem.secondaryValue); 


    } 





Personalizando a TreeView



Para personalizar a visualizacao da TreeView e seus itens, utilize as propriedades:

    

      
  • listStyle (Objeto ListItemStyle) - Para personalizar os itens clicaveis
    • 

      
  • folderStyle (Objeto FolderItemStyle) - Para personalizar os itens do tipo Folder
    • 




O que posso personalizar? 


O componente TreeView permite personalizar:

    

      
  • Fonte (Familia, estilo, cor, tamanho, etc) - Usando um objeto do tipo TextFormat
    • 

      
  • Cor de fundo - Modifica a cor de fundo do item visualizado, usando cores hexadecimais, ex: "EAEAEA"
    • 

      
  • Cor de foco - Modifica a cor de fundo do item visualizado, quando selecionado.
    • 

      
  • icones (icone unico para item e dois icones para folder, diferenciando os estados aberto e fechado)
    • 




Como personalizar? 


Crie os objetos ListItemStyle e FolderItemStyle e anexe-os as propriedades da TreeView, desta forma:



  

  
importando as Classes TreeView, TreeItemEvent, TreeViewEvent, ListItemStyle e FolderItemStyle


    import br.ederlima.ui.TreeView;


    import br.ederlima.ui.TreeItemEvent;


    import br.ederlima.ui.TreeViewEvent;


    import br.ederlima.ui.styles.ListItemStyle;


    import br.ederlima.ui.styles.FolderItemStyle; 


  
 Criando o objeto XML que serve de dataProvider para a TreeView


    var dataProvider:XML = 


    <data>


    <item name="Rotulo para o Item" id="identificador unico" primaryValue="valor primario" secondaryValue="valor secundario">


    </item>


    </data>; 


  
criando a instancia da Treeview


    var myTree:TreeView = new TreeView();


    informando o XML como dataProvider 


    myTree.dataProvider = dataProvider;


    personalizando a visualizacao de um item usando a Classe ListItemStyle


    


    Para personalizar os icones dos itens, utilize uma instancia de um MovieClip


    na biblioteca, no palco ou uma Classe propria que desejar


    (No exemplo, anexo um movieclip da bibliteca com o linkage "IconItem")


    


    myTree.itemStyle  = new ListItemStyle(new TextFormat("Arial", "11", 0x666666), "EAEAEA", "E4E4E4", new IconItem()); 


    personalizando a visualizacao de um item do tipo Folder usando a Classe FolderItemStyle 


    


    Repare que o objeto FolderItemStyle possui opcao de dois icones 


    para personalizar a ilustracao de pastas abertas e fechadas


    


    myTree.folderStyle = new

    FolderItemStyle(new TextFormat("Arial", "11", 0x000000, "FFCC00", "FFCC99", new IconFolderClosed(), new IconFolderOpen()));


    Adicionando um ouvinte para responder ao click sobre cada item 


    myTree.addEventListener(TreeItemEvent.CLICK, itemClickHandler);


    iniciando a treeview adicionando-a ao palco 


    addChild(myTree); 


  
funcao que responde ao click sobre o item


    function itemClickHandler(event:TreeItemEvent):void


    {


    trace(event.currentItem.primaryValue, event.currentItem.secondaryValue); 


    } 






A documentacao oferece a descricao das propriedades de cada item da Classe TreeView, oferecendo a possibilidade de um maior aproveitamento da Classe, consulte. 


Dados do Autor


  Eder Lima


  Front-end Developer 


  http:www.ederlima.com.br


  [email protected]