application_chrome.html

4.2. Application Chrome

4.2.1. Add Custom Controls

4.2.1.1. Problem

You want to create custom window chrome for your application and you need the user to be able to close and minimize the application.

4.2.1.2. Solution

Use the NativeWindow class within Adobe AIR to integrate, minimize, and close button functionality.

4.2.1.3. Discussion

Although Adobe AIR allows developers to completely define and customize the application's window chrome, it is important to remember that when doing so, the application is responsible for every type of windowing event that might normally occur. This means the application must connect the various visual elements with their respective operating system events.

When deploying an application on Adobe AIR, the window object gets additional properties. Among those properties is nativeWindow, which is a reference to the native window that houses the current HTML document. Using the native window reference, the appropriate methods can be called to trigger the operating-system-specific event (or vice versa). In the case of being able to minimize the window, the application can use NativeWindow.minimize(); it can use NativeWindow.close() in the case of closing it:

window.nativeWindow.minimize();
window.nativeWindow.close();

The NativeWindow.close() method does not necessarily terminate the application. If only one application window is available, the application will terminate. If multiple windows are available, they will close until only one window remains. Closing the last window terminates the application.

4.2.1.4. application.xml

<?xml version="1.0" encoding="utf-8" ?>
<application xmlns="http://ns.adobe.com/air/application/1.0">

    <id>com.adobe.demo.CustomControls</id>
    <name>Custom Controls</name>
    <version>1.0</version>
    <filename>Custom Controls</filename>
    <description>Adding Custom Window Controls</description>

    <initialWindow>

         <title>Custom Controls</title>
         <content>index.html</content>
         <systemChrome>none</systemChrome>
         <transparent>true</transparent>
         <visible>true</visible>
         <width>206</width>
         <height>206</height>

  </initialWindow>

</application>

4.2.1.5. index.html

Code View:

<html>
<head>

<title>Custom Window Controls</title>

<style>
body {
   background-image: url( 'custom-chrome.gif' );
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 12px;
}

#closer {
    position: absolute;
    width: 70px;
    left: 68px;
    top: 105px;
}

#minimize {
    position: absolute;
    width: 70px;
    left: 68px;
    top: 75px;
}

textarea {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    top: 36px;
    border-color: #B3B3B3;
}

#title {
    position: absolute;
    font-weight: bold;
    color: #FFFFFF;
}
</style>

<script type="text/javascript" src="airaliases.js"></script>

<script>
function doClose()
{
    window.nativeWindow.close();
}

function doLoad()
{
    document.getElementById( "minimize" ).addEventListener( 
    "click", doMinimize );
    document.getElementById( "closer" ).addEventListener( 
    "click", doClose );
}

function doMinimize()
{
    window.nativeWindow.minimize();
}
</script>

</head>
<body onload="doLoad()">

<input id="minimize" type="button" value="Minimize" />
<input id="closer" type="button" value="Close" />

</body>
</html>