Anteriormente comentabamos sobre la creación de una aplicación en Adobe AIR con una extensión para Adobe Dreamweaver CS3. Sin embargo es una forma de tantas formas. En esta oportunidad haremos uso del SDK de Adobe AIR para crear nuestro paquete .air, sin necesidad de saber ó tener instalado Flex, Dreamweaver ó Flash.

  1. Obtener Adobe AIR Runtine y Adobe AIR SDK
  2. Los archivos de nuestra aplicación
  3. Probando nuestra aplicación
  4. Creando el paquete instalador

1. Obtener Adobe AIR Runtine y Adobe AIR SDK

Empecemos descargando el runtime de Adobe AIR e instalamos.
Luego descargamos el SDK de Adobe AIR y descomprimos el paquete, tendremos la siguiente estructura:

 SDK AIR

Dentro del directorio bin colocaremos los archivos de nuestra aplicación:

2. Los archivos de nuestra Aplicación

Ahora vamos a crear un simple archivo HTML cual llamaremos index.html y un archivo de texto datos.txt (ambos archivos los colocaremos dentro del directorio bin) que contendrán el siguiente contenido:

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aplicacion Air</title>
<script language = "javascript">
	var XMLHttpRequestObject = false;
	
  	if (window.XMLHttpRequest){
		XMLHttpRequestObject = new XMLHttpRequest();
	}else if(window.ActiveXObject){
			XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
	}

	function pedirDatos(fuenteDatos, divID){
		if(XMLHttpRequestObject){
			var obj = document.getElementById(divID);
			XMLHttpRequestObject.open("GET", fuenteDatos);
			XMLHttpRequestObject.onreadystatechange = function(){
				if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200){
				obj.innerHTML = XMLHttpRequestObject.responseText;
				}
  			}
  			XMLHttpRequestObject.send(null);
 		} 
	}
	
	function ocultar(divID){
		document.getElementById(divID).innerHTML = "";
	}
</script>
</head>

<body>
 	<h3>¿Qué es Adobe AIR?</h3>
 	<form>
 		<input type = "button" value = "Mostrar concepto" onclick="pedirDatos('datos.txt','contenedor')">
	    <input type = "button" value = "Ocultar concepto" onclick="ocultar('contenedor')" />
 	</form>
    
	<div id="contenedor" style="background-color:#99FF66;">
    <p>Aqu&iacute; aparecer&aacute; texto</p>
	</div>
    
</body>
</html>

datos.txt

AIR intenta ser un entorno de ejecucion versatil, [... un texto cualquiera]

Estos dos archivos son parte de una aplicación que hace uso de AJAX para llamar el contenido de datos.txt y mostrarlo en la una parte del archivo index.html, puedes ver su funcionamiento online aquí.

Ahora vamos a crear el archivo descriptor de nuestra aplicacion AIR, que no es más que un archivo XML con la siguiente estructura:

<application>
    <id>…</id>
    <version>…</version>
    <filename>…</filename>
    <initialWindow>
        <content>…</content>
        <visible>…</visible>
        <width>…</width>
        <height>…</height>
    </initialWindow>
</application

Esta estructura XML indica parametros importantes de nuestra aplicación air.

  • En la raíz se encuentra el elemento<application>, que incluye el atributo namespace. Ejemplo:
    <application xmlns="http://ns.adobe.com/air/application/1.0">
  • El elemento <id>, identificador único de nuestra aplicación.
    Ejemplo:
    <id>app.html.aplicacion</id>
  • El elemento <version>, indica la versión de tu aplicación.
    Ejemplo:
    <version>0.1</version>
  • Elemento <filename>, nombre usado por la aplicación ejecutable.
    Ejemplo:
    <filename>Aplicacion AIR</filename>
  • El elemento <initialWindow> contiene los siguientes sub-elementos que especifican propiedades para la ventana inicial de la aplicación.
    • <content>index.html</content> Identifica al archivo HTML que cargará inicialmente la aplicación AIR.
    • <visible>true</visible> Indica si la ventana de la aplicación es visible ó no.
    • <width>400</width> Asigna el ancho de la ventana de la aplicación (en píxeles).
    • <height>200</height> Asigna el alto de la ventana.

Esos son los elementos básicos para correr nuestra aplicación AIR. Teniendo esto en mente crear nuestro archivo descriptor llamado aplicacion.xml (también guardemos este archivo directorio bin) el cual tendrá la siguiente estructura:

aplicacion.xml 

<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.0">
    <id>app.html.aplica01</id>
    <version>0.1</version>
    <filename>AplicacionAIR</filename>
    <initialWindow>
        <content>index.html</content>
        <visible>true</visible>
        <width>400</width>
        <height>200</height>
    </initialWindow>
</application>

3. Probando nuestra Aplicación

Ahora bien, vamos a testear nuestra aplicación AIR antes de proceder a empaquetar. Desde la consola de comandos (Inicio -> Ejecutar -> cmd), ubicate en la ruta donde se encuentre el SDK de AIR, especificamente dentro de la carpeta bin. El mi caso es así:

AIR SDK

Una vez ubicados dentro de bin, vamos a probar la aplicación escribiendo:

adl aplica01.xml

Aquí hemos hecho uso de la utilidad AIR Debug Launcher (ADL) para testear nuestra aplicación antes de empaquetarla; así, de ocurrir errores, se nos notificará y podremos corregirlos.

El resultado: una previa de la aplicación en una ventana de 400×200.

 AIR SDK Aplicacion

4. Creando el paquete instalador

Antes debemos generar un certificado digital (keystore) para nuestra aplicación. Bien nuevamente mediante la consola (Inicio -> Ejecutar -> cmd) ubiquémonos en el directorio bin del SDK. Escribimos lo siguiente:

adt -certificate -cn SelfSigned 1024-RSA nombre-certificado.pfx una-contraseña

Donde:

  • nombre-certificado -> nombre que gustes para identificar tu certicado digital.
  • una-contraseña -> password para tu certificado

Hemos usado AIR Developer Tool (adt) para generar un keystore que incluye un certificado digital y clave privada relacionada.

Finalmente con el keystore creamos el archivo instalador, hacemos uso de adt nuevamente especificando algunos parametros e incluyendo todos los archivos que son parte de nuestra aplicación (se te pedirá contraseña de tu certificado) :

adt -package -storetype pkcs12 -keystore nombre-certificado.pfx nombre-del-paquete-final.air 
aplicacion.xml index.html datos.txt

Donde:

  • nombre-certificado -> nombre del certificado que creaste anteriormente.

  • nombre-del-paquete-final -> es el nombre que tendrá nuestro archivo instalador. 

  • el resto de elementos son los archivo de tu aplicación: aplicacion.xml, index.html y datos.txt

El resultado final será un archivo aplicacion.air (archivo de instalación) que corresponde a nuestra aplicación AIR empaquetadita y lista para usarse:

AIR aplicacion final

Así hemos descrito una segunda forma de crear aplicaciones AIR, espero les sirva el tutorial para quien se inicia en el mundo de Adobe AIR, que desde mi punto de vista es una excelente tecnología para crear aplicaciones de escritorio a partir de aplicaciones web incluyendo muchos de sus funcionalidades.