Otro árbol de enlaces más…

Ayer por la noche subí­ mi árbol de enlaces (o links tree). Esta, como otras muchas, es una de esas cosillas que estaba haciendo antes del fatí­dico suceso que me llevó a estar sin portátil varias semanas. En aquel momento hice la funcionalidad básica(muy sencilla de crear por otra parte), pero no lo coloqué en la web porque en ese momento el aspecto no cuadraba nada en este blog.

Ayer por fin y buscando algo de tiempo, me puse con la adaptación a este sitio web. Debo confesar que estoy bastante contento puesto que debido a las circumstancias descubrí­ varios recursos por la red que le dieron a este links tree una serie de caracterí­sticas de ergonomí­a y usabilidad que en un principio no tení­a contempladas…

Una vez colocados los estilos básicos (fuente, color…). Me encontré con el principal problema de \’skinning\’ de este componente. No existe nada para hacer transparente al componente. Lo más normal serí­a algo del estilo a:

[sourcecode language=»javascript»]
// — No funciona con los Tree!!!
_global.styles.Tree.setStyle(«backgroundColor», «none»);
[/sourcecode]

Esto me llevo a una busqueda por al www que en este momento sigue sin dar fruto. Si alguién a conseguido hacer transparente un Tree o un Datagrid agradeceré mucho un comentario con la forma de hacerlo. Lo bueno de esta búsqueda fue el descubrir que habí­a bastante información sobre como hacer estos links trees. Algunos recursos que deberí­as tener en cuenta son:

• Darron Schall: ‘googLinks’ updated, code sample (del 6.12.2003)
• Design-nation: Tree component (del 27.12.2003)
• Nigel Pegg:Tree Customization Sample : My Links Menu (del 7.04.2004)
• NoMaster:Botones en Flash que usan la barra de status (escrito por Dasso el 16.04.2004)

Los último dos enlaces me sirvieron para darle al links tree algo más de usabilidad y que en un principio no tení­a pensada. El primero añadiendo un SharedObject para mantener el estado de los nodos del Tree (apertura y cierre) conforme el usuario navega por la web o vuelve a ella en otro momento. El segundo post aplicandolo al Tree para obtener los enlaces en la barra de estatus del navegador.

Para esto último hay que tener en cuenta que el componente Tree hereda de List, que es la que nos proporciona los eventos itemRollOver e itemRollOut, entre otros. Gracias a ellos y a Dasso 😉 podemos crear la funcionalidad. El código serí­a el siguiente, donde links_tree es el componente Tree y treeListener es el objeto que escucha y que ejecutará los métodos correspondientes cuando el Tree propage los eventos:

[sourcecode language=»javascript»]
treeListener.itemRollOver = function(evtObj)
{
if(evtObj.target.getItemAt(evtObj.index).attributes.url != undefined)
getURL(«javascript:textoStatus(‘» +
evtObj.target.getItemAt(evtObj.index).attributes.url
+ «‘)»);
}

treeListener.itemRollOut = function(evtObj)
{
if(!evtObj.target.getIsBranch(evtObj.target.getItemAt(evtObj.index)))
getURL(«javascript:textoStatus(»)»);
}

links_tree.addEventListener(«itemRollOver», treeListener);
links_tree.addEventListener(«itemRollOut», treeListener);
[/sourcecode]

Otra cosa muy interesante del post de Nigel es la posibilidad de habilitar/deshabilitar la flechita del Tree con los estilos disclosureOpenIcon y disclosureClosedIcon. Recomiendo darse una vuelta por el blog de Nigel para un montón de trucos, pues al fin y al cabo es quien hace los componentes.

Por lo demás, no hay nada novedoso que no pueda ser visto ya en los links antes citados, pero para el que quiera tener los ficheros dejo los links a continuación:

• links.as
• links.fla
• links.xml

Concluyendo. Este árbol de enlaces demuestra las posibilidades de integración de componentes v2 como el Tree con diferentes entornos web gracias a las posibilidades de cambios de estilo o \’skinning\’ y pone de manifiesto las posibilidades de usabilidad gracias a los SharedObjects para mantener el estado y a la visualización de información en la barra de estatus del navegador.