Cliente AIR de Twitter para monitorear Conferencias
Escrito por Revista NeoPixel Domingo, 26 de Julio de 2009 07:37
Tutorial por: Edgar Parada
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.
Espero que les haya gustado el tutorial y cualquier duda pueden dejarme un comentario en este post o buscarme en Twitter como @edgarparada
Edgar Parada,es un Adobe Certified Instructor, sus principales fortalezas son en el área Web, Multimedia y dispósitivos móviles. Sus temas favoritos son Dreamweaver, Flash Lite, Flash, Flex. Ha sido instructor en diferentes centros de entrenamiento AATC y en la DGSCA de la UNAM. Es parte del equipo de MadeInFlex y actualmente dirige Activ, un Adobe Certified Training Provider (Activ) en México.
RSS feed Comments
ia q si lo hacia en el evento enterFrame de la aplicacion flex el servidor colapsaba
hehehe eran demasiadas peticiones que hacia
muchas gracias