Home > Articles

Working with Windows in Adobe AIR

  • Print
  • + Share This
Learn how to create windows onscreen using both the flash.desktop.NativeWindow and mx.core.Window classes.
This chapter is from the book

This chapter is from the book


  • Windows in Adobe AIR
  • Creating Windows Using NativeWindow
  • Creating Windows Using mx.core.Window
  • Getting a Window Reference
  • Window Operations
  • Understanding Window Events
  • Creating Custom Window Chrome

Creating windows in Adobe® AIR™ applications is a significant departure from traditional webcentric Adobe® Flex™ development. For starters, Adobe AIR applications run on the user’s desktop. So the “windows” we’re referring to originate from the underlying native operating system, as with any other desktop software. Web developers no longer need to rely on Adobe Flex TitleWindow, JavaScript pop-ups, or browser windows propped up as a poor substitute for the real thing.

Implementing any kind of windowlike container in Adobe Flex today serves as a reminder of the limitations imposed on the user experience by the browser environment. At first glance, a TitleWindow resembles the idiom of a “windowed interface,” but users soon discover their artificial nature. They cannot be minimized to the taskbar or dragged to a secondary screen as with native windows.

Another option in achieving a multiwindow interface is to launch additional browser windows. There is no arguing the fact that this approach does deliver native windows, but this approach brings about a new set of challenges.

First, browser pop-up windows offer limited control over their appearance and behavior. Second, and more important, there is a high cost in complexity when loading and communicating with content hosted in this context. In the case of Adobe Flex applications, we’re talking about a Shockwave Flash (SWF) file compiled from MXML, hosted in a single browser window. Any additional Flash or Hypertext Markup Language (HTML) content loaded in a browser pop-up does not exist as part of your Adobe Flex application. Any communication between the two needs to be brokered by other means—either by maintaining a LocalConnection or by writing a whack of JavaScript code!

Windows in Adobe AIR

Coding my first Window examples in Adobe AIR gave me a warm and fuzzy feeling. Sure, they look and behave like native windows, but the real benefit resides in the application framework itself. All windows of an Adobe AIR application exist in the same context.

For example, picture a main application window designed as a drawing canvas with a second, smaller window off to the side as a floating tool palette. For the drawing canvas to “hear” and react to button click events in the tool palette, such as the user selecting a new drawing tool, an event listener can be added on the tool palette directly from the main canvas.

This is made possible in Adobe AIR by having all windows tied to our application available as an Array in an application scope.

var arrayOfOpenWindows:Array = NativeApplication.openedWindows;

In this chapter, we look at different methods of window creation and where they’re applicable in an Adobe AIR application. In addition, we look at moving beyond the default system chrome and investigate what’s involved in creating custom window chrome.

Let’s start with three window classes available to us in Adobe AIR:

  • flash.display.NativeWindowThe lowest common denominator in terms of windows in Adobe AIR. Content such as SWFs, images, and HTML can be added to them, whereas other window types wrap this base functionality and offer extended behavior.
  • mx.core.WindowedApplicationAn application container used to house Adobe Flex applications and deliver desktop functionality. This type can only serve as the root window of an application and is configured via the application.xml file.
  • mx.core.WindowAlso a container for housing Adobe Flex content but can be instantiated any number of times. Adobe Flex developers will rely on this type most of the time.
  • + Share This
  • 🔖 Save To Your Account