El siguiente es un tutorial que espero sea útil para todos aquellos que alguna vez han organizado un evento/conferencia y quieren una idea novedosa para mantener informada a la audiencia en tiempo real de lo que se dice del evento.

Aprovechando algunas tecnologías como Flex, AIR y Twitter vamos a construir un cliente que permita mostrar los feeds generados por el Search API de Twitter. Esta aplicación se puede distribuir entre los asistentes no importando su plataforma: Windows, Mac o Linux; también es posible dejarla corriendo en proyectores, kioscos o pantallas LCD.

Requisitos Previos

Tener instalado Flex Builder (http://www.adobe.com/go/flex_trial)

Tener una fuente de datos basada en XML, puede ser un RSS, XML, ATOM, etc... para el ejemplo usaremos un feed generado por el Search API de Twitter:

http://search.twitter.com/search.rss?q=adobenvivo

Primera Parte - Recopilando los datos

Comenzamos creando un proyecto nuevo en Flex de escritorio (aplicación AIR), esto se logra en Flex Builder con el comando File > New > Flex Project

Le damos un nombre al proyecto (p.ej TwitterReader)

En el archivo principal TwitterReader.mxml vamos a usar un componente llamado HTTPService para cargar los datos, así mismo vamos a agregarle unas cuantas propiedades al componente principal WindowedApplication el código base queda de la siguiente manera:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute" themeColor="#d8d8d8" 
	width="250" height="670" 
	horizontalScrollPolicy="off" verticalScrollPolicy="off"
	horizontalGap="0" verticalGap="0">
 
	<mx:HTTPService id="AEVdata" url="http://search.twitter.com/search.rss?q=adobeenvivo"  />
 
</mx:WindowedApplication>

Las propiedades aplicadas al componente WindowedApplication permitiren ir definiendo el layout de la aplicación, un color de resaltado; así como restringir la aparición de scrollbars horizontales. El componente HTTPService necesita un id para referenciarlo y una url de donde están los datos.

Segunda Parte - Creando los Renderers

Vamos a crear una nueva carpeta debajo de src llamada renderers donde estará un componente personalizado para mostrar los datos mediante una imagen y un texto.

Lo anterior lo logramos con clic secundario sobre carpeta src > New > Folder

Después creamos el componente personalizado con el comando File > New > MXML Component

Le asignamos un nombre TwitterRenderer y nos basamos en HBox con un tamaño de 240 pixeles de ancho por 90 pixeles de alto.

Dentro de ese componente agregamos algunas propiedades y un par de componentes: Image y Text, el código queda de la siguiente manera:

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" 
	width="240" height="90" fontSize="9" 
	horizontalAlign="center" verticalAlign="middle" 
	horizontalScrollPolicy="off" verticalScrollPolicy="off">
 
	<mx:Image width="50" height="50" source="{data.content.url}" 
		toolTip="{data.author}" buttonMode="true" 
		click="navigateToURL(new URLRequest(data.guid));" />
 
	<mx:Text width="150" text="{data.title}"  />	
 
</mx:HBox>

La mayoría de las propiedades son para definir tamaño de tipografías, layout y comportamiento de scrollbars. Las propiedades que estan envueltas entre { } y contienen data, hacen referencia continua (bindings) a los datos que cargaremos en el componente, que vienen del modelo de datos que plantea el RSS. Hay un evento click asociado al componente Image que nos llevará al status de ese mensaje.

Tercera Parte - Integración del Componente

Para integrar el componente personalizado que creamos, solo hace falta ir de nuevo a la aplicaicón principal TwitterReader.mxml y utilizarlo como itemRenderer dentro de cualquier componente basado en lista que permita mostrar datos, en el ejemplo utilizaremos un TileList también agregamos una propiedad para mostrar el relojito al cargar datos en HTTPService llamada showBusyCursor.

 <?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute" themeColor="#d8d8d8" 
	width="250" height="670" horizontalScrollPolicy="off"
	horizontalGap="0" verticalGap="0">
 
	<mx:HTTPService id="AEVdata" url="http://search.twitter.com/search.rss?q=adobeenvivo" 
		showBusyCursor="true" />
 
	<mx:TileList id="ARVtile" 
		dataProvider="{AEVdata.lastResult.rss.channel.item}"
		width="100%" height="100%"
		itemRenderer="renderers.TwitterRenderer"
		alternatingItemColors="[#cccccc, #dadada]" />
 
</mx:WindowedApplication>

Cuarta Parte - Lógica de la Aplicación mediante ActionScript 3

Para la última parte del “desarrollo” de la aplicación es necesario programar un poco, mediante ActionScript 3, recuerden que lo que hacemos en Flex es describir la estructura de la aplicación mediante MXML y programar la lógica de negocio con ActionScript 3. Incorporamos un bloque de código y un evento creationComplete a la aplicación principal y con esto último terminamos la aplicación.

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" 
	creationComplete="init()" layout="absolute" themeColor="#d8d8d8" 
	width="250" height="670" horizontalScrollPolicy="off"
	horizontalGap="0" verticalGap="0">
 
	<mx:Script>
		import flash.net.*;
		import flash.utils.Timer;
 
		private function init():void
		{   
			AEVdata.send();
			var delay:uint = 100000;
			var myTimer:Timer = new Timer(delay);
			myTimer.start(); 
			myTimer.addEventListener(TimerEvent.TIMER, timerHandler);
		}
 
		private function timerHandler(e:TimerEvent):void{
			AEVdata.send();
		}
 
	</mx:Script>
 
	<mx:HTTPService id="AEVdata" url="http://search.twitter.com/search.rss?q=adobeenvivo" 
		showBusyCursor="true" />
 
	<mx:TileList id="ARVtile" 
		dataProvider="{AEVdata.lastResult.rss.channel.item}"
		width="100%" height="100%"
		itemRenderer="renderers.TwitterRenderer"
		alternatingItemColors="[#cccccc, #dadada]" />
 
</mx:WindowedApplication>

La función init() manda llamar los datos del componente HTTPService y crea un Timer (temporizador) que en combinación con la función timeHandler() pedirá los datos cada 100 segundos, este valor lo establecemos con la variable delay que esta en milisegundos.

Parte Final - Empaquetamiento de la aplicación AIR

Hemos llegado al final del tutorial, solamente hace falta un último paso antes de tener un archivo .air totalmente multiplataforma, hay que utilizar el comando Project > Export Release Build

Aparecerá un asistente muy fácil de seguir el cuál nos pedirá algunos datos de la aplicación, así como un certificado, si no contamos con uno desde el mismo asistente podemos crearlo.

Para ver la aplicación final pueden descargarla del post anterior

Espero que les haya gustado el tutorial y cualquier duda pueden dejarme un comentario en este post o buscarme en Twitter como @edgarparada