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"?>
[/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]
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" ?>
[/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]
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" ?>
[/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
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
http://help.adobe.com/en_US/AIR/1.5/devappsflex/WS5b3ccc516d4fbf351e63e3d118666ade46-7e06.html
😉
Muito bom Leonardo… Obrigado pela ajuda.. se precisar de mim é só falar.. rs
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
Acredito que seja possivel usando a api de javascript do Adobe AIR
este site tem me ajudado muito se quizer entre em contato andersonf_rj@hotmail.com