News:

Build a stunning handcrafted website with IT Acumens

Main Menu

Native Window

Started by sukishan, Aug 22, 2009, 07:21 PM

Previous topic - Next topic

sukishan

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 in the Adobe Developer Center for more information.
A good beginning makes a good ending