{"id":13745149,"url":"https://github.com/ederlima/TreeView","last_synced_at":"2025-05-09T04:34:13.310Z","repository":{"id":4099600,"uuid":"5208173","full_name":"ederlima/TreeView","owner":"ederlima","description":"An ActionScript 3 custom TreeView","archived":false,"fork":false,"pushed_at":"2013-03-07T19:54:19.000Z","size":1068,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-15T17:40:52.246Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"ActionScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ederlima.png","metadata":{"files":{"readme":"README.html","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-07-27T18:49:01.000Z","updated_at":"2014-09-24T14:01:18.000Z","dependencies_parsed_at":"2022-09-17T16:21:26.725Z","dependency_job_id":null,"html_url":"https://github.com/ederlima/TreeView","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ederlima%2FTreeView","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ederlima%2FTreeView/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ederlima%2FTreeView/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ederlima%2FTreeView/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ederlima","download_url":"https://codeload.github.com/ederlima/TreeView/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253192549,"owners_count":21868972,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T05:01:23.495Z","updated_at":"2025-05-09T04:34:12.906Z","avatar_url":"https://github.com/ederlima.png","language":"ActionScript","readme":"\u003ch1\u003eTreeView \u003c/h1\u003e\n\u003cp\u003eA Classe TreeView, primeira parte do pacote \u003cstrong\u003ebr.ederlima.ui\u003c/strong\u003e tem como funcao criar uma TreeView atraves de um XML devidamente configurado e gerenciar eventos e estilos visuais para cada item da TreeView. \u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eA Classe permite personalizar:\u003c/strong\u003e\n\u003cul\u003e\n  \u003cli\u003eLargura\u003c/li\u003e\n  \u003cli\u003eAltura\u003c/li\u003e\n  \u003cli\u003eEstilos para Itens (cor de fundo, formato do texto, cor de foco)\u003c/li\u003e\n  \u003cli\u003eEstilos para os Itens do tipo Folder (pastas)\u003c/li\u003e\n  \u003cli\u003eEventos para over, out e click tanto para Itens quanto para Itens do tipo Folder\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2\u003eComo Utilizar: \u003c/h2\u003e\n\u003ch3\u003e\u003cstrong\u003eFormato do XML\u003c/strong\u003e\u003c/h3\u003e\n\u003cblockquote\u003e\n  \u003c/p\u003e\n  \u003cp\u003e\u0026lt;data\u0026gt;\u003cbr /\u003e\n    \u0026lt;item name=\u0026quot;Rotulo para o Item\u0026quot; id=\u0026quot;identificador unico\u0026quot; primaryValue=\u0026quot;valor primario\u0026quot; secondaryValue=\u0026quot;valor secundario\u0026quot;\u0026gt;\u003cbr /\u003e\n    \u0026lt;/item\u0026gt;\u003cbr /\u003e\n    \u0026lt;/data\u0026gt; \n\u003c/blockquote\u003e\n\u003c/p\u003e\n\u003cp\u003eVarios itens podem ser aninhados \u0026lt;item\u0026gt;\u0026lt;item\u0026gt;\u0026lt;/item\u0026gt;\u0026lt;/item\u0026gt; transformando automaticamente Itens em Itens Folder, infinitamente.\n\u003ch3\u003e\u003cstrong\u003eInstanciado a Classe TreeView\u003c/strong\u003e\u003c/h3\u003e\n\u003ch4\u003e\u003cstrong\u003ePrimeiros passos:\u003c/strong\u003e\u003c/h4\u003e\n\u003col\u003e\n  \u003cli\u003eCertifique-se do pacote br.ederlima.ui estar configurado no ClassPath do Flash ou que a pasta \u0026quot;com\u0026quot; esteja no mesmo diretorio que o Fla do arquivo;\u003c/li\u003e\n  \u003cli\u003eArraste um componente \u0026quot;ScrollPane\u0026quot; para a biblioteca do Flash (nao e necessario sua presencao no palco, ele e utilizado pela TreeView para criar a rolagem para os itens)\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch4\u003eImportando e Instanciando a Classe, importando as Classes de Eventos e iniciando uma TreeView padrao:\u003c/h4\u003e\nNeste exemplo estamos criando uma TreeView onde o clique sobre o Item dispara um \u0026quot;trace\u0026quot; na tela informando os dois valores (primaryValue e secondaryValue)\u003cbr /\u003e\n\u003cblockquote\u003e\n  \u003c/p\u003e\n  \u003cp\u003eimportando as Classes TreeView e TreeItemEvent\u003cbr /\u003e\n    import br.ederlima.ui.TreeView;\u003cbr /\u003e\n    import br.ederlima.ui.events.TreeItemEvent; \u003c/p\u003e\n  \u003cp\u003eCriando o objeto XML que serve de dataProvider para a TreeView\u003cbr /\u003e\n    var dataProvider:XML = \u003cbr /\u003e\n    \u0026lt;data\u0026gt;\u003cbr /\u003e\n    \u0026lt;item name=\u0026quot;Rotulo para o Item\u0026quot; id=\u0026quot;identificador unico\u0026quot; primaryValue=\u0026quot;valor primario\u0026quot; secondaryValue=\u0026quot;valor secundario\u0026quot;\u0026gt;\u003cbr /\u003e\n    \u0026lt;/item\u0026gt;\u003cbr /\u003e\n    \u0026lt;/data\u0026gt;; \u003c/p\u003e\n  \u003cp\u003ecriando a instancia da Treeview\u003cbr /\u003e\n    var myTree:TreeView = new TreeView();\u003cbr /\u003e\n    informando o XML como dataProvider \u003cbr /\u003e\n    myTree.dataProvider = dataProvider;\u003cbr /\u003e\n    Adicionando um ouvinte para responder ao click sobre cada item \u003cbr /\u003e\n    myTree.addEventListener(TreeItemEvent.CLICK, itemClickHandler);\u003cbr /\u003e\n    iniciando a treeview adicionando-a ao palco \u003cbr /\u003e\n    addChild(myTree); \u003c/p\u003e\n  \u003cp\u003efuncao que responde ao click sobre o item\u003cbr /\u003e\n    function itemClickHandler(event:TreeItemEvent):void\u003cbr /\u003e\n    {\u003cbr /\u003e\n    trace(event.currentItem.primaryValue, event.currentItem.secondaryValue); \u003cbr /\u003e\n    } \n\u003c/blockquote\u003e\n\u003ch1\u003ePersonalizando a TreeView\u003c/h1\u003e\n\u003c/p\u003e\n\u003cp\u003ePara personalizar a visualizacao da TreeView e seus itens, utilize as propriedades:\n\u003cul\u003e\n  \u003cli\u003elistStyle (Objeto ListItemStyle) - Para personalizar os itens clicaveis\u003c/li\u003e\n  \u003cli\u003efolderStyle (Objeto FolderItemStyle) - Para personalizar os itens do tipo Folder\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eO que posso personalizar?\u003c/strong\u003e \u003c/p\u003e\n\u003cp\u003eO componente TreeView permite personalizar:\n\u003cul\u003e\n  \u003cli\u003eFonte (Familia, estilo, cor, tamanho, etc) - Usando um objeto do tipo TextFormat\u003c/li\u003e\n  \u003cli\u003eCor de fundo - Modifica a cor de fundo do item visualizado, usando cores hexadecimais, ex: \u0026quot;EAEAEA\u0026quot;\u003c/li\u003e\n  \u003cli\u003eCor de foco - Modifica a cor de fundo do item visualizado, quando selecionado.\u003c/li\u003e\n  \u003cli\u003eicones (icone unico para item e dois icones para folder, diferenciando os estados aberto e fechado)\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eComo personalizar?\u003c/strong\u003e \u003c/p\u003e\n\u003cp\u003eCrie os objetos ListItemStyle e FolderItemStyle e anexe-os as propriedades da TreeView, desta forma:\n\u003cblockquote\u003e\n  \u003c/p\u003e\n  \u003cp\u003eimportando as Classes TreeView, TreeItemEvent, TreeViewEvent, \u003cstrong\u003eListItemStyle\u003c/strong\u003e e \u003cstrong\u003eFolderItemStyle\u003c/strong\u003e\u003cbr /\u003e\n    import br.ederlima.ui.TreeView;\u003cbr /\u003e\n    import br.ederlima.ui.TreeItemEvent;\u003cbr /\u003e\n    import br.ederlima.ui.TreeViewEvent;\u003cbr /\u003e\n    import br.ederlima.ui.styles.ListItemStyle;\u003cbr /\u003e\n    import br.ederlima.ui.styles.FolderItemStyle; \u003c/p\u003e\n  \u003cp\u003e Criando o objeto XML que serve de dataProvider para a TreeView\u003cbr /\u003e\n    var dataProvider:XML = \u003cbr /\u003e\n    \u0026lt;data\u0026gt;\u003cbr /\u003e\n    \u0026lt;item name=\u0026quot;Rotulo para o Item\u0026quot; id=\u0026quot;identificador unico\u0026quot; primaryValue=\u0026quot;valor primario\u0026quot; secondaryValue=\u0026quot;valor secundario\u0026quot;\u0026gt;\u003cbr /\u003e\n    \u0026lt;/item\u0026gt;\u003cbr /\u003e\n    \u0026lt;/data\u0026gt;; \u003c/p\u003e\n  \u003cp\u003ecriando a instancia da Treeview\u003cbr /\u003e\n    var myTree:TreeView = new TreeView();\u003cbr /\u003e\n    informando o XML como dataProvider \u003cbr /\u003e\n    myTree.dataProvider = dataProvider;\u003cbr /\u003e\n    personalizando a visualizacao de um item usando a Classe ListItemStyle\u003cbr /\u003e\n    \u003cbr /\u003e\n    Para personalizar os icones dos itens, utilize uma instancia de um MovieClip\u003cbr /\u003e\n    na biblioteca, no palco ou uma Classe propria que desejar\u003cbr /\u003e\n    (No exemplo, anexo um movieclip da bibliteca com o linkage \u0026quot;IconItem\u0026quot;)\u003cbr /\u003e\n    \u003cbr /\u003e\n    myTree.itemStyle  = new ListItemStyle(new TextFormat(\u0026quot;Arial\u0026quot;, \u0026quot;11\u0026quot;, 0x666666), \u0026quot;EAEAEA\u0026quot;, \u0026quot;E4E4E4\u0026quot;, new IconItem()); \u003cbr /\u003e\n    personalizando a visualizacao de um item do tipo Folder usando a Classe FolderItemStyle \u003cbr /\u003e\n    \u003cbr /\u003e\n    Repare que o objeto FolderItemStyle possui opcao de dois icones \u003cbr /\u003e\n    para personalizar a ilustracao de pastas abertas e fechadas\u003cbr /\u003e\n    \u003cbr /\u003e\n    myTree.folderStyle = new\n    FolderItemStyle(new TextFormat(\u0026quot;Arial\u0026quot;, \u0026quot;11\u0026quot;, 0x000000, \u0026quot;FFCC00\u0026quot;, \u0026quot;FFCC99\u0026quot;, new IconFolderClosed(), new IconFolderOpen()));\u003cbr /\u003e\n    Adicionando um ouvinte para responder ao click sobre cada item \u003cbr /\u003e\n    myTree.addEventListener(TreeItemEvent.CLICK, itemClickHandler);\u003cbr /\u003e\n    iniciando a treeview adicionando-a ao palco \u003cbr /\u003e\n    addChild(myTree); \u003c/p\u003e\n  \u003cp\u003efuncao que responde ao click sobre o item\u003cbr /\u003e\n    function itemClickHandler(event:TreeItemEvent):void\u003cbr /\u003e\n    {\u003cbr /\u003e\n    trace(event.currentItem.primaryValue, event.currentItem.secondaryValue); \u003cbr /\u003e\n    } \n\u003c/blockquote\u003e\n\u003c/p\u003e\n\u003cp\u003eA documentacao oferece a descricao das propriedades de cada item da Classe TreeView, oferecendo a possibilidade de um maior aproveitamento da Classe, consulte. \u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eDados do Autor\u003c/strong\u003e\u003cbr /\u003e\n  Eder Lima\u003cbr /\u003e\n  Front-end Developer \u003cbr /\u003e\n  http:www.ederlima.com.br\u003cbr /\u003e\n  eder@ederlima.com.br \u003c/p\u003e\n","funding_links":[],"categories":["Unsorted"],"sub_categories":["Other API"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Federlima%2FTreeView","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Federlima%2FTreeView","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Federlima%2FTreeView/lists"}