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

[/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