En el caso de AIR, es un entorno de ejecución multiplataforma para la construcción de aplicaciones RIA (Rich Internet Applications) utilizando Flash, Flex, HTML y/o AJAX, las cuales pueden usarse como aplicaciones de escritorio o móviles.

Si quieren conocer estas dos tecnologías no pueden perderse ambos talleres como parte de Aldea Digital. Los horarios son los siguientes:

Taller de Phonegap impartido por Edgar Parada (@edgarparada), Sábado 19 de Noviembre de 2pm a 4pm.

Taller de AIR para móviles impartido por Sergio Brito (@yacaFX), Domingo 20 de Noviembre de 11am a 1pm.

Nos vemos en Aldea Digital!

Y para todos aquellos que no pudieron asistir les dejamos la conferencia grabada que amabablemente Enrique Diaz @nrikediaz de Androidtitlan nos ayudo a grabar.

Y para todos aquellos interesados en la aplicación que se desarrollo en vivo (Si! tiramos código en vivo!!!) aca se las dejamos lista para usarse. Esta app consume datos remotos, hace uso del acelerometro y gestos para manipular la aplicación. Recuerden que si tienen Blackberry Playbook, iPad o iPhone también pueden compilar esta aplicación y probarla directamente en su dispositivo.

Saludos y Happy Coding!!!
by Sergio Brito aka @yacaFx

Algunos de los tópicos que se cubrirán en el evento son:
• New Features in Adobe® Flash® Builder™ 4
• Building Multi-Screen Applications with the Adobe® Flash® Platform
• Adobe® Flash® Catalyst™ for Developers
• What's New in Adobe® Flash® Builder™ 4 for Java Developers
• What's New in Adobe® Flash® Builder™ 4 for PHP Developers
• Adobe® Flash® Builder™ 4 and Adobe® ColdFusion® 9
• Creating Sexy Applications with the Adobe® Flash® Platform: Designer-Developer Workflow
• Adobe® Flash® Builder™ 4 for Adobe® Dreamweaver® Users
• Building Desktop Applications with Adobe® AIR® 2.0
• Advanced Features in Adobe® Flex®

El registro al evento no está abierto aun, pero puedes dejar tu correo electrónico en el sitio para que te notifiquen en cuanto las inscripciones estén abiertas.

Creo que esté será un muy buen evento tanto para conocer la tecnología como para aprender las nuevas características de productos nuevos.

Nos vemos en el Adobe Developer Week y... Happy Coding!!!

Sergio Brito AKA @yacaFx

Para esto AIR en su objeto "NativeApplication" dispara un par de eventos con el cual podemos darle tracking a la presencia del usuario. Dichos eventos son USER_IDLE con el cual se detecta si el usuario no esta haciendo uso de la computadora y el evento USER_PRESENT para el caso contrario. Cabe mencionar que estos eventos están a la escucha de los eventos del S.O. y por tanto no importa en ventana de las aplicaciones que se tengan abiertas este el focus. Es decir los escuchas a estos eventos se activan si estas haciendo uso o no de cualquier aplicación.

Estos eventos son nativos de AIR por lo que las aplicaciones desarrolladas para web no disponen de esta funcionalidad.

En este post te mostramos como usar estos eventos y te dejamos la app AIR para ser instalada y usada =) ** Este ejemplo fue desarrollado con Flash Builder 4 y Flex SDK 4 aunque funciona igual y sin problemas para SDK's previos como el 3.5

Comencemos detallando lo que hará esta aplicación para poder comprender mejor los eventos.

a) Esta app se compone de dos estados,
1.- Estado "Inicial" que simula la aplicación abierta
2.- Estado "Bloqueado" que simula la aplicación bloqueada.

b) Se asigna a la propiedad idleThreshold el valor del tiempo (5 segundos) que tendrá que esperar la aplicación para disparar el evento USER_IDLE a la propiedad.

c) El evento USER_IDLE se dispara después de 5 segundos de inactividad y cambiará del estado "Inicial" al estado "Bloqueado".

d) El evento USER_PRESENT se dispara al presentarse algún movimiento del puntero del mouse o al pulsar cualquier tecla. Este evento solo sucede si y solo si el evento USER_IDLE ha sido disparado y la computadora se encuentra en estado de inactividad. Al dispararse este evento se cambia del estado "Bloqueado" al estado "Inicial"

Ahora si a tirar código!!!! =)

Primero declaramos los 2 estados que necesitamos.

-----------------------------------------------------------------------------------

Ahora incluimos 2 label's que nos indicaran con texto y colores el estado activo de la aplicación.

-----------------------------------------------------------------------------------

Generamos el script para inicializar la aplicación y poder disparar los eventos

-----------------------------------------------------------------------------------

Aquí el código completo de la aplicación

-----------------------------------------------------------------------------------

Ya solo nos queda correr nuestra aplicación y probarla dejando pasar los 5 segundos que se asignaron, después de eso pruebala seleccionando otra ventana, pero sin perder de vista tu app, y espera otra vez 5 segundos =)

Espero les sirva este tuto y les dejo el AIR para instalarlo y si quieren el código fuente solo den click derecho =) y cualquier duda comentario o sugerencia ya saben, por aquí, la lista de distribución o por el twitter.

Saludos y Happy Coding!!!
Sergio Brito AKA @yacaFx

pueden encontrar una lista completa de las nuevas características y funcionalidades en Adobe Labs.

En esta nueva versión, beta 2, las mejoras que se le hicieron las podemos dividir en tres secciones: impresión mejorada desde aplicaciones AIR, soporte mejorado en las comunicaciones por socket, mejoras en los TextInput y en el soporte para IME.

Lo requerido para comenzar a utilizar esta nueva versión y probarla es que descarguen el SDK de AIR 2 Beta 2, si utilizan Flash Builder o Flex Builder deben sustituir los archivos que se encuentran en la versión de SDK que utiliza de forma predeterminada Flex Builder.

Inicialmente, en la etiqueta principal del Application Descriptor hay que modificar la versión para la cuál compilan la aplicación y utilizar, ahora "2.0beta2" -> xmlns="http://ns.adobe.com/air/application/2.0beta2".

Si por alguna razón, las aplicaciones que hayan creado con la beta 1 de AIR 2 no se ejecutan en el runtime de AIR 2 beta 2, deberán recompilarlas ahora apuntando al beta 2.

Más adelante colocaremos algunas observaciones sobre esta nueva versión.

¿Quieres estar alli?

Solo tienes que hacer un video con la tematica ¿Y para ti que es Flash?

Dicho video no debe durar mas de 10 segundos y deberas subirlo al grupo en facebook y en You Tube etiquetandolo con el texto "latinflashtour" una vez que este arriba comparte la url a travez de twitter y claro deberas agregar el tag #latinflashtour o twitername @latinflashtour y seguirnospara que podamos ver tu video!

Los ganadores seran los 5 videos más originales y la fecha limite es este viernes!!

Solo quedan 5 lugares!!!!
So... Are you in??

Latin Flash Tour MX!!!

Latin Flash Tour

Fue muy interesante el ver la calidad de desarrollos Flex/AIR a los que estamos llegando en México donde se integran diversas tecnologías: servidores de sockets, protocolos, dispositivos, etc.

Es una aplicación desarrollada por Nuxiba y lidereada en su parte tecnológica por nuestro amigo Pedro Jimenez quién es uno de los desarrolladores Flex/Flash/AS3 más fuertes que hemos tenido el gusto de conocer en nuestras reuniones.

Amablemente nos compartieron unos screenshots de la aplicación que anteriormente solo era para Windows y que ahora gracias a la combinación de Flex + AIR esta disponible para las tres plataformas: Windows, Mac y Linux. Juzguen ustedes mismos...

Panel de Administración de Centerwave antes del makeover.

Múltiples ventanas, falta de gráficas, componentes muy genéricos.

Panel de Adminstración de Centerwave después del makeover con Flex + AIR.

Pantalla única para centralizar la información, graficación con drill down sobre los datos, UI mucho más atractiva, mejor usabilidad y posibilidad de personalización para el cliente.

Agente de Usuario de Centerwave antes del makeover.

Interfaz confusa para el usuario, curva de aprendizaje poco óptima, solamente sobre plataformas windows, UI poco usable y poco atractiva.

Agente de Usuario de Centerwave después del makeover con Flex + AIR.

Notificaciones sencillas, mejor usabilidad, UX mejorada para el usuario básico y para el usuario avanzado, curva de aprendizaje eficaz y posibilidad de branding sobre la aplicación, modalidad de trabajo agent y fullscreen.

El conocimiento permite extenderse a la integración con otros servicios muy populares hoy en día: Google Maps, Flickr, Facebook, YouTube, salesforce.com, Yahoo Maps, por mencionar algunos.

El Bootcamp se realizará muy pronto y tiene un cupo limitado. Para más información les sugerimos contactar vía Twitter a @activmx o mandar un correo a info@activ.com.mx

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