By: Jonathan Snook

February 25th, 2009

Reader Rating: 9.5

Creating a desktop application with Adobe AIR can be an empowering experience. Whether you're a Flash, Flex, or JavaScript developer, building an application that exists within a single window is a straightforward process. Once an application outgrows the bounds of a single screen, however, you’ll begin to wonder how best to approach it. This article will take a look at the options available and consider the pros and cons of each situation. Answer the quiz [1] at the end and be in the running to win a free copy of Adobe CS4 Web Premium and Flex Builder Pro 3!

Window Options

It might be an options screen, or a secondary view, or a document window. There are many directions that an application can take and a few different ways in which to solve the problem:

• switch the current view
• create a lightbox-style dialog
• use a native window

Switch the Current View

Switching views is one of the easiest ways to change the interface of an existing application. Within an HTML application, you can either load the view into the current DOM or change the URL to point to another page.

When I built Snitter [2], it used both of these features for different purposes. Most screens are simply div elements hidden away and brought back into view using a little CSS and JavaScript. With this approach, you can easily animate the transitions as you would on any HTML page.

In the case of changing the URL of the current document, Snitter uses this to refresh the view when a new theme is applied. This can be a little tricky because you need to make sure that the application initialization code is kept separate from the screen reloading.

The Google Analytics [3] application uses tabs to track the newly loaded views.

View switching solves the issue when the secondary views fit in well with the space provided by the main view (as is the case with Google Analytics).

A Lightbox-style Dialog

A lightbox is a JavaScript-driven dialog box, that does not require a new browser window. It uses an overlay to obscure page content while placing on top a small, centered content box for the attention of the user. The name originates from the library that first implemented the idea: Lightbox [4]. With the advent of popup blockers in standard web browsers, lightboxes became popular as a workaround. They looked good (generally speaking) and they offered some modality. In other words, the content within the lightbox had priority, blocking out the original page content until some action was performed.

This trend has continued into AIR-based applications with lightboxes offering the ability to do quick, stylized alerts without the overhead of instantiating a new window.

Within HTML-based applications though, this has its downfalls. In particular, keyboard access still allows users to tab through to other controls available behind the content in the lightbox. This can cause users to perform unwanted actions.

Native Window

Probably the most compelling approach is the ability to instantiate new native windows within Adobe AIR through the NativeWindow class. The quickest, most efficient way to instantiate a new HTML window here is to use window.open. This works similar to using the same command in a web browser:

window.open('newpage.html');

A new window is created and a HTML document is loaded in that new window. The parent window can be accessed via window.opener. This is especially handy if you need to facilitate communication between the two windows.

The major downfall to this approach is the lack of options for the new window; it’ll always use system chrome, even if your application is designed without it.

If your application needs to use custom chrome, even for new windows, then you’ll need to create your own native windows. Thankfully, Adobe AIR’s API makes this relatively straightforward (if just a little more verbose). The createRootWindow method of the HTMLLoader object creates new windows and allows a HTML page to be loaded within that window.

Let’s go through the steps of instantiating a new window. The first step is to define the window options via the NativeWindowInitOptions class. For example, whether system chrome should be used would be defined in this object:

var options = new air.NativeWindowInitOptions();
options.systemChrome = "none";
options.type = "lightweight";

The Type property has three different options: normal, utility, and lightweight. A lightweight window must always be accompanied with systemChrome set to none. A utility window is like a normal window but has a slightly narrower title bar and is absent from the taskbar (as is a lightweight window, for that matter). Normal windows will appear in the taskbar or the Windows menu in OS X.

If you’re creating a settings panel, you’d likely use the utility or lightweight options. If you were creating a more substantial secondary window like a document edit screen, you may prefer having that window displayed on the taskbar.

The next step is to define the dimensions of the window by creating a new Rectangle. The first two parameters set the X and Y coordinates from the top-left corner of the screen, while the second two parameters define the width and height respectively:

var windowBounds = new air.Rectangle(200,250,300,400);

With the options defined, a new window is created and a new URLRequest object specifies the path to our local file that accompanies the application:

var newHTMLLoader = air.HTMLLoader.createRootWindow(
   true, options, true, windowBounds);
newHTMLLoader.load(new air.URLRequest("newwindow.html"));

We could stop right here but there’s a minor difference between how window.open works compared to how createRootWindow works: with the latter, the new window is unable to access the opener window. The window object of the opened window can be accessed via the window property of the HTMLLoader object that was returned to the variable newHTMLLoader. Therefore, we’ll create a new property, aptly named opener, and set it to the current window:

newHTMLLoader.window.opener = window;

Now, in our newly opened window, we can access the opener window just as if we’d used window.open:

window.opener // accesses the opener window

When creating multiple windows, memory management can become an issue. Think of each new window as equivalent to opening a new tab in your browser.

One of the other benefits of creating separate native windows is the ability to use Flash-based effects on the HTMLLoader controls. Although some animation is possible via CSS and JavaScript, being able to reshape the entire HTML canvas through the use of the pixel bender features of Flash 10 can offer some powerful effects. See the BlackBookSafe example application [5] in the Adobe Developer Center for more information.

Wrapping It Up

Creating a new window can be straightforward but you have plenty of options. Be sure to pick the right solution for the type of window that you create. View switching, lightboxes, and native windows, are all useful tools to help expand your application beyond the confines of a single screen.

Test Your Knowledge

Test yourself on the contents of this article by doing the quiz. Submit your answers [6] for a chance to win a free copy of Adobe CS4 Web Premium and Flex Builder 3 Pro. Take the quiz now [7]!

[1] http://www.sitepoint.com/quiz/adobe/html-based-adobe-air/
[2] http://getsnitter.com/
[3] http://www.google.com/analytics/
[4] http://www.huddletogether.com/projects/lightbox2/
[5] http://www.adobe.com/devnet/air/ajax/articles/blackbooksafe_anatomy.html
[6] http://www.sitepoint.com/quiz/adobe/html-based-adobe-air/
[7] http://www.sitepoint.com/quiz/adobe/html-based-adobe-air/