Aquí hay un pequeño ejemplo de como utilizar el API de Google para búsqueda con la versión 1.0 de Adobe AIR®.

Ahora empecemos, primero lo primero.

Vamos a empezar creando los cuadros que representan cada item dentro del arbol. Creamos una clase llamada Square (por motivos de simplicidad no vamos a manejar packages):
[ftf]
public var margin:uint = 2;

protected var _txt:TextField = new TextField();
protected var _childs:uint = 0;
protected var _childsHeight:Number = 0;
protected var _childsWidth:Number = 0;
public function get childs():uint
{
return _childs;
}

public function Square($title:String)
{
_txt.autoSize = TextFieldAutoSize.LEFT;
_txt.text = $title;
_txt.addEventListener(Event.ADDED_TO_STAGE, txtAdded);
name = $title;
addChild(_txt);
super();
}
[/ftf]


Como pueden notar tenemos un TextField que es el que contendrá el título de nuestro cuadro. Un contador de hijos y dos variables que recordarán el alto y el ancho de todos los cuadros hijos. En el constructor recibimos el título que tendrá nuestro cuadro, se lo agregamos a la caja de texto una vez que la inicializamos además le ponemos ese mismo nombre a nuestro objeto para ser identificado cuando debuggeamos.

Agregamos un método draw que se encargará de, como su nombre lo dice se encarga de pintar y repintar el cuadro:

[ftf]
protected function draw():void
{
graphics.clear();
graphics.lineStyle(1,Math.random()*0xFFFFFF);
graphics.beginFill(0xCCCCCC + (Math.random()*0×444444));
var h:Number = _childsHeight+_txt.height
graphics.drawRoundRect(0,0,_childsWidth+_txt.width, h,10,10);
width = _childsWidth+_txt.width;
height = h;
dispatchEvent(new ResizeEvent(ResizeEvent.RESIZE));
}
[/ftf]
primero que nada limpiamos nuestro gráficos, no queremos tener nada ahí cuando pintemos, además este método también redibujará constantemente el Square cuando se agreguen nuevos hijos. El estilo de línea y de relleno son un random de colores claros para evitar que el texto no se vea. Obtenemos la altura que le queremos dar a nuestro cuadro en la variable h y dibujamos un cuadrado con las esquinas redondeadas pa’que se vea bonito y luego establecemos el width y el height de nuestro objeto con los valores que asignamos al dibujado y para terminar despachamos el evento RESIZE para avisar a los demás que hemos cambiado de tamaño.

Sí todo sale bien y en nuestra función principal hacemos:

addChild(new Square("Quantium"))

Veremos un cuadro redondeado con esta etiqueta.

Es importante mencionar que, como vamos autilizar un proyecto sencillo utilizando el asqueroso y poco profesional MXML nuestra clase Square debe de ser hija de UIComponent.

A continuación vamos a nuestro asqueroso mxml principal y ahí agregamos una función de inicialización donde vamos a agregar nuestra super creativa interface de busqueda:

[ftf]
protected var searchString:String;
private var indentunit:String = “\t”;
protected var txt:TextInput = new TextInput();
protected var btn:Button = new Button();
public function init():void
{
btn.label = “Buscar”;
btn.x = 310;
txt.width = 300;
txt.text = “http://www.quantium.com.mx”
btn.addEventListener(MouseEvent.CLICK, btnClick);
addChild(btn)
addChild(txt)
//search(”Insane”)
}
[/ftf]

Esto sólo agrega un botón y una caja de texto para búsqueda y suscribe al evento CLICK del botón a la función btnClick:

[ftf]
private function btnClick($evt:MouseEvent):void
{
search(txt.text);
txt.text = “Buscando …”;
txt.editable = false;
btn.removeEventListener(MouseEvent.CLICK, btnClick);
removeChild(btn);
}
[/ftf]

Esto sólo bloquea la caja de búsqueda, remueve el {porque el recolector de basura del flash player es una mierda} y llama a la función search a continuación:

[ftf]
protected function search($search:String):void
{
searchString = $search;
var service:HTTPService = new HTTPService();
//service.url = ‘http://ajax.googleapis.com/ajax/services/search/blogs’;
//service.url = ‘http://ajax.googleapis.com/ajax/services/search/video’;
//service.url = ‘http://ajax.googleapis.com/ajax/services/search/news’;
service.url = ‘http://ajax.googleapis.com/ajax/services/search/web’;
service.request.v = ‘1.0′;
service.request.q = $search;
service.resultFormat = ‘text’;
service.addEventListener(ResultEvent.RESULT, onServerResponse);
service.send();
}
[/ftf]

En esta función vamos a hacer una búsqueda en web y como pueden ver en las líneas comentadas la podríamos hacer en blogs, viedos, noticias, etc. Una vez llamado nuestro servicio se ejecutará la función onServerResponse a continuación:

[ftf]
private function onServerResponse(event:ResultEvent):void
{
try
{
removeAllChildren();
var json:Object = JSON.decode(event.result as String);
traceRecursive(json);
trace(”responseDetails :: “,json.responseDetails)
if(json.responseDetails == null)
{
trace(event.target)
}
}
catch(ignored:Error)
{
}
}
[/ftf]

Antes de continuar debes asegurarte que estás utilizando la librería para manejar objetos como json ya que este es el formato que utiliza google para responder a nuestras solicitudes.

Como pueden ver estamos llamando a la función traceRecursive, que nos servirá para revisar mejor el objeto json que nos devolvió nuestro servicio:

[ftf]
private function traceRecursive($item:*, $stack:uint = 0):void
{
var indent:String = “”;
var stack:uint = $stack+1;
for(var i:uint = 0; i < $stack; i++)
{
indent += indentunit;
}
//rot.addSquare(square);
for(var item:String in $item)
{
trace(indent,item,":",$item[item]);
traceRecursive($item[item], square, stack);
}
}
[/ftf]
Sí todo va bien, al ejecutar en modo de debuggeo tu película y hacer la búsqueda ¿O con AIR ya le podremos llamar programa? verás algo como esto:

[ftf]
responseData : [object Object]
results : [object Object],[object Object]
0 : [object Object]
cacheUrl : http://www.google.com/search?q=cache:v4CxcxWqMfoJ:www.quantium.com.mx
GsearchResultClass : GwebSearch
title : Quantium
url : http://www.quantium.com.mx/
content : QLog.
visibleUrl : www.quantium.com.mx
unescapedUrl : http://www.quantium.com.mx/
titleNoFormatting : Quantium
1 : [object Object]
cacheUrl : http://www.google.com/search?q=cache:jzDTtll_jscJ:www.quantium.com.mx
GsearchResultClass : GwebSearch
title : NERD HOT LINE | Quantium
url : http://www.quantium.com.mx/qlog/2007/12/05/nerd-hot-line/
content : Dec 5, 2007 … Recent Posts. Legend of Zelda Movie Trailer · SuDoQ beta 1 · Nacionalidad a Nietos de Españoles · Maximus Best Practices(Worst Practices) … visibleUrl : www.quantium.com.mx
unescapedUrl : http://www.quantium.com.mx/qlog/2007/12/05/nerd-hot-line/
titleNoFormatting : NERD HOT LINE | Quantium
cursor : [object Object]
pages : [object Object]
0 : [object Object]
start : 0
label : 1
estimatedResultCount : 2
moreResultsUrl : http://www.google.com/search?oe=utf8&ie=utf8&source=uds&start=0&hl=en&q=http%3A%2F%2Fwww.quantium.com.mx
currentPageIndex : 0
responseStatus : 200
[/ftf]

En esos datos tenemos un nodo en particular que no nos interesa, cursor es el que nos muestra la paginación que tienen los resultados de la búsqueda, así qeu vamos a agregar una línea a nuestro segundo bucle:

[ftf]
for(var item:String in $item)
{
if(item == “cursor”)continue
trace(indent,item,”:”,$item[item]);
traceRecursive($item[item], square, stack);
}
[/ftf]
Así evitamos mostrar estos datos.

Bueno, hasta aquí ya tenemos un objeto json que podemos mostrar en la pantalla. El proceso para hacer esto visible es muy sencillo.

En la función onServerResponse vamos a crear un Square que nos sirva de padre, el cual llevará por título la búsqueda que haya solicitado el usuario:

[ftf]
private function onServerResponse(event:ResultEvent):void
{
try
{
removeAllChildren();
var json:Object = JSON.decode(event.result as String);
var rot:Square = new Square(searchString);
addChild(rot);
traceRecursive(json,rot);
trace(”responseDetails :: “,json.responseDetails)
if(json.responseDetails == null)
{
trace(event.target)
}
}
catch(ignored:Error)
{
}
}
[/ftf]
Además, como pueden ver ahora el segundo parámetro de la función traceRecursive es un Square, vamos a hacer las modificaciones pertinentes en dicha función:

[ftf]
private function traceRecursive($item:*, $square:Square, $stack:uint = 0):void
{
var indent:String = “”;
var stack:uint = $stack+1;
for(var i:uint = 0; i < $stack; i++)
{
indent += indentunit;
}
//rot.addSquare(square);
for(var item:String in $item)
{
if(item == "cursor")continue
var content:String = $item[item].toString().indexOf("[object") == -1 ? $item[item] : "";
trace(indent,item,":",$item[item]);
var square:Square = new Square(item+"\n"+content);
$square.addSquare(square);
traceRecursive($item[item], square, stack);
}
}
[/ftf]
Cómo pueden ver a menos que no le entiendan al código o sean ciegos agregamos como segundo parámetro no opcional un Square y creamos un string que va a representar el título de nuestro cuadro, como queremos evitar los molestos [object Object][object Object] filtramos la cadena antes de pasarla al nuevo square, que será contenido por el square que le pasamos y que a su vez contendrá sus respectivos hijos.

Probamos nuestra película y ya está.

¡¡Adquiere el código fuente completo de este tutorial!!