Create a NativeWindow Without Using SystemChrome

Wanna customize the appearance and functionality of your WindowedApplication?  Here's a sample that should get you up and running. 

First you'll need to change some settings in the app.xml file; set the systemChrome to 'none' and transparent to 'true'.

<systemChrome>none</systemChrome>
<transparent>true</transparent>

Next you'll want to create an image to use as the background for your window.  Here's a sample:


This sample is a jpg, but you'll probably want to us a png because of its transparency.  The AIR runtime will automatically scale your background image when the user resizes the window.

Now all you have to do is copy this code below.  In this sample I used labels to make the window controls (to move, minimize, and resize the window), but you'll probably want use little icons instead.

Here's the code...

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical"
    paddingTop="0"
    paddingLeft="0"
    height="400"
    width="600"
    horizontalAlign="left"
    showFlexChrome="false">
    <mx:Style>
        /*
        NOTE: set systemChrome to none and transparent to true in the app.xml file
        NOTE: the properties that are set in the Embed refer to 9-slice scaling,
        which controls the distortion of the background image when the window is
        resized
        */
        WindowedApplication{
                borderSkin: Embed(source="images/window_bg.png", scaleGridTop="20", scaleGridBottom="180", scaleGridLeft="15", scaleGridRight="30");
          }
    </mx:Style>
    <mx:HBox>
        <mx:Label text=" resize " mouseDown="{nativeWindow.startResize('TL')}"/>
        <mx:Label text=" move " mouseDown="{nativeWindow.startMove()}"/>
        <mx:Label text=" minimize " click="minimize()"/>
        <mx:Label text=" quit " click="close()"/>   
    </mx:HBox>
</mx:WindowedApplication>