Además del contenido estático y RDF, los árboles pueden obtener su contenido de una vista personalizada.
Creando una vista detallada o personalizada
Hasta ahora hemos visto dos formas de definir el contenido de un árbol. Podemos poner filas y celdas estáticas dentro de un árbol o usar una fuente de datos RDF. El primer método funciona bíen siempre y cuando solo se traten de unos pocos datos. Usar una fuente de datos es adecuado cuando hay una disponible, ya sea una proporcionada con Mozilla o una creada por nosotros mismos. En algunos casos, podemos querer guardar datos en algún otro formato o realizar operaciones en ellos. XUL provee un tercer método, el cual requiere la creación de una vista personalizada con un guión.
Este método puede ser usado para contener datos para cientos o miles de filas, que el árbol puede mostrar instantaneamente. Para ello implementamos un árbol como hasta ahora pero dejamos el elemento treechildren vacio. El siguiente ejemplo muestra como hacerlo:
<tree id="miArbol" flex="1">
<treecols>
<treecol id="colNombre" label="Nombre" flex="1"/>
<treecol id="colFecha" label="Fecha" flex="1"/>
</treecols>
<treechildren/>
</tree>
Para asignar datos y que sean mostrados en el árbol, debemos crear un objecto guión que será usado para indicar que valor toma cada celda, el número total de filas y alguna otra información adicional. El objeto de guión estará asignado al árbol. El árbol llamará a los métodos del objeto para obtener la información que necesita mostrar.
El objeto guión, llamado vista de árbol, soporta más o menos treinta métodos que puedes implementar para suministrar información acerca de los contenidos del árbol y su apariencia, pero solo tendremos que implementar una pequeña parte de ellos. Algunos métodos que deberemos implementar son:
* rowCount
Esta propiedad deberá contener el número de líneas que queremos mostrar en el árbol.
* getCellText( fila, columna )
Este método devuelve el contenido de una celda, especificada mediante los paramentros ‘fila’ y ‘columna’. Será llamada para mostrar los datos de cada celda. Las filas pasadas como paramentro es un número contando desde 0. Las columnas en cambio son los valores del atributo id definido en las columnas del árbol.
* setTree( arbol )
Este método es llamado una sola vez para vincular el elemento árbol con la vista. Esto nos permite utilizar la misma vista con distintos árboles.
Aquí mostramos un ejemplo de como definir el objeto, el cual puede tener el nombre que deseemos.
var vistaArbol = {
rowCount : 10000,
getCellText : function(fila, columna) {
if (columna=="colNombre") return "Fila "+row;
else return "18 de Febrero";
},
setTree: function(arbol){ this.treebox=arbol; },
isContainer: function(fila){ return false; },
isSeparator: function(fila){ return false; },
isSorted: function(fila){ return false; },
getLevel: function(fila){ return 0; },
getImageSrc: function(fila,columna){ return null; },
getRowProperties: function(fila,props){},
getCellProperties: function(fila,columna,props){},
getColumnProperties: function(idColumna,columna,props){}
};
Las funciones de este ejemplo que no han sido descritas anteriormente, no necesitan realizar ninguna acción, pero si deben estar declaradas, ya que el árbol las llamará para intentar conseguir información adicional.
Este ejemplo puede usarse para mostrar un arbol con 10.000 filas. El contenido de las celdas en la primera columna contendrán el texto ‘Fila X’, donde X es el número de fila. En la segunda columna todas las celdas contendrán el texto con la fecha ‘18 de Febrero’. La condición if de la función getCellText() compara el parametro columna con el texto ‘colNombre’. Este texto corresponde al id de la primera columna en la definición del árbol del ejemplo anterior. Por supuesto que este ejemplo es muy simple, en realidad deberíamos tener datos mucho más complejos en cada celda.
El último paso es asociar el objeto vista con el árbol. El árbol tiene una propiedad llamada view, la cual puede ser asignada al objeto vista declarado anteriormente. Podremos asignarle un valor a esta propiedad en cualquier momento para poner o cambiar una vista.
function ponerVista() {
document.getElementById('miArbol').view = vistaArbol;
}
A continuación se incluye el ejemplo completo. Un guión incrustado ha sido usado aquí para simplificar el ejemplo. No obstante, normalmente pondremos los guiones en ficheros separados.
Ejemplo 7.6.1
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window title="Ejemplo de árbol" id="ventana-arbol"
xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
onload="ponerVista();">
<script>
var vistaArbol = {
rowCount : 10000,
getCellText : function(fila, columna) {
if (columna=="colNombre") return "Fila "+row;
else return "18 de Febrero";
},
setTree: function(arbol){ this.treebox=arbol; },
isContainer: function(fila){ return false; },
isSeparator: function(fila){ return false; },
isSorted: function(fila){ return false; },
getLevel: function(fila){ return 0; },
getImageSrc: function(fila,columna){ return null; },
getRowProperties: function(fila,props){},
getCellProperties: function(fila,columna,props){},
getColumnProperties: function(idColumna,columna,props){}
};
function ponerVista() {
document.getElementById('miArbol').view = vistaArbol;
}
</script>
<tree id="miArbol" flex="1">
<treecols>
<treecol id="colNombre" label="Nombre" flex="1"/>
<treecol id="colFecha" label="Fecha" flex="1"/>
</treecols>
<treechildren/>
</tree>
</window>
En la imagen, podemos ver dos columnas, cada una con datos generados por la función getCellText(). La función ponerVista() ha sido llamada en el gestor de eventos onload de la ventana. Tambíen hubieramos podido definir la vista más tarde si hubieramos querido. Podemos cambiar la vista en cualquier momento.
Cabe especial mención que la función getCellText solo es llamada cuando es necesario para mostrar los contenidos. En el ejemplo anterior de 10.000 filas, getCellText solo es llamada para las celdas que se están mostrando actualmente. Cuando el usuario se desplaze por el árbol se irá llamando para las celdas que se pongan a la vista. Esto hace que el árbol sea mucho más eficiente.
Tambíen podemos usar el objeto vista para árboles sin una vista personalizada. Por ejemplo, árboles construidos desde datos RDF tendrán un objeto vista que cogerá información de la fuente de datos RDF. Podemos usar el objeto vista para obtener información acerca de los datos mostrados por el árbol.
El interfaz nsiTreeView (inglés) lista todas la propiedades y métodos que podemos implementar para las vistas de árbol.
Siguiente, descubriremos como usar los comandos.
NdT. según un comentario del tutorial del 5/3/05, el parametro Columna de la función getCellText() ya no es un string en las últimas versiones, sino un nsITreeColumn, el cual podemos obtener a través de columns.getNamedColumn(string)
Categorías
links interwikis