unijimpe

Como comentabamos hace poco en JSON con Mootools, JSON es un formato para intercambio de datos que a diferencia de XML es mucho mas ligero pues se transmite la información como un objeto Javascript. En esta oportunidad veremos como utilizar JSON con Flash.

[SWF]http://blog.unijimpe.net/wp-content/uploads/2008/08/json-final.swf, 450, 400 [/SWF]

Obteniendo los Datos
Los datos en formato JSON para nuestro ejemplo lo obtendremos del servicio Google Ajax Search API del cual hemos comentado en un post anterior, para ello creamos un proxy el cual se encargará de hacer el cambio de dominio para poder acceder a esta información.

$apiQue = "Google"; // variable a consultar
$apiKey = "tu_key_google"; // key para acceder al servicio
$apiUrl = "http://ajax.googleapis.com/ajax/services/search/web";
if (isset($_GET['query'])){
   $apiQue = urlencode($_GET['query']);
}
readfile($apiUrl."?v=1.0&key=".$apiKey."&q=".$apiQue);

Utilizando JSON con ActionScript 3
Por defecto Flash no puede interpretar JSON, pero para ello utilizaremos la librería as3corelib el cual contiene una gran variedad de clases para extender la funcionalidades del AS3 entre ellas un parser de JSON. Entonces descargamos los archivos y utilizamos las clase ubicadas en la carpeta com.

En nuestro archivo fla lo primero que hacemos es importar las clases necesarias para el funcionamiento de nuestro script.

[as]
import com.adobe.serialization.json.*;
[/as]

Lo siguiente es leer el archivo que contiene la respuesta en JSON del servidor, esto lo hacemos con la clase URLLoader, luego agregamos un listener para detectar que se ha completado la carga para luego ejecutar la función decodeJSON.

[as]
var loader:URLLoader = new URLLoader() ;
var request:URLRequest = new URLRequest() ;
request.url = «proxy.php?query=unijimpe»;
loader.load(request) ;
loader.addEventListener(Event.COMPLETE, decodeJSON) ;
[/as]

Luego definimos al función decodeJSON, la cual se ejecutará inmediatamente después de completarse la carga de los datos, aquí utilizamos el método JSON.decode el cual se encarga de convertir el texto en formato JSON a un objeto que sera fácilmente manipulable con ActionScript.

[as]
function decodeJSON(event:Event):void {
var loader:URLLoader = URLLoader(event.target);
var data:Object = JSON.decode(loader.data);
var results = data.responseData.results;
for (var i=0; i » + tmp.title + «\n» + tmp.url);
}
}
[/as]

Unimos estos elementos y tenemos un parser de JSON de manera sencilla, como podemos ver lo que se hace es convertir el texto cargado en un objeto que es muy fácil de manipular en Flash.

Completando nuestra aplicación
En el ejemplo anterior, solo hemos trazado los resultados, es momento de agregar un campo de texto para ingresar el criterio de búsqueda y otro campo de texto para mostrar los resultados, con lo cual obtenemos el siguiente código.

[as]
import com.adobe.serialization.json.*;

var vPath:String = «proxy.php?query=»;
var vRequ:URLRequest = new URLRequest();
var vLoad:URLLoader = new URLLoader();
vRequ.url = vPath+»unijimpe»;
vLoad.load(vRequ);
vLoad.addEventListener(Event.COMPLETE, onLoaded);

function onLoaded(event:Event){
var rpta:URLLoader = URLLoader(event.target);
var json:Object = JSON.decode(rpta.data);
var data:Array = json.responseData.results;
var vcon:String = «»;
for (var i:Number=0; i«+tmp.title+»«;
vcon+= «
«+tmp.content+»

«;
}
txtcontent.htmlText = vcon;
scroller.scrollTarget = txtcontent;
}

btsearch.addEventListener(MouseEvent.CLICK, onClick);
btsearch.buttonMode = true;
function onClick(e:Event) {
txtcontent.htmlText = «Loading…»;
vRequ.url = vPath+escape(txtQuery.text);
vLoad.load(vRequ);
}
[/as]

El resultado de este ejemplo lo pueden ver al inicio de este post, como se observa ingresamos el criterio de búsqueda y obtenemos el resultado deseado. Finalmente les dejo los archivos fuente de este ejemplo para que lo descarguen y puedan realizar sus pruebas.

Posts Relacionados

• Crear JSON con PHP
• Online JSON Parser
• Ranking Delicious con PHP
• JSON con PHP
• Convertir monedas con PHP y Google Finance