TTreeView/es: what changed

Revision 0 to 1. Removed lines have a minus sign; added lines have a plus sign.

Title: TTreeView/es

New		Line
1	+	## Añadir un nuevo elemento mediante código
2	+
3	+	Se puede añadir un nuevo elemento mediante TTreeView.Items.AddChild o bien AddChildObject.
4	+
5	+	## Crear un TreeView que carga elementos solamente cuando se expande
6	+
7	+	Para añadir el símbolo de expansión a un nodo que no contiene subelementos escribimos la siguiente sentencia:
8	+
9	+	``` pascal
10	+	MiNodo.HasChildren := True;
11	+	```
12	+
13	+	Y establecemos un manejador de eventos para el evento OnExpanding. En este evento se debería retornar si se puede o no realizar la expansión y caso de que sea afirmativo se añadirían subelementos al nodo. Si la expansión no puede realizarse entonces desaparece automáticamente el símbolo de expansión incluso si previamente se ha establecido el valor de HasChildren a true.
14	+
15	+	## Un pequeño ejemplo de uso de TTreeview
16	+
17	+	Aquí tenéis un ejemplo rápido e informal - testeado en Lazarus 0.9.26 bajo Windows:
18	+
19	+	Crear una nueva aplicación. En Form1 añadir un treeview vacío, un button1 con caption "Añadir hijo" y un button2 con caption "Borrar"
20	+
21	+	Para los buttons' con su evento OnClick, asignar el siguiente código, compilar y ejecutar.
22	+
23	+	Código:
24	+
25	+	``` pascal
26	+
27	+	procedure TForm1.Button1Click(Sender: TObject);
28	+	var
29	+	i: integer;
30	+	s: string;
31	+	begin
32	+	// si no hay nodos, crear un nodo raíz con un padre establecido al valor Nil
33	+	if TreeView1.Items.Count = 0 then
34	+	begin
35	+	Treeview1.Items.Add (nil,'Nodo Raíz');
36	+	exit;
37	+	end;
38	+
39	+	// Establer un texto simple para cada nuevo nodo: Nodo1 , Nodo2, etc
40	+	i := treeview1.Items.Count; // Nos retorna la cuenta total de elementos.
41	+	s := 'Nodo ' + inttostr(i); // Crea la cadena de texto 'Node ' más el número resultante de conversión de entero su
42	+	// equivalente en texto.
43	+	// Añade un nuevo nodo al nodo actualmente seleccionado.
44	+	if TreeView1.Selected <> nil then // Si tenemos seleccionado un nodo entonces hacer lo siguiente.
45	+	Treeview1.Items.AddChild(Treeview1.Selected ,s); // Añadir un elemento como hijo al actualmente seleccionado.
46	+	end;
47	+
48	+	procedure TForm1.Button2Click(Sender: TObject);
49	+
50	+	// Un procedimiento para borrar nodos recursivamente.
51	+	Procedure DeleteNode(Nodo:TTreeNode);
52	+	begin
53	+	while Nodo.HasChildren do DeleteNode(Nodo.GetLastChild); { mientras el nodo tenga hijos realizar borrado último nodo hijo }
54	+	TreeView1.Items.Delete(Nodo) ; { borra nodo que ya no contiene nodos hijo }
55	+	end;
56	+
57	+	begin
58	+	if TreeView1.Selected = nil then exit; // salir del borrado caso de que no tengamos seleccionado un nodo }
59	+	// Si el nodo seleccionado tiene nodos hijo, primero preguntar por confirmación
60	+	If treeview1.Selected.HasChildren then
61	+	if messagedlg('¿Borrar nodo seleccionado y todos sus nodos hijo?',mtConfirmation,
62	+	[mbYes,mbNo],0) <> mrYes then exit; // Muestra mensaje de confirmación de borrado (pulsadores Si/No), caso de que
63	+	// la contestación sea diferente de Si, entonces sale del if sin borrar nodo.
64	+	DeleteNode(TreeView1.Selected); // Borra el nodo actualmente seleccionado.
65	+	end;
66	+	```
67	+
68	+	Cuando se ejecuta, el treeview está vacío,. Si se hace click en "Añadir hijo", se crea un nodo raíz. Después de esto se crea un nodo hijo en el nodo que tengamos seleccionado haciendo click en el pulsador "Añadir hijo".
69	+
70	+	El pulsador Borrar lo que hace es borrar el nodo actualmente seleccionado. Si no tiene nodos hijo lo borrara inmediatamente, pero si los tiene preguntará primero para confirmar su borrado.
71	+
72	+	## Liberando los datos del TreeNode
73	+
74	+	Utilizar el evento OnDeletion de Treeview para liberar el objeto creado:
75	+
76	+	``` pascal
77	+
78	+	procedure TForm1.TreeView1Deletion(Sender: TObject; Node: TTreeNode);
79	+	begin
80	+	TMyObject(Node.Data).Free; // Libera los recursos asignados al objeto (así dejamos memoria libre para otros objetos).
81	+	end;
82	+	```
83	+
84	+	## Utilizando Drag y Drop (arrastrar y soltar) en un TreeView
85	+
86	+	Si se quiere permitir la función de arrastrar y soltar en un treeview se necesita lo siguiente:
87	+
88	+	1. Establecer la propiedad "Drag Mode" de treeview al valor DmAutomatic.
89	+	2. Crear un evento del tipo "OndragOver" (solapa de eventos en el inspector de objetos):
90	+
91	+	``` pascal
92	+	procedure TForm1.TreeView1DragOver(Sender, Source: TObject; X, Y: Integer; State: TDragState; var Accept: Boolean);
93	+	begin
94	+	Accept := true;
95	+	end;
96	+	```
97	+
98	+	Espero que esta información sea de ayuda. Adicionalmente podéis cargar el proyecto de ejemplo que acompaña a Lazarus (tv_add_remove.lpi) o bien ver el tutorial que se encuentra en <http://users.iafrica.com/d/da/dart/Delphi/TTreeView/TreeView.html>
99	+
100	+	## Personalizando un TreeView
101	+
102	+	Añado esta sección debido a una consulta en el foro sobre como cambiar el color del texto en un TreeView [1](http://forum.lazarus.freepascal.org/index.php/topic,30095.msg191058/topicseen.html#new).
103	+
104	+	La respuesta del usuario GetMem es que se debe establecer el valor tvoThemedDraw a False, ya que por defecto vale True.
105	+
106	+	En el Inspector de Objetos para TreeView dentro de las opciones disponibles lo encontramos en:
107	+
108	+	<img src="treeviewoptions.png" title="treeviewoptions.png" width="450" />
109	+
110	+	Aquí el resto de valores para las opciones que aparecen son los establecidos por defecto para un TreeView.
111	+
112	+	De esta forma nos permite personalizar más el color de la fuente que de otra manera estando tvoThemedDraw establecido al valor true utiliza por defecto el color (y la fuente) que tenga el tema visual de escritorio en uso (la otra posibilidad es deshabilitar el tema).
113	+
114	+	Esto se aplica a todos los nodos del TreeView, pero en caso de necesitar aplicar diferentes colores a los nodos el ejemplo que nos pone el usuario molly es:
115	+
116	+	``` pascal
117	+
118	+	// En tiempo de creación del formulario establecemos tvoThemedDraw a false
119	+	// y llenamos el TreeView con 10 elementos: item 1,item 2,....,item 10 (el índice comienza por 0 para item 1).
120	+
121	+	procedure TForm1.FormCreate(Sender: TObject);
122	+
123	+	var i:integer;
124	+
125	+	begin
126	+
127	+	TreeView1.Options := TreeView1.Options - [tvoThemedDraw];
128	+
129	+	For i := 1 to 10 do TreeView1.Items.Add(nil, 'item ' + IntToStr(i));
130	+
131	+	end;
132	+	```
133	+
134	+	Y asignamos al evento OnDrawItemEvent:
135	+
136	+	``` pascal
137	+
138	+	// En nuestro TreeView personalizado, chequeamos si su índice de nodo es par o impar.
139	+	// y cambia el color de texto a rojo si es impar (odd) o a verde en caso contrario.
140	+
141	+	procedure TForm1.TreeView1CustomDrawItem(Sender: TCustomTreeView;
142	+
143	+	Node: TTreeNode; State: TCustomDrawState; var DefaultDraw: Boolean);
144	+
145	+	begin
146	+
147	+	with Sender as TCustomTreeView do
148	+
149	+	if odd(Node.Index)
150	+
151	+	then Canvas.Font.Color:= clRed
152	+
153	+	else Canvas.Font.Color:= clGreen;
154	+
155	+	end;
156	+	```
157	+
158	+	Siendo el resultado:
159	+
160	+	<img src="customtreeview.png" title="customtreeview.png" width="350" />
161	+
162	+	---
163	+	From the Free Pascal wiki, page "TTreeView/es", as it stood on 2020-03-02 after a change by Trev, out of the wiki's dump of 2024-05-26. Copyright stays with the author who wrote it, according to the old wiki's [[Licensing]] page. If you have concerns about this material, [message the admin](/wiki-contact).
164	+	Category: Components/es
165	+	Category: Tutorials/es

Back to history