Desarrollo webabril 6, 2008

Introducción a Adobe Air

Durante casi año y medio me dedique a utilizar XHTML y CSS para desarrollar, pero hace unos días decidí que quería aprender algo nuevo, algo como Adobe Air.

Adobe Air, originalmente llamado Apollo, es un programa que nos permite ejecutar «pequeños» programas en nuestra PC ofreciendonos, a los desarrolladores, la opción de desarrollar programas de una forma relativamente fácil y utilizando código conocido como lo es Actionscript o HTML.

Había escuchado noticias y comentarios acerca de Adobe Air, la mayoría muy favorables a la aplicación pero ninguno de ellos acerca de como iniciar el desarrollo de aplicaciones. Obviamente que lo primero a hacer era buscar información, cómo iniciar y qué herramientas debía utilizar. Al iniciar mi idea acerca del desarrollo para Adobe Air era necesitaba algun tipo de extensión para Flash o Flex, sin embargo, Adobe intento cubrir todos los aspectos posibles incluyendo la posibilidad de desarrollar usando Flex, Flash CS3 e incluso la combinación HTML+CSS+JS.

Mi especialidad no es Flex así que descarte esa opción, también descarte Flash CS3 porque en mi PC aún no lo instalo, solo quedaba HTML como base para el desarrollo. Al desarrollar Adobe Air usando XHTML tenemos tres opciones más, una es utilizar la extensión de Dreamweaver CS3, usar Aptana y por último, la más generica de todas, utilizar el SDK(disponible para windows y mac) que nos permite utilizar cualquier aplicación de texto. Elegí el SDK de Adobe Air simplemente porque prefiero usar PSPad que Dreamweaver. 😉

¡Hola Mundo con Adobe Air!
Para empezar lo primero que hice fue realizar el ejemplo, y qué mejor que ¡Hola mundo! para aprender, así que aquí los dejo con «mi versión» de ¡Hola mundo! basada en la documentación de Adobe Air (originalmente llamado Hello world!)

Debes iniciar descargando el SDK de Adobe Air que incluye los archivos básicos para trabajar, además una imagen para usar de fondo, y por último la referencia de Adobe Air para resolver dudas.
Las aplicaciones en Adobe Air funcionan con un archivo xml que es el que establece los valores básicos de la aplicación, un HTML que será nuestro contenido y el archivo AIRAliases.js (incluido en la carpeta AdobeAIRSDK/frameworks), además incluiré una imagen para utilizar de fondo y un archivo BAT (proceso por lotes para Windows) para simplicar las pruebas.

Nuestro «instalador» será HolaMundo-app.xml y se ve así:

<?xml version="1.0" encoding="UTF-8" ?>
<application xmlns="http://ns.adobe.com/air/application/1.0">
  <id>ejemplo.html.HolaMundo</id>
  <version>0.1</version>
  <filename>HolaMundo</filename>
  <initialWindow>
    <content>HolaMundo.html</content>
    <visible>true</visible>
    <width>240</width>
    <height>320</height>
  </initialWindow>
</application>

La primera línea es para definir el XML y en la segunda esta la etiqueta applications con el namespace para las aplicaciones de air (Ctrl C + Ctrl V 😉 ). Luego continuamos con la información de la aplicación de esta forma:

  • id: Es el nombre que identificara a nuestra app. del resto, la forma de crearlo es de derecha a izquierda, por ejemplo holamundo.ejemplos.ivanmendoza en donde ivanmendoza es «mi empresa» ejemplos la division y holamundo el nombre de la app.
  • version: Indica la version de nuestra app.
  • filename: Es el nombre visible de nuestra app.
  • initialWindow: Define las propiedades de la ventana inicial de la aplicación.
    • content: indica el archivo que contiene la interfaz de la ventana, en el ejemplo el HTML HolaMundo.
    • visible: Para definir si la ventana estará visible(Boolean).
    • width: ancho de la ventana
    • height: alto de la ventana.

Existen más etiquetas para definir otras opciones, como el icono por ejemplo, pero de momento con esto es suficiente.

El HTML (HolaMundo.html) de la ventana principal es el siguiente:

<html>
<head>
  <title>Hola Mundo</title>
  <script type="text/javascript" src="AIRAliases.js"></script>
  <style type="text/css">
    body{overflow:hidden;margin:0;padding:0;}
    #visor{
      margin:0;
      padding:0;
      width: 240px;
      height: 320px;
      overflow:hidden;
      text-align:center;
      font-size:16pt;
      font-weight:bold;
      color:#fff;
      padding:130px 0 0;
      background:#ccf url(app:/imagenes/fondo.jpg) no-repeat;
    }
  </style>
  <script>
  function saluda(){
    var visor = document.getElementById("visor");
    visor.innerHTML = "Hola Mundo";
  }
  </script>
</head>
<body onload="saluda();">
    <div id="visor" />
</body>
</html>

Como ven es un HTML simple con unas cuantas caracteristicas especiales:

  • Debemos incluir el javascript de Air (AIRAliases.js)
  • La dirección app:/ es propia de Air y hace referencia al directorio en donde se instalo la aplicación. Funciona en todo el documento, incluso en los estilos CSS (como el ejemplo).
  • El javascript funciona igual, solo tiene el plus de las funciones para Air que pueden consultar en la referencia del lenguaje.
  • La función del saludo se carga en el evento onload de el body y solo agrega texto al div visor creado dentro.

Y listo, con esos dos archivos (cuatro si contamos la imagen y AIRAliases.js) tenemos listo nuestro ejemplo Hola Mundo, por supuesto aún falta probarlo y para ello usamos el ADL (AIR Debug Launcher) que es un programa incluido en el SDK que permite probar las apps. sin necesidad de compilar el archivo de Air. Su sintaxis por línea de comandos es:

adl.exe  HolaMundo-app.xml

en otras palabras la direccion del programa seguido de la dirección del xml «instalador». Como es algo realmente tedioso escribir eso cada ves que se prueba, preferí utilizar un archivo de proceso por lotes (BAT, solo windows) que «automatice» el proceso, el código es:

start ..\AdobeAIRSDK\bin\adl.exe HolaMundo-app.xml

y esta ubicado en la misma carpeta que la aplicación de air, el SDK esta en un carpeta del mismo nivel. Les muestro la imagen para que se entienda mejor

 

Cuando tengamos hecho esto solo ejecutamos el bat y deberíamos de tener nuestra primera aplicación de Adobe Air funcionando y con un resultado como este:

Archivos de ejemplo para descargar: holamundo.zip (20.8kb)

En resumen, desarrollar aplicaciones para Adobe Air es bastante sencillo, básicamente porque se utiliza lenguajes que ya conocemos (o deberíamos) y lo «complicado» es saber como iniciar, sobretodo quitarnos la idea de que es aprender un nuevo lenguaje o el miedo a que sea muy complejo. Es una herramienta muy poderosa y sobretodo extensa, de allí que el nombre de este tema sea introducción a Adobe Air, porque esto es solo el inicio.

Más información sobre Adobe Air en:

—————-
Escrito mientras escuchaba Astral Projection – Visions Of Nasca

6 comentarios

  • Así con manzanitas sí… La verdad cada vez que salen ondas así de desarrollo nuevas no le pongo mucho coco pero Air no suena tan mal. No he leído la onda (webmasterworld) pero hay un tema de problemas de seguridad con Air.

  • Man este ejemplo lo bajaste de aki no bueno solo te digo para ke comentes el link de donde lo bajaste espero vays tu tb contribuyendo conforme parctikes na mas … shaoo

Comments are closed.