A New Window on HTML-Based Adobe AIR Apps

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 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, 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 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. 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 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 for a chance to win a free copy of Adobe CS4 Web Premium and Flex Builder 3 Pro. Take the quiz now!

Replay

Category: software Time: 2009-02-25 Views: 1
Tags:

Related post

  • Adobe Air apps on the Mac App Store? 2011-01-07

    Before you chastise me for asking this, I have an Adobe Air app that has a lot of investment in it, and if there is a way to utilize the existing code-base in any way, it is worth considering. I have heard news reports in passing about Adobe creating

  • Display iframe in new window inside html page 2016-01-22

    I have reports page displaying reports one by one if i click on one report then report should open in new tab or window inside html page. I am using angular. I have written controller for reports page and on anchor tag i am writing click function whe

  • Do Adobe Air apps support multicore processing? 2010-09-02

    Do Adobe apps use multiple cores or do they still use single core? So will it make a difference in speed (in performance of the application) if I'm using a Pentium 4 processor (3 ghz) v/s a Dual Core Processor (2.7 ghz) Edit: Have asked this question

  • How to track Google Analytics of Adobe Air app? 2011-11-28

    I have written an Adobe Air desktop application that tracks a bunch of websites and displays images from the websites in the app. I'd like to make it so that the webmasters can see that page views are made by my application. Is there any way the webm

  • Adobe AIR apps on ios7 and ios8 2014-09-25

    Do I need any additional software to run games made from adobe AIR? Do they run as native apps? --------------Solutions------------- They run as normal apps. No extra effort is required on your part.

  • Google Analytics for my Adobe AIR app is not working very well 2016-02-03

    I've put the Google Analytics code in my AIR app in order to track the name of the page that user are viewing. So my AS3 code goes like : var gaid = "UA-*******-1"; And in the first line of frame 2 : var tracker2:SimplestTracker = new SimplestTr

  • Adobe AIR app on iOS crashes with EXC_BAD_ACCESS (SIGKILL - CODESIGNING) 2016-02-04

    I am building an iOS app with Adobe AIR. I use Flash Builder as an IDE, Starling and Feathers for UI. The application runs in the simulator, and packaging produces a .ipa file. I install it on my iPad manually using iTunes. However, when I try to lau

  • 18 Adobe AIR Apps for Designers 2009-08-03

    Adobe Integrated Runtime (AIR) is a cross-platform program that allows you to run a wide variety of different little programs. It has become best known for a slew of Twitter clients, the most popular being TweetDeck, but the environment is a lot more

  • Why is Adobe Air so underrated for building mobile apps? 2012-09-04

    I've worked with Adobe Flash-related technologies for the past 5 years. I've seen small bugs in some apps, but I don't understand why many big companies don't consider Adobe Air for their mobile apps. I've seen many mobile developer job postings that

  • How to check the device type using Adobe AIR for iOS 2013-03-06

    How do I check what kind of device the user is running my Adobe AIR app on? Example: if(device == ipad3) { stagestuff.width = 300; } --------------Solutions------------- http://forums.adobe.com/thread/745385 At this link, it shows the following: 'Hi

  • Cannot open a .air file even with Adobe AIR installed 2015-03-16

    I douwnloaded a .air file (designview.air, to have a design viewer for flashdevelop). Also I have installed Adobe AIR, but still i cannot open this file. After the installation setup is finished i don't have any interface with the adobe AIR nor put i

  • Is there some Adobe Air replacement? 2016-01-12

    This question already has an answer here: How can I install Adobe AIR? 7 answers I use Ubuntu Studio 15.10, 64 bit, and WineHQ 1.9.1. I've tried to install a Windows software which needs Adobe Air complement, but I can not to install it, not from the

  • How do I run an AIR app on the device? 2010-10-29

    I've installed Adobe Air, and I have a few AIR apps that I have built over time and am curious to see how they will look running on the device, but am not clear on how to install them. I uploaded the app to the phone but clicking on the .air file doe

  • Strategies to find memory leak in AIR app with native extension 2013-11-22

    Background: I'm working on an Adobe AIR app that has many facets. I'm looking for strategies to find memory leaks. Broadly speaking, the EXE contains an embedded JVM, and an AIR Native Extension for Windows (using C). So there are many moving parts.

  • switching the browser AIR apps open links in on Ubuntu 2009-12-19

    I'm using Ubuntu 9.10, and my default browser is Google Chrome. However, Adobe Air apps always open links in Firefox for some reason. Both DestroyTwitter and TweetDeck do it. Does anyone know how to switch which browser these apps (DT preferably) wil

  • Unable to use TweetDeck on Windows due to "Ooops, TweetDeck can't find your data" and "Sorry, Adobe AIR has a problem running on this computer" errors 2009-10-18

    I'm running Adobe AIR 1.5.2 (latest) on Windows 7 (64-bit RTM) and downloaded TweetDeck 0.31.1 (latest). When I run TweetDeck I get the following errors: Ooops, TweetDeck can't find your data and Sorry, Adobe AIR has a problem running on this compute

  • What is the latest news with Adobe AIR? 2011-12-20

    What are the latest news with Adobe AIR? Is someone planing to develop a support for AIR. My business is using Adobe AIR for digital signage software on PC. I prefer Linux but without support or any other solution for AIR it means I need to buy Windo

  • Uninstall Adobe AIR based Apps that installed via Internet 2010-02-02

    I'm running Ubuntu 9.10 I have an Adobe AIR based app named Balsamiq (God, it's super slow) which I installed from Internet (so, to be clear, I don't have the original installation file). Now I want to uninstall it. How to do that? --------------Solu

  • Getting Chrome to open an `.html` file in a new window 2011-12-15

    Every time I double-click an .html file on my computer, Chrome opens it in a new tab in the most-recently-used window. I don't like that. I want it to open a new window. Is there a way to do that? --------------Solutions------------- I guess you coul

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development

search

Front-end development

Database

development tools

Open Platform

Javascript development

.NET development

cloud computing

server

Copyright (C) avrocks.com, All Rights Reserved.

processed in 3.806 (s). 13 q(s)