Você está na página 1de 10

Programando com o TreeView

Parte 1
Editorial
Este tutorial foi desenvolvido bom base em uma tutorial em inglês e
completamente readaptado para um perfeito conhecimento de uma ferramenta
poderosa e pouco usada do Delphi, o TreeView, que pode facilitar o uso e
estruturação dos programas de várias formas possíveis. No decorrer desse
pequeno tutorial, tentei ser o mais claro possível nas explicações, ao mesmo
tempo em que tive que me manter fiel ao conteúdo original. O texto possui
tradução livre para facilitar o entendimento do tema abordado, não ficando restrito
simplesmente ao conteúdo apresentado, mas buscando ir além com exemplos
práticos.

Algumas partes do texto possuem indicações (N.T.: ou nota do tradutor), que


foram adicionadas por mim para complementar o conteúdo apresentado. Todos os
exemplos dos códigos apresentados foram comentados, buscando enriquecer o
conteúdo e facilitar a compreensão.

Os código propostos possuem formatação diferenciada do restante do texto para


facilitar sua identificação e entendimento. As notas de comentário nos códigos
apresentados também possuem formatação diferenciada, facilitando sua
identificação. Como no exemplo:

{ } comentários

if( TVEx1.Selected = nil ) then

begin códigos

end;

A parte 1 desse tutorial é composto por quatro partes, que são a base para
trabalharmos com o Treeview. Tentarei traduzir o restante do tutorial e continuar
publicando nesse espaço para que todos possam conhecer ou ampliar seus
conhecimentos com mais essa ferramenta. Estarei aberto a críticas e sugestões e
peço, desde já, para mandarem notas de apoio, complemento ou críticas para que
possa aperfeiçoar e continuar na construção desse material. Obrigado e sucesso a
todos.

Conteúdo desse tutorial:

1. Adicionando e Removendo Nós no TreeView


2. Colocando Imagens nos Nós

1 de 17
e-mail: msarcinelli@hotmail.com
Programando com o TreeView

3. A Propriedade TreeNode.Level
4. Prevenindo a Criação de Nós Duplicados

Adicionando e Removendo Nós no TreeView

Este é um rápido exemplo de como adicionar ou remover nós em um componente


TTreeView.

Crie um novo projeto no Delphi, insira um componente TreeView (N.T: paleta


Win32) e dois botões (N.T: paleta Standard) em um formulário. Siga as
orientações da tabela abaixo para a configuração dos botões e do treeview Uma
sugestão pode ser vista no exemplo abaixo:

Componente Caption Name


TreeView1 ---------- TVEx1
Button1 Adicionar BtnAdicionar
Button2 Remover BtnRemover

Adicionando um Nó

N.T: Para entendermos o que é um nó, vamos fazer referência ao Windows


Explorer para mostrarmos os termos que serão usados ao longo desse tutorial:
Nó Principal ou Root Node
Nó filho do Nó Principal
Nó filho de um outro nó filho

2 de 17
e-mail: msarcinelli@hotmail.com
Programando com o TreeView

Quando for adicionar um nó no TreeView, você deve saber exatamente onde fazê-
lo. Em outras palavras você deve saber qual nó, se existir algum, será o Nó
Principal (N.T: Nó Principal é aquele do qual se derivam os outros nós).

Um Nó Principal (Root Node) não possui nós pais (esse é o nó principal, dele se
derivarão os outros nós). Então, sua propriedade Parent deve receber Nil (vazio)

TTreeNode.Parent= nil

Os outros nós são filhos do nó pai. Os nós pai podem ser um nó principal ou um
outro nó filho.

Freqüentemente você vai precisar adicionar um nó filho para algum item


selecionado. Porém antes de fazer isso, você deve se certificar que existe um nó
selecionado. Para isso faça o seguinte teste para verificar se existe algum nó no
TreeView. (TreeView.Selected = nil)

if( TVEx1.Selected = nil ) then


begin
end;

No exemplo acima existem duas razões porque verificar se a propriedade Select


do TreeView é vazia.

1. Se a propriedade Select do TreeView é vazia (TTreeView.Select = nil),


indica que um nó deve ser selecionado.
2. Existem nós, mas o usuário ainda não selecionou um.

Após o teste se algum nó do TreeView foi selecionado, devemos testar também se


ele está vazio, ou seja, não possui nós:

if( TVEx1.Items.Count = 0 ) then


begin
end;

Agora que conhecemos os métodos necessários para determinar o estado do


TreeView, vamos aprender a adicionar um Nó.

3 de 17
e-mail: msarcinelli@hotmail.com
Programando com o TreeView

Adicionando o Nó Principal (Root Node)

Para adicionar um nó no TreeView, você deve usar um dos métodos para adição
de Nós. (TreeView.Items.Addxxx)
Ex: TreeView.AddFirst, TreeView.AddFirstChild, TreeView.AddChild, etc.

with TVEx1.Items.AddFirst( nil, 'Root' ) do


begin
Selected := true;
end;

Se você for adicionar um Nó usando o método AddFirst, o nó será criado como um


irmão do nó passado no parâmetro 1.

TreeView.Items.AddFirst (parâmetro1, parâmetro2)

No exemplo acima, como estamos criando o Nó Principal, não temos um “nó


irmão”, por isso informamos o parâmetro 1 como vazio (nil).

TVEx1.Items.AddFirst( nil, 'Principal' )

Adicionando um Nó Filho

No exemplo, usamos o método InputQuery para adicionarmos um novo nó ao


TreeView, passando como parâmetro a variável criada no procedimento para
criação do Nó (N.T: Ver exemplo TreeViewEx1 em anexo). Assim o nó será
adicionado como um nó filho do nó criado.

InputQuery( 'Adicionar Nó', 'Insira o nome do nó', sText );

Na propriedade AddChild, passamos como parâmetro 1 o Nó selecionado


(TVEx1.Select) e como parâmetro 2 a variável texto criada, que será o nome do
nó. (sText) {Add the node as a child of the selected node}
with TVEx1.Items.AddChild( TVEx1.Selected, sText ) do
begin
MakeVisible;
end;

Quando você adiciona um nó em um TTreeView esse nó não deverá ser mostrado


até que esteja criado, então o comando MakeVisible deverá ser executado para
mostrar o nó após ter sido criado.

4 de 17
e-mail: msarcinelli@hotmail.com
Programando com o TreeView

Abaixo está listado o código completo do botão Adicionar do exemplo, que deverá
ser colocado no evento OnClick do referido botão.

procedure TFrmEx1.BtnAdicionarClick(Sender: TObject);


var

sText : string;
InputSim: Boolean;
begin

if( TVEx1.Selected = nil ) then


begin

if( TVEx1.Items.Count = 0 ) then


begin

with TVEx1.Items.AddFirst( nil, 'Principal' ) do


begin

Selected := true;
end;
end
else begin

ShowMessage( 'Selecione um Nó' );


Exit;
end;
end
else
begin

InputSim := InputQuery( 'Adicionar Nó', 'Insira o nome do Nó', sText );

If InputSim = true then

5 de 17
e-mail: msarcinelli@hotmail.com
Programando com o TreeView

Begin
If Stext = '' then
Begin
ShowMessage('Digite um nome para o Nó!');
BtnAdicionar.Click;
Abort;
End

Else
with TVEx1.Items.AddChildFirst( TVEx1.Selected, sText ) do
begin

MakeVisible;
end;

Else
Abort;
end;
end;
End.

Removendo um Nó

A operação de remoção de Nós é bem simples. Somente devemos fazer alguns


testes para verificar se algum Nó foi selecionado e bloquear a remoção do Nó
Principal, que é o Nó de onde os outros Nós se derivam. Abaixo segue o código
para a remoção dos Nós que deverá ser colocada no procedimento OnClick do
botão Remover:

procedure TFrmEx1.BtnRemoverClick(Sender: TObject);


begin
somthing is selected, before trying to

if( TVEx1.Selected = nil ) then


begin
ShowMessage('Nenhum Nó selecionado. Seleciona um Nó para
prosseguir!');

6 de 17
e-mail: msarcinelli@hotmail.com
Programando com o TreeView

Exit;
end;

if( TVEx1.Selected.Level = 0 ) then


begin
ShowMessage('Este é o Nó Principal e não pode ser deletado.
Selecione outro Nó para prosseguir' );
Exit;
end;

If MessageDlg('Tem certeza que deseja excluir o Nó Selecionado?',


MtConfirmation, [mbYes, mbNo],0 ) = mryes then
TVEx1.Selected.Delete;
end;
End.

Após feitos esses procedimentos, teste o seu projeto e veja que você já tem criado
uma estrutura básica em TreeView. Agora vamos melhorar a interface do
TreeView adicionando imagens nos Nòs, o que dará um aspecto mais profissional
ao nosso trabalho. Então, mãos à obra...

Colocando Imagens nos Nós

As interfaces dos aplicativos que usam TreeView podem ser melhoradas usando
imagens nos Nós. Esses Nós podem possuir diferentes imagens. Isto possibilitará
que o usuário faça a distinção entre os tipos de Nós dentro do TreeView (N.T:
Qual é o Nó Principal, o Nó que está sendo mostrado, etc). Podemos por exemplo
atribuir uma imagem para um Nó que não foi clicado, uma para o Nó Principal e
outra para o Nó que foi clicado.

Como exemplo vamos usar 3 figuras para os Nós. Uma para o Nó Principal (Root
Node), e as outras duas para cada um dos outros Nós Filhos, sendo que 1 figura
será para quando o Nó for selecionado e a outra quando não estiver.

Primeiro insira um componente ImageList (N.T.: Paleta Win32) no formulário.


Dê um duplo clique no componente e adicione as 3 figuras (N.T.: As figuras estão
na pasta do projeto que acompanha esse tutorial) Primeiro a do Nó Principal,
depois do Nó quando não estiver selecionado, e finalmente a figura quando o Nó
for clicado.

7 de 17
e-mail: msarcinelli@hotmail.com
Programando com o TreeView

Abaixo temos uma sugestão de como deverá ficar o seu trabalho.

Configure a propriedade Images do TreeView com o nome do componente


ImageList inserido no formulário. Chamaremos o ImageList de ImageList1.

O próximo passo será definir constantes para representar o índice das imagens no
ImageList. Este procedimento será muito útil pois permitirá alterar as imagens do
ImageList sem ter que ficar alterando o código do procedimento. Para adicionar as
constantes no projeto, localize, na Unit do projeto, a Cláusula Uses e logo abaixo
declare as constantes listadas abaixo:

const
Img_Principal = 0;
Img_Pasta_Fechada = 1;
Img_Pasta_Aberta = 2;

Atenção: Clique no objeto TreeView do exemplo, e altere as propriedades Images


e StateImages para ImageList1, para que as imagens possam ser mostradas no
TreeView na execução do exemplo.

8 de 17
e-mail: msarcinelli@hotmail.com
Programando com o TreeView

Repare que cada constante representará uma imagem que será mostrada quando
o usuário interagir com o programa. Note também que para cada imagem
declarada também foi atribuído um número, que é o índice que essas imagens
possuem dentro do ImageList, daí a importância de ordenar as figuras no
ImageList.

Abaixo está o código para o botão Adicionar do formulário. As partes do Código


que possuem um grande parêntese, foram as partes atualizadas. Este
procedimento deverá ser inserido no evento OnClick do referido botão.

procedure TFrmEx1.BtnAdicionarClick(Sender: TObject);


var
sText : string;
InputSim : Boolean;

begin

if( TVEx1.Selected = nil ) then


begin

if( TVEx1.Items.Count = 0 ) then


begin

with TVEx1.Items.AddFirst( nil, 'Principal' ) do


begin

Selected := true;

ImageIndex := Img_Principal;
SelectedIndex := Img_Principal;

end;
end
else
begin

9 de 17
e-mail: msarcinelli@hotmail.com
Programando com o TreeView

ShowMessage( 'Selecione um Nó' );


Exit;
end;
end
else
begin

InputSim := InputQuery( 'Adicionar Nó', 'Insira o nome do Nó', sText );

If InputSim = true then

Begin
If Stext = '' then
Begin
ShowMessage('Digite um nome para o Nó!');
BtnAdicionar.Click;
Abort;
End

Else
with TVEx1.Items.AddChildFirst( TVEx1.Selected, sText ) do
begin

ImageIndex := Img_Pasta_Fechada;
SelectedIndex := Img_Pasta_Aberta;

MakeVisible;
end;
end

Else

10 de 17
e-mail: msarcinelli@hotmail.com