Aquí veremos más características de los árboles.
Árboles jerárquicos
El elemento tree también puede utilizarse para crear listas jerárquicas, similares a las encontradas en un administrador de archivos o a una lista de marcadores de un navegador. Para lograr esto deben realizarse dos cosas:
Primero debe marcarse como contenedor al elemento treeitem que contenga hijos, esto se consigue agregándole el atributo container (contenedor) de la siguiente manera:
<treeitem container="true"/>
Esto permite al usuario hacer doble-clic sobre el árbol para expandir y contraer las filas internas. Puede hacerse que las filas hijas sean visibles desde un principio simplemente agregando el atributo open (abierto). Cuando el usuario expanda o contraiga el árbol, éste atributo cambiará para reflejar el estado actual.
El segundo cambio a realizar es colocar el atributo primary (primario) en la primer columna. Esto provocará la aparición de un pequeño triángulo o un signo “+�? delante de las celdas en esa columna. Esto indicará que esas celdas pueden expandirse, además las filas hijas tendrán sangrado. Note que el usuario no puede ocultar la primer columna.
Cada hijo puede especificarse poniendo un elemento treechildren dentro de treeitem, si se coloca dentro de treerow no funcionará.
Puede repetirse este proceso para crear árboles profundamente anidados. En esencia, un elemento treeitem puede contener ya sea filas simples -declaradas con el elemento treerow- o una colección de filas que se declaran con el elemento treechildren.
El siguiente es un ejemplo sencillo:
Ejemplo
<tree flex="1">
<treecols>
<treecol id="nombre" label="Nombre" primary="true" flex="3"/>
<treecol id="apellido" label="Apellido" flex="7"/>
</treecols>
<treechildren>
<treeitem container="true" open="true">
<treerow>
<treecell label="Tipos"/>
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell label="Pepe"/>
<treecell label="Carpintero"/>
</treerow>
</treeitem>
<treeitem>
<treerow>
<treecell label="Lito"/>
<treecell label="Albañil"/>
</treerow>
</treeitem>
</treechildren>
</treeitem>
</treechildren>
</tree>
Esto ha creado un árbol jerárquico. Como puede verse en la imagen, un pequeño símbolo “+�? o “-�? apareció junto a la primer fila, indicando que contiene filas hijas. El usuario puede abrir o cerrar la lista hacienda doble-clic en esa fila. Note como la fila Tipos necesita solamente una columna y es un ítem de posición para sus hijos.
El elemento treeitem externo contiene un elemento treerow y un elemento treechildren, el primero crea los datos para la fila madre y el último contiene las filas hijas.
También pueden anidarse filas profundamente. Debe recordarse que hay que utilizar el atributo container en las filas que contienen filas hijas. La simple presencia de filas hijas no es suficiente indicación ya que puede haber un contenedor que no contenga hijos pero aún debe ser tratado como contenedor. Por ejemplo, un directorio sin archivos dentro debe ser tratado como contenedor aunque esté vacío.
Más sobre las columnas del árbol
Un atributo adicional que puede colocarse al árbol es enableColumnDrag (habilitar arrastre de columna, note las iniciales en mayúscula). Si se encuentra habilitado el usuario podrá arrastrar los encabezados de columna para reconfigurar el orden de las mismas,
El usuario también querrá cambiar el ancho de las columnas, esto se logra poniendo un elemento splitter (divisor) entre cada elemento treecol. Aparecerá una pequeña muesca entre cada encabezado de columna, la cual podrá ser arrastrada por el usuario para cambiar el ancho de la columna. Para esconder la muesca puede fijarse en 0 el atributo CSS max-width del divisor, a pesar de lo cual el ancho de la columna seguirá siendo modificable. La hoja de estilos globales proporciona una clase tree-splitter, la cual realiza esto.
Puede establecerse el ancho mínimo y máximo de una columna utilizando las propiedades de estilo minwidth y maxwidth en el encabezado de la columna.
La columna puede estar oculta de manera predeterminada si se coloca un atributo hidden (oculto) con el valor true. El usuario podrá escoger si ve la columna seleccionándola en el menú desplegable que se encuentra al final de la fila encabezado.
Como con todos los elementos, puede utilizarse el atributo persist (persistir) para almacenar el estado de las columnas entre sesiones. Esto es, una vez que el usuario se decide por una disposición de columnas de su agrado, esta será automáticamente almacenada para la próxima vez. Será necesario guardar un cierto número de atributos como se indica en el siguiente ejemplo:
Ejemplo
<tree enableColumnDrag="true" flex="1">
<treecols>
<treecol id="corredor" label="Corredor" flex="2" persist="width ordinal hidden"/>
<splitter class="tree-splitter"/>
<treecol id="ciudad" label="Ciudad de origen" flex="2" persist="width ordinal hidden"/>
<splitter class="tree-splitter"/>
<treecol id="horainicio" label="Hora de inicio" flex="1" persist="width ordinal hidden"/>
<splitter class="tree-splitter"/>
<treecol id="horafin" label="Hora de finalización" flex="1" persist="width ordinal hidden"/>
</treecols>
<treechildren>
<treeitem>
<treerow>
<treecell label="Joshua Granville"/>
<treecell label="Vancouver"/>
<treecell label="7:06:00"/>
<treecell label="9:10:26"/>
</treerow>
</treeitem>
<treeitem>
<treerow>
<treecell label="Robert Valhalla"/>
<treecell label="Seattle"/>
<treecell label="7:08:00"/>
<treecell label="9:15:51"/>
</treerow>
</treeitem>
</treechildren>
</tree>
En este caso deberán marcarse como persistentes tres atributos de las columnas:
- el atributo
widthpara guardar el ancho de las mismas, - el atributo
ordinalque contiene la posición de la columna, - el atributo
hiddenque indica si la columna es visible o no.