Creación de la primera aplicación de AIR basada en HTML con el SDK de AIR

Todos los proyectos de AIR basados en HTML deben incluir los siguientes archivos: un archivo descriptor de la aplicación, que especifica los metadatos de la aplicación y una página HTML de nivel superior. Además de estos archivos necesarios, este proyecto incluye un archivo de código JavaScript, AIRAliases.js , que define las variables de alias adecuadas para las clases de API de AIR.

1. Cree un directorio denominado HelloWorld para que incluya los archivos del proyecto.

2. Cree un archivo XML, denominado HelloWorld-app.xml .

3. Cree un archivo HTML denominado HelloWorld.html .

4. Copie AIRAliases.js de la carpeta frameworks del SDK de AIR al directorio project.

Para comenzar a crear la aplicación de AIR, cree un archivo descriptor de la aplicación XML con la siguiente estructura:

<application xmlns="..."> 
    <id>…</id> 
    <versionNumber>…</versionNumber> 
    <filename>…</filename> 
    <initialWindow> 
        <content>…</content> 
        <visible>…</visible> 
        <width>…</width> 
        <height>…</height> 
    </initialWindow> 
</application>

1. Abra HelloWorld-app.xml para la edición.

2. Añada el elemento raíz <application> , incluyendo el atributo de espacio de nombres de AIR:

   <application xmlns="http://ns.adobe.com/air/application/2.7"> El último segmento del espacio de nombres, “2.7”, especifica la versión del motor de ejecución que requiere la aplicación.

3. Añada el elemento <id> :

   <id>examples.html.HelloWorld</id> El ID de la aplicación la identifica de forma exclusiva junto con el ID de editor (que AIR obtiene del certificado utilizado para firmar el paquete de la aplicación). El ID de la aplicación se utiliza para la instalación, el acceso al directorio privado de almacenamiento del sistema de archivos de la aplicación, el acceso al almacenamiento cifrado privado y la comunicación entre aplicaciones.

4. Agregue el elemento <versionNumber> :

   <versionNumber>0.1</versionNumber> Ayuda a los usuarios a determinar qué versión de la aplicación se está instalando.

   Nota: si está utilizando AIR 2 o anterior, debe usar el elemento <version> en lugar de <versionNumber> .

5. Agregue el elemento <filename> :

   <filename>HelloWorld</filename> Nombre utilizado para el ejecutable de la aplicación, el directorio de instalación y otras referencias a la aplicación en el sistema operativo.

6. Añada el elemento <initialWindow> que contiene los siguientes elementos secundarios para especificar las propiedades de la ventana de la aplicación inicial:

   <content>HelloWorld.html</content> Identifica el archivo HTML raíz para que se cargue AIR.

   <visible>true</visible> Hace visible a la ventana de forma inmediata.

   <width>400</width> Establece la anchura de la ventana (en píxeles).

   <height>200</height> Establece la altura de la ventana.

7. Guarde el archivo. El archivo descriptor de la aplicación completo debe presentar el siguiente aspecto:

   <?xml version="1.0" encoding="UTF-8"?> 
   <application xmlns="http://ns.adobe.com/air/application/2.7"> 
       <id>examples.html.HelloWorld</id> 
       <versionNumber>0.1</versionNumber> 
       <filename>HelloWorld</filename> 
       <initialWindow> 
           <content>HelloWorld.html</content> 
           <visible>true</visible> 
           <width>400</width> 
           <height>200</height> 
       </initialWindow> 
   </application>

En este ejemplo solo se establecen unas cuantas de las posibles propiedades de la aplicación. Para obtener el conjunto completo de las propiedades de la aplicación, que permiten especificar determinados aspectos, como el tamaño y el fondo cromático de la ventana, la transparencia, el directorio de instalación predeterminado, los tipos de archivo asociados y los iconos de la aplicación, consulte Archivos descriptores de las aplicaciones de AIR .

Es necesario crear una sencilla página HTML que sirva como archivo principal para la aplicación de AIR.

1. Abra el archivo HelloWorld.html para la edición. Añada el siguiente código HTML:

   <html> 
   <head> 
       <title>Hello World</title> 
   </head> 
   <body onLoad="appLoad()"> 
       <h1>Hello World</h1> 
   </body> 
   </html>

2. En la sección <head> del HTML, importe el archivo AIRAliases.js :

   <script src="AIRAliases.js" type="text/javascript"></script>

   AIR define una propiedad denominada runtime en el objeto de la ventana HTML. La propiedad runtime proporciona acceso a las clases incorporadas de AIR, utilizando el nombre completo del paquete de la clase. Por ejemplo, para crear un objeto File de AIR se puede añadir la siguiente sentencia en JavaScript:

   var textFile = new runtime.flash.filesystem.File("app:/textfile.txt");

   El archivo AIRAliases.js define los alias convenientes para las API de AIR más útiles. Con AIRAliases.js se puede reducir la referencia a la clase File del siguiente modo:

   var textFile = new air.File("app:/textfile.txt");

3. Bajo la etiqueta de script AIRAliases, añada otra etiqueta de script que contenga una función JavaScript para administrar el evento onLoad :

   <script type="text/javascript"> 
   function appLoad(){ 
       air.trace("Hello World"); 
   } 
   </script>

   La función appLoad() simplemente llama a la función air.trace() . El mensaje de seguimiento se imprime en la consola de comandos cuando la aplicación se ejecuta utilizando ADL. Las sentencias trace pueden ser muy útiles en la depuración.

4. Guarde el archivo.

El archivo HelloWorld.html debe presentar ahora el siguiente aspecto:

<html> 
<head> 
    <title>Hello World</title> 
    <script type="text/javascript" src="AIRAliases.js"></script> 
    <script type="text/javascript"> 
        function appLoad(){ 
            air.trace("Hello World"); 
        }  
    </script> 
</head> 
<body onLoad="appLoad()"> 
    <h1>Hello World</h1> 
</body> 
</html>

Para ejecutar y probar la aplicación desde la línea de comandos, emplee la utilidad AIR Debug Launcher (ADL). El ejecutable ADL se encuentra en el directorio bin del SDK de AIR. Si aún no ha configurado el SDK de AIR, consulte Instalación del SDK de AIR .

1. Abra una consola de comandos o de shell. Cambie al directorio creado para este proyecto.

2. Ejecute el siguiente comando:

   adl HelloWorld-app.xml

   Se abrirá una ventana de AIR, mostrando la aplicación. Asimismo, la ventana de la consola muestra el mensaje resultante de la llamada a air.trace() .

   Para obtener más información, consulte Archivos descriptores de las aplicaciones de AIR .

Cuando la aplicación se ejecute correctamente, puede emplear la utilidad ADT para empaquetar la aplicación en un archivo de instalación de AIR. Un archivo de instalación de AIR contiene todos los archivos de la aplicación, que se pueden distribuir a los usuarios. Se debe instalar Adobe AIR antes de instalar un archivo de AIR empaquetado.

Para garantizar la seguridad de la aplicación, todos los archivos de instalación de AIR se deben firmar digitalmente. Por motivos de desarrollo, se pueden generar certificados básicos con firma automática con ADT u otra herramienta de generación de certificados. También se puede adquirir un certificado con firma de código de una entidad comercial emisora de certificados como, por ejemplo, VeriSign o Thawte. Si los usuarios instalan un archivo de AIR con firma automática, el editor se muestra como “unknown” (desconocido) durante el proceso de instalación. Esto se debe a que el certificado con firma automática solo garantiza que el archivo de AIR no se ha modificado desde su creación original. No existe ningún método para evitar que alguien firme automáticamente un archivo de AIR de enmascaramiento y lo presente como su aplicación. Para los archivos de AIR distribuidos públicamente, se recomienda el uso de un certificado comercial verificable. Para obtener información general sobre los problemas de seguridad en AIR, consulte Seguridad en AIR (para desarrolladores de ActionScript) o Seguridad en AIR (para desarrolladores de HTML).

Generación de un certificado con firma automática y un par de claves

Desde el símbolo del sistema, indique el siguiente comando (el ejecutable de ADT se ubica en el directorio bin del SDK de AIR):

adt -certificate -cn SelfSigned 1024-RSA sampleCert.pfx samplePassword

ADT genera un archivo de almacén de claves denominado sampleCert.pfx que contiene un certificado y la clave privada relacionada.

En este ejemplo se utiliza el número mínimo de atributos que se pueden establecer para un certificado. El tipo de clave debe ser 1024-RSA o 2048-RSA (consulte Firma de aplicaciones de AIR ).

Creación de un archivo de instalación de AIR

Desde el símbolo del sistema, introduzca el siguiente comando (en una sola línea):

adt -package -storetype pkcs12 -keystore sampleCert.pfx HelloWorld.air 
HelloWorld-app.xml HelloWorld.html AIRAliases.js

Se le solicitará la contraseña del archivo del almacén de claves.

El argumento HelloWorld.air es el archivo de AIR que genera ADT. HelloWorld-app.xml es el archivo descriptor de la aplicación. Los siguientes argumentos son los archivos utilizados por la aplicación. En este ejemplo solo se utilizan dos archivos, pero se puede incluir cualquier número de archivos y directorios. ADT comprueba el archivo de contenido principal, HelloWorld.html se incluye en el paquete, pero si se olvida incluir AIRAliases.js, la aplicación simplemente no funcionará.

Una vez creado el paquete de AIR, se puede instalar y ejecutar la aplicación haciendo doble clic en el archivo del paquete. También se puede escribir el nombre del archivo de AIR como comando en una ventana de comandos o de shell.

En AIR, el código HTML y JavaScript se suele comportar tal y como lo haría en un navegador web típico. (De hecho, AIR utiliza el mismo motor de representación WebKit que se emplea en el navegador web Safari.) Sin embargo, existen algunas diferencias importantes que se deben conocer a la hora de desarrollar aplicaciones HTML en AIR. Para obtener más información sobre estas diferencias y otros temas importantes, consulte Programming HTML and JavaScript (Programación con HTML y JavaScript; en inglés).