Criando janelas customizadas com Adobe AIR

O Adobe AIR permite que você personalize as janelas de suas aplicações, por padrão, o Adobe AIR utiliza o layout das janelas do sistema operacional(Windows, Mac ou Linux), no Flex existe a opção de usar a FlexChrome(que particularmente não sou muito fã). Mostrarei um exemplo simples usando o Adobe Flex, Adobe Dreamweaver CS4 e o Adobe Flash CS4.

Se ainda não conhece o Adobe AIR, recomendo que dê uma olhada nesse artigo antes de proseguir com o tutorial 😉


Adobe Flex

No Flex Builder, crie um projeto do tipo “Desktop application”, por padrão ele criará dois arquivos, um .mxml e um .xml responsavel pela configuração do aplicativo.
No arquivo .xml, alteremos as seguintes tags: systemChrome e transparent.
O arquivo final deverá ficar da seguinte maneira:
[xml]
< ?xml version="1.0" encoding="UTF-8"?>

AIR-chrome
AIR_chrome
AIR_chrome
v1

[This value will be overwritten by Flex Builder in the output app.xml]
none
true


[/xml]
Configuramos para que nossa aplicação não utilize a janela do estilo do sistema operacional e que seja transparente. Se pedirmos pra rodar a aplicação, veremos que aparecerá a janela padrão do Flex (FlexChrome). No entanto não é o que queremos ainda.
No arquivo .mxml, na tag WindowedApplication, setamos a propriedade showFlexChrome para false.
[mxml]

< / mx:WindowedApplication>
[/mxml]
Se pedirmos para rodar novamente, veremos que a janela padrão do Flex também desapareceu. Agora criaremos o restante da aplicação.
Adicione um componente Canvas do tamanho de sua preferência, e adicione três componentes do tipo Button no palco, importante lembrar de colocar uma cor de fundo do Canvas para que sua aplicação seja vista.
[mxml]
< mx :Canvas id="cv_back" width="100%" height="100%" cornerRadius="10" borderStyle="solid" backgroundColor="#061D7E">



< / mx:Canvas>
[/mxml]

Agora adicionemos as ações de minimizar, maximizar-restaurar e fechar a aplicação. Para isso teremos acesso a API propria do Adobe AIR para janelas. Note que para maximizar e restaurar, usamos uma flag para saber se a janela esta ou não maximizada.
[actionscript3]
private var isMax:Boolean = false;

private function minimizar(e:MouseEvent):void
{
stage.nativeWindow.minimize();
}

private function maximizar(e:MouseEvent):void
{
if(!isMax)
{
stage.nativeWindow.maximize();
isMax = true;
}
else
{
stage.nativeWindow.restore();
isMax = false;
}
}

private function fechar(e:MouseEvent):void
{
stage.nativeWindow.close();
}
[/actionscript3]
Agora para completar uma função para que a janela possa ser arrastada com o mouse.
[actionscript3]
private function moveit(e:MouseEvent):void
{
stage.nativeWindow.startMove();
cv_back.alpha = 0.5;
}
[/actionscript3]
Depois basta adicionar mais uma função que fará os botoes “escutarem” essas funcões. Segue o código completo:
[mxml]
< ?xml version="1.0" encoding="utf-8"?>
< mx :WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" showFlexChrome="false" creationComplete="init();">
< mx :Script>
< ![CDATA[ private var isMax:Boolean = false; public function init():void { cv_back.addEventListener(MouseEvent.MOUSE_DOWN, moveit); cv_back.addEventListener(MouseEvent.MOUSE_UP, nomove); bot_min.addEventListener(MouseEvent.CLICK, minimizar); bot_max.addEventListener(MouseEvent.CLICK, maximizar); bot_close.addEventListener(MouseEvent.CLICK, fechar); } private function moveit(e:MouseEvent):void { stage.nativeWindow.startMove(); cv_back.alpha = 0.5; } private function nomove(e:MouseEvent):void { cv_back.alpha = 1; } private function minimizar(e:MouseEvent):void { stage.nativeWindow.minimize(); } private function maximizar(e:MouseEvent):void { if(!isMax) { stage.nativeWindow.maximize(); isMax = true; } else { stage.nativeWindow.restore(); isMax = false; } } private function fechar(e:MouseEvent):void { stage.nativeWindow.close(); } ]]>
< / mx:Script>
< mx:Canvas id="cv_back" width="100%" height="100%" cornerRadius="10" borderStyle="solid" backgroundColor="#061D7E">



< / mx:Canvas>
< / mx:WindowedApplication>
[/mxml]

Download dos arquivos

Adobe Flash CS4/CS3

Para criar aplicativos em Adobe AIR com o Adobe Flash CS3, é necessario fazer uma atualização. Visite Adobe AIR Update for Flash CS3 Professional. O Adobe Flash CS4 já vem com suporte nativo para criar aplicativos em Adobe AIR.

Crie um novo arquivo do tipo “Flash File(Adobe AIR)” e adicione três componentes do tipo “Button” no palco. Eles serão respectivamente os botões de minimizar, maximizar-restaurar,fechar. Na primeira vez que você compila o FLA, ele já cria um arquivo .xml do seu aplicativo. Para configura-lo, basta ir em File->AIR Settings…
Edite as informações com suas preferências, não esqueça de deixar a opção Window Chrome como “Custom Chrome(transparent)”, seu arquivo de configuração deve ficar parecido com o abaixo:
[xml]
< ?xml version="1.0" encoding="UTF-8" standalone="no" ?>

com.adobe.example.chrome
1.0
chrome

chrome


chrome.swf
none
true true
true
true
true


false
false

[/xml]
Criei um movieclip azul com o nome de instancia “mc_chrome” para ser como fundo do aplicativo.
Agora colocando as ações nos botões a ser colocado na linha de tempo principal:
[actionscript3]
var isMax:Boolean = false;

mc_chrome.addEventListener(MouseEvent.MOUSE_DOWN,moveit);
mc_chrome.addEventListener(MouseEvent.MOUSE_UP,nomove);

function moveit(e:MouseEvent):void
{
stage.nativeWindow.startMove();
mc_chrome.alpha = .5;
//mc_chrome.blur
}

function nomove(e:MouseEvent):void
{
mc_chrome.alpha = 1;
}

////////
bot_min.addEventListener(MouseEvent.CLICK,minimizar);
function minimizar(e:MouseEvent):void
{
stage.nativeWindow.minimize();
}
bot_max.addEventListener(MouseEvent.CLICK,maximizar);
function maximizar(e:MouseEvent):void
{
if (!isMax)
{
stage.nativeWindow.maximize();
isMax = true;
}
else
{
stage.nativeWindow.restore();
isMax = false;
}
}
bot_close.addEventListener(MouseEvent.CLICK,fechar);

function fechar(e:MouseEvent):void
{
stage.nativeWindow.close();
}
[/actionscript3]

Download dos arquivos

Adobe Dreamweaver CS4/CS3

Para usar o Adobe AIR com o HTML/Ajax, utilizarei o Adobe Dreamweaver CS3, mas nada impede de você utilizar seu editor de preferência e compilar usando o SDK do Adobe AIR.
Com o Dreamweaver é possivel ter acesso no code hints a API especifica do Adobe AIR para javascript, basta instalar a seguinte extensão:
Adobe AIR Extension for Dreamweaver

No item “Site” do Dreamweaver aparecerá duas nova opções(Create AIR File e AIR Application Settings). Crie um novo documento HTML e na janela Files, depois va em Site->AIR Application Settings. Preenchendo as informações necessarias, você terá criado um arquivo .xml com as configurações do seu aplicativo, seu conteudo devera estar como abaixo:
[xml]
< ?xml version="1.0" encoding="utf-8" ?>

air
false
airteste
air
1

air.html
600
800
none
true true


[/xml]
Mudamos o systemChrome para “none” e transparent para “true”, de resto fica a sua preferência.
Adicione três botoes no html para serem respectivamente os botoes de minimizar, maximizar-restaura e fechar:
[html]



[/html]
Agora criaremos as funções que executarão essas ações, note que estaremos acessando a API especifica do Adobe AIR para javascript.
[javascript]

[/javascript]
A lógica segue a mesma que usamos no Flex e Flash, uma flag para saber se a janela esta ou não maximizada.
Em seguida setamos os botões para que executem as determinadas funções. Segue o código completo:
[html]
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



teste







[/html]
Download dos arquivos

Criar uma janela customizada da uma liberdade maior para que você crie a aplicação com a “cara do usuário”, é um recurso poderoso e por isso mesmo deve ser usado com bastante cuidado, não adianta ter um layout hiper ultra mega power futurista e comprometer a usabilidade do usuário.

Recomendo:
http://www.adobe.com/devnet/air/

Translations:
English Version

6 thoughts on “Criando janelas customizadas com Adobe AIR

  1. Eduardo

    Leonardo França,

    Gostaria de saber se tem como eu começar uma aplicação AIR em modo fullscreen?

    Se tiver como, me dá uma força e diz como faz!!

    Abraços

  2. Mauro

    Salve Leonardo
    Tem alguma rotina ou componente que faça o Flex ler conteúdos de outras páginas(sites)tipo, preencher campos ou procurar datas em uma página?

    Falow

Leave a Reply