Creación de la primera aplicación de AIR de escritorio con el SDK de Flex

Para obtener unas indicaciones rápidas y prácticas sobre el funcionamiento de Adobe® AIR®, utilice estas instrucciones para crear una sencilla aplicación "Hello World" de AIR basada en SWF utilizando el SDK de Flex. Este tutorial muestra como compilar, probar y empaquetar una aplicación de AIR con las herramientas de la línea de comandos proporcionadas por el SDK de Flex (el SDK de Flex incluye el SDK de AIR).

Para comenzar, debe tener instalado el motor de ejecución y configurar Adobe® Flex™. En este tutorial se utiliza el compilador AMXMLC, AIR Debug Launcher (ADL) y AIR Developer Tool (ADT). Estos programas se pueden encontrar en el directorio bin del SDK de Flex (consulte Configuración del SDK de Flex).

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

En esta sección se describe cómo crear el descriptor de la aplicación, que es un archivo 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. Cree un archivo XML denominado HelloWorld-app.xml y guárdelo en el directorio del proyecto.

  2. Añada el elemento <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>samples.flex.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). La forma recomendada es una cadena de estilo DNS inversa delimitada por puntos como, por ejemplo, "com.company.AppName". 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>1.0</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.swf</content> Identifica el archivo SWF 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>samples.flex.HelloWorld</id> 
        <versionNumber>0.1</versionNumber> 
        <filename>HelloWorld</filename> 
        <initialWindow> 
            <content>HelloWorld.swf</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.

Escritura del código de la aplicación

Nota: las aplicaciones de AIR basadas en SWF se pueden utilizar como clase principal definida con MXML o con Adobe® ActionScript® 3.0. En este ejemplo se utiliza un archivo MXML para definir su clase principal. El proceso para crear una aplicación de AIR con una clase ActionScript principal es similar. En lugar de compilar un archivo MXML en el archivo SWF, se compila el archivo de clase de ActionScript. Al utilizar ActionScript, la clase principal debe ampliar flash.display.Sprite.

Al igual que sucede con todas las aplicaciones basadas en Flex, las aplicaciones de AIR creadas con la arquitectura de Flex contienen un archivo MXML principal. Las aplicaciones de AIR de escritorio utilizan el componente WindowedApplication como elemento raíz en lugar del componente Application. El componente WindowedApplication proporciona propiedades, métodos y eventos para controlar la aplicación y su ventana inicial. En las plataformas y perfiles para los que AIR no admite varias ventanas, continúe utilizando el componente Application. En las aplicaciones móviles de Flex, también se pueden usar los componentes View o TabbedViewNavigatorApplication.

El siguiente procedimiento crea la aplicación Hello World:

  1. Con el uso de un editor de texto, cree un archivo denominado HelloWorld.mxml y añada el siguiente código MXML:

    <?xml version="1.0" encoding="utf-8"?> 
    <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                           xmlns:s="library://ns.adobe.com/flex/spark" 
                           xmlns:mx="library://ns.adobe.com/flex/mx" 
                           title="Hello World"> 
    </s:WindowedApplication>
  2. A continuación, añada un componente Label a la aplicación (sitúelo dentro de la etiqueta WindowedApplication).

  3. Establezca la propiedad text del componente Label en "Hello AIR".

  4. Defina las restricciones de diseño para mantenerlo siempre centrado.

    En el siguiente ejemplo se muestra el código hasta el momento:

    <?xml version="1.0" encoding="utf-8"?> 
    <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                           xmlns:s="library://ns.adobe.com/flex/spark" 
                           xmlns:mx="library://ns.adobe.com/flex/mx" 
                           title="Hello World"> 
         
        <s:Label text="Hello AIR" horizontalCenter="0" verticalCenter="0"/> 
    </s:WindowedApplication>

Compilación de la aplicación

Antes de que se pueda ejecutar y depurar la aplicación, compile el código MXML en un archivo SWF utilizando el compilador amxmlc. El compilador amxmlc se encuentra en el directorio bin del SDK de Flex. Si lo desea, el entorno de ruta del equipo se puede configurar para que incluya el directorio bin del SDK de Flex. Al establecer la ruta, se facilita la ejecución de las utilidades en la línea de comandos.

  1. Abra un shell de comandos o una terminal y desplácese a la carpeta del proyecto de la aplicación de AIR.

  2. Indique el siguiente comando:

    amxmlc HelloWorld.mxml 

Con la ejecución de amxmlc se genera HelloWorld.swf, que contiene el código compilado de la aplicación.

Nota: si la aplicación no se compila, corrija la sintaxis o los errores ortográficos. Los errores y los avisos se muestran en la ventana de la consola utilizada para ejecutar el compilador amxmlc.

Para obtener más información, consulte Compilación de archivos de origen MXML y ActionScript para AIR.

Prueba de la aplicación

Para ejecutar y probar la aplicación desde la línea de comandos, utilice AIR Debug Launcher (ADL) para iniciar la aplicación utilizando su archivo descriptor. (ADL se encuentra en el directorio bin del SDK de Flex.)

 Desde el símbolo del sistema, indique el siguiente comando:
adl HelloWorld-app.xml 

La aplicación de AIR resultante tiene un aspecto similar al de esta ilustración:

Con el uso de las propiedades horizontalCenter y verrticalCenter del control Label, el texto se sitúa en el centro de la ventana. Mueva o cambie el tamaño de la ventana tal y como lo haría en cualquier otra aplicación de escritorio.

Para obtener más información, consulte AIR Debug Launcher (ADL).

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 puede adquirir un certificado de firma de código comercial en una entidad emisora de certificados. 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 Flex):
adt -certificate -cn SelfSigned 1024-RSA sampleCert.pfx samplePassword

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 del paquete 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.swf

Se le solicitará la contraseña del archivo del almacén de claves. Escriba la contraseña y presione Intro. Los caracteres de la contraseña no se muestran por razones de seguridad.

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 tres archivos, pero se puede incluir cualquier número de archivos y directorios.

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.

Para obtener más información, consulte Empaquetado de un archivo de instalación de AIR de escritorio.