Creando Aplicación con Adobe AIR SDK

11
2267

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.

11 COMENTARIOS

  1. 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!

  2. 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

  3. 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.

  4. 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.

  5. 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

  6. 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

  7. 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

  8. 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

  9. 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

Comments are closed.