Inicio AJAX Mi primera aplicación en Adobe AIR (desde Dreamweaver CS3)

Mi primera aplicación en Adobe AIR (desde Dreamweaver CS3)

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)

Adobe AIR

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:

Aplicacion AIR

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.

Nick Puzzle

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:

Config DW

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&iacute; aparecer&aacute; 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.

Adobe AIR Files

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.

Aplicacion de prueba

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:

Aplicacion AIR config

Finalmente presionemos el botón Create AIR File y listo.

Finalizado aplicacion AIR

En el directorio de nuestro sitio tendremos el archivo PrimeraAplicacionAIR.air el cual podremos instalar en nuestro sistema.

Aplicacion Archivos

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.

Programador y Desarrollador Web. Administrador de RibosoMatic y Proyecto Yupy. Blogger y entusiasta de la tecnología, internet, software y tutoriales para desarrollo de aplicaciones para la web ....