Vuelvo a la carga después de varios días sin actualizar por motivos de trabajo y personales, y es que se hace dificil encontrar tiempo para escribir algo cuando todo el mundo reclama tu tiempo.
Esta vez voy a hablar de algo que últimamente me ha llamado bastante la atención, ActionScript 3. Y es que con la renovación de su lenguaje de programación, Adobe a creado una potente plataforma para crear aplicaciones online ricas, y que me parece muy interesante aprender.
Adobe a creado un lenguaje basado en XML que al ser compilado es interpretado en un SWF, este lenguaje se llama MXML.
Este lenguaje facilita la tarea a las personas menos acostumbradas a trabajar con código, y aumenta la productividad, y junto al IDE de Adobe Flex Builder, que va ya por la versión 3, crea un entorno de alta productividad, aunque hay ocasiones en que no nos quedará más remedio que acudir al código como última instancia.
En esta ocasión vamos a ver como usar el lenguaje MXML para acceder a datos de un XML, para lo que Adobe nos provee de varias vías:
El tag Model
Hay 3 escenarios a la hora de acceder a datos XML en nuestra aplicación ActionScript:
1. Incrustar el XML directamente en nuestro SWF.
2. Tener un fichero XML en el mismo servidor que la aplicación.
3. Tener un fichero XML localizado en un servidor externo, que puede tener otro dominio (crossdomain).
Para la primera posibilidad disponemos de la etiqueta <mx:model>.
Esta etiqueta nos sirve para compilar un documento XML dentro de nuestro SWF.Generalmente esta forma no será nada util, pero es bueno saber que existe por si en alguna ocasión la necesitamos.
Compilar el XML dentro del SWF provocará que aumente el tamaño de nuestro SWF bastante y además los datos de nuestro XML serán estaticos, por lo tanto esta forma solo nos valdrá cuando sepamos que los datos no van a variar.
Vamos a ver un ejemplo.
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”manejadorViajes(viajes)” >
<mx:Model id=”viajes“>
<viajes>
<viaje>
<salida>Valencia</salida>
<destino>Barcelona</destino>
<duracion>3</duracion>
<precio>100</precio>
</viaje>
<viaje>
<salida>Vdddddd</salida>
<destino>Badsdsdsdadslona</destino>
<duracion>3</duracion>
<precio>100</precio>
</viaje>
</viajes>
</mx:Model>
<mx:Script>
<![CDATA[
private function manejadorViajes(viajes:Object):void
{
area.text = “Viaje desde ” + viajes.viaje[1].salida + “ a ”;
area.text += viajes.viaje[1].destino + “\n”;
area.text += “Duración : ” + viajes.viaje[1].duracion ;
area.text += “Precio : ” + viajes.viaje[1].precio ;
}
]]>
</mx:Script>
<mx:TextArea x=”256” y=”138” width=”176” height=”90” id=”area“/>
</mx:Application>
Como ves, hemos creado un documento XML dentro del tag model, al cual le hemos asignado “viajes” como id.
La forma de acceder a los datos del XML se llama E4X y es la forma que ha implementado Adobe para acceder a los datos XML que se basa en una notación de objetos. De esto hablaré en otro post, ya qu eme parece muy interesante.
Esta forma es muy poco flexible y realmente sirve para poco, vamosaver ahora el objeto HTTPService, que es un objeto muy potente que nos aporta la flexibilidad y funcionalidad necesaria para recuperar datos de nuestro servidor.
Usando el tag httpService :
El tag HTTPService lee dinamicamente ficheros XML., por lo tanto cada vez que ejecutemos el metodo send() del tag, el tag recuperará el ultimo XML disponible, lo que en Javascript llamariamos una llamada asincrona.
El fichero XML puede estar situado en cualquier servidor web. Cuando se llama al metodo send() se hace una petición a la URL especificada en la propiedad Url del objeto y se genera un resultado que se almacena en la propiedad lastresult del objeto HTTPService.
Esto es así ya que realmente el tag HTTPService es interpretado y convertido en un objeto HTTPService.
Vamos a ver el código necesario para hacer una peticion a un fichero XML en nuestro servidor:
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”httpViajes.send()” >
<mx:HTTPService id=”httpViajes” url=”http://localhost/viajes.xml” />
<mx:DataGrid x=”56” y=”250” width=”950” dataProvider=”{httpViajes.lastResult.viajes.viaje}” />
</mx:Application>
Como puedes ver, en el evento creationComplete de la aplicación, que se dispara una vez cargado el SWF en nuestro navegador, se llama al método send() del objeto HTTPService, el cual se baja del servidor el fichero viajes.xml y lo almacena en la variable lastresult.
Después, usamos un Datagrid para mostrar los datos del resultado y le decimos al datagrid que use como DataProvider httpViajes.lastResul.viajes.viaje, osea que obtenga los elementos viaje y los muestre por columnas. Esta es la forma E4X de acceder al documento XML, en la que ya profuncizaré más adelante.
Este es el fichero XML que he usado :
<?xml version=”1.0″ encoding=”UTF-8″?>
<viajes>
<viaje>
<salida>Valencia</salida>
<destino>Barcelona</destino>
<duracion>3</duracion>
<precio>100</precio>
</viaje>
<viaje>
<salida>sdfdsf</salida>
<destino>Barcssdfdselona</destino>
<duracion>6</duracion>
<precio>100dsfsd</precio>
</viaje>
<viaje>
<salida>Bilbao</salida>
<destino>Vayalodid</destino>
<duracion>87</duracion>
<precio>1232</precio>
</viaje>
<viaje>
<salida>Jamaica</salida>
<destino>valencia</destino>
<duracion>55</duracion>
<precio>67775</precio>
</viaje>
</viajes>
Ya tenemos nuestro XML cargado en el datagrid de nuestra aplicación, como puedes ver, este es un fichero XML estático, pero el XML podría generarse desde una base de datos usando XML, queda para otro post ver esto y además ver como recuperar XML desde código.
