Princípios básicos das janelas nativas no AIR

Adobe AIR 1.0 e posterior

Para ver uma explicação rápida e exemplos de código para trabalhar com janelas originais no AIR, consulte os seguintes artigos de início rápido do Adobe Developer Connection:

O AIR oferece uma API de janelas fácil de usar e compatível com várias plataformas, que permite criar janelas de sistema operacional nativas usando técnicas de programação em Flash®, Flex™ e HTML.

Com o AIR, você tem grande liberdade para desenvolver a aparência do seu aplicativo. As janelas que você cria parecem um aplicativo padrão de área de trabalho, correspondendo ao estilo Apple quando em execução no Mac, em conformidade com convenções Microsoft quando executadas no Windows e em harmonia com o gerenciador de janelas do Linux, tudo sem incluir um código específico de linha de plataforma. Se preferir, você pode usar o cromo extensível e que pode ter a capa trocada, fornecido pela estrutura do Flex, para estabelecer o seu próprio estilo, independentemente do local onde o aplicativo é executado. Você pode até mesmo desenhar seus próprios cromos de janelas usando arte final vetorial e de bitmap com suporte completo para transparência e mesclagem alfa na área de trabalho. Cansado de janelas retangulares? Desenhe uma redonda.

Janelas no AIR

O AIR suporta três APIs diferentes para se trabalhar com janelas:

  • A classe NativeWindow orientada para ActionScript fornece o nível mais baixo de API de janela. Use o NativeWindows em aplicativos de autoria Flash Professional e ActionScript. Considere estender a classe NativeWindow para especializar as janelas usadas em seu aplicativo.

  • No ambiente HTML, você pode usar a classe JavaScript Window, assim como faria em um aplicativo da Web baseado em navegador. As chamadas para os métodos JavaScript Window são encaminhadas para o objeto janela nativo subjacente.

  • As classes mx:WindowedApplication e mx:Window da estrutura do Flex fornecem um "invólucro" para a classe NativeWindow. O componente WindowedApplication substitui o componente Application quando você cria um aplicativo do AIR com Flex e deve ser sempre usado como janela inicial no aplicativo Flex.

Janelas ActionScript

Quando criar janelas com a classe NativeWindow, use a lista de exibição no palco do Flash Player diretamente. Para adicionar um objeto visual a uma NativeWindow, adicione o objeto à lista de exibição do palco da janela ou a outro contêiner do objeto de exibição no palco.

Janelas HTML

Quando cria janelas HTML, você usa HTML, CSS e JavaScript para exibir o conteúdo. Para adicionar um objeto visual a uma janela HTML, você adiciona esse conteúdo ao HTML DOM. As janelas HTML são uma categoria especial de NativeWindow. O host do AIR define uma propriedade nativeWindow em janelas HTML que dá acesso à ocorrência subjacente de NativeWindow. Você pode usar essa propriedade para acessar as propriedades, os métodos e os eventos de NativeWindow descritos aqui.

Nota: O objeto JavaScript Window também tem métodos para gerar scripts da janela que o contém, como moveTo() e close() . Se houver métodos de sobreposição disponíveis, você poderá usar o método que for mais conveniente.

Janelas da estrutura do Flex

Quando você cria janelas com a estrutura do Flex, normalmente usa componentes MXML para preencher a janela. Para adicionar um componente do Flex a uma janela, adicione o elemento componente à definição MXML da janela. Também é possível usar o ActionScript para adicionar conteúdo dinamicamente. Os componentes mx:WindowedApplication e mx:Window são projetados como contêineres do Flex e, por isso, podem aceitar componentes do Flex diretamente, enquanto os objetos NativeWindow não. Quando necessário, as propriedades e os métodos de NativeWindow podem ser acessados através dos objetos WindowedApplication e Window usando-se a propriedade nativeWindow .

A janela inicial do aplicativo.

A primeira janela do seu aplicativo é criada automaticamente para você pelo AIR. O AIR define as propriedades e o conteúdo da janela usando os parâmetros especificados no elemento initialWindow do arquivo de descrição do aplicativo.

Se o conteúdo raiz é um arquivo SWF, o AIR cria uma ocorrência de NativeWindow, carrega o arquivo SWF e o adiciona ao palco da janela. Se o conteúdo raiz é um arquivo HTML, o AIR cria uma janela HTML e carrega o código HTML.

Fluxo de eventos de janelas nativas

As janelas nativas despacham eventos para notificar os componentes interessados de que uma alteração importante está prestes a ocorrer ou já ocorreu. Muitos eventos relacionados a janelas são despachados em pares. O primeiro evento avisa que uma alteração está prestes a ocorrer. O segundo comunica que a alteração foi feita. É possível cancelar um evento de aviso, mas não um evento de notificação. Esta sequência ilustra o fluxo de eventos que ocorre quando um usuário clica no botão Maximizar de uma janela:

  1. O objeto NativeWindow despacha um evento displayStateChanging .

  2. Se nenhum ouvinte registrado cancelar o evento, a janela será maximizada.

  3. O objeto NativeWindow despacha um evento displayStateChange .

    Além disso, o objeto NativeWindow despacha eventos de alterações relacionadas feitas no tamanho e na posição de uma janela. A janela não despacha eventos de aviso referentes a essas alterações relacionadas. Os eventos relacionados são:

    1. Um evento move é despachado se o canto superior esquerdo da janela foi movido por causa da operação de maximização.

    2. Um evento resize é despachado se o tamanho da janela mudou devido à operação de maximização.

    Um objeto NativeWindow despacha uma sequência semelhante de eventos quando maximiza, restaura, fecha, movimenta e redimensiona uma janela.

    Os eventos de aviso são despachados somente quando uma alteração é iniciada através do cromo da janela ou de outro mecanismo controlado pelo sistema operacional. Quando você chama um método de janela para alterar o tamanho, a posição ou o estado de exibição de uma janela, a janela só despacha um evento para comunicar a alteração. Se desejar, você pode despachar um evento de aviso usando o método de janela dispatchEvent() e, depois, verificar se o seu evento de aviso foi cancelado antes de prosseguir com a alteração.

    Veja informações detalhadas sobre as classes, os métodos, as propriedades e os eventos da API de janela na Referência do ActionScript® 3.0 para Adobe® Flash® Platform .

Propriedades que controlam o estilo e o comportamento de janelas nativas

As seguintes propriedades controlam a aparência e o comportamento básicos de uma janela:

  • type

  • systemChrome

  • transparent

  • owner

Quando cria uma janela, você define essas propriedades no objeto NativeWindowInitOptions passado para o construtor da janela. O AIR lê as propriedades da janela inicial do aplicativo no descritor do aplicativo. (Com exceção da propriedade type , que não pode ser definida no descritor do aplicativo e é sempre definida como normal .) Não é possível alterar as propriedades após a criação da janela.

Algumas configurações dessas propriedades são mutuamente incompatíveis: systemChrome não pode ser definida como standard quando transparent é true ou quando type é lightweight .

Tipos de janela

Os tipos de janela do AIR combinam atributos de cromo e visibilidade do sistema operacional nativo para criar três tipos funcionais de janela. Use as constantes definidas na classe NativeWindowType para fazer referência aos nomes de tipo no código. O AIR oferece os seguintes tipos de janela:

Tipo

Descrição

Normal

Uma janela típica. As janelas normais usam o cromo de estilo em tamanho máximo e são exibidas na barra de tarefas do Windows e no menu de janela do Mac OS X.

Utilitário

Uma paleta de ferramentas. As janelas de utilitário usam uma versão reduzida do cromo do sistema e não são exibidas na barra de tarefas do Windows nem no menu de janela do Mac OS X.

Leve

As janelas leves não têm cromo e não são exibidas na barra de tarefas do Windows nem no menu de janela do Mac OS X. Além disso, as janelas leves não têm o menu Sistema (Alt+espaço) no Windows. As janelas leves são adequadas para as bolhas de notificação e controles como caixas de combinação que abrem uma área de exibição de curta duração. Quando se usa o tipo leve, a propriedade systemChrome deve ser definida como none .

Cromo de janela

O cromo de janela é o conjunto de controles que permitem aos usuários manipular uma janela no ambiente da área de trabalho. Os elementos do cromo incluem a barra de título e seus botões, borda e alças de redimensionamento.

Cromo do sistema

É possível definir a propriedade systemChrome como standard ou none . Escolha o cromo do sistema standard para dar à sua janela o conjunto de controles padrão criados e estilizados pelo sistema operacional do usuário. Escolha none para fornecer o seu próprio cromo para a janela. Use as constantes definidas na classe NativeWindowSystemChrome para fazer referência às configurações de cromo do sistema no código.

O cromo do sistema é gerenciado pelo sistema. Seu aplicativo não tem acesso direto aos controles propriamente ditos, mas pode reagir a eventos despachados quando eles são usados. Quando você usa o cromo padrão para uma janela, a propriedade transparent deve ser definida como false e a propriedade type deve ser normal ou utility .

Cromo do Flex

Quando você usa os componentes :WindowedApplication ou :Window do Flex, a janela pode utilizar o cromo do sistema ou o cromo fornecido pela estrutura do Flex. Para usar o cromo do Flex, defina a propriedade systemChrome usada para criar a janela como none . Ao utilizar componentes spark Flex 4 em vez de componentes mx, é necessário especificar a classe da skin para utilizar o Flex chrome. É possível utilizar as skins integradas ou uma outra skin. O exemplo a seguir demonstra como utilizar a classe de skin spark WindowedApplication para fornecer o chrome da janela: 

<?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 obter mais informações, consulte Utilizando o Flex 4: Sobre contêineres de janela do AIR: Controlando o chrome da janela

Cromo personalizado

Se você criar uma janela sem um cromo do sistema, deverá adicionar seus próprios controles de cromo para administrar as interações entre um usuário e a janela. Você também tem liberdade para criar janelas não retangulares transparentes.

Para usar o cromo personalizado com os componentes mx:WindowedApplication ou mx:Window, defina o estilo showFlexChrome como false . Do contrário, o Flex vai acrescentar seu próprio cromo às suas janelas.

Transparência de janelas

Para permitir a mesclagem alfa de uma janela com a área de trabalho ou outras janelas, defina a propriedade transparent da janela como true . A propriedade transparent deve ser definida antes de a janela ser criada e não é possível alterá-la.

Uma janela transparente não tem um plano de fundo padrão. Qualquer área da janela que não contém um objeto desenhado pelo aplicativo fica invisível. Se um objeto exibido tiver uma configuração alfa de menos de 1, qualquer coisa abaixo do objeto ficará visível, inclusive outros objetos de exibição na mesma janela, em outras janelas e na área de trabalho.

As janelas transparentes são úteis quando você deseja criar aplicativos com bordas irregulares ou que “desaparecem” ou parecem ser invisíveis. No entanto, o processamento de grandes áreas com mesclagem alfa pode ser lento, por isso o efeito deve ser usado com cautela.

Importante: No Linux, eventos de mouse não passam por pixels totalmente transparentes. Você deve evitar criar janelas com áreas grandes totalmente transparentes, já que isso pode bloquear invisivelmente o acesso do usuário a outras janelas ou itens na área de trabalho. No Mac OS X e no Windows, eventos de mouse passam por pixels totalmente transparentes.

A transparência não pode ser usada com janelas que têm um cromo do sistema. Além disso, o conteúdo SWF e PDF em HTML não pode ser exibido em janelas transparentes. Para obter mais informações, consulte Considerações ao carregar conteúdo SWF ou PDF em uma página HTML .

A propriedade estática NativeWindow.supportsTransparency informa se a transparência de janela está disponível. Quando não há suporte para transparência, o aplicativo é composto com um plano de fundo preto. Nesses casos, qualquer área transparente do aplicativo é exibida como uma área preta opaca. É uma boa prática fornecer um recurso de emergência caso essa propriedade se mostre false . Por exemplo, você poderia exibir uma caixa de diálogo de aviso para o usuário ou exibir uma interface de usuário de retangular não transparente.

Vale observar que sempre há suporte para transparência nos sistemas operacionais Mac e Windows. O suporte em sistemas operacionais Linux requer um gerenciador de composição de janela, mas mesmo quando um gerenciador de composição de janela está ativo, a transparência pode estar indisponível devido às opções de exibição do usuário ou configuração de hardware.

Transparência em uma janela de aplicativo MXML

Por padrão, o plano de fundo de uma janela MXML é opaco, mesmo que você crie a janela como transparent . (Observe o efeito de transparência nos cantos da janela.) Para mostrar um plano de fundo transparente da janela, defina uma cor de plano de fundo e um valor alfa na folha de estilo ou no elemento <mx:Style> contido no arquivo MXML do seu aplicativo. Por exemplo, a seguinte declaração de estilo confere ao plano de fundo uma sombra verde levemente transparente: 

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

Transparência em uma janela de aplicativo HTML

Por padrão, o plano de fundo do conteúdo HTML exibido em janelas HTML e objetos HTMLLoader é opaco, mesmo quando a janela que o contém é transparente. Para desativar o plano de fundo padrão exibido com conteúdo HTML, defina a propriedade paintsDefaultBackground como false . O exemplo abaixo cria um objeto HTMLLoader e desativa o plano de fundo padrão: 

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

Este exemplo usa JavaScript para desativar o plano de fundo padrão de uma janela HTML: 

window.htmlLoader.paintsDefaultBackground = false;

Se um elemento do documento HTML define uma cor de plano de fundo, o plano de fundo desse elemento não fica transparente. Não há suporte para definir um valor de transparência parcial (ou opacidade). No entanto, você pode usar um elemento gráfico no formato PNG transparente para uma página ou um elemento de página a fim de obter um efeito visual semelhante.

Propriedade de janelas

Uma janela pode ser proprietária de uma ou mais janelas. Essas janelas subordinadas sempre aparecem na frente da janela proprietária, são minimizadas e restauradas juntamente com a janela proprietária e são fechadas quando a janela proprietária é fechada. A propriedade de uma janela não pode ser transferida para outra janela nem removida. Uma janela pode ter apenas uma proprietária, mas pode ser proprietária de qualquer número de outras janelas.

Você pode usar a propriedade de janelas para facilitar o gerenciamento das janelas usadas para paletas de ferramentas e caixas de diálogo. Por exemplo, se você tiver exibido uma caixa de diálogo Salvar associada a uma janela de documento, tornar a janela de documento proprietária da caixa de diálogo manterá automaticamente a caixa de diálogo na frente da janela de documento.

Um catálogo de janelas visuais

A seguinte tabela ilustra os efeitos visuais de diferentes combinações de configurações de propriedades de janela nos sistemas operacionais Mac OS X, Windows e Linux:

Configurações de janela

Mac OS X

Microsoft Windows

Linux *

Tipo: normal

SystemChrome: standard

Transparente: false

Tipo: utilitário

SystemChrome: standard

Transparente: false

Tipo: Qualquer um

SystemChrome: none

Transparente: false

Tipo: Qualquer um

SystemChrome: none

Transparente: true

mxWindowedApplication ou mx:Window

Tipo: Qualquer um

SystemChrome: none

Transparente: true

Gerenciador de janela * Ubuntu with Compiz

Nota: Os seguintes elementos de cromo do sistema não têm suporte no AIR: a barra de ferramentas do OS X, o ícone Proxy do Mac OS X, os ícones na barra de título do Windows e o cromo do sistema alternativo.