Como todo programa de escritorio normal, una aplicación AIR queda situada en la barra de tareas al ser minimizada.

Sin embargo: ¿Es posible enviarla como un icono a la bandeja de sistema? La respuesta es sí. Existen ejemplos en Flex, pero en nuestro caso, como buenos fans de Dreamweaver, utilizaremos html y JavaScript.

Nuestro código realiza básicamente lo siguiente:

- Comprueba el estado de la ventana; si está minimizada, la hace desaparecer de la barra de tareas y muestra un icono en la bandeja de sistema. En el resto de estados(normal o maximizada) no aparece el icono y la aplicación se muestra normalmente en la barra de tareas

- Además el icono tiene un menu contextual definido por nosotros que nos permite restaurar la ventana o cerrar la aplicación (nuestro icono es la T negra en fondo naranja):

Descarga los archivos de ejemplo

Antes de continuar, expliquemos brevemente cómo crear un icono de sistema y un menú

Un poco de teoría

Entendiendo el icono de sistema

En AIR, el icono de sistema está definido por shell.icon, que contiene una propiedad de tipo Array llamada bitmaps en la que se carga la imagen. La imagen puede ser gif, jpg o png, aunque se recomienda ésta última.

shell.icon.bitmaps no acepta simplemente una ruta a la imagen, sino que requiere pasarle el bitmapData de la misma. Por tanto esto no funciona:

air.Shell.shell.icon.bitmaps="imagen_de_icono.png" //mal!!!

¿Cómo obtener el bitmapData de la imagen? Podemos utilizar una instancia de Loader que una vez cargada nos proporcione esta información. Es decir:

• Creamos un loader y cargamos la imagen en el mismo
• Una vez cargada, asignamos a air.Shell.shell.icon.bitmaps el bitmapData de la imagen contenida en el loader
• Cuando air.Shell.shell.icon.bitmaps tiene un valor, el icono aparece en la bandeja. Si lo vaciamos, el icono desaparece.

Entendiendo los menus:

En AIR cada menú es una instancia de NativeMenu que contiene dentro menu items que son a su vez instancias de NativeMenuItem.
Una vez creado, el menu se adjunta al icono asociándolo al atributo “menu” de shell.icon:

air.Shell.shell.icon.menu=miMenu

Durante el código veremos como se adjuntan los items al menu.

Una vez entendidos estos dos conceptos, comenzamos con el código.

El manual, de 154 páginas está disponible tanto en version PDF como impresa (vía Amazon):

http://www.adobe.com/go/airjavascriptpocketguide

El motivo para ello es asegurarnos de que aunque haya conexión, el XML remoto está disponible (el sitio podría estar caído). Al mismo tiempo tiempo queríamos evitar una doble conexión (una para comprobar el estado y otra para leerlo). Para ello partimos de un xml local. El código realiza estos pasos:

1. Crea un dataset de Spry vacio
2. Se intenta conectar con el xml remoto: Si lo encuentra, actualiza el xml local. En caso contrario, el xml local permanece sin alterar
3. Hacemos que Spry cargue el xml local (que ya estará actualizado si el remoto estaba disponible)

El primer paso es cargar los archivo js necesarios de AIR y Spry:

[php]<script type="text/javascript" src="js/AIRAliases.js"></script>
<script src="SpryAssets/xpath.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
[/php]

A continuación comienza el bloque de script: Las primeras seis lineas crean el dataset, la conexión y definen 2 listeners para gestionar la lectura o el error en su caso; finalmente, leemos el contenido de la url:

//Creamos un dataset vacio, que cargaremos más adelante llamando a loadDataset()
var ds1 = new Spry.Data.XMLDataSet(null, "events/event",{useCache:false});
//llamamos al archivo externo
//añadimos 2 listeners para gestionar la lectura del archivo o el error de lectura
var urlRemota = new air.URLRequest("http://www.dwug.es/spry/3/events.xml");
var loader = new air.URLLoader();
loader.addEventListener(air.Event.COMPLETE, lecturaCompleta);
loader.addEventListener(air.IOErrorEvent.IO_ERROR, errorIO);
loader.load(urlRemota);

La función loadDataSet se encarga de cargar el archivo xml local:

function loadDataset(){
ds1.setURL("data/eventos.xml");
ds1.loadData();
}

La función errorIO se encarga de cambiar el texto de un div del documento a ‘offline’ y carga el dataset local (que no se ha modificado, ya que ha habido un error):

function errorIO(event){
document.getElementById('estado').innerHTML="Offline";
loadDataset();
}

La función lecturaCompleta (invocada si se ha relizado la conexión y se ha leido el xml remoto) se encarga de sobreescribir el xml local y cargar el dataset (que ahora ya estará actualizado):

function lecturaCompleta(event){
document.getElementById('estado').innerHTML="Online";
//obtenemos el contenido del xml remoto
var dataXML = event.target.data;
//buscamos el archivo local: primero su carpeta y luego el archivo
var carpetaDestino=air.File.applicationResourceDirectory.resolve("data");
var archivoDestino = carpetaDestino.resolve("eventos.xml");
//Abrimos el fileStream para poder acceder al archivo
var destinoStream = new air.FileStream();
//listener para avisar de que se ha escrito
destinoStream.addEventListener(air.Event.CLOSE, escrituraCompleta);
//Abrimos de forma asíncrona, para que lance el evento al terminar
destinoStream.openAsync(archivoDestino, air.FileMode.WRITE);
//sobreescribimos el archivo local
destinoStream.writeUTFBytes(dataXML);
//cerramos el fileStream
destinoStream.close();
}

Finalmente, la función escrituraCompleta se invoca cuando se ha terminado de sobreescribir el xml local con los datos remotos. se limita a cargar el dataset:

function escrituraCompleta(event){
loadDataset();
}

El código completo del documento puede verse en la siguiente URL:
http://www.dwug.es/spry/spry_air_online_offline.txt