Adobe AIR Apps Window Options

[sukishan]

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, 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.

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. 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.