CONTROL TREEVIEW1
Vamos a ver algunas características de un control ActiveX
que se llama TreeView. Como su nombre indica, sirve,
inicialmente, para ver la información jerarquizada en forma
de árbol.
En este ejemplo intentaremos explicar algunas de sus
propiedades más importantes y de qué manera construirnos
nuestro propio TreeView.
Para desarrollar este ejemplo vamos a imaginarnos que somos una empresa que tenemos
nuestro “campo de operaciones” divido en dos zonas, que a su vez se dividen en dos zonas
más, y que en cada una de ellas tenemos asignado uno o varios vendedores. Utilizaremos el
TreeView para que nos sirva de “chuleta” para determinar qué vendedor debemos debemos dar
de alta a la hora de introducir una venta.
Como siempre, no os fijéis en la estructura de la aplicación, dado que no es la correcta.
Simplemente está hecha con la finalidad de que entendamos mejor las características del
TreeView.
CREANDO NUESTRA TABLA TDATOS
Vamos a crearnos una tabla, que guardaremos con el nombre de TDatos, que tendrá la
siguiente estructura:
No hay más secreto en este punto
CREANDO NUESTRO FORMULARIO FDATOS
Vamos a crearnos un formulario sobre la tabla TDatos, que guardaremos con el nombre de
FDatos.
En el rincón superior izquierdo (por ejemplo) insertamos un control ActiveX, que será nuestro
control TreeView. En la lista que nos sale seleccionamos el control “Microsoft TreeView Control,
version 6.0”.
Es decir, una cosa así:
1 La BD de ejemplo os la podéis bajar aquí
1
Visítame en [Link]
ANALIZANDO EL CONTROL TREEVIEW
Vemos, en la ilustración anterior, como ya el propio TreeView nos muestra un armazón de lo
que va a ser la estructura de nuestro treeview.
Como la mayoría de los controles ActiveX nos encontramos con dos niveles de “propiedades”:
las propiedades como “control” y las propiedades como “control TreeView” (por diferenciarlas
de alguna manera).
Las propiedades como “control” son las que nos aparecen en la ventana “Propiedades” y que
contienen las pestañas Formato, Datos, Eventos, Otras, Todas.
Las propiedades como “control TreeView” son aquellas que nos aparecen en la ventana
“Propiedades de TreeCtrl”. ¿Cómo llegamos a esta ventana?
Pues nos situamos sobre el control y hacemos clic con el botón de la derecha, de manera que
nos saldrá un menú contextual → Objeto de TreeCtrl → Propiedades:
Si hacemos clic sobre esa opción de menú (Propiedades) veremos que se nos abre la ventana
de propiedades propia del control:
2
Visítame en [Link]
En el siguiente epígrafe veremos algunas de estas propiedades. En principio lo que haremos
nosotros es irnos a las propiedades “normales” → Pestaña Otras → Nombre, y ahí establecer el
nombre en miTreeVw.
ANALIZANDO LAS PROPIEDADES DE MITREEVW
Si nos fijamos en la ilustración anterior veremos que nuestra ventana presenta diferentes
pestañas. Empezando por la derecha la pestaña Imagen nos permite indicar las imágenes que
se asignarán a los elementos del control. La parte de las imágenes no la explicaremos aquí.
La siguiente pestaña es Fuente. Ahí podremos elegir las propiedades de la fuente del texto que
nos mostrará el TreeView. Como todas las opciones son claramente entendibles no daremos
más detalles sobre las mismas.
La primera pestaña, General, tiene bastantes opciones. Veamos algunas:
La opción <Style> nos permite configurar el estilo del contenido del control. Desde lo más
simple (0 - tvwTextOnly), indicando si queremos o no imágenes o texto (PlusMinus), hasta lo
más complicado. En nuestro caso, el valor que sale por defecto es el que más nos interesa.
3
Visítame en [Link]
En las siguientes ilustraciones os muestro un Style 0 (a la
izquierda) y un Style 7 (a la derecha)
La siguiente propiedad <MousePointer> simplemente nos permite determinar qué forma
cogerá el puntero del mouse cuando pasemos sobre los valores del TreeView.
La propiedad <LineStyle> nos permite definir si queremos líneas o no que nos unan los
elementos principales con un supuesto <root>. Diciéndolo de otra manera, nos aparecería una
línea que uniría el elemento principal con el marco izquierdo del control. La imagen de la
izquierda tiene la propiedad configurada en <0 – tvwTreeLines>; la de la derecha en <1 -
tvwRootLines>
La propiedad <LabelEdit> nos indica si el usuario podrá hacer doble clic sobre el valor y
editarlo. La opción <0 – tvwAutomatic> nos permite hacer esto; la opción <1 – tvwManual>
no.
La propiedad <imageList> hace referencia a otro control ActiveX que nos permitiría acceder a
las imágenes almacenadas en dicho control. Como no utilizaremos imágenes pues... “ni caso”.
Las propiedades <BorderStyle> y <Appearance> sirven para cambiar el diseño visual del
TreeView. Podemos ir probando diferentes opciones para ver cómo cambia el aspecto de
nuestro TreeView (eso os lo dejo para vosotros... je, je...).
Las propiedades <OLE> nos las saltamos (son complejas y no aportan demasiado a nuestro
ejemplo).
La propiedad <Indentation> establece el nivel de sangrado que habrá entre niveles del
TreeView.
La propiedad <PathSeparator> nos indica qué carácter se utilizaría si trabajáramos con rutas
(por ejemplo, de carpetas y archivos).
4
Visítame en [Link]
La propiedad <HideSelection> nos permite indicar si lo que hayamos seleccionado en el
TreeView, una vez este pierda el enfoque, se mantendrá seleccionado o no.
<Sorted> ordena alfabéticamente los elementos del nodo
principal (sólo estos)
<FullRowSelect> activado implica que se seleccionará el
nodo si se pulsa en cualquier lugar de su fila
<CheckBoxes> indica que aparecerá una casilla de
verificación junto a cada nodo.
<SingleSel> nos permite indicar que con un solo clic se expandirán los nodos; si no será
necesario un doble clic o, si hay casillas con un “+”, al hacer clic sobre ellas.
La propiedad <Scroll> nos permite que aparezcan o no barras de desplazamiento.
La propiedad <HotTracking> hace que el funcionamiento del TreeView se parezca a un
funcionamiento web, con los valores tratados como si fueran hipervínculos y el puntero del
mouse convertido en una mano con el dedo alzado.
CREANDO LOS ELEMENTOS DEL TREEVIEW
Vamos a crearnos los elementos el miTreeVw. En la siguiente tabla veremos la planificación de
lo que necesitamos:
ZONA SUBZONA VENDEDOR
Norte Industrial Antonio
Norte Industrial Ana
Norte Residencial Sonia
Sur Urbana Raúl
Sur Urbana Carlos
Sur Urbana Luz
Sur Rural Patricia
Sur Rural Luis
Dichos elementos, en el TreeView, tendrán un índice. Para saber su índice basta empezar a
contar por la columna izquierda los valores diferentes, y de arriba a abajo.
Por ejemplo:
Norte → Índice 1
5
Visítame en [Link]
Sur → Índice 2
Industrial → Índice 3
Residencial → Índice 4
Etc.
Además, como vamos a necesitar lo que se denomina una
“key”, utilizaremos el mismo nombre, en minúsculas, como
esa “key” identificativa.
La estructura en el código para añadir un nodo que no sea
el principal sería:
[Link] (claveNodoSuperior, tvwChild, claveNodo, valorNodo)
Que trasladado a nuestro ejemplo sería, para definir el nodo Industrial:
[Link] (“norte”, tvwChild, “industrial”, “Industrial”)
Como vemos, la palabra reservada tvwChild nos indica que es un “nodo hijo”.
¿Y los nodos de primer nivel? Pues simplemente reservamos la posición de los dos primeros
elementos, pero no indicamos su valor. Es decir, que para dar de alta el nodo principal “Norte”
escribiríamos
[Link] (, , “norte”, “Norte”)
Entendida la mecánica sólo nos queda situar FDatos en vista diseño y crearle los elementos del
TreeView. Para ello, en el evento “Al cargar” del formulario, generamos el siguiente código 2:
…
Private Sub Form_Load()
'Declaramos las variables
Dim miNodo As Node
'Establecemos los valores del primer nivel
Set miNodo = [Link](, , "norte", "Norte")
Set miNodo = [Link](, , "sur", "Sur")
'Establecemos los valores del segundo nivel
Set miNodo = [Link]("norte", tvwChild, "industrial", "Industrial")
Set miNodo = [Link]("norte", tvwChild, "residencial", "Residencial")
Set miNodo = [Link]("sur", tvwChild, "urbana", "Urbana")
Set miNodo = [Link]("sur", tvwChild, "rural", "Rural")
'Establecemos los valores del tercer nivel
Set miNodo = [Link]("industrial", tvwChild, "antonio", "Antonio")
Set miNodo = [Link]("industrial", tvwChild, "ana", "Ana")
Set miNodo = [Link]("residencial", tvwChild, "sonia", "Sonia")
Set miNodo = [Link]("urbana", tvwChild, "raul", "Raúl")
Set miNodo = [Link]("urbana", tvwChild, "carlos", "Carlos")
Set miNodo = [Link]("urbana", tvwChild, "luz", "Luz")
Set miNodo = [Link]("rural", tvwChild, "patricia", "Patricia")
Set miNodo = [Link]("rural", tvwChild, "luis", "Luis")
End Sub
…
Y el efecto que conseguimos es el siguiente:
2 Para generar código debemos sacar las propiedades del control → Pestaña Eventos, y nos situamos en la parte “blanca” a la
derecha del evento que queremos programar. Veremos un pequeño botón de puntos suspensivos. Si hacemos clic sobre él nos
aparecerá una ventana que nos pedirá qué operación deseamos realizar. Le indicamos que queremos “generar código”.
6
Visítame en [Link]
PROGRAMANDO ALGUNAS COSILLAS MÁS
Si sacamos las propiedades “normales” del control y nos vamos a la pestaña Eventos veremos
que nuestro TreeView tiene muy pocos eventos disponibles para programar. Sin embargo,
vamos a utilizar el evento “Al perder el enfoque” para facilitar la entrada de datos.
El supuesto es que el usuario está rellenando el formulario. Añade la zona y la subzona y no
recuerda qué comerciales hay en esa subzona. Entonces se va al treeview y selecciona el
comercial que le interesa. Al volver al campo del formulario ese valor se le va a rellenar
automáticamente.
Debemos tener en cuenta que el índice del tercer nivel empieza en el número 7. Necesitamos
ese dato para que, si el usuario por error selecciona una zona o subzona y no el nombre de un
vendedor, el campo no se nos rellene con un dato erróneo.
Con todo lo anterior en mente en dicho evento del TreeView “Al perder el enfoque” vamos a
programar el siguiente código:
…
Private Sub miTreeVw_LostFocus()
'Declaramos las variables
Dim vVendedor As Variant
Dim i As Integer
'Miramos el índice del elemento seleccionado en el TreeView
i = [Link]
'Si el índice es inferior a 7 salimos
If i < 7 Then
Exit Sub
'En caso contrario obtenemos el valor seleccionado
Else
vVendedor = [Link]
End If
'Escribimos el valor en el campo correspondiente
[Link] = vVendedor
'Situamos el enfoque sobre el campo rellenado
[Link]
End Sub
…
Como vemos en el código, para obtener el índice utilizamos la propiedad “Index”
([Link]). Para obtener su valor utilizamos la propiedad “Text”
([Link])
7
Visítame en [Link]
Vamos a añadir una “chulada” más al treeview. Seleccionamos el evento “Al recibir el enfoque”
del TreeView y generamos el siguiente código:
…
Private Sub miTreeVw_GotFocus()
With [Link]
'Situamos los nodos principales de color rojo
.Item(1).ForeColor = vbRed
.Item(2).ForeColor = vbRed
'Situamos los nodos de segundo nivel de color azul
.Item(3).ForeColor = vbBlue
.Item(4).ForeColor = vbBlue
.Item(5).ForeColor = vbBlue
.Item(6).ForeColor = vbBlue
End With
End Sub
…
Como veis, la propiedad se llama con la expresión:
[Link](X).ForeColor = vbRed
El anterior código es un poco “manual”, pero está hecho así para que veáis cómo se haría
especificando los valores uno a uno.
Vamos a crear, en el evento “Al salir”, el siguiente código, algo más automático, que nos
devolverá el color de letra a negro:
…
Private Sub miTreeVw_Exit(Cancel As Integer)
'Declaramos las variables
Dim i As Integer
'Recorremos los índices hasta el 6, devolviéndoles el color de letra a negro
For i = 1 To 6
[Link](i).ForeColor = vbBlack
Next i
End Sub
…
Prosigamos. Vamos a añadir, en FDatos, un botón de comando. Lo llamaremos cmdBorrar. Este
botón nos servirá para definir diferentes opciones de borrado de los valores del TreeView. El
código del evento “Al hacer clic” será el siguiente:
…
Private Sub cmdBorrar_Click()
'Declaramos las variables
Dim vResp As Variant
'Pedimos al usuario qué quiere hacer
vResp = InputBox("1-Borrar elemento seleccionado; 2-Borrar todos", "BORRADO", 0)
'Comprobamos la pulsación del botón cancelar
If StrPtr(vResp) = 0 Then Exit Sub
'Comprobamos que se haya introducido un valor válido
If Not IsNumeric(vResp) Then
MsgBox "El valor introducido no es correcto", vbExclamation, "ERRÓNEO"
Exit Sub
End If
If vResp < 0 Or vResp > 2 Then
MsgBox "El valor introducido no es correcto", vbExclamation, "ERRÓNEO"
Exit Sub
End If
'Determinamos qué hacer según lo que haya indicado el usuario
Select Case vResp
Case 0 'El valor por defecto que hemos establecido
'Salimos
Exit Sub
8
Visítame en [Link]
Case 1
[Link] ([Link])
Case 2
[Link]
End Select
End Sub
…
El primer bloque de código consiste en una serie de
instrucciones de control para comprobar que el usuario no
intenta “hacer trampas” y meter valores no válidos en el
InputBox. Lo referente al TreeView está en las diferentes
acciones del Select Case.
Es decir, que si queremos eliminar el elemento seleccionado debemos usar:
[Link] ([Link])
Añadir aquí que si quisiéramos eliminar algún elemento del TreeView, esté seleccionado o no,
podríamos hacer referencia a él por su “key”. Por ejemplo, podríamos escribir
[Link](“raul”)
O directamente por su índice
[Link](10)
para borrar el valor correspondiente en el control.
Y para borrarlo todo simplemente hacemos
[Link]
PARA FINALIZAR ESTE EJEMPLO
Bueno... Creo que con lo que hemos explicado ya tenemos para “jugar” un buen rato con el
control TreeView.
Espero que este ejemplo os sea de utilidad.
Un saludo, y...
¡suerte!
9
Visítame en [Link]