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:

PLAIN TEXT
XML:
  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.

PLAIN TEXT
MXML:
  1. <mx :WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" showFlexChrome="false">
  2. </ mx:WindowedApplication>

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.

PLAIN TEXT
MXML:
  1. <mx :Canvas id="cv_back" width="100%" height="100%" cornerRadius="10" borderStyle="solid" backgroundColor="#061D7E">
  2.         <mx :Button x="262" y="10" label="_" width="35" id="bot_min"/>
  3.         <mx :Button x="296" y="10" label="M" width="35" id="bot_max"/>
  4.         <mx :Button x="331" y="10" label="X" width="35" id="bot_close"/>
  5. </ mx:Canvas>

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.

PLAIN TEXT
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.

PLAIN TEXT
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:

PLAIN TEXT
MXML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx :WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" showFlexChrome="false" creationComplete="init();">
  3.     <mx :Script>
  4.         <![CDATA[
  5.             private var isMax:Boolean = false;
  6.        
  7.  
  8.             public function init():void
  9.             {
  10.                 cv_back.addEventListener(MouseEvent.MOUSE_DOWN, moveit);
  11.                 cv_back.addEventListener(MouseEvent.MOUSE_UP, nomove);
  12.                 bot_min.addEventListener(MouseEvent.CLICK, minimizar);
  13.                 bot_max.addEventListener(MouseEvent.CLICK, maximizar);
  14.                 bot_close.addEventListener(MouseEvent.CLICK, fechar);
  15.             }
  16.            
  17.             private function moveit(e:MouseEvent):void
  18.             {
  19.                 stage.nativeWindow.startMove();
  20.                 cv_back.alpha = 0.5;
  21.             }
  22.            
  23.             private function nomove(e:MouseEvent):void
  24.             {
  25.                 cv_back.alpha = 1;
  26.             }
  27.            
  28.             private function minimizar(e:MouseEvent):void
  29.             {
  30.                 stage.nativeWindow.minimize();
  31.             }
  32.            
  33.             private function maximizar(e:MouseEvent):void
  34.             {
  35.                 if(!isMax)
  36.                 {
  37.                     stage.nativeWindow.maximize();
  38.                     isMax = true;
  39.                 }
  40.                 else
  41.                 {
  42.                     stage.nativeWindow.restore();
  43.                     isMax = false;
  44.                 }
  45.             }
  46.            
  47.             private function fechar(e:MouseEvent):void
  48.             {
  49.                 stage.nativeWindow.close();
  50.             }
  51.         ]]>
  52.     </ mx:Script>
  53.     <mx:Canvas id="cv_back" width="100%" height="100%" cornerRadius="10" borderStyle="solid" backgroundColor="#061D7E">
  54.         <mx :Button x="262" y="10" label="_" width="35" id="bot_min"/>
  55.         <mx :Button x="296" y="10" label="M" width="35" id="bot_max"/>
  56.         <mx :Button x="331" y="10" label="X" width="35" id="bot_close"/>
  57.     </ mx:Canvas>
  58. </ mx:WindowedApplication>

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:

PLAIN TEXT
XML:
  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:

PLAIN TEXT
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:

PLAIN TEXT
XML:
  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:
[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.

PLAIN TEXT
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:
[html]






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

categories ActionScript 3.0, Adobe AIR, Flash, Flex | Leonardo França | datetime November 11, 2008 23:12

6 Comments

Other Links to this Post

RSS feed for comments on this post. TrackBack URI

Leave a comment

WordPress Themes


Video & Audio Comments are proudly powered by Riffly