11 septiembre 2007

El componente TTreeView (y II)

Después de ver el manejo básico de un árbol TreeView pasemos a ver otras características menos conocidas pero también de suma importancia.

OBTENIENDO EL NIVEL DE CADA NODO

Cuando se van insertando elementos dentro de un árbol tenemos la dificultad de saber en que nivel de profundidad se encuentra cada uno de los nodos. Cada uno de los Items del componente TTreeView es de la clase TTreeNode.

Esta clase dispone de la propiedad Level la cual nos da el nivel de profundidad dentro del árbol. Veamos como obtener el nivel de cada uno de los nodos del árbol. Este procedimiento recorre todos los nodos del árbol y les añade a su nombre el nivel:

procedure TFTreeView.BNivelClick( Sender: TObject );
var i: Integer;
begin
// Averiguamos el nivel de cada nodo
for i := 0 to TreeView.Items.Count - 1 do
TreeView.Items[i].Text := TreeView.Items[i].Text + '_' +
IntToStr( ( TreeView.Items[i] as TTreeNode ).Level );
end.

Los elementos situados en la raiz tienen un nivel 0, los hijos un nivel 1, los nietos un 2...

LEYENDO LOS NODOS SELECCIONADOS

El nodo actualmente seleccionado se obtiene mediante:

TreeView.Selected

donde valdrá nil si no hay ninguno seleccionado. Pero si activamos la propiedad MultiSelect la forma de leer aquellos nodos seleccionados sería la siguiente:

procedure TFTreeView.BSeleccionadosClick( Sender: TObject );
var
i: Integer;
Seleccionados: TStringList;
begin
Seleccionados := TStringList.Create;

for i := 0 to TreeView.Items.Count - 1 do
if TreeView.Items[i].Selected then
Seleccionados.Add( TreeView.Items[i].Text );

ShowMessage( Seleccionados.Text );

Seleccionados.Free;
end;

Al igual que hicimos con el componente ListView volcamos el nombre de los nodos seleccionados en un StringList y lo sacamos por pantalla.

ASOCIANDO UNA IMAGEN A CADA NODO

Si añadimos a nuestro formulario el componente TImageList se pueden asocionar iconos distintos a cada uno de los elementos del árbol TTreeView. Para ello asociamos este componente a la propiedad Images del TTreeView. Una vez hecho esto todos los nodos tendrán a su izquierda la primera imagen de la lista de imágenes TImageList.

Ya será cuestión de cada cual asociar la imagen correspondiente cada nodo. Vamos a ver un ejemplo que recorre los elementos del árbol y va a poner la segunda imagen de la lista de imágenes a aquellos nodos hijos (de nivel 1):

procedure TFTreeView.CambiarNodosHijos;
var
i: Integer;
begin
for i := 0 to TreeView.Items.Count - 1 do
if ( TreeView.Items[i] as TTreeNode ).Level = 1 then
( TreeView.Items[i] as TTreeNode ).ImageIndex := 1;
end;

CAMBIANDO LA FORMA EN QUE SE MUESTRAN LOS NODOS

El componente TreeView dispone la propiedad Ident la cual determina la identación de entre los nodos padres y sus hijos que por defecto es de 19 pixels. Se puede cambiar en cualquier momento, pero afectará a todos los nodos del árbol.

Otra cosa que se puede hacer al cargar un árbol desde un archivo de texto es expandir todos sus nodos, ya que cuando se carga el árbol esta compactado. Para solucionarlo se hace:

TreeView.FullExpand;

Equivale a pulsar el botón + de cada uno de los nodos padres.

CAMBIANDO LA FORMA DE DIBUJAR LOS NODOS

Al igual que vimos con el componente ListView también se puede modificar en tiempo real la forma de dibujar cada nodo. Para ello lo que hacemos es reprogramar el evento OnCustomDrawItem. Veamos un ejemplo de como hacer que los nodos hijos aparenzan de color de fuente azul y negrita:

procedure TFTreeView.TreeViewCustomDrawItem( Sender: TCustomTreeView;
Node: TTreeNode; State: TCustomDrawState; var DefaultDraw: Boolean );
begin
if Node.Level = 1 then
begin
Sender.Canvas.Font.Color := clBlue;
Sender.Canvas.Font.Style := [fsBold];
end
else
begin
Sender.Canvas.Font.Color := clBlack;
Sender.Canvas.Font.Style := [];
end;

if cdsFocused in State then
Sender.Canvas.Font.Color := clWhite;
end;

En las dos últimas líneas del procedimiento también nos hemos asegurado de que si un elemento esta seleccionado la fuente salga de color blanca. Hemos utilizado para ello el parámetro State del evento. Los posibles valores de esta variable son:

cdsSelected -> La columna o fila ha sido seleccionada
cdsGrayed -> La columna o fila esta grisacea
cdsDisabled -> La columna o fila esta deshabilitada
cdsChecked -> La fila aparece con el CheckBox activado
cdsFocused -> La columna o fila esta enfocada
cdsDefault -> Por defecto
cdsHot -> Se ha activado el HotTrack y esta enfocado
cdsMarked -> La fila esta marcada
cdsIndeterminate -> La fila no esta seleccionada ni deseleccionada

Con esto se resumen las propiedades más importantes del componente TreeView.

Pruebas realizadas en Delphi 7.

1 comentario:

Anónimo dijo...

Muchas Gracias por esta explicación acerca del TReeView.
Me ha servido muchisimo...

Publicidad