Creación de su primera aplicación de AIR de Flex de escritorio en Flash Builder

Flash Builder incluye las herramientas necesarias para desarrollar y empaquetar aplicaciones de AIR.

La creación de aplicaciones de AIR en Flash Builder o Flex Builder comienza del mismo modo en que se crean otros proyectos de aplicaciones basadas en Flex: mediante la definición de un nuevo proyecto.

1. Abra Flash Builder.

2. Seleccione File (Archivo) > New (Nuevo)> Flex Project (Proyecto de Flex).

3. Indique el nombre del proyecto como AIRHelloWorld.

4. En Flex, las aplicaciones de AIR se consideran un tipo de aplicación. Se dispone de dos opciones:

   • Una aplicación web que se ejecuta en Adobe® Flash® Player.

   • Una aplicación de escritorio que se ejecuta en Adobe AIR.

   Seleccione Escritorio como tipo de aplicación.

5. Haga clic en Finish (Finalizar) para crear el proyecto.

Los proyectos de AIR constan inicialmente de dos archivos: el archivo principal MXML y el archivo XML de la aplicación (al que se hace referencia como archivo descriptor de la aplicación). El último archivo especifica las propiedades de la aplicación.

Para obtener más información, consulte Developing AIR applications with Flash Builder (Desarrollo de aplicaciones de AIR con Flash Builder; en inglés).

Para escribir el código de la aplicación “Hello World”, se edita el archivo MXML de la aplicación (AIRHelloWorld.mxml), que se abre en el editor. (Si el archivo no se abre, utilice el navegador de proyectos para abrir el archivo.)

Las aplicaciones de AIR de Flex en el escritorio se incluyen en la etiqueta MXML WindowedApplication. La etiqueta MXML WindowedApplication crea una sencilla ventana que incluye controles básicos como, por ejemplo, una barra de título y un botón de cierre.

1. Añada un atributo title al componente WindowedApplication y asígnele el valor "Hello World" :

   <?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ñada un componente Label a la aplicación (sitúelo dentro de la etiqueta WindowedApplication), establezca la propiedad text del componente Label en "Hello AIR" y defina restricciones de diseño para mantenerlo centrado, tal y como se muestra a continuación:

   <?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>

3. Añada el siguiente bloque de estilo inmediatamente después de la etiqueta inicial WindowedApplication y antes de la etiqueta del componente label introduzca:

   <fx:Style> 
       @namespace s "library://ns.adobe.com/flex/spark"; 
       s|WindowedApplication 
       { 
        
   skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin"); 
           background-color:#999999; 
           background-alpha:"0.7"; 
       }          
   </fx:Style>

Esta configuración de estilo se aplica a toda la aplicación y se procesa el fondo de la ventana con un gris ligeramente transparente.

El código de la aplicación presenta en este momento el siguiente aspecto:

<?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"> 
     
    <fx:Style> 
        @namespace s "library://ns.adobe.com/flex/spark"; 
        s|WindowedApplication 
        { 
         
skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin"); 
            background-color:#999999; 
            background-alpha:"0.7"; 
        }          
    </fx:Style> 
 
    <s:Label text="Hello AIR" horizontalCenter="0" verticalCenter="0"/> 
</s:WindowedApplication>

A continuación, se modificará parte de la configuración del descriptor de la aplicación para permitir que la aplicación sea transparente:

Para probar el código de la aplicación que se ha escrito, ejecútelo en modo de depuración.

1. Haga clic en el botón Debug (Depurar) de la barra de herramientas principal.

   También puede seleccionar el comando Run (Ejecutar) > Debug (Depurar) > AIRHelloWorld.

   La aplicación de AIR resultante debe ser similar al siguiente ejemplo:

   

2. Con el uso de las propiedades horizontalCenter y verticalCenter 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.

Ahora ya se puede empaquetar la aplicación "Hello World" en un archivo de AIR para su distribución. Un archivo de AIR es un archivo de almacenamiento que contiene los archivos de la aplicación, que son todos los archivos incluidos en la carpeta bin del proyecto. En este sencillo ejemplo, estos archivos son los archivos SWF y XML de la aplicación. El paquete de AIR se distribuye a los usuarios, que posteriormente lo utilizan para instalar la aplicación. Un paso necesario en este proceso consiste en firmarlo digitalmente.

1. Compruebe que la aplicación no presenta errores de compilación y que se ejecuta correctamente.

2. Seleccione Project (Proyecto) > Export Release Version (Exportar versión oficial).

3. Compruebe que el proyecto AIRHelloWorld y la aplicación AIRHelloWorld.mxml se incluyan para el proyecto y la aplicación.

4. Seleccione Exportar como opción de paquete de AIR firmado. A continuación, haga clic en Siguiente.

5. Si ya dispone de un certificado digital existente, haga clic en Examinar y selecciónelo.

6. Si debe crear un nuevo certificado digital con firma automática, seleccione Crear.

7. Introduzca la información necesaria y haga clic en Aceptar.

8. Haga clic en Finalizar para generar el paquete de AIR denominado AIRHelloWorld.air.

Ahora puede instalar y ejecutar la aplicación desde Project Navigator (Navegador de proyectos) en Flash Builder o desde el sistema de archivos haciendo doble clic en el archivo de AIR.