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:
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.
8 comentarios
Muy bueno.
Lamento ser portador de malas noticias, de todas formas, pero en Firefox no funciona. Me temo que es porque falta el flashvars en la etiqueta embed.
Pero me gusta mucho el resultado final.
Gracias Cesar, tienes toda la razón, lo he probado en Firebird pasa lo mismo. Como dices es por el flashvars.
Luego rectificaré el src del embed a: src=\»links/links.swf?xmlfile=links/links.xml\» pues ahora mismo no puedo subirlo, pero ya he visto que funciona.
🙂
Si me permites la sugerencia, yo no cambiaría el src del embed, ya que si le pasas algo al swf por el querystring evitas que el navegador lo cachee.
Yo incluiría en la etiqueta embed lo siguiente:
flashvars=\»xmlfile=link/links.xml\»
como un modificador más de la etiqueta. Ya sá que la teoría es que si el querystring no cambia lo cachea igual, pero mi experiencia es que eso no siempre pasa.
Lo dicho, que te ha quedado estupendo, oye.
Gracias otra vez Cesar! Ya esta subido de la manera que decias. No se me ocurrio el ponerlo como otro atributo del tag. Todos los días se aprende algo nuevo ¿no?
🙂
De nada, hombre….
Pues muchas grácias majo!!
A esperar toca….
carlos , gracias x tu tiempo y ganas! increible tu sitio.
me esta pasando de que no puedo acceder a los archivos para bajarlos.
gracias
Hola maxi, Gracias por indicarmelo, ya están arreglados 🙂