TUTORIAL  ATUTOPLAY MEDIA STUDIO 7 

TEMA: Tree 

Autor: “Jdyb” 

 

  En este tutorial vamos a aprender a usar el objeto “tree”, digamos que este objeto en sí sería como el árbol de carpetas del explorador de Windows. 

 

 

 

Ya he señalado donde se encuentra este objeto en la barra de tareas. 

 

Ahora nos tenemos que aprender sus propiedades. Pongo una captura de pantalla de los atributos del objeto y los voy explicando. 

Muestra un recuadro para marcar al lado del item 

Propiedades del ítem (ver siguiente captura). 

Añadir ítems y ordenarlos 

Estilo del borde 

 

 

 

Color de fondo y color del texto. 

Lo que se muestra

Dato interno

Si el ítem está expandido por defecto o lo expande el usuario. 

 

Ahora toca explicar el tema de las imágenes, dónde pone image list, tenemos que poner algo parecido a esto 

   

Si  leemos  la ayuda del programa nos ayudará a crear este  tipo de imágenes y nos dice las dimensiones. 

UseImageList

True if the specified image list file should be used in the tree object, false if it should not be.

ImageList

A bitmap image (maximum 24bit supported) that contains 16x16 icons to be used by the Tree object as icons for each tree item.

Note: The image used as the image list must be a bitmap image (.bmp).

The picture above includes three 16x16 icons. The orange icon (left-most) has an index of 0. The purple icon (middle) has an index of 1. The circle icon (right-most) has an index of 2.

Note: To specify which icon each tree item will display, specify the Image index in each item's properties.

ImageListTransparentColor

The color that will be transparent in the image list. Click the select button to bring up a color chooser. The color that you click on will be used to represent transparency in the image list.

 

  Como vemos es fácil de entender, se trata de crear una  imagen en bmp que  contenga  los  iconos de  los  item.  Luego  especificamos  el  color que no hay que tener en cuenta del bmp. 

  Para  seleccionar que  icono poner en  cada  ítem  se va a  la  captura anterior  y  se  especifica  el  índice  dentro  de  la  imagen  bmp,  es  decir  un simple número contando de  izquierda a derecha  los  iconos que hay en el bmp. 

  Bueno,  en  lo  que  a  aspecto  se  refiere  yo  creo  que  ya  está  todo explicado,  habrá  alguien  que  se  pregunte  cómo  poner  una  imagen  de fondo, pero yo  le diré que creo que no se puede,  lo he mirado y yo creo que no, lo que se puede seleccionar es el color de fondo. 

  Ahora yo creo que ya podemos pasar a la acción, es decir a ver todo lo  que  podemos  hacer  con  este  objeto,  como  os  podeis  imaginar  todo depende  de  la  imaginación  de  uno  mismo.  Pero  ya  veréis  que  las posibilidades son muchas. 

 

Yo creo que lo primero que vamos a hacer es explorar las funciones disponibles por encima y luego veremos un ejemplo. 

Tree.CollapseNode("Tree1", "1-1"); Encoge  un nodo, es decir, lo deja cerrado, no se ven los subnodos. 

A  partir  de  aquí  llamaremos  nodos  a  cada  uno  de  los  ítems  del árbol. 

Tree.EnsureVisible("Tree1", "1-1"); Se asegura de que un determinado nodo está visible, es decir, expande  todo  lo que se necesite expandir para que el nodo seleccionado se haga visible. 

Tree.ExpandNode("Tree1", "1"); Expande  el  nodo especificado en la función. 

result=Tree.GetSelectedNode("Tree1"); Devuelve el índice del nodo que está seleccionado. 

result=Tree.GetNode("Tree1", "1-1"); Nos devuelve una tabla con las propiedades del nodo del cual hemos indicado el  índice. En el ejemplo veremos cómo acceder a  los campos de  la  tabla que devuelve. 

Hay más  funciones que estas, como podemos ver en  la captura de pantalla, pero las que usaremos principalmente son las dos últimas que he nombrado, las demás son más comunes a todos los objetos y alguna otra que se ve a simple vista lo que es de sobra. Si hay algo que no entiendan o alguna  función  en  especial  que  no  sepan  utilizar  no  duden  en preguntármelo. 

 

 

El  ejemplo  que  voy  a  hacer  va  a  ser muy  simple,  voy  a  hacer  un árbol con varios objetos, y según el objeto seleccionado se  realizará una determinada acción, que creo que es más o menos  lo que nos  interesa a todos. 

 

Vamos  paso  a  paso. Una  vez  que  tengamos  creado  el  proyecto  a nuestro gusto  lo que  tenemos que hacer es  crear un nuevo árbol  como haciendo  click  en  la  barra  de  herramientas  (ver  primera  captura  de pantalla).  Luego  le  damos  doble  click  encima  y  tendremos  sus propiedades, yo voy a hacer un árbol bastante sencillo, para añadir ítems sólo hay que usar las teclas que hay debajo de la lista como ya puse en la 

captura de pantalla. Las flechas de arriba ya bajo son para ordenar, y  las de  izquierda  a  derecha  para  cambiar  la  jerarquía  del  nodo  dentro  del árbol. Veamos esta captura de pantalla para mostraros el árbol (mini) que he creado yo. 

 

  Como veis es muy simple, este árbol quedaría en nuestro proyecto así. 

 

  ¿Por qué aparece expandido si en  la captura anterior que  indicaba las propiedades estaba  sin expandir?  Porque  la  casilla expandir de  las propiedades del nodo “Programas” está marcada. 

 

Como visteis anteriormente cada nodo lleva un campo de texto y un índice como los ComboBox y demás objetos. Pues bien eso es lo que se va a usar para  saber  cual está  seleccionado, y así  realizar  las determinadas acciones que queramos y esas acciones serán realizadas cuando queramos (al hacer click, doble click, etc). 

 

Estos  son  todos  los momentos  en  los  que  se  puede  realizar  una acción,  los más  comunes que podemos usar  con OnSelect  y On Double‐Click. 

En el ejemplo vamos a usar el del doble click, pero podemos utilizar el del simple click también, en este caso daría lo mismo. 

En los índices del árbol utilizar la regla siguiente, que creo que es lo más ordenado y de esta manera no nos haremos ningún lío. 

En los padres poner números, en los hijos, poner el padre un guión o punto y el número de hijo, y así sucesivamente. 

Les pongo un ejemplo. 

 

Padre 

 

Hijo 1 

 

Hijo 2 

 

Padre 2

 

 

Una vez que ya tienen todo esto ya pasamos a  la parte del código, vamos a colocar todo el código en el doble click. 

Lo  primero  añadiremos  la  función  que  nos  devuelve  el  nodo seleccionado. 

 

Ahora  debemos  de  usar  la  que  nos  devuelve  una  tabla  con  las propiedades de dicho nodo (el seleccionado). 

 

 

Y  ahora  lo  que  debemos  de  hacer  es  mediante  estructuras condicionales especificar una serie de acciones. 

Para  hacer  esas  estructuras  condicionales  debemos  de  mirar  la ayuda  para  saber  las  claves  de  la  tabla  que  nos  devuelve  la  segunda función y así acceder al  campo que queramos, que en este  caso  será el Item data. 

 

 

  Ahora ya podemos empezar a hacer los if, y lo que usaremos será el operador  de  acceso  a  una  estructura  que  es  el  punto,  que  se  usa  para acceder a  los campos de una estructura, en este caso nuestra estructura se llamara “prop” (sin comillas). 

   

Les  pongo  una  captura  de  pantalla  de  cómo  debería  quedar  una  vez terminado. En el ejemplo  la acción que  realiza es  sacar un  cartel  con el nodo que se ha seleccionado. 

 

 

 

A continuación el código para que lo vean mejor que en la captura. 

 

select = Tree.GetSelectedNode("Tree1"); prop = Tree.GetNode("Tree1", select); if prop.Data=="1-1" then --Hacer una acción result = Dialog.Message("Seleccionado", "Ha seleccionado el nodo 1-1", MB_OK, MB_ICONINFORMATION, MB_DEFBUTTON1); end if prop.Data=="1-2" then --Hacer una acción result = Dialog.Message("Seleccionado", "Ha seleccionado el nodo 1-2", MB_OK, MB_ICONINFORMATION, MB_DEFBUTTON1); end --Así sucesivamente para todos los nodos

 

 

Ya está todo  listo, con este pequeño ejemplo ya sabrá cómo hacer más  cosas  con este nuevo objeto,  ya que  todo  se basa en  lo mismo,  lo único que  variará  serán  las  acciones, que depende de  lo que queramos hacer. 

Espero que con su  imaginación  le saquen un gran provecho a este tutorial para hacer grandes cosas. 

 

Sin nada más que decir me despido hasta la próxima. 

 

Tutorial by Jdyb