Creando Aplicación con Adobe AIR SDK

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

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.

11 thoughts on “Creando Aplicación con Adobe AIR SDK”

Messi says:

February 20, 2009 at 3:01 am

Gracias por los pasos a seguir, me han sido de mucha ayuda.
Donde podemos encontrar más ejemplos de uso de AdobeAIRSDK ?
Gracias y un saludo!

Raul says:

April 2, 2009 at 7:16 am

Gracias por el aporte esta muy bueno, quisiera saber donde podria encontrar mas ejemplos y quizas un manual en español, de ante mano muchas gracias

Sebs says:

April 7, 2009 at 11:23 pm

Muy bueno!!
Estaba buscando algo asi…
Estoy empezando como desarrollador web y estaba buscando algo como esto.
Estoy desarrollando una aplicacion para utilizarse en una intranet, pero tengo la contra que la mayoria utilizan IExplorer 6 y es un bajon tratar de hacer algo con AJAX+PHP… vamos a ver si asi funciona.
🙂
Un abrazo.

Iván says:

May 23, 2009 at 9:04 am

Uff!! que bueno.
Llevo HORAS buscando en internet y es el primer sitio que encuentro con un ejemplo clarito línea por línea que funcione.
Muchisimas gracias.

hugo castañeda says:

July 10, 2009 at 11:45 am

El ejemplo esta bueno se explica bien pero no funciona si uno no tiene coneccion ha internet aparece el error de con figacion de la hora y no se crea el paquete este es el punto de mi pregunta como se puede sollucionar esto

Manuel says:

November 28, 2009 at 1:21 pm

Hola e seguido este tutorial excelente muchas gracias ,, por ahy cree una mini aplicacion con Extjs.

Andrés says:

December 2, 2009 at 9:19 am

Hola mil gracias demasiado interesante me sirvió muchísimo solo tengo una pregunta y es si el archivo .air lo pudiera generar en linea, puesto que manejo un control de versiones de los .air y necesito generar una edición mensual…. Muchas gracias

roci says:

December 16, 2009 at 8:48 am

hola,estoy creando una aplicacion con air, cuando meto la ultima linea de comandos,en la cual meto tooodos los archivos me pone la siguiente linea.
no such file C:UsersRocioDesktopApliDVDin300CaratulaDvd-1.jpeg
he de decir que los tipos de ficheros que tiene mi aplicacion son imagenes(jpeg),hojas de estilo,html,js.
gracias

roci says:

December 16, 2009 at 9:47 am

vale,he comprobado que las imagenes en jpeg no las admite.como puedo hacerlo,si necesito meterlas?

annier says:

February 13, 2010 at 2:45 pm

muy interesante pero no me sale, cuando intento ejecutar el adl me dice: application descriptor not found.
¿Por que podria ser este error?
He seguido todas las instrucciones como me indican aqui, gracias

annieruci says:

March 12, 2010 at 2:34 pm

bueno el aporte “PERO” como siempre no obtengo la respuesta que busco, aqui se usa el sdk air en su forma basica con un simple html y me hace falta a partir de un mxml, explico hago un mxml con el bloc de notas y me hace falta compilarlo
como seria?????
respuestas en annieruci@gmail.com
saludos
gracias