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

Para obtener unas indicaciones rápidas y prácticas sobre el funcionamiento de Adobe® AIR®, utilice estas instrucciones para crear y empaquetar una sencilla aplicación “Hello World” de AIR basada en HTML.

Para comenzar, debe tener instalado el motor de ejecución y configurar el SDK de AIR. En este tutorial utilizará AIR Debug Launcher (ADL) y AIR Developer Tool (ADT). ADL y ADT son programas de utilidades de la línea de comandos que se pueden encontrar en el directorio bin del SDK de AIR (consulte Instalación del SDK de AIR). En este tutorial se asume que está familiarizado con la ejecución de programas desde la línea de comandos y que conoce cómo configurar las variables del entorno de ruta necesarias para el sistema operativo.

Nota: si es usuario de ® Dreamweaver®, consulte Creación de la primera aplicación de AIR basada en HTML con Dreamweaver.
Nota: Las aplicaciones de AIR basadas en HTML sólo se pueden desarrollar para los perfiles extendedDesktop y de escritorio. Los perfiles móviles y de tv no se admiten.

    Creación de archivos del proyecto

    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.

    Creación del archivo descriptor de la aplicación de AIR

    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.6"> El último segmento del espacio de nombres, “2.6”, 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.

    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.6"> 
    <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 sólo 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 AIR application descriptor files.

    Creación de la página HTML de la aplicación

    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>

    Prueba de la aplicación

    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().

      For more information, see AIR application descriptor files.

    Creación de un archivo de instalación 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 sólo 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. Se puede utilizar cualquier valor para los parámetros en cursiva. 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 sólo se utilizan dos archivos, pero se puede incluir cualquier número de archivos y directorios. ADT verifies that the main content file, HelloWorld.html is included in the package, but if you forget to include AIRAliases.js, then your application simply won’t work.

    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.

    Pasos siguientes

    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).