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:

// --- No funciona con los Tree!!!
_global.styles.Tree.setStyle("backgroundColor", "none");

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:

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:

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);

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

  1. 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.

  2. 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.
    🙂

  3. 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.

  4. 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?
    🙂

  5. carlos , gracias x tu tiempo y ganas! increible tu sitio.

    me esta pasando de que no puedo acceder a los archivos para bajarlos.

    gracias

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *