Tutorial FLASH - Recepción de datos externos en Flash. La clase XML.

Versión Flash: MX 2004 y superiores   |   Compatible con ActionScript 1.0 y 2.0   |   Nivel: Medio   |   Hits: 181893

El formateo de datos mediante XML, se ha convertido en una solución universal, por lo tanto, la clase XML nos permite obtener incorporar datos externos a nuestra película de un modo estandarizado. En este tutorial vamos a aprender a recibir una serie de datos en formato XML, comprobar posibles errores y trasladarlos a un array para manipularlos con mayor control.

COMO HACERLO.
En nuestro ejemplo vamos a recibir datos XML con información de varios modelos de coches, para ello vamos a cargar un documento de texto con formato xml llamado coches.xml. Para mostrar el funcionamiento de la clase XML, nos valdrá este archivo, sin embargo, en proyectos reales, lo corriente es que los datos xml los recibamos desde una base de datos empleando PHP, ASP o alguna otra tecnología de servidor.

Nuestro archivo coches.xml tiene este aspecto:

<?xml version="1.0" encoding="ISO-8859-1"?>
<coches>
<coche id="1" marca="Seat" modelo="Léon" vMax="215" />
<coche id="2" marca="Renault" modelo="Clio" vMax="188" />
<coche id="3" marca="Smart" modelo="ForTwo" vMax="135" />
<coche id="5" marca="Aston Martin" modelo="DB7" vMax="340" />
<coche id="4" marca="Ford" modelo="Fiesta" vMax="190" />
</coches>

Si nos fijamos en su estructura vemos que consta de una cabecera donde incluye la codificación del documento y de un nodo principal de primer nivel llamado <coches>. Todos los documentos XML sólo pueden que un único nodo principal. Dentro de <coches> tenemos los nodos <coche> con sus atributos, que son los que realmente contienen los datos de cada coche.

Para recibir estos datos correctamente en Flash debemos incluir las sentencias en el primer fotograma:

System.useCodepage = true;
XML.prototype.ignoreWhite = true;

Con la primera línea le indicamos a Flash el sistema de códigos que debe emplear para no tener problemas con las tildes y otros caracteres especiales. En la segunda línea le indicamos que no interprete los saltos de línea de todos los futuros documentos XML como nodos vacíos.

Creamos nuestro objeto XML y definimos la función que se ejecutará una vez la carga se haya completado.

datos_xml = new XML();
datos_xml.onLoad = cargarDatos;
function cargarDatos(exito) {
// si el xml se ha cargado bien...
if (exito) {
cochesCargados = this.firstChild.childNodes;
for (var k = 0; cochesCargados[k]; k++) {
pasar_a_array(cochesCargados[k]);
}
delete cochesCargados;
delete datos_xml;
verCoches();
} else {
// aquí las sentencias en caso de error
}
}

La función cargarDatos comprueba la carga y si se ha realizado correctamente, nos transforma los datos de los nodos en un array que podemos ordenar por el criterio que deseemos. La transformación de datos la lleva a cabo, concretamente, otra función, la función pasar_a_array. En esta función extraemos los atributos de cada coche y creamos un elemento nuevo con ellos en el array coches_array que es con el que nos vamos a quedar definitivamente.

function pasar_a_array(nodo) {
var objetoCoche = new Object();
var atributos = nodo.attributes;
objetoCoche.marca = atributos.marca;
objetoCoche.modelo = atributos.modelo;
objetoCoche.vMax = Number(atributos.vMax);
objetoCoche.id = Number(atributos.id);
coches_array.push(objetoCoche);
}

Para mostrar la lista de coches en la caja de texto ejecutamos la función verCoches.

function verCoches() {
coches = "";
for (var i = 0; coches_array[i]; i++) {
coches += "<b>"+coches_array[i].marca+" "+coches_array[i].modelo+"</b> - Vel. Máx.: <b>"+coches_array[i].vMax+" km/h</b> - id: <b>"+coches_array[i].id+"</b><br>";
}
coches=coches.substring(0,coches.length-4);
}

Simplemente nos queda introducir el código de los botones para poder ordenar los datos.

En el botón "ordenar por marca":
on (release) {
coches_array.sortOn("marca");
verCoches();
}

En el botón "ordenar por velocidad":
on (release) {
coches_array.sortOn("vMax", Array.DESCENDING | Array.NUMERIC);
verCoches();
}

En el botón "ordenar por id ":
on (release) {
coches_array.sortOn("id", Array.NUMERIC);
verCoches();
}

Aquí teneis el archivo ejemplo_xml.zip del ejemplo con el código comentado.