Aspectos básicos de las ventanas nativas en AIR

Adobe AIR 1.0 y posterior

Para ver una explicación rápida y ejemplos de código del trabajo con ventanas nativas en AIR, consulte los siguientes artículos de inicio rápido del Centro de desarrollo de Adobe:

AIR proporciona una API de ventana fácil de usar y válida para todas las plataformas con la que es posible crear ventanas nativas de sistema operativo utilizando Flash®, Flex™ y técnicas de programación HTML.

Con AIR, las posibilidades de desarrollar el aspecto de su aplicación son enormes. Las ventanas que se crean pueden presentar un aspecto similar a una aplicación de escritorio estándar, coincidiendo con el estilo de Apple cuando se ejecutan en Mac, ajustándose a las convenciones de Microsoft cuando se ejecutan en Windows y en armonía con el administrador de ventanas de Linux; todo ello sin incluir ninguna línea de código de plataforma específica. También puede utilizar el fondo cromático de aspecto configurable de la arquitectura de Flex para establecer su propio estilo sin importar dónde se ejecute la aplicación. Incluso puede dibujar su propio fondo cromático de ventana con ilustraciones vectoriales o de mapas de bits con compatibilidad total de transparencia y valores alfa que se fundan con el escritorio. ¿Está cansado de tanta ventana rectangular? Dibuje una redondeada.

Ventanas de AIR

AIR admite tres API diferentes para trabajar con ventanas:

  • La clase NativeWindow orientada a ActionScript proporciona la API de gestión de ventanas de nivel más bajo. Utilice NativeWindows en ActionScript y aplicaciones creadas con Flash Professional. Considere la ampliación de la clase NativeWindow para que se especialice en las ventanas utilizadas en la aplicación.

  • En el entorno HTML, se puede usar la clase Window de JavaScript, tal y como se haría en una aplicación web basada en navegador. Las llamadas a los métodos Window de JavaScript se reenvían al objeto de ventana nativa subyacente.

  • Las clases del marco de Flex, mx:WindowedApplication y mx:Window, proporcionan un “envolvente” de Flex para la clase NativeWindow. El componente WindowedApplication sustituye al componente Application cuando se crea una aplicación de AIR con Flex y siempre se debe usar como ventana inicial en la aplicación de Flex.

Ventanas de ActionScript

Al crear ventanas con la clase NativeWindow, puede utilizar el escenario y la lista de visualización de Flash Player directamente. Para añadir un objeto visual a una ventana NativeWindow, añada el objeto a la lista de visualización del escenario de la ventana o a otro contenedor de objetos de visualización del escenario.

Ventanas HTML

Cuando se crean ventanas HTML, se utiliza HTML, CSS y JavaScript para visualizar el contenido. Para añadir un objeto visual a una ventana HTML, añada el contenido al DOM HTML. Las ventanas HTML son una categoría especial de NativeWindow. El host de AIR define una propiedad nativeWindow en las ventanas HTML que proporciona acceso a la instancia subyacente de NativeWindow. Puede utilizar esta propiedad para acceder a las propiedades, métodos y eventos de NativeWindow que se describen en esta sección.

Nota: el objeto Window de JavaScript también cuenta con métodos para crear scripts de la ventana que los contiene, como por ejemplo, moveTo() y close() . Si dispone de varios métodos al mismo tiempo, puede utilizar el que más le convenga.

Ventanas de la arquitectura de Flex

Cuando se crean ventanas con la arquitectura de Flex, se suelen utilizar componentes MXML para llenar la ventana. Para añadir un componente de Flex a una ventana, añada el elemento del componente a la definición MXML de la ventana. También puede utilizar ActionScript para añadir contenido dinámicamente. Los componentes mx:WindowedApplication y mx:Window se diseñan como contenedores de Flex, por lo que pueden aceptar componentes de Flex directamente, mientras que los objetos NativeWindow no. Si es necesario, se puede acceder a los métodos y propiedades de NativeWindow mediante los objetos WindowedApplication y Window, y la propiedad nativeWindow .

Ventana inicial de la aplicación

AIR crea para el usuario la primera ventana de la aplicación automáticamente. AIR define las propiedades y el contenido de la ventana a partir de los parámetros especificados en el elemento initialWindow del archivo descriptor de la aplicación.

Si el contenido raíz es un archivo SWF, AIR crea una instancia de NativeWindow, carga el archivo SWF y lo añade al escenario de la ventana. Si el contenido raíz es un archivo HTML, AIR crea una ventana HTML y carga el contenido HTML.

Clases de ventanas nativas

Flujo de eventos de ventanas nativas

Las ventanas nativas distribuyen eventos para notificar a los componentes pertinentes sobre cambios importantes que se han producido o pueden producirse. Muchos eventos relacionados con ventanas se distribuyen por parejas. El primer evento advierte sobre un cambio que va a producirse. El segundo evento anuncia que el cambio se ha realizado. Puede cancelar un evento de advertencia, pero no uno de notificación. En la siguiente secuencia se muestra el flujo de eventos que se producen cuando un usuario hace clic en el botón Maximizar de una ventana:

  1. El objeto NativeWindow distribuye un evento displayStateChanging .

  2. Si ningún detector registrado lo cancela, la ventana se maximiza.

  3. El objeto NativeWindow distribuye un evento displayStateChange .

    Además, el objeto NativeWindow también distribuye eventos para los cambios relacionados con el tamaño y la posición de la ventana. La ventana no distribuye eventos de advertencia para estos cambios relacionados. Los eventos relacionados son:

    1. Un evento move se distribuye si la esquina superior izquierda de la ventana se mueve por maximización.

    2. Un evento resize se distribuye si el tamaño de la ventana cambia por maximización.

    Un objeto NativeWindow distribuye una secuencia similar de eventos cuando una ventana se minimiza, se restaura, se cierra, se mueve y se cambia de tamaño.

    Los eventos de advertencia solo se distribuyen si se inicia un cambio del fondo cromático de la ventana o por cualquier otro mecanismo controlado por el sistema operativo. Cuando se llama a un método de ventana para que cambie el tamaño, la posición o el estado de visualización de la ventana, esta solo distribuye un evento para anunciar el cambio. Si lo desea, puede distribuir un evento de advertencia con el método dispatchEvent() de la ventana y, después, ver si el evento de advertencia se ha cancelado antes de realizar el cambio.

    Para obtener más información sobre las clases, métodos, propiedades y eventos de API de ventana, consulte Referencia de ActionScript 3.0 para la plataforma de Adobe Flash .

Propiedades que controlan el estilo y el comportamiento de una ventana nativa

Las siguientes propiedades controlan el aspecto y el comportamiento básicos de una ventana:

  • type

  • systemChrome

  • transparent

  • owner

Al crear una ventana, estas propiedades se establecen en el objeto NativeWindowInitOptions transferido al constructor de la ventana. AIR lee las propiedades de la ventana inicial de la aplicación desde el descriptor de la aplicación. (Salvo la propiedad type , que no se puede establecer en el descriptor de la aplicación y siempre se define en normal .) Las propiedades no se pueden modificar una vez creada la ventana.

Algunos ajustes de estas propiedades son incompatibles entre sí: systemChrome no se puede establecer como standard si transparent es true o si type es lightweight .

Tipos de ventanas

Los tipos de ventanas de AIR combinan atributos de fondo cromático y visibilidad del sistema operativo nativo para crear tres tipos de ventanas funcionales. Puede utilizar las constantes definidas en la clase NativeWindowType para hacer referencia a los nombres de los tipos en el código. AIR proporciona los siguientes tipos de ventanas:

Texto

Descripción

Normal

Una ventana normal. La ventanas normales utilizan el fondo cromático de pantalla completa y se muestran en la barra de tareas de Windows o en el menú Ventana de Mac OS X.

Utilidades

Una paleta de herramientas. Las ventanas de utilidades utilizan una versión más ligera del fondo cromático del sistema y no se muestran en la barra de tareas de Windows ni en el menú Ventana de Mac OS X.

Ligeras

Las ventanas ligeras no tienen fondo cromático y no aparecen en la barra de tareas de Windows ni en el menú Ventana de Mac OS X. Además, las ventanas ligeras no disponen de menú Sistema (Alt+Barra espaciadora) en Windows. El uso de ventanas ligeras está recomendado para mensajes emergentes de notificación o controles, como cuadros emergentes áreas de visualización temporal. Si utiliza el type en ventanas ligeras, systemChrome debe establecerse como none .

Fondo cromático de una ventana

El fondo cromático de una ventana es el conjunto de controles que permiten a los usuarios manipular la ventana en un entorno de escritorio. Los elementos del fondo cromático son la barra de título, los botones de la barra de título, los bordes y los selectores de cambio de tamaño.

Fondo cromático del sistema

Puede establecer la propiedad systemChrome como standard o como none . Seleccione el valor standard de fondo cromático para darle a la ventana el conjunto de controles creados e ideados por el sistema operativo del usuario. Seleccione none para proporcionar su propio fondo cromático a la ventana. Utilice las constantes definidas en la clase NativeWindowSystemChrome para hacer referencia a los parámetros del fondo cromático del sistema en el código.

La gestión del fondo cromático del sistema corre a cargo del propio sistema. La aplicación no tiene acceso directo a los controles, pero puede reaccionar ante la distribución de eventos cuando se utilicen los controles. Si se utiliza el fondo cromático estándar para una ventana, la propiedad transparent debe establecerse como false y la propiedad type debe ser normal o utility .

Fondo cromático de Flex

Si utiliza los componentes WindowedApplication o Window de Flex, la ventana puede utilizar el fondo cromático del sistema o el de la arquitectura de Flex. Para utilizar el fondo cromático de Flex, establezca la propiedad systemChrome utilizada para crear la ventana como none . Si se utilizan componentes spark de Flex 4 y no componentes mx, debe especificar la clase de aspecto para poder usar el fondo cromático de Flex. Puede utilizar los aspectos incorporados o proporcionar los suyos propios. El siguiente ejemplo muestra cómo usar la clase de aspecto spark WindowedApplication incorporada para proporcionar el fondo cromático de la ventana: 

<?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"> 
<fx:Style> 
@namespace "library://ns.adobe.com/flex/spark"; 
WindowedApplication 
{ 
    skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin"); 
} 
</fx:Style> 
</s:WindowedApplication>

Para obtener más información, consulte Using Flex 4: About the AIR window containers: Controlling window chrome (en inglés)

Fondo cromático personalizado

Cuando se crea una ventana sin fondo cromático del sistema, es preciso añadir controles de fondo cromático propios para controlar la interacción entre el usuario y la ventana. También, si lo desea, puede crear ventanas no rectangulares y transparentes.

Para utilizar el fondo cromático personalizado con los componentes mx:WindowedApplication o mx:Window, el estilo showFlexChrome se debe establecer en false . De lo contrario, Flex añadirá su propio fondo cromático a las ventanas.

Transparencia de la ventana

Para permitir la mezcla alfa en una ventana de escritorio o en cualquier otra, establezca la propiedad transparent de la ventana como true . Debe establecer la propiedad transparent antes de crear la ventana y no es posible modificarla.

Una ventana transparente no tiene fondo predeterminado. Cualquier área de la ventana que no contenga objetos dibujados por la aplicación es invisible. Si un objeto visualizado tiene un valor alfa menor que uno, cualquier elemento debajo del objeto será transparente, incluidos los demás objetos de visualización de la misma ventana, de otras ventanas y del escritorio.

Las ventanas transparentes resultan útiles cuando se quieren crear aplicaciones con bordes de forma irregular, aplicaciones que “desaparecen” o aplicaciones invisibles. No obstante, la representación de zonas grandes de mezcla alfa puede ser un proceso lento, por lo que el efecto debe utilizarse con precaución.

Importante: en Linux, los eventos de ratón no pasan por píxeles completamente transparentes. Se debe evitar la creación de ventanas con áreas grandes y completamente transparentes, ya que se puede bloquear de forma invisible el acceso del usuario a otras ventanas o elementos en su escritorio. En Mac OS X y Windows, los eventos de ratón no pasan por píxeles completamente transparentes.

La transparencia no se puede aplicar a ventanas con fondo cromático del sistema. Además, el contenido SWF y PDF del HTML no se visualiza en las ventanas transparentes. Para obtener más información, consulte Consideraciones al cargar el contenido SWF o PDF en una página HTML .

La propiedad NativeWindow.supportsTransparency indica si la ventana puede ser transparente. Si no se admite transparencia, la aplicación se compone con un fondo negro. En estos casos, cualquier área transparente de la aplicación se visualiza en negro opaco. Se recomienda ofrecer un recurso alternativo en caso de que esta propiedad sea false . Por ejemplo, puede mostrar un cuadro diálogo de advertencia al usuario o una interfaz rectangular no transparente.

Tenga en cuenta que la transparencia se admite siempre en los sistemas operativos Mac y Windows. La compatibilidad con los sistemas operativos Linux requiere un administrador de ventanas de composición, pero aunque este administrador esté activo, la transparencia puede no estar disponible debido a las opciones de visualización del usuario o a la configuración de hardware.

Transparencia en una ventana de aplicación MXML

De forma predeterminada, el fondo de una ventana MXML es opaco, incluso si se crea la ventana con el valor transparent . (Observe el efecto de transparencia en las esquinas de la ventana.) Para presentar un fondo transparente en la ventana, establezca un color de fondo y un valor de alfa en la hora de estilos o en el elemento <mx:Style> del archivo MXML de la aplicación. Por ejemplo, la siguiente declaración de estilo añade una sombra verde ligeramente transparente al fondo: 

WindowedApplication 
{ 
    background-alpha:".8"; 
    background-color:"0x448234"; 
}

Transparencia en una ventana de aplicación HTML

De forma predeterminada, el fondo del contenido HTML se visualiza en las ventanas HTML y en los objetos HTMLLoader como opaco, incluso si la ventana que lo contiene es transparente. Para desactivar el fondo predeterminado para el contenido HTML, establezca la propiedad paintsDefaultBackground como false . El siguiente ejemplo crea un objeto HTMLLoader y desactiva el fondo predeterminado: 

var htmlView:HTMLLoader = new HTMLLoader(); 
htmlView.paintsDefaultBackground = false;

Este ejemplo utiliza JavaScript para desactivar el fondo predeterminado de una ventana HTML: 

window.htmlLoader.paintsDefaultBackground = false;

Si un elemento del documento HTML establece un color de fondo, el fondo de dicho elemento no es transparente. No está permitido establecer un valor de transparencia (u opacidad) parcial. Sin embargo, se puede utilizar un gráfico transparente en formato PNG como fondo de página o de elemento de página para conseguir un efecto visual parecido.

Propiedad de las ventanas

Una ventana puede contener una o varias ventanas. Estas ventanas de propiedad aparecen frente a la venta maestra, se minimizan y se restauran con la ventana maestra y se cierran cuando se cierra la ventana maestra. La propiedad de la ventana no se puede transferir a otra ventana ni eliminar. Una ventana solo puede formar parte de una ventana maestra, pero puede poseer cualquier cantidad de ventanas.

La propiedad de las ventanas se puede utilizar para facilitar la administración de ventanas utilizadas para paletas de herramientas y cuadros de diálogo. Por ejemplo, si se mostrara un cuadro de diálogo Guardar asociado a una ventana de documento, al hacer que la ventana de documento contenga el cuadro de diálogo, este se mantendrá frente a la ventana del documento automáticamente.

Catálogo de ventana visual

En la siguiente tabla se resumen los efectos visuales de las distintas combinaciones de parámetros de propiedades de ventanas en los sistemas operativos Mac OS X, Windows y Linux:

Parámetros de ventana

Mac OS X

Microsoft Windows

Linux *

Type: normal

SystemChrome: estándar

Transparent: false

Type: utility

SystemChrome: estándar

Transparent: false

Type: cualquiera

SystemChrome: ninguno

Transparent: false

Type: cualquiera

SystemChrome: ninguno

Transparent: true

mxWindowedApplication o mx:Window

Type: cualquiera

SystemChrome: ninguno

Transparent: true

* Ubuntu con el administrador de ventanas Compiz

Nota: los siguientes elementos del fondo cromático del sistema no se admiten en AIR: la barra de herramientas de Mac OS X, el icono proxy de Mac OS X, los iconos de barra de título de Windows y otros fondos cromáticos alternativos.