Flex cookbook beta - Chromeless AIR Application (Apple Shaped Application)

Flex cookbook beta - Chromeless AIR Application (Apple Shaped Application)

Problem Summary Many developers have expressed interest in how to create applications which do not have system chrome. It is a bit trickier than it would appear. This simple tutorial will build an application that looks like an apple and add AS3 code to allow the app to be moved and closed.

Solution Summary A chromeless (no system window) application that demonstrates how to use custom chrome for Flex Builder 3 Beta 3.

Explanation To make this project, you will need to use a *.gif file with a transparency. YOu can use the apple in the downloadable file below.

1. Make a new Flex project (type AIR).

2. In the /src folder, place your transparent GIF file.

3. in the first line of MXML, add the following attributes in bold below:


4. In the /src folder, open the XML file named "-app.xml" and modify the two lines of code below:


changed to:
none

and:


changed to:
true

Do this by removing the commenting characters.


5. Save and close the application descriptor file you modified in step 4.

6. Add the following style block to your project under the first line:


Application
{
/*make app window transparent*/
background-color:"";
background-image:"";
padding: 0px;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}


Note that without this, you would still have the AIR chrome.

7. Add the main panel and rest of the visual elements of the application. The code should now look like this:




Application
{
/*make app window transparent*/
background-color:"";
background-image:"";
padding: 0px;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}


source="assets/apple.gif" scaleContent="true" autoLoad="true"/>
fontFamily="Verdana" fontWeight="bold" fontSize="20" textAlign="center"/>



8. You can now build your application. Note that you cannot move it or close it by interacting with it. To close it, you have to right click or ctrl click on the dock icon and select "quit".

9. Add the new lines of code (in bold) to add these behaviors.




Application
{
/*make app window transparent*/
background-color:"";
background-image:"";
padding: 0px;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}



import flash.display.Bitmap;
import mx.events.CloseEvent;

public function init():void {
// Move the app when the panelis dragged
mainPanel.addEventListener( MouseEvent.MOUSE_DOWN, startMove );

}
public function startMove(event:MouseEvent):void {
stage.nativeWindow.startMove();
}
]]>

source="assets/apple.gif" scaleContent="true" autoLoad="true"/>
height="21"/>
fontFamily="Verdana" fontWeight="bold" fontSize="20" textAlign="center"/>



10. Run your application! Voila!