Crear aplicaciones de escritorio en HTML y AJAX con AIR

Nos basaremos en el tutorial de Adobe Apollo y Cómo compilar desde el SDK de Flex 2 de Zguillez, para poder explicar la forma de usar el SDK de Apollo para generar aplicaciones desde HTML.

Muchas personas me comentaron que no saben Flex y que para ellos sería imposible entrar a Apollo, pero no es así. La ventaja de usar Apollo es que podemos desarrollar desde HTML, Flash, Flex, Dreamweaver, notepad, etc, debido a que podremos generar nuestra aplicacion con el SDK de Apollo y por línea de comandos compilarla(también se puede desde Flex y Flash CS3).

Para poder realizar estos ejemplos podemos usar dos formas:

Descargar sólo el SDK de Apollo
Usar el SDK instalado por la extensión de Apollo para Flex

Lo explicaré de las dos formas, ya que el proceso de sólo trabajar con el SDK toma un paso adicional.

Si descargaste el SDK y por ejemplo lo descomprimiste en D:\ tendrás tus archivos así:

Todo bien, lo que ahora debemos modificar es el CLASSPATH para poder ejecutar lo necesario para empezar a trabajar con Apollo.

Para eso, en el escritorio, hacemos click derecho a Mi PC -> Propiedades, en la pestaña de Opciones Avanzadas hacer click a Variables de entorno. Buscamos en Variables de sistema a CLASSPATH y le damos a Modificar, escribimos la ruta de nuestro SDK:

Aceptamos y estamos listos para empezar a trabajar.

Por otro lado, si usaste la Extensión de Flex pues no hay muchos cambios. Ya que tu CLASSPATH estará ya configurado, sin embargo si tu deseas adicional a esto tener tu SDK pues podrás agregarlo sin problemas con un punto y coma ( ; ) así:

De esta manera podremos trabajar con el SDK de Apollo con flex o desde nuestra ruta en este caso D:\.

Ahora sí manos al código. Para empezar, haremos un ejemplo sencillo de como depurar y empaquetar nuestra aplicación Apollo. Es ahí donde nos encontramos con ADL y ADT a lo cual daremos una breve explicación.

ADL (Apollo Debug Launcher), nos permite revisar nuestra aplicación para ver posibles errores o simplemente probar nuestro trabajo.

ADT (Apollo Developer Tool), nos genera el archivo .AIR que permitirá la instalación de la aplicación. Con ello, logramos empaquetar todos los elementos que usaremos para su ejecución.

Nota: Recordamos que para este tutorial es buena idea que hayas leído antes el primer tutorial de Adobe Apollo.

Para empezar, haremos un ejemplo básico de HTML desde cualquier editor de texto:

<html>
<head>
<title>Mi primer ejemplo</title>
</head>
<body>
Saludos desde Apollo
<br>
<A HREF="http://www.google.com">ir a google</A>
</body>
</html>

Para tener orden, creamos la carpeta llamada ejemplos dentro de la carpeta bin, a su vez, creamos una carpeta llamada prueba1 y guardamos nuestro HTML como prueba1.html.

Ahora abrimos un nuevo documento del notepad y escribimos:

<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/apollo/application/1.0.M3" appId="miAplicacion1" version="0.1">
<properties>
<name>prueba1</name>
<publisher>eldervaz</publisher>
<description/>
<copyright/>
</properties>
<rootContent systemChrome="standard" visible="true">prueba1.html</rootContent>
</application>

Lo guardamos junto a prueba1.html con el nombre aplicacion.xml, que nos permitirá definir propiedades y declarar características de nuestra aplicación.

La explicación de este archivo:

appId: El id que identificará la aplicación. miAplicacion1
name: Define el nombre de la aplicación. prueba1
publisher: Nombre de la publicación y carpeta donde estará nuestra aplicación, así como la ubicación en inicio/programas/eldervaz. eldervaz
rootContent: Es lo más importante de todo, aquí definimos la forma que tendrá nuestra aplicación, por decir el borde de la ventana con la barra de título, además si queremos que se ejecute y se visualize. Asimismo, ponemos con que archivo se iniciará nuestra aplicación. prueba1.html

Al final debemos ver nuestros archivos así:

Ahora probaremos si funciona nuestro ejemplo con el SDK, para eso abrimos nuestro cmd (Inicio -> Ejecutar -> cmd) y escribimos:

adl ejemplos/prueba1/aplicacion.xml

Obviamente debe ser corrido desde la carpeta Bin, en mi caso es D:, osea así:

y como resultado veremos esto:

Simple y sencillo, ahora ya vimos que no tenemos ningun error, porque de ser así saldría en la ventana de comandos.

Para empezar a empaquetar, necesitamos hacer un pequeño cambio a nuestro aplicacion.xml corrigiendo la dirección de nuestro archivo prueba1.html:

<rootContent systemChrome="standard" visible="true">ejemplos/prueba1/prueba1.html</rootContent>

Eso es todo, lo guardamos y ejecutamos en nuestra línea de comandos:

 adt -package ejemplos/prueba1/miPrueba.air ejemplos/prueba1/aplicacion.xml ejemplos/prueba1/prueba.html

Explicaré lo que hacemos:

adt nos hará la empaquetación de los archivos.
-package ejemplos/prueba1/miPrueba.air Indica la ruta donde guardaremos nuestro .air
ejemplos/prueba1/aplicacion.xml El archivo xml que define nuestra aplicación.
ejemplos/prueba1/prueba.html Archivos que contendrá nuestro paquete.

Al ejecutar nuestro resultado:

Ahora sólo ejecutamos nuestro instalador y listo.

Si por algun motivo necesitamos agregar algun elemento a nuestra aplicación, por ejemplo miEstilo.css la línea de comando sería así:

adt -package ejemplos/prueba1/miPrueba.air  ejemplos/prueba1/aplicacion.xml ejemplos/prueba1/prueba.html ejemplos/prueba1/miEstilo.css

Listo, con esto ya podemos empezar a hacer un ejercicio simple con ajax que viene en la documentación de Apollo. Para eso tenemos nuestro archivo HolaApollo.html dentro de nuestra nueva carpeta prueba2 con el siguiente código:

<html>
<head>
<title>Ejemplo de Ajax con Apollo</title>
<script type="text/javascript"><!--

function appLoad(){
  if(window.runtime){
    runtime.trace("Hello Apollo.");
  }
  xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET", "request.txt",true);
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4) {
      document.getElementById('replace').innerHTML = xmlhttp.responseText;
    }
  }
  xmlhttp.send(null)
}
--></script>
</head>
<body onLoad="appLoad();">
<hi>
Apollo
</h1>
<div id="replace">
 <p>texto</p>
</div>
</body>
</html>

Además tenemos un archivo txt llamado request.txt:

Hello <b>Apollo</b>! como va todo <br>
<ul>
<li>hola</li>
<li>chau</li>
<li>jeje</li>
</ul>

Nuestro archivo aplicacion.xml:

<?xml version="1.0" encoding="UTF-8"?>
  <application xmlns="http://ns.adobe.com/apollo/application/1.0.M3"
appId="Prueba2" version="0.2">
   <properties>
    <name>
Prueba AJAX
    </name>
    <publisher>
eldervaz
    </publisher>
    <description/>
    <copyright/>
   </properties>
   <rootContent systemChrome="standard" visible="true">
HolaApollo.html
   </rootContent>
  </application>

Aquí podremos ver el trace que hace javascript con la siguiente línea de comando:

adl ejemplos/prueba2/aplicaciones.xml

Y si queremos empaquetar modificamos aplicacion.xml en:

<rootContent systemChrome="standard" visible="true">ejemplos/prueba2/HolaApollo.html</rootContent>

Y escribimos la siguiente línea de comandos:

Como han apreciado, es muy simple trabajar con el SDK sin necesidad de tener conocimientos de Flex o Flash, eso abre puertas a desarrolladores o diseñadores que quieran hacer una aplicación de escritorio con los conocimientos que tienen.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo

Crear aplicaciones de escritorio en HTML y AJAX con AIR

Publica tu comentario

o puedes...