En el artículo anterior ya introdujimos el método para la creación de un árbol dinámico, escogido por su facilidad de implementación. Se trata de un "package" PEAR llamado: HTML_TreeMenu

Para utilizar esta librería tenemos que programar a través de unas clases PHP, de programación orientada a objetos. Así que simplemente se trata de utilizar las clases, instanciando los correspondientes objetos para la creación de todas las ramas del árbol. Luego utilizaremos unos métodos para generar el árbol para visualizarlo en la página.

En realidad el árbol es un componente DHTML, que responde a las acciones del usuario, que pueden ser expandir y contraer las ramas del árbol para ver o ocultar sus contenidos. Así pues, este componente tiene un código Javascript asociado, que es el que implementa la infraestructura de interacción con el usuario. Pero, aunque el árbol se genere internamente con Javascript, nosotros sólo tenemos que programar con código PHP, lo que es bastante cómodo si dominamos el lenguaje de programación del lado del servidor y óptimo en el caso que no tengamos conocimientos de Javascript. Lo único que tenemos que hacer en Javascript es incluir un archivo de código js en nuestras páginas, que es bastante sencillo.

Así pues, vamos a ver paso por paso cómo programar la interfaz de árbol.

1.- Tenemos que incluir la librería del árbol. Tener cuidado con la ruta del include, para direccionarla al lugar correcto donde hayamos colocado el script PHP.

require_once('TreeMenu.php');

2.- Definimos las imágenes que vamos a utilizar para simbolizar las carpetas o ramas del árbol. Estas imágenes también las encontraremos en el paquete de descarga e incluso varios tipos de imágenes para elegir la que más nos guste.

$icon = 'folder.gif';
$expandedIcon = 'folder-expanded.gif';

3.- Creamos los elementos del árbol instanciando objetos. Tenemos dos clases distintas que en principio deberemos utilizar: HTML_TreeMenu y HTML_TreeNode. El árbol será generada a partir de la clase HTML_TreeMenu y los nodos se generarán con HTML_TreeNode, independientemente de su grado de anidación o nivel de profundidad dentro de la rama.

Con esta línea creamos el árbol (instanciando un objeto de clase HTML_TreeMenu):

$menu = new HTML_TreeMenu();

Ahora podemos crear un primer nodo, que será el nodo raíz del árbol, instanciando un objeto de la clase HTML_TreeNode. A la hora de instanciar un nodo del árbol, tenemos que enviar diversos datos. En realidad el constructor de HTML_TreeNode recibe dos parámetros, que son a su vez dos arrays. El primero sirve para indicar las variables de configuración del árbol y el segundo para definir algunos eventos especiales que se desatarán a la hora de operar con los nodos.

Por ejemplo, así se crearía un nodo inicial:

$nodo1 = new HTML_TreeNode(array('text'=>'Directorio','link'=>'http://www.desarrolloweb.com/directorio', 'icon' => $icon, 'expandedIcon' => $expandedIcon));

Todos los datos enviados al constructor para la creación del nodo son opcionales, ya que, si no los indicamos, toman valores por defecto. Nosotros hemos colocado los fundamentales, pero existen otros que se pueden ver en la documentación que acompaña la descarga del paquete PEAR.

Una vez tenemos un nodo creado, podemos añadirlo al árbol, o a otro nodo. Si lo añadimos al árbol, estaremos creando un nodo raíz y si lo añadimos a otro nodo estamos creando un nuevo nivel a la rama del árbol donde se está añadiendo. Para ambos casos se utiliza un método llamado addItem().

Por ejemplo, así podríamos añadir el nodo anterior al árbol creado al principio:

$menu->addItem($nodo1);

Ahora creemos un segundo nodo:

$nodo1_1 = new HTML_TreeNode(array('text'=>'Programación','link'=>'http://www.desarrolloweb.com/directorio/programacion', 'icon' => $icon, 'expandedIcon' => $expandedIcon), array('ontoggle'=>'alert("Has cambiado la rama Programación");'));

Con esta línea generamos un nodo nuevo. Y ahora vemos cómo vincularlo con el nodo generado antes:

$nodo1->addItem($nodo1_1);

Podemos crear nodos y subnodos, añadiendo nuevos nodos en los anteriores, en tantos niveles de profundidad como deseemos.

4.- Indicar eventos en los nodos, con el segundo parámetro del constructor del nodo. Existen tres eventos personalizados del árbol:

onexpand: Se desata cuando el usuario expande ese nodo para ver la rama de árbol que hay dentro.
oncollapse: Se desata cuando el usuario contrae un nodo, ocultando la rama que hay debajo de él.
ontoggle: Se desata cuando un usuario altera un nodo, ya sea para expandirlo o contraerlo.

Los eventos se pueden definir si queremos ejecutar acciones Javascript cuando el usuario opera sobre el árbol, pero son totalmente opcionales. Veamos un ejemplo sencillo en el que mostramos cómo hacer eventos en el árbol:

$nodo1_1 = new HTML_TreeNode(array('text'=>'Programación','link'=>'http://www.desarrolloweb.com/directorio/programacion', 'icon' => $icon, 'expandedIcon' => $expandedIcon), array('ontoggle'=>'alert("Has cambiado la rama Programación");'));

En este caso hemos indicado el segundo parámetro del constructor de nodos, en el que hemos escrito un evento "ontoggle", para mostrar un mensaje, tanto cuando se contrae como cuando se expande la rama.

Ahora veremos un caso en el que especificamos los otros dos eventos disponibles en el árbol:

$nodo1_1_3 = new HTML_TreeNode(array('text'=>'PHP','link'=>'http://www.desarrolloweb.com/directorio/programacion/php/', 'icon' => $icon, 'expandedIcon' => $expandedIcon), array('onexpand'=>'alert("Has expandido la rama PHP");', 'oncollapse'=>'alert("Has cerrado la rama PHP");'));

5.- Crear la presentación del árbol, en formato DTHML, tal como lo queremos. Para ello hay que realizar la instanciación de un nuevo objeto de la clase HTML_TreeMenu_DHTML.

$treeMenu = new HTML_TreeMenu_DHTML($menu, array('images' => 'imagesAlt2', 'defaultClass' => 'treeMenuDefault'));

En el constructor de esta clase indicamos el menú general del árbol (objeto de la clase HTML_TreeMenu), y luego un array con diversos parámetros opcionales de configuración. En nuestro caso indicamos primero el directorio donde están las imágenes, que son las de la carpeta "imagesAlt2" del paquete de descarga, y luego la clase por defecto que tendrán todos los nodos.

6.- Incluir el script Javascript del código del árbol. Esto se hace con la típica etiqueta SCRIPT del HTML, de esta manera:

<script src="TreeMenu.js" language="JavaScript" type="text/javascript"></script>

Ojo con esta etiqueta, para que la ruta al script Javascript, atributo src, sea correcta.

7.- Imprimir el árbol en la página. Ya sólo queda mostrar la interfaz de árbol en la página, que se consigue con el método printMenu() del objeto de la clase HTML_TreeMenu_DHTML. Lo haremos colocando un código como este, en el lugar que deseemos que aparezca el árbol:

$treeMenu->printMenu();