Microsoft Visual Basic
Este curso fornece aos alunos conceitos sobre o funcionamento de todo o ambiente Windows e como desenvolver soluções para o ambiente Windows. Com este curso o aluno será capaz de analisar um problema e decidir qual seria a melhor solução de acordo com o ambiente do cliente.
Valor : R$ 246,00 ou 5 X de R$ 52,00

Faça o download do código fonte
Quer saber mais?
Torne-se um MCP em Visual Basic
Faça um treinamento na Búfalo Informática




Utilizando o TreeView

Muitas vezes podemos desejar exibir determinada informação de forma hierarquica, demonstrando níveis e subníveis de hierarquia.

A melhor forma de realizar isso é utilizando o componente ActiveX conhecido como Tree View. O componente Tree View gera um efeito semelhante ao lado esquerdo do Windows Explorer, que demonstra uma hierarquia de pastas e subpastas.

O componente Tree View encontra-se dentro da biblioteca de componentes conhecida como Microsoft Windows Commom Controls 6.0. Como vocês já sabem, para que ele seja inserido na toolbox basta ir em project->components e marcar esta biblioteca.

Dentro do componente Tree View são guardados diversos objetos NODE. Um objeto NODE é um item do tree view, este item pode ou não conter sub-itens. Todos os objetos NODE do Tree View são guardados dentro de uma coleção NODE, que é exposta na forma de uma propriedade do componente. Assim sendo, através da coleção NODE realizamos o acesso a qualquer item do tree view.

É através da coleção NODE que iremos realizar a inclusão de um item no Tree View. Como toda coleção, ela possui um método ADD, que usaremos. O método ADD da coleção NODE possui os seguintes parâmetros :

Relative : A adição de um nó pode ser feita em uma posição relativa a partir de um nó já existente. Por exemplo : Você irá querer adicionar um nó dentro de outro, já que o objetivo do Tree View é justamente esse. Quando estiver fazendo isso, este parâmetro conterá a identificação do nó já existente.
Relashionship : Este parâmetro identifica qual a relação entre o nó que está sendo adicionado e o nó já existente. Existem 5 opções :

tvwFirst : O novo nó deverá ser incluido como o 1o nó no nível em que está o nó indicado em Relative
tvwLast : O novo nó deverá ser incluido como o último nó no nível em que está o nó indicado em Relative
tvwPrevious : O novo nó deverá ser incluido na posição imediatamente anterior a posição do nó indicado em Relative
tvwNext : O novo nó deverá ser incluido na posição imediatamente posterior a posição do nó indicado em Relative
tvwChild : O novo nó deverá ser incluido como Child, ou seja, como um sub-nó, do nó indicado em Relative


Key : É uma palavra chave, uma espécie de código, que identifica o nó de forma única. A key é opcional, mas pode ajudar bastante na hora de localizar uma determinada informação dentro da Tree View.
Text : O texto em si do nó
Image : A imagem que deverá ser utilizada para representar o nó
Selected Image : A imagem que deverá ser utilizada para representar o nó quando este estiver selecionado.

Vejamos, enfim, um pequeno exemplo da adição de nós :

TreeView1.Nodes.Add , , "Rio", "Rio"
TreeView1.Nodes.Add , , "São Paulo", "São Paulo"
TreeView1.Nodes.Add , , "Espirito Santo", "Espirito Santo"

Com estas 3 instruções teremos adicionado nós referentes a 3 estados. Digamos que sejam as filiais de uma determinada empresa em 3 diferentes estados.

Vamos agora adicionar, para cada uma dessas filiais, 3 departamentos : Compras, Vendas e Diretoria :

TreeView1.Nodes.Add "Rio", tvwChild, "RJCompras", "Compras"
TreeView1.Nodes.Add "Rio", tvwChild, "RJVendas", "Vendas"
TreeView1.Nodes.Add "Rio", tvwChild, "RJDiretoria", "Diretoria"

TreeView1.Nodes.Add "São Paulo", tvwChild, "SPCompras", "Compras"
TreeView1.Nodes.Add "São Paulo", tvwChild, "SPVendas", "Vendas"
TreeView1.Nodes.Add "São Paulo", tvwChild, "SPDiretoria", "Diretoria"

TreeView1.Nodes.Add "Espirito Santo", tvwChild, "ESCompras", "Compras"
TreeView1.Nodes.Add "Espirito Santo", tvwChild, "ESVendas", "Vendas"
TreeView1.Nodes.Add "Espirito Santo", tvwChild, "ESDiretoria", "Diretoria"

Observe que no item Relative foi possível especificar a Key fornecida para os primeiros itens. Se não tivessemos incluido uma KEY teríamos que nos referir ao nó por sua posiçao numérica.

É interessante observar também que na KEY dos departamentos não colocamos o nome dos departamentos e nem poderíamos : O nome dos departamentos se repetem para cada estado. Então tivemos que adicionar a sigla do estado para tornar a KEY única. Você pode montar a KEY da forma que desejar, mas se conseguir montar um padrão de formação isso ajudará o desenvolvimento posteriormente.

Essas instruções de criação de nós devem ser inseridas no form_load da aplicação. Claro, você deve também inserir no form uma Tree View.

Ao executar essa aplicação você verá o nome das cidades. Ao utilizar um duplo clique sobre os nomes das cidades poderá ver o nome do departamentos. Você certamente irá sentir falta de sinais de + ao lado do nome da cidade que permitissem expandir os departamentos existentes em cada cidade. Esse sinal só aparece se configurarmos a propriedade LineStyle para 1 - Root lines.

Podemos agora definir imagens para os nós da Tree View. Podemos utilizar uma imagem para quando o nó estiver selecionado e uma imagem para quando não. Para os nós principais as melhores imagens são uma pasta aberta e fechada que ficam guardadas dentro do diretório Graphics/icons/w95.

Para inserirmos as imagens na Tree View precisaremos de um segundo componente ActiveX chamad ImageList. O componente ImageList é utilizado como um armazem de imagens a serem usadas pela aplicação. Ele se encontra na mesma biblioteca da Tree View, portanto você já o encontrará na ToolBox neste momento.

O ImageList possui uma página de propriedades personalizada, portanto para trabalhar com ele você deverá clicar com o botão direito do mouse sobre ele e entrar em propriedades. Configure o tamanho das imagens para 16x16 e insira as imagens. Cada imagem ganha um índice numérico que deverá ser informado no Tree View quando estivermos adicionando os nós.

Após adicionar o ImageList deveremos configurar o Tree View para utiliza-lo. Deveremos fazer isso na página de propriedades do Tree View. Clica-se com o botao direito sobre o Tree View, entra-se em propriedades e altera-se a propriedade ImageList, informando o nome do imagelist que foi adicionado.

Enfim, no código de adição dos nós deveremos informar a imagem que será utilizada. O código ficará da seguinte forma, supondo que a 1a imagem é a pasta fechada e a 2a imagem é a pasta aberta :

TreeView1.Nodes.Add , , "Rio", "Rio", 1, 2
TreeView1.Nodes.Add , , "São Paulo", "São Paulo", 1, 2
TreeView1.Nodes.Add , , "Espirito Santo", "Espirito Santo", 1, 2

O próximo passo será adicionar os funcionários na Tree View. Supondo 3 funcionários por departamento, serão ao todo 27 funcionários. Eis o código :

TreeView1.Nodes.Add "RJCompras", tvwChild, "C1", "Maria"
TreeView1.Nodes.Add "RJCompras", tvwChild, "C2", "José"
TreeView1.Nodes.Add "RJCompras", tvwChild, "C3", "Joaquim"

TreeView1.Nodes.Add "RJVendas", tvwChild, "C4", "Manuel"
TreeView1.Nodes.Add "RJVendas", tvwChild, "C5", "Josefina"
TreeView1.Nodes.Add "RJVendas", tvwChild, "C6", "Serafina"

TreeView1.Nodes.Add "RJDiretoria", tvwChild, "C7", "Pedro"
TreeView1.Nodes.Add "RJDiretoria", tvwChild, "C8", "João"
TreeView1.Nodes.Add "RJDiretoria", tvwChild, "C9", "Joaquina"

TreeView1.Nodes.Add "ESCompras", tvwChild, "C10", "Maria"
TreeView1.Nodes.Add "ESCompras", tvwChild, "C11", "José"
TreeView1.Nodes.Add "ESCompras", tvwChild, "C12", "Joaquim"

TreeView1.Nodes.Add "ESVendas", tvwChild, "C13", "Manuel"
TreeView1.Nodes.Add "ESVendas", tvwChild, "C14", "Josefina"
TreeView1.Nodes.Add "ESVendas", tvwChild, "C15", "Serafina"

TreeView1.Nodes.Add "ESDiretoria", tvwChild, "C16", "Pedro"
TreeView1.Nodes.Add "ESDiretoria", tvwChild, "C17", "João"
TreeView1.Nodes.Add "ESDiretoria", tvwChild, "C18", "Joaquina"

TreeView1.Nodes.Add "SPCompras", tvwChild, "C19", "Maria"
TreeView1.Nodes.Add "SPCompras", tvwChild, "C20", "José"
TreeView1.Nodes.Add "SPCompras", tvwChild, "C21", "Joaquim"

TreeView1.Nodes.Add "SPVendas", tvwChild, "C22", "Manuel"
TreeView1.Nodes.Add "SPVendas", tvwChild, "C23", "Josefina"
TreeView1.Nodes.Add "SPVendas", tvwChild, "C24", "Serafina"

TreeView1.Nodes.Add "SPDiretoria", tvwChild, "C25", "Pedro"
TreeView1.Nodes.Add "SPDiretoria", tvwChild, "C26", "João"
TreeView1.Nodes.Add "SPDiretoria", tvwChild, "C27", "Joaquina"

Podemos depois adicionar imagens aos funcionários e setores, mas isso vocês já viram como é feito.

Para entendermos melhor o parâmetro relashionship, vejamos um exemplo com o funcionário josé de São Paulo. Vejamos o que aconteceria com ele caso tentassemos inclui-lo com outro relashionship. Observe na instrução acima que o josé tem relação com o nó spcompras

tvwFirst : Neste caso o josé seria incluido no mesmo nível dos departamentos e seria o 1o nó deste nível

tvwLast : Com esta opção o josé seria incluido no mesmo nível dos departamentos e seria o último nó deste nível.

tvwPrevious : Com esta opção o José seria incluido no mesmo nível dos departamentos e seria o item imediatamente anterior a spcompras. Por acaso seria também o 1o item do nível de departamentos de são paulo

tvwNext : Neste caso o josé seria incluido no mesmo nível dos departamentos e seria o item imediatamente posterior a spcompras. Ficaria entre compras e vendas.

O próximo passo será identificar quando um determinado nó for clicado. Apenas para termos algo para fazer quando isso ocorrer, vamos criar um vetor de 27 posições que guardará o salário do funcionário. Quando um funcionário for clicado exibiremos em 2 labels o seu nome e o seu salário.

A declaração do vetor deve ser colocada no General do form :

Dim VetSal(27) as double

E o preenchimento do vetor no form_load

vetsal(1) = 2000
vetsal(2) = 3000
vetsal(3) = 4000
vetsal(4) = 5000
vetsal(5) = 6000
vetsal(6) = 7000
vetsal(7) = 8000
vetsal(8) = 9000
vetsal(9) = 1000
vetsal(10) = 2000
vetsal(11) = 3000
vetsal(12) = 4000
vetsal(13) = 5000
vetsal(14) = 6000
vetsal(15) = 7000
vetsal(16) = 8000
vetsal(17) = 9000
vetsal(18) = 1000
vetsal(19) = 2000
vetsal(20) = 3000
vetsal(21) = 4000
vetsal(22) = 5000
vetsal(23) = 6000
vetsal(24) = 7000
vetsal(25) = 8000
vetsal(26) = 9000
vetsal(27) = 1000
Como vocês podem observar, não gosto de começar vetores em 0. Precisamos agora adicionar 2 labels na aplicaçãoe, chamaremos eles de lblnome e lblsal.

Feito isso precisamos identificar o clique nos nós que representam funcionários da empresa. O Tree View possui um evento chamado NodeClick que é disparado sempre que um nó é clicado. É este evento que deveremos programar.

O evento NodeClick ocorre para qualquer um dos nós. Assim sendo precisaremos identificar se o nó que foi clicado é realmente o nó de um funcionário ou não. O nó que foi clicado é recebido como parâmetro dentro deste evento, iremos utiliza-lo no código. O 1o passo é identificar se existe um parent. Identificando se existe um parente poderemos fazer testes com ele.

if NODE.Parent is nothing then
exit sub
end if

Assim sendo, se não existe um parent com certeza ele não é um funcionário, e saímos da sub. A seguir podemos identificar o parent para sabermos exatamente em que nível estamos. O nó acima dos funcionário tem a identificação do estado (RJ,ES,SP). Podemos então usar essa característica para identificarmos um funcionário : se as 2 primeiras letras da key do parent forem a sigla de um dos estados então o nó atual é um funcionário.

Veja :

If InStr("RJSPES", Left(Node.Parent.Key, 2)) <> 0 Then
lblnome.Caption = Node.Text
lblsal.Caption = vetsal(CInt(Right(Node.Key, Len(Node.Key) - 1)))
End If

Funções de manipulação de string, InSTR e left, para descobrir se existe ou não a sigla do estado nos 2 primeiros caracteres na key do parent.

Observe a forma que o salário é preenchido : tivemos antes o cuidado de deixar na key de cada funcionário o seu índice. Agora só precisamos extrair o índice para localizar o salário. Para isso basta eliminar a letra C, ou seja, pegar da key, a partir da direita, tantas letras quanto for o tamanho da key - 1.

Pronto, nossa aplicação já esta funcionando e agora você já sabe utilizar o Tree View.

Dennes Torres
MCSD,MCSE,MCDBA