Aunque escuchaba y leia sobre Adobe AIR (noticias y videos en otros blogs) no lo probé en su momento. Sin embargo luego de comprar un tiempo del trabajo me puse a investigar y averiguar un poco a profundidad sobre Adobe AIR. Para los que no habían escuchado de ello pues explicare un poco sobre Adobe AIR y por supuesto con un ejemplo práctico.(Acepto sugerencias)
Adobe AIR, también conocido como Apollo, es un tecnología que permite crear y ejecutar a partir de aplicaciones web (las cuales pueden contener elementos HTML, AJAX, Flash, etc) aplicaciones de escritorio multi-plataforma.
En este pequeño gráfico trato de explicar el concepto de AIR. (sujeto a cambios por supuesto)
Podemos obtener Adobe AIR de forma gratuita desde la web oficial de Adobe. Una vez descargado e instalado en nuestro sistema (Windows, Mac ó Linux) podemos crear ó ejecutar alguna aplicación con AIR.
Ejecutar una aplicación AIR
En la página oficial de Adobe AIR podemos encontrar algunos ejemplos de aplicaciones AIR que puedes descargar e instalar en tu computadora. Por ejemplo esta de Nickelodeon. La extensión de estos archivos es .air que es un instalador de la aplicación. Al momento de instalar se nos mostrará una pantalla similar a esta:
Continua el proceso de instalación, especificando la ruta del directorio donde se copiarán los archivos. Una vez instalado la aplicación podrás hacer uso de este.
Crear una aplicación AIR
Esta es la parte más interesante. Existen diversos entornos de desarrollo de aplicaciones AIR, el más recomendado es Adobe Flex Builder, también se puede usar Adobe Flash. Sin embargo en este ejemplo de desarrollo usaremos Adobe DreamWeaver CS3 con una extensión para la configuración y creación de aplicaciones AIR (los que no cuenten con Adobe DreamWeaver CS3, no se preocupen luego veremos otro entorno como el Flex u otra forma).
Ahora lo primero es descargar la extensión que usaremos en Dreamweaver (32 MB). Una vez descargado le damos doble clic para instalar la extensión, automáticamente se mostrará el Adobe Extension Manager luego nos notificará de la instalación correcta de la extensión.
Teniendo pues el entorno configurado, procederemos a crear un pequeña aplicación que hace uso de AJAX.
Abrimos Dreamweaver y vamos al menú Sitio > Nuevo sitio… , dale un nombre a tu sitio: “PrimeraAplicacionAIR” ó lo que desees:
Ahora vamos a crear un par de archivos en nuestro sitio, el primero: index.html con el siguiente contenido:
<!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í aparecerá texto</p>
</div>
</body>
</html>
Como verás se trata de nuestro famos primer ejemplo con AJAX que publicamos hace miles de años atrás 🙂
También vamos agregar un archivo de texto con el contenido que desees llamado datos.txt el cual será llamado por la función pedirdatos.
Así tenemos listos 2 archivos que comprenderán nuestra aplicación.
Estamos listos entonces para crear la aplicación. Pero primero vamos a realizar una prueba: presiona Ctrl + Shift + F12 y podremos ver un avance de nuestra aplicación.
Para crear y empaquetar la aplicación vamos al menú Sitio > Air Application Settings…, donde tendremos que configurar nuestra aplicación y especificar valores como:
- nombre del archivo,
- ID,
- versión,
- contenido inicial,
- los archivos a incluir en el paquete,
- ancho y alto de la ventana
- directorio de instalación,
- icono,
- archivos asociados,
- nombre del archivo de destino y certificado.
Nota: Es importante crear un certificado para nuestra aplicación. Presionando el botón Set… lo podemos hacer de manera fácil. No es un paso complicado.
Coloquemos los siguientes datos tal como aparece en la imagen:
Finalmente presionemos el botón Create AIR File y listo.
En el directorio de nuestro sitio tendremos el archivo PrimeraAplicacionAIR.air el cual podremos instalar en nuestro sistema.
Espero pues que este mini-tutorial les puede servir, espero que más adelante podamos profundizar más en otros aspectos de AIR. Pueden descargar los archivos utilizados para este ejemplo además de mi aplicación AIR.
Descargar archivos y aplicación AIR.
Bastante interesante, siempre me llamo la atencion este tipo de aplicaciones, capacez de interactuar desde tu escritorio hacia la web…. enhorabuena por tu primera aplicacion… Me he inquietado, ya vere si entro en este ambiente. saludos 😉
Yo ya he usado AIR en otras ocasiones y me parece muy divertido pero muy tedioso…
Se necesita un dominio de Javascript en su totalidad para una mejor funcionalidad y el uso constante de DOM para manipular todo.
Lo unico que no me gusto fue que no se pueden usar frameworks como jQuery o Script.aculo.us, eso haria de AIR una maravilla.
Las aplicaciones AIR y Flex es de lo major para desarrollar RIAs. Pues bueno, a mi no me parece tedioso si usas el flexbuilder.
Me parece bien que coloquen este tipo de articulos… no todo es javascript, ajax y php.
Sugerencia para el sitio: Podrías tambien colocar mas articulos sobre JSF o Icefaces que son frameworks interesantes para aplicacioens web empresariales.
Muy bien para empezar, mi pregunta es… si yo tengo una aplicacion mas compleja con interaccion de datos, ¿se puede montar de esta manera sencilla hacia air?
de entrada una pagina jsp me mando al diablo jaja.
Saludos
jaja yo ni fu ni fa jaja, esta interesante este tema de adobe air.
yo tengo un proyecto de un cibercontrol lo realize con XHTML – XAJAX – PHP y SQL.
con el servidor WAMP
me gustaria llevarlo mas aya de ser una simple aplicacion de fondo de escritorio, pues me llevo demasiado tiempo realizarla.
tal vez air nosea lo que imagino pero seguire leyendo haber que sucede.
pues a mi no me gustó…
otra vez yo… apenas hoy me baje el AIr y los archivos de MI PRIMERA APLICACION. aun sigo tratando de comprender como funciona esto, por cierto ya realize la prueba y todo OK!.
ahora tengo q ver como compilar mi cibercontrol, si es que llego a hacerlo, quiero ponerlo en la red, para que otras personas se beneficien igual que yo =P.
asi que si alguien me quiere ayudar con este proyecto de cibercontrol sobre AIR adelante, acepto todo tipo de comentarios sugerencias y codigos, jojojo
@abel….
adobe air tiene soporte para jquery motools spry entre otros
GEnial!
Magnifico tutorial!
Espero y pronto publiques mas acerca del air, como interactuar con bases de datos y demas!
Muy buen tutorial pero debes modificar algo, el adobe_air.mxp que mandas a bajar no es la version para dreamweaver cs3, y el tutotial es para dreamweaver cs3 aca dejo el link correcto http://fpdownload.macromedia.com/get/air/extensions/dreamweaver/Adobe_AIR_CS3.mxp