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:

  1. < ?xml version="1.0" encoding="UTF-8"?>
  2. <application xmlns="http://ns.adobe.com/air/application/1.1">
  3.     <id>AIR-chrome</id>
  4.     <filename>AIR_chrome</filename>
  5.     <name>AIR_chrome</name>
  6.     <version>v1</version>
  7.     <initialwindow>
  8.         <content>[This value will be overwritten by Flex Builder in the output app.xml]</content>
  9.         <systemchrome>none</systemchrome>
  10.         <transparent>true</transparent>
  11.     </initialwindow>
  12. </application>

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

  1. private var isMax:Boolean = false;
  2.  
  3. private function minimizar(e:MouseEvent):void
  4. {
  5.     stage.nativeWindow.minimize();
  6. }
  7.  
  8. private function maximizar(e:MouseEvent):void
  9. {
  10.     if(!isMax)
  11.     {
  12.         stage.nativeWindow.maximize();
  13.         isMax = true;
  14.     }
  15.        else
  16.         {
  17.         stage.nativeWindow.restore();
  18.         isMax = false;
  19.     }
  20. }
  21.            
  22. private function fechar(e:MouseEvent):void
  23. {
  24.     stage.nativeWindow.close();
  25. }

Agora para completar uma função para que a janela possa ser arrastada com o mouse.

actionscript3

  1. private function moveit(e:MouseEvent):void
  2. {
  3.     stage.nativeWindow.startMove();
  4.     cv_back.alpha = 0.5;
  5. }

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:

  1. < ?xml version="1.0" encoding="UTF-8" standalone="no" ?>
  2. <application xmlns="http://ns.adobe.com/air/application/1.1">
  3.   <id>com.adobe.example.chrome</id>
  4.   <version>1.0</version>
  5.   <filename>chrome</filename>
  6.   <description />
  7.   <name>chrome</name>
  8.   <copyright />
  9.   <initialwindow>
  10.     <content>chrome.swf</content>
  11.     <systemchrome>none</systemchrome>
  12.     <transparent>true</transparent>
  13.     <visible>true</visible>
  14.     <maximizable>true</maximizable>
  15.     <minimizable>true</minimizable>
  16.     <resizable>true</resizable>
  17.   </initialwindow>
  18.   <icon />
  19.   <customupdateui>false</customupdateui>
  20.   <allowbrowserinvocation>false</allowbrowserinvocation>
  21. </application>

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

  1. var isMax:Boolean = false;
  2.  
  3. mc_chrome.addEventListener(MouseEvent.MOUSE_DOWN,moveit);
  4. mc_chrome.addEventListener(MouseEvent.MOUSE_UP,nomove);
  5.  
  6. function moveit(e:MouseEvent):void
  7. {
  8.     stage.nativeWindow.startMove();
  9.     mc_chrome.alpha = .5;
  10.     //mc_chrome.blur
  11. }
  12.  
  13. function nomove(e:MouseEvent):void
  14. {
  15.     mc_chrome.alpha = 1;
  16. }
  17.  
  18. ////////
  19. bot_min.addEventListener(MouseEvent.CLICK,minimizar);
  20. function minimizar(e:MouseEvent):void
  21. {
  22.     stage.nativeWindow.minimize();
  23. }
  24. bot_max.addEventListener(MouseEvent.CLICK,maximizar);
  25. function maximizar(e:MouseEvent):void
  26. {
  27.     if (!isMax)
  28.     {
  29.         stage.nativeWindow.maximize();
  30.         isMax = true;
  31.     }
  32.     else
  33.     {
  34.         stage.nativeWindow.restore();
  35.         isMax = false;
  36.     }
  37. }
  38. bot_close.addEventListener(MouseEvent.CLICK,fechar);
  39.  
  40.  
  41. function fechar(e:MouseEvent):void
  42. {
  43.     stage.nativeWindow.close();
  44. }

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:

  1. < ?xml version="1.0" encoding="utf-8" ?>
  2. <application xmlns="http://ns.adobe.com/air/application/1.1">
  3.   <filename>air</filename>
  4.   <customupdateui>false</customupdateui>
  5.   <name>airteste</name>
  6.   <id>air</id>
  7.   <version>1</version>
  8.   <initialwindow>
  9.     <content>air.html</content>
  10.     <height>600</height>
  11.     <width>800</width>
  12.     <systemchrome>none</systemchrome>
  13.     <transparent>true</transparent>
  14.     <visible>true</visible>
  15.   </initialwindow>
  16. </application>

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:

  1. <input type="button" name="_" value="_" />
  2. <input type="button" name="M" value="M" />
  3. <input type="button" name="X" value="X" />

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

javascript

  1. <script language="javascript">
  2. var isMax = false;
  3. function minimizar()
  4. {
  5.     window.nativeWindow.minimize();
  6. }
  7.  
  8. function maximizar()
  9. {
  10.     if(!isMax)
  11.     {
  12.         window.nativeWindow.maximize();
  13.         isMax = true;
  14.     }
  15.     else
  16.     {
  17.         window.nativeWindow.restore();
  18.         isMax = false;
  19.     }  
  20. }
  21.  
  22. function fechar()
  23. {
  24.     window.nativeWindow.close();
  25. }
  26. </script>

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:

  1. < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>teste</title>
  6. <script language="javascript">
  7. var isMax = false;
  8. function minimizar()
  9. {
  10.     window.nativeWindow.minimize();
  11. }
  12.  
  13. function maximizar()
  14. {
  15.     if(!isMax)
  16.     {
  17.         window.nativeWindow.maximize();
  18.         isMax = true;
  19.     }
  20.     else
  21.     {
  22.         window.nativeWindow.restore();
  23.         isMax = false;
  24.     }  
  25. }
  26.  
  27. function fechar()
  28. {
  29.     window.nativeWindow.close();
  30. }
  31.  
  32. </script>
  33. </head>
  34.  
  35. <body bgcolor="#000000">
  36. <input type="button" name="_" value="_" onclick="minimizar();"/>
  37. <input type="button" name="M" value="M" onclick="maximizar();"/>
  38. <input type="button" name="X" value="X" onclick="fechar();"/>
  39. </body>
  40. </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

ActionScript 3.0, Adobe AIR, Flash, Flex , , ,

6 comments


  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. Muito bom Leonardo… Obrigado pela ajuda.. se precisar de mim é só falar.. rs

  3. 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

  4. Acredito que seja possivel usando a api de javascript do Adobe AIR

  5. este site tem me ajudado muito se quizer entre em contato andersonf_rj@hotmail.com

Leave a Reply