sacándole provecho a los xmls

xml y sus hijos

Si se fijan el xml viene organizado en nodos, estos nodos pueden tener a su vez nodos dentro, conocidos como nodos hijos, la cantidad de estos puede ser obtenida preguntando el largo de estos (childNodes.length), y pues al tener este valor es más que una pista de que podemos tratar al xml casi como un array en el sentido de que podremos recorrer sus contenidos fácilmente.

para muestra un botón

voy a explicar más o menos cómo podemos hacer una pequeña galería de elementos ( productos en este caso ), con los clásicos botones de anterior y siguientes. cargaremos un xml dentro de flash y lo usaremos como "base de datos", en el sentido de que lo dejaremos integro a como flash lo carga y lo usaremos para obtener la información que nos vayan pidiendo los botones.

actores

la gente que va a participar en este ejemplo es:

• el xml
• el objeto xml en flash
• una caja de texto como display
• dos botones

parece simple?, pues lo es =).

logística

cargaremos el xml, mostraremos el primer registro, configuraremos los botones cada registro que mostremos, asi cuando lleguemos al final del recorrido del xml no se mostrará el botón siguiente, y asi mismo no se mostrará el botón anterior cuando estemos en el primer item, es decir estos botones tendrán de prenderse/apagarse. Iremos recorriendo el xml ayudados por un sóla variable, la que nos indica cuál es el índice actual que estamos mostrando, será utilizado por la función que setea los botones y también será usando en las funciones asociadas a los botones anterior y siguiente. se espera que cuando presionemos el botón siguiente se muestre el registro que sigue y el botón anterior pues el anterior.

el xml

el xml tiene esta forma, [code] descripción del producto uno descripción del producto dos descripción del producto tres descripción del producto cuatro descripción del producto cinco descripción del producto seis descripción del producto site descripción del producto ocho descripción del producto nueve descripción del producto diez [/code] como ven,nada del otro mundo, cada nodo hijo tiene los atributos name y valor (nótese el spanglish xD), asi mismo la descripción del producto está como valor del nodo, en este caso mi xml se llama datos.xml, pero igual le pueden poner el nombre que más les guste.

más logística

al cargar el xml el primer nodo ( productos ) contendrá el valor de la cantidad de hijos de este (diez en este caso), el primer hijo (childNode[0]) contiene el valor del producto 1 cuyo precio es de 20 unidades (las que gusten), y la descripción de este. el segundo nodo (childNode[1]), contiene la información del segundo producto y así los otros hijos. recuerden que los arreglos dentro de flash son base-cero, es decir que el primer elemento es el elemento cero no el uno ( por aquello de que se enrenden).

ahora, como ven los nodos son accesibles utilizando un número dentro de las llaves cuadradas ( brackets en adelante ), ahora imáginemos que envez de usar numeros en sí, usamos una variable con este valor.
digamos si esta variable tiene el valor 2 (variable current para el ejemplo), podremos preguntar por los datos dentro del xml del hijo que esté en el campo cuyo valor sea igual al valor de la variable, es decir 2 en este caso.
para los que leyeron lo anterior como tres veces ahi les va de otra forma.

esto
[code]
xml.firstChild.childNodes[2]
[/code]
contiene la información del nodo con índice 2.

ahora con esto otro:
[code]
var current = 2;
xml.firstChild.childNodes[current]
[/code]
podremos acceder a los valores del hijo del xml que se encuentre en el índice cuyo valor sea igual al de la variable.( lo mismo que dije antes xD)

así si le cambiamos el valor a esta variable y preguntamos por esta informacion obtendremos el valor de ese nodo.

si no le entienden, pues sigan leyendo.

flash

en flash ponemos en el escenario una caja de texto del tipo multilínea, con el html habilitado y con nombre de instandia display, también pondremos dos botones uno con nombre de instancia prev, y otro con nombre de instancia next.

código

en la capa de código ( es buena costumbre usar capas separadas para símbolos y código, sabes?), pondremos lo siguiente (el código lo explico más adelante). [code] //variables iniciales. //indice actual. var current; //total de items var total = 0; //oculta los botones. function hideBtns(){ next._visible = prev._visible = false; } // revisa los botones. function setBtns (){ hideBtns(); //hay siguiente if(current + 1 < total){ next._visible = true; } //hay anteriores if(current > 0){ prev._visible = true; } } //muestra el siguiente function showNext(){ showItem(current + 1); } //muestra el previo function showPrev(){ showItem(current -1); } //asigna las funciones a los botones. next.onRelease = showNext; prev.onRelease = showPrev; //muestra un item del xml function showItem(id){ var nd = datos.firstChild.childNodes[id]; var output = ""; output += "nombre:" + nd.attributes.name + "
"; output += "precio: $" + nd.attributes.valor + "
"; output += "detalle:
" + nd.firstChild.nodeValue; display.htmlText = output; current = id; setBtns(); } //xml. datos = new XML(); datos.ignoreWhite = true; datos.onLoad = function (s){ if(s){ //asigna el valor a total según cantidad de hijos. total = this.firstChild.childNodes.length; //muestra el primer item showItem(0); }else{ display.text = "Error al cargar la info"; } } //carga la info datos.load('datos.xml'); stop(); [/code]

Definición de variables

la variable current tendrá el valor actual de índice que se está desplegando. la variable total, tendrá la información de la cantidad de nodos que tiene el xml, se declara en cero pero cuando tengamos cargado el xml sabremos cuando nodos tiene este y le asignaremos este valor a la variable.

funciones

hideBtns

Simplemente oculta los botones anterior y siguiente.

setBtns

Esta hace lo siguiente: si hay un nodo después del que está siendo desplegado no se muestra, este dato lo obtenemos calculando current + 1 y si el valor es menor a la cantidad total de nodos, de haber siguiente mostramos el botón next. por otro lado mostraremos el botón anterior simpre y cuando no estemos mostrando el primero nodo, es decir, cuando current sea mayor a cero. al iniciar la función lo que hacemos es ocultar ambos botones y prender o mostrar los botones que pasen la prueba.

showNext y showPrev

Llaman a la función principal, pasando un argumento a esta, showNext le pide a la funcion que muestre el registro siguiente (current + 1 ), mientras que showPrev muestra el anterior ( si, current -1 ); en las siguiente líneas sólo asignamos las funciones a los botones, las dejé por aparte por si se dá el caso de que se ocupen en otro lugar.

showItem

Esta función recibe un valor como argumento (id) con este valos lo que hacemos es buscar el nodo al cual corresponde y asignarlo a una variable( todo el nodo, variable nd). seguido a esto definimos una variable output que es a la que le iremos asignando los valores que obtenngamos del nodo, las siguientes tres lineas demuestran eso. luego de esto, asignamos el valor de output al campo de texto, y así mostramos la información del nodo. cambiamos el valor de current por el del argumento id, con lo que sabremos que nodo se está mostrando o más bien, por cuál indice del xml vamos. paso seguido llamamos a la función setBtns para que nos revise los botones.

al final vemos al creación del objeto xml, le decimos que ignore los espacios en blanco y qué tiene que hacer cuando se cargue la información: lo primero asignar a la variable total la cantidad del número de nodos del xml, y para terminar mostrar el item cero ( el primero )

Conclusión

Hay muchos usos para el cada día más popular xml, si queremos nos podemos complicar utilizándolo, o también podemos hacer aplicaciones que funcionen de manera sencilla como esta. debido a la simpleza del tema, pues no hay archivos para bajar =D