August 31, 2007

on AIR Bus Tour Boston: Native Windows

Chafic Kzoun gave a talk about how to use Native Windows with AIR.

He showed a bunch of simple examples which demonstrated the native window capabilities in AIR. Best was a screen size tester called PixelPerfect available from Adobe Labs.

NativeWindow is the core of what you will work with. Keep in mind Window is also just a class. Some options need to be setup before the window is created, while others are runtime properties. This is why the AIR application descriptor forces you to specify certain options.

// Create a simple utility window and display it
var options:NativeWindowInitOptions = new NativeWindowInitOptions();
options.type = NativeWindowType.UTILITY;
var nativeWindow:NativeWindow = new NativeWindow(true, options);
nativeWindow.activate();

A more complex example that uses more options.

package com.example {
    import flash.display.NativeWindow;
    import flash.display.NativeWindowInitOptions;
    import flash.display.NativeWindowSystemChrome;

    public class StandardWindow extends NativeWindow {
        public function StandardWindow() {
            var options:NativeWindowInitOptions = new NativeWindowInitOptions();
            options.systemChrome = NativeWindowSystemChrome.STANDARD;
            options.maximizable = true;
            options.minimizable = true;
            super(true, options);

            alwaysInFront = true;
            title = "Custom NativeWindow";
        }
    }
}

Many options available with the NativeWindow API, best to look at the documentation. "bounds" gives you lots of flexibility. Lots of good events (resize, move, moving, etc.)

The Window component is a wrapper around the NativeWindow. Flex provides an out of the box chrome with standard minimize, maximize, and close buttons and adds a status bar. Can be easily used in MXML. Use open() after creating the instance instead of activate() like you would with a NativeWindow. The showFlexChrome Window attribute can turn off the default Flex chrome. The Window class also provides access to the native window through its nativeWindow property.

<?xml version="1.0" encoding="utf-8"?>
<mx:Window xmlns:mx="http://www.adobe.com/2006/mxml"
systemChrome="none" showFlexChrome="true" showStatusBar="false" transparent="true">
</mx:Window>

The Screen singleton gives you access to information about the users' monitors. Has support for multiple displays along with supplying sizes and capabilities. Screen.mainScreen.visibleBounds will return visual area that is available taking into account task bar or dock (doesn't look like this is working in the current AIR beta on the Mac).

The Flash CS3 AIR update allows you to export and run your Flash application as an AIR application.

Tags: air cs3 flex onair2007boston

Posted by Daniel Rinehart at 1:39 PM | | Comments (1)