Creating custom windows with Adobe AIR

Adobe AIR allows you to customize the windows of their applications, by default, Adobe AIR uses the layout of the windows operating system (Windows, Mac, Linux), in Flex you have the option of using FlexChrome(especially that i am not very fan).
Show a simple example using Adobe Flex, Adobe Dreamweaver CS4 and Adobe Flash CS4.

if you’re new to Adobe AIR, i recommend you look this article before proceeding with the tutorial 😉


Adobe Flex

In Flex Builder, create a project of type “Desktop application”, by default it will create two files, one .mxml and one .xml responsible for the application settings.
The .xml file, change the follwing tags: systemChrome e transparent.
The final file should be as follows::

  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>

We configure our application to not use the Windows style operating system which is transparent. If run the application, we see that window appears pattern Flex (FlexChrome). However it is not what we want yet.
In the file .mxml, in WindowedApplication tag, we set the showFlexChrome property to false.
[mxml]


[/mxml]
If we run again, we see that standard window of Flex also disappeared. Now create the rest of the application.
Add a component Canvas, size of your choice, and add three components of type “Button” on stage, important to remember to put a background color of Canvas for your application to be seen.
[mxml]
< mx :Canvas id="cv_back" width="100%" height="100%" cornerRadius="10" borderStyle="solid" backgroundColor="#061D7E">



< / mx:Canvas>
[/mxml]

Now let’s add the actions to minimize, maximize, restore and close the application. For this we have access to own API for Adobe AIR windows. Note that to mazimize and restore, we use a flag to see if the window is maximized or not.

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

Now to complete a task for which the window can ve dragged witn the mouse.

actionscript3

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

Then just add a function that will make the buttons “listening” these functions. Following is the complete code:
[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 or CS3

To create application in Adobe AIR with Adobe Flash CS3, you need to upgrade. Visit Adobe AIR Update for Flash CS3 Professional. Adobe Flash CS4 comes with native support for building applications on Adobe AIR.

Create a new file type “Flash File(Adobe AIR)” and add three components of the type “Button” on stage. They are respectively the buttons to minimize, maximize, restore and close. The first time you compile the FLA, it create one file .xml of your application. To configure it, just go to File->AIR Settings…
Edit the information to your preferences, do not forget to check the option Window Chrome as “Custom Chrome(transparent)”, its configuration file should look something like the following:

  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>

I created a movieclip blue with the name of instance “mc_chrome” to be a background application.
Now putting the actions on the buttons to be placed in the main timeline:

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 or CS3

To use the Adobe AIR with HTML/Ajax, i will use Adobe Dreamweaver CS3, but nothing prevents you from using your editor and compile using the Adobe AIR SDK.
With Dreamweaver is possible to have access to API code hints specifies Adobe AIR for JavaScript, simply install the folowing extensions:
Adobe AIR Extension for Dreamweaver

In the item “Site” Dreamweaver will appear two new options (Create AIR File and AIR Application Settings). Create a new HTML document and the Files windows, next to Site->AIR Application Settings. Complete the required information, you will have create one file .xml with the settings of your application, its content should be as below:

  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>

We changed the systemChrome for “none” and transparent for “true”, the rest is your choice.
Add three buttons in html to be respectively the buttons to minimize, maximize, restore and close:

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

Now we will create the functions that perform these actions. we note that by accessing the API specifies the Adobe AIR for 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>

The logic follows the same that we use in Flex and Flash, a flag for whether the window is maximized or not.
Then we set the buttons to perform the various functions. Following is the complete code:

  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

Create a custom window give a greate freedom for you to create the application with the “face” of the user, is a powerful resource and therefore it should be used with create care, no use having a layout hyper super ultra mega power futuristic and compromisse the usability user.

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

Recommended Books:


Translations:
Português do Brasil

Was this article helpful? feel free to make a donation and help keep the blog in the air
ActionScript 3.0, Adobe AIR, Flash, Flex , , ,

1 comment


  1. Javier Lasén

    Por fin he entendido como poder personalizar las ventanas de una aplicación.

    Muchas gracias desde España.

Leave a Reply