Tutorial de XML en Flash

Introducción

XML se convirtió con éxito en el estándar de las comunicaciones por Internet; lo que antes se transmitía en formatos propietarios ahora es fácilmente interoperable gracias al lenguaje XML.
XML esta presente en forma de sitio web cuando descargamos una pagina que cumpla con los estándares (XHTML) o cuando usamos un servicio web, como Google API o el traductor Babelfish de Altavista, por debajo esas aplicaciones se comunican con otras por medio de XML; inclusive la ultima versión de la suite de Microsoft, Office 2003, usa XML (Aunque no el estándar, sino uno creado por ellos mismos) para el formato de sus documentos de Word, Excel y demás.
Este tutorial espera cubrir la introducción a los conceptos de XML y su manejo en Flash MX 2004.

Requerimientos

Conocimientos previos de programación
Manejo básico de Flash MX 2004
Este tutorial fue hecho con " Macromedia Flash MX 2004 Professional" y en ese formato se incluyen los ejemplos y demás archivos.
Conocimientos de HTML, de preferencia (Pero no obligatoria) saber XHTML

Nota: Para aquellos que ya conozcan del lenguaje XML y sepan sus ventajas y fundamentos o quienes quieres directamente entrar al tema, pueden iniciar el tutorial sin ningún problema desde "Cargando XML dentro de Flash".
Si eres principiante en XML y quieres saber que es y como se aplica en las comunicaciones en Internet y con Flash, es recomendable que leas todo el tutorial.

Índice

¿Que es XML?
Que ventajas conlleva trabajar con XML; XML vs. LoadVars
Cargando XML dentro de Flash

¿Que es XML?

XML o eXtensible Markup Language (Lenguaje extensivo de etiquetas), es un lenguaje basado en las mismas teorías de HTML, con etiquetas que abren y cierran y un contenido en ellas, estas etiquetas pueden tener atributos especiales que las diferencien de otras etc!.
¿Que es lo que diferencia a XML de HTML?, ¿Para que usar XML si ya HTML existe?, ¿Mis paginas web se verán mejor en XML que en HTML?.
La respuesta a esas preguntas es simple, HTML solo tiene que ver con XML en cuanto a sintaxis se refiere, porque ambos están pensados para cosas distintas; HTML es un lenguaje de modelado de documentos pensado para mostrar paginas web en un navegador sea cual sea, en cambio, XML es un lenguaje de transferencia de información, pensado para crear una sintaxis única que pudiera usar cualquier programa para leer archivos de otro, y que fuera estándar.
No podrás crear paginas web con XML, aunque XHTML es una derivación de XML y con el si puedes, ya que, combinado con CSS, crea paginas web usando la misma teoría de HTML, pero en vez de colocar cualquier etiqueta de apariencia gráfica (Colores, fuentes) dentro del archivo .html, lo hacen 100% en CSS; una prueba de una pagina así es la misma Cristalab :D.
En síntesis XML nos sirve para cualquier tipo de transferencia de datos que queramos hacer, sobre todo si estamos conectando bases de datos entre varias aplicaciones; por ejemplo, una base de datos de revistas; puedo pasarle a Flash un XML con los datos registrados en mi base de datos de una revista cualquiera, así:

<revista>
    <codigo>0220357</codigo>
    <nombre>Revista Dinero</nombre>
    <titulo>La promesa de las instituciones globales</titulo>
    <precio>5200</precio>
    <numero>12</numero>
</revista>

Hay una etiqueta madre de todas llamada "revista", dentro de esta etiqueta encontramos otras que componen la descripción básica de nuestra revista, como un código interno, el nombre de la revista, el titulo principal, el precio y el numero de esa edición; estos datos son fáciles de leer y manejar para nosotros; sabemos bien donde empieza y donde termina el código por sus etiquetas de apertura y de cierre, además usamos nuestro propio lenguaje para definir las etiquetas.
Si miráramos este ejemplo en forma de un árbol, quedaría de la siguiente manera:

Siendo la raíz la etiqueta "Revista" y todas sus subetiquetas internas se convierten en nodos; la información de cada etiqueta es simplemente información de un nodo.

Que ventajas conlleva trabajar con XML; XML vs. LoadVars

Esta es una de las preguntas del examen de certificación "Flash MX 2004 Developer", que cobra especial importancia al decidirnos por que tipo de objeto usaremos al conectarnos con fuentes externas de datos desde Flash.
Para los que hayan leído el tutorial completo del objeto LoadVars, habrán notado su simpleza en la composición de los archivos, su fácil manejo y su rápida adaptación a un proyecto, manejando otros lenguajes intermedios como ASP o PHP para conexiones a bases de datos, el problema viene cuando queremos comunicar datos complejos o datos estructurados (Verbosity Data), para estos casos, XML es la solución.

LoadVars es el objeto adecuado cuando los datos que queremos cargar son simples y no tienen mayor estructuración; por ejemplo, si queremos que en el home de nuestra web aparezca en Flash una "frase del día" de una base de datos de frases será mucho mas conveniente el uso de LoadVars, ya que es solo un dato que cargaríamos fácilmente; sí en cambio, necesitamos obtener todos los datos de un usuario para una pagina de "Perfil del usuario", que requiera la foto del usuario, el nombre, la contraseña, algunos datos personales, etc!, nos será difícil poder definir esto en un archivo de texto simple, mientras que con XML y su forma de organizarlo todo en forma de árbol (como vimos arriba) seria muy sencillo lograrlo; a esto es a lo que se le conoce como datos estructurados o "Verbosity Data".

Así que si queremos hacer una transferencia de datos considerable (como al conectarnos con una base de datos) lo mejor siempre será usar XML y delegar a LoadVars para los envíos de formularios y otro tipo de cosas mucho mas sencillas (Para mas información ver este tutorial).

Cargando XML dentro de Flash

Entrando en materia, Flash usa dentro de ActionScript el objeto XML para la carga de este tipo de archivos, sus métodos de carga son similares a los del objeto Loadvars.
Cargaremos un XML dentro de Flash y haremos que aparezca en campos de texto separados.

Tendremos dos archivos, uno llamado XMLBase.fla que será nuestra película y otro llamado texto.xml que son los datos que cargaremos a Flash.
Este debe ser el contenido de texto.xml:

<mensaje>
    <asunto>Aviso de suspensión</asunto>
    <correo>[email protected]</correo>
    <cuerpo>Su servicio sera suspendido a partir de la fecha</cuerpo>
    <remitente>[email protected]</remitente>
</mensaje>

Como ven, nuestro XML da apariencia de que sera un mensaje de correo electrónico guardado que luego cargaremos a Flash, para, por ejemplo, colocar dentro de una aplicación de correo.

Ahora, una pequeña explicación de XML; como pudieron ver en el árbol de arriba, los objetos XML se organizan desde una raíz y a partir de ella debemos acceder; cuando creamos un objeto XML, este será siempre la raíz del árbol y por medio de sus propiedades y métodos accederemos a las ramas inferiores.
Tomando como punto de partida el XML de este ejemplo, así seria su relación con un objeto XML:

Explicación gráfica del objeto XML relacionado con un archivo XML

La raíz siempre será el objeto XML, tiene una propiedad para acceder dentro de el llamada firstChild (Primer Hijo), esta nos devuelve la primera raíz del objeto, ya que un objeto XML puede tener varias (aunque no es ni común ni recomendado); en nuestro caso nos devolverá todo el árbol que cuelga de <mensaje>.
El árbol mensaje tiene 4 ramas, estas son colocadas en un Array (O Matriz) llamado childNodes (Nodos hijos), que viene indexado desde cero como se ve en la gráfica. Cada una de estas ramas es otro objeto XML, pero es mas conveniente llamarlo un XMLNode (Nodo XML), aunque tiene las mismas propiedades y métodos de un objeto XML.
Cuando accedemos a uno de los objetos del array de ramas, encontraremos que al igual que al principio podemos acceder a su raíz por medio de firstChild.
Lo que nos interesa es el contenido de ese nodo, podemos conocerlo por medio de su propiedad nodeValue (Valor del nodo).
Si el nombre de nuestro objeto XML fuera objXML, el código para saber el valor de la rama <ASUNTO> seria:

var valor = objXML.firstChild.childNodes[0].firstChild.nodeValue;
trace(valor);

Lo que mostraría en pantalla, si nuestro archivo fuera el XML de arriba, "Aviso de suspensión"

Ahora haremos la interfaz de Flash que constara de :

Un campo de texto de tipo TextInput (El componente) llamado destino_txt
Un campo de texto de tipo TextInput llamado asunto_txt
Un campo de texto de tipo TextInput llamado remitente_txt
Un campo de texto de tipo TextArea llamado cuerpo_txt
Un campo de texto de tipo Dynamic Text llamado mensaje_txt

Cuya apariencia quedara similar a esta:

Al dar click sobre el botón"CARGARxml", nuestro código deberá abrir y mostrar en pantalla los datos del XML seccionados en cada uno de los campos de texto. Asi, al dar click sobre el botón se llamara a una función que cargue el XML. Este es el código que debe ir en el botón:

on (release) {
    //Llamamos a la función de carga del archivo XML
    cargarXML();
}

Ahora, en el primer keyFrame colocaremos el siguiente código:

//Declara la variable "obj_xml" como un objeto XML
var obj_xml:XML = new XML();
/*Esta linea es EXTREMADAMENTE necesaria
  Es la que nos permite colocar espacios entre etiquetas
  Sin ella, tendriamos que mantener completamentepegado nuestro XML
  Y se parsearia mal dentro de Flash
*/
obj_xml.ignoreWhite = true;
//Función que se ejecuta en el momento en el que Flash cargue el XML
obj_xml.onLoad = function(exito) {
	//La variable exito sera "true" si se cargo bien y "false" si hubo
	//algun error
	if (exito) {
		//Le asigna al campo del asunto la primera rama del árbol, como veran la #0
		asunto_txt.text = obj_xml.firstChild.childNodes[0].firstChild.nodeValue;
		//Asigna al campo de destino el valor de la segunda rama, la #1
		destino_txt.text = obj_xml.firstChild.childNodes[1].firstChild.nodeValue;
		//Asigna al campo de cuerpo el valor de la tercera rama, la #2
		cuerpo_txt.text = obj_xml.firstChild.childNodes[2].firstChild.nodeValue;
		//Asigna al campo remitente el valor de la cuarta rama, la #3
		remitente_txt.text = obj_xml.firstChild.childNodes[3].firstChild.nodeValue;
	} else {
		//Muestra un mensaje de error en caso de que algo fallara
		cuerpo_txt.text = "Error";
	}
};
//Esta es la función que llama el botón
function cargarXML() {
	//Invoca a la función "load" del objeto XML, pasandole por parametro
	//La ruta de nuestro archivo XML
	obj_xml.load("texto.xml");
}

Solo basta dar click al botón"CARGARxml" y veremos como Flash nos muestra de la manera en que lo programamos, los datos de nuestro archivo XML:

Resultado Final después de dar click al botón

Conclusión

Cargamos a un nivel básico un XML dentro de Flash, que podemos utilizar para mas cosas, no solo para colocar datos en campos de texto; también para cargar datos de configuración, variables de entorno, datos de bases de datos y un sinfín de situaciones que solo XML puede hacer realidad.
Cualquier pregunta referente a XML puedes dirigirla al foro

Freddie® Cristalab
[email protected]

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo