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.
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 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
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.
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:
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";
Typeproperty has three different options:
lightweightwindow must always be accompanied with
utilitywindow is like a
normalwindow but has a slightly narrower title bar and is absent from the taskbar (as is a
lightweightwindow, for that matter).
Normalwindows will appear in the taskbar or the Windows menu in OS X.
If you're creating a settings panel, you'd likely use the
lightweightoptions. 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
URLRequestobject specifies the path to our local file that accompanies the application:
var newHTMLLoader = air.HTMLLoader.createRootWindow(
true, options, true, windowBounds);
We could stop right here but there's a minor difference between how
window.openworks compared to how
createRootWindowworks: with the latter, the new window is unable to access the opener window. The
windowobject of the opened window can be accessed via the
windowproperty of the
HTMLLoaderobject 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
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 for a chance to win a free copy of Adobe CS4 Web Premium and Flex Builder 3 Pro. Take the quiz now!
Jonathan Snook has been involved in the Web since '95, and is lucky to be able to call his hobby a career. He worked in web agencies for over six years and has worked with high profile clients in government, the private sector, and non-profit organizations. Jonathan Snook currently runs his own web development business from Ottawa, Canada and continues to write about what he loves on his blog at Snook.ca.