Introducing Adobe AIR for Ajax developers
Modified
25 February 2006
Requirements
Prerequisite knowledge
General experience of building applications with Flex, HTML, or Ajax is suggested, but this article is geared towards anyone interested in an overview of development techniques using Adobe AIR.
User level
Beginning
Required products
Sample files
- air_for_ajax[1].zip (96 KB)
Over the past decade, the web has flourished, fizzled a little with the dot-com bust, and re-invented itself with concepts such as Web 2.0 and social networking. Traditional browser limitations, such as the security sandbox, are perfectly acceptable for a broad category of web application, but sometimes you need more. By allowing web developers to extend their applications beyond the browser, Adobe AIR is poised to become a springboard for innovation in the next chapter in the life of web technologies—the desktop.
Thinking beyond the browser
The security sandbox of the browser is often one of the first lessons many of us learn when we begin developing projects for the web. You don't have access to the local file system, and you have limited cross-domain support. We also learn that the fundamental system on which the web is constructed is entirely stateless.
Despite these seemingly critical limitations, web developers have persevered, and increasingly complex applications continue to appear, setting new precedents.
What would happen if these limitations were removed? What if we could use the same technologies the web is built on, but escape the security sandbox of the browser? When you develop a desktop application for Adobe AIR, you have exactly that option. The technologies employed are the same HTML, JavaScript, and CSS on which the web is built, but the deployment model is that of the desktop.
Desktop applications built with Adobe AIR can make requests across as many domains as they want. When good old XMLHttpRequest gets data returned, it can save directly to the user's file system, or even store that data in a local relational database. Taking this even further, there’s support for new types of data exchange that include binary data and persistent socket connections.
Exploring this newfound freedom and combining these new abilities with the massive proliferation of services opens the door to an entirely new world of possibilities, such as media storage with YouTube or Flickr, data storage with Amazon S3, workflow and CRM infrastructure with Salesforce.com. The list goes on and on. Developers can manifest these services as features for their own applications with minimal investment.
Adobe AIR makes it possible to build the next generation of web-enabled desktop applications without the need for expensive infrastructure consistent with traditional web development. Developers can use the same skills and technologies, but deploy them without the traditional limitations. Web developers don't just lose those limitations, they also lose something else—the browser chrome.
Keeping brand consistency
Many wonderfully advanced web applications have charted legendary courses to success in the browser, so why would we want to remove it? It's not the browser per se that gets in the way. In fact, for many applications the browser is an ideal deployment method. The chrome of the browser itself, however, directly interferes with brand consistency.
Consider Apple iTunes as an example. Here's a desktop application that substantially leverages web-based technology (the Apple iTunes Music Store). Where's the browser? What would the experience be like if you bought an Apple iPod at an Apple Store, plugged it into your Apple MacBook Pro, and then launched Microsoft Internet Explorer?
By removing the browser chrome and leveraging a desktop deployment model, Apple was able to achieve a degree of seamless integration that had yet to be achieved. The result is a wildly popular means of media distribution. Consider Internet giant eBay. Most of the customers that use eBay are perfectly happy using the browser for their auctioning needs. One subset of eBay users, however, the power sellers, finds the browser limiting. These power sellers, and indeed eBay itself, make money by being able to execute a high number of transactions.
Managing that volume of transactions in the browser, due to the stateless nature and cumbersome request/response model, physically caps even the best seller. Managing individual items that may exceed hundreds or even thousands becomes a nightmare task as a seller refreshes web pages in a browser over and over. So why not remove the browser, but keep the web development infrastructure and technologies?
Using AIR, eBay's ambitious eBay Desktop (formerly known as San Dimas) project is doing exactly that. By removing the browser and integrating the application into the desktop, eBay allows power sellers to manage their auctions at an entirely new level. Sellers can create auctions while offline, get system notifications when they've been outbid, and drag and drop auction results to the desktop to be saved as common desktop file formats, such as Microsoft Excel.
Even better, because there's no browser chrome, eBay creates a personal relationship with some of its best customers.
Why Adobe AIR?
Developing for the desktop usually means leaving your web skills behind, building a platform-specific application, or using an alternative of complex object-oriented technologies. Adobe AIR, however, enables web application developers to use their existing web development skills, tools, workflow, and even existing code base, to build and deploy desktop applications.
At a high level, Adobe AIR accomplishes this by taking the world-class WebKit browser engine (most notably used in Safari), and wrapping it alongside Flash and PDF technologies, as a cohesive desktop runtime. Adobe AIR doesn't stop there, though; it also folds in a rich API that enables common desktop features such as file IO, network awareness, native drag-and-drop support, an embedded relational database (SQLite), and much more.
Getting started with Adobe AIR
To build an Adobe AIR application, the web developer needs the Adobe AIR runtime and software development kit (SDK). Both of these items can be downloaded from the first page of this article. With those tools in hand, the next step is to create an HTML document that presents the desired user interface (UI). The HTML document may leverage any number of JavaScript features to include existing frameworks, but it can also now leverage the various Adobe AIR API features.
<html>
<head>
<title>My First AIR Application<title>
</head>
<body>
Hello world, from AIR!
</body>
</html>
The code above is included in the provided sample files folder as hello.html. With the application finished, it is time to describe it to Adobe AIR. This takes the form of an XML file. You can copy and paste an example of the XML file from the template supplied with the SDK. The descriptor file tells Adobe AIR whether or not to use system chrome, if the background of the application should be transparent, what icons the operating system (OS) should use to represent the application, what file extensions to register with the OS and more. If you would like to follow along, open application.xml in the provided sample files folder.
<?xml version="1.0" encoding="utf-8" ?>
<application xmlns="http://ns.adobe.com/air/application/1.0">
<id>com.example.ExampleApplication</id>
<name>My First AIR Application</name>
<version>1.0</version>
<filename>Example Application</filename>
<description>A web application on the desktop.</description>
<initialWindow>
<content>index.html</content>
<title>My First AIR Application</title>
<systemChrome>standard</systemChrome>
<transparent>false</transparent>
<visible>false</visible>
</initialWindow>
</application>
The Adobe AIR SDK includes a couple binary tools that provide for testing during development, as well as packaging the application for distribution. Executing the binary file for packaging from the command line results in a distributable Adobe AIR file (application). Although Adobe AIR is only in beta at the time of this writing, Adobe Dreamweaver and Aptana Studio already have extensions that enable you to easily package, test, and distribute Adobe AIR applications. There's even a TextMate macro.
./adt -certificate -cn Hello 2048-RSA ../[path to project]/hello.pfx password
./adt -package -storetype pkcs12 -keystore ../[path to project]/hello.pfx -storepass password ../[path to project]/hello.air ../[path to project]/application.xml -C ../[path to project] hello.htm
The primary means for distributing an Adobe AIR application is through a web page-based launch badge (sometimes called an install badge). Again, the assets for the launch badge are included with the SDK and consist primarily of a small piece of Flash content. Don't judge this little gem's functionality by its size. The launch badge is capable of determining whether Adobe AIR is installed on the client, downloading and installing it if necessary, downloading and installing the target application, and then running that application, all in a matter of four or less clicks (see Figure 1).
Leveraging native integration
The application I’ve described in the previous section now runs as a desktop application. It doesn't leverage any of the Adobe AIR APIs. Now imagine that you want the application to write to the local file system. The Adobe AIR API provides the File, FileStream, and FileMode classes to accomplish this task. Again, leveraging your existing web development skills, you can add just a few lines of JavaScript to utilize these classes and write data to the local disk (see fileio.html in the sample files folder).
// Create a reference to a place on disk to store the data
// Create a string of text to store in the file
// Create a stream for use in writing the data
var file = air.File.desktopDirectory.resolvePath( 'hello.txt' );
var msg = 'Hello world, from AIR!';
var stream = new air.FileStream();
// Open the stream for writing
// Write the name value to the file using system encoding
// Close the stream
stream.open( file, air.FileMode.WRITE );
stream.writeMultiByte( msg, air.File.systemCharset );
stream.close();
Realistically, this data will likely come from some service endpoint as XML, using the XMLHttpRequest (XHR) class. Again, with Adobe AIR, developers are free of the traditional domain security limitations and their applications can request data from any endpoint. What if the remote server is down? What if the network cable is inoperative? These types of desktop deployment challenges are handled by the Adobe AIR network/service monitor class, see network.html and servicemonitor.swf in the sample files.
// Specify what URL to monitor
var endpoint = new air.URLRequest( SERVICE_URL );
// Create the object to monitor the endpoint
// Call a function when the network status changes
// Start listening for a network change
monitor = new air.URLMonitor( endpoint );
monitor.addEventListener( air.StatusEvent.STATUS, doStatus );
monitor.start();
...
var xhr = null;
// The network is available
if( monitor.available )
{
// Create the object for the data request
xhr = new XMLHttpRequest();
// Listen for the various changes during the request
xhr.onreadystatechange = function()
{
var file = null;
var stream = null;
// When the data has been retrieved
if( xhr.readyState == 4 )
{
// Create a reference to a location on disk
file = air.File.desktopDirectory.resolvePath( LOCAL_FILE );
// Create the file IO stream
// Open the stream for writing
// Write the response data (text)
// Close the stream
stream = new air.FileStream();
stream.open( file, air.FileMode.WRITE );
stream.writeMultiByte( xhr.responseText, air.File.systemCharset );
stream.close();
}
}
// Open the network connection and send the request
xhr.open( 'GET', DATA_URL, true );
xhr.send( null );
}
In the case that network connectivity cannot be achieved, perhaps the application could offer a means to drag and drop data directly. Although drag-and-drop inside the browser has been possible for a while, drag-and-drop that extends beyond the browser is among the core features of Adobe AIR. There's even support for the various types of data that might be dragged into (or out of) an application from the OS itself. In addition to text, this includes file lists, bitmap data, and URLs. If you’re following along, open dragdrop.html in the provided sample files folder.
// Called when a mouse drag gesture is over the application
function doOver( e )
{
// Check the types of data being dragged
for( var t = 0; t < e.dataTransfer.types.length; t++ )
{
// Make sure there is a type you can handle
f( e.dataTransfer.types[t] == 'application/x-vnd.adobe.air.file-list' )
{
// Tell WebKit to avoid the default behavior (ignore)
e.preventDefault();
}
}
}
// Called when a mouse gesture drops data on the application function doDrop( e )
{
var data = null;
var elem = null;
var file = null;
var list = null;
var stream = null;
// Get the list of files that were dropped
list = e.dataTransfer.getData( 'application/x-vnd.adobe.air.file-list' );
// Iterate through the list of dropped files
for( var f = 0; f < list.length; f++ )
{
// Create a new file IO stream
// Open the current file in the iteration
// Read the contents as text data into a variable
// Close the stream
stream = new air.FileStream();
stream.open( list[f], air.FileMode.READ );
data = stream.readMultiByte( stream.bytesAvailable, air.File.systemCharset );
stream.close();
// Create a new HTML DIV to hold the data
// Put the data in the DIV and append it to the document
elem = document.createElement( 'div' );
elem.innerText = data;
document.body.appendChild( elem );
}
}
Now that the application can manage data through file IO, network service requests, and native drag-and-drop support, there might be a reason to add data storage that's a little more robust than CSV, XML, or plain text. The open source relational database SQLite is included as part of Adobe AIR and it offers high performance data storage and retrieval via ANSI SQL-92 complaint syntax (see feeds.db in the sample files). This not only includes support for text and numeric values, but also for binary data (BLOB). The code below is available in the provided sample files. Open database.html to see the entire file.
// Called when the document finishes loading
function doLoad()
{
var ship = air.File.applicationDirectory.resolvePath( DATABASE_FILE );
var store = air.File.applicationStorageDirectory.resolvePath( DATABASE_FILE );
// Put the database in a writable place first
if( !store.exists)
{
ship.copyTo( store );
}
// INFO: air.trace( 'Database at: ' + store.nativePath );
// Open a connection to the SQLite database
db = new air.SQLConnection();
db.addEventListener( air.SQLEvent.OPEN, doDbOpen );
db.open( store, air.SQLMode.CREATE );
}
What you have now is a web application, developed using standard web development technologies, that has integrated desktop features. This relatively simple example takes on features that simply aren't possible in the web browser. Although it doesn't replace the browser itself, features such as file IO, network awareness, and native drag-and-drop support readily extend an existing web presence to the desktop.
Bridging scripts and technologies
Adobe AIR blurs the line between Flash and HTML technologies by making them virtually interchangeable. Using Adobe AIR, web developers can leverage ActionScript 3.0 assets directly from JavaScript, opening up an entirely new world of possibilities.
Let's say you have an application that does a mash-up of data using one of the various map APIs offered by a company like Google, Yahoo! and others. You find yourself looking at a collection of data that you've spent considerable time filtering and refining. Now you want to share your findings, but how? Do you send a link? Will the link be smart enough to return the viewer to the same state?
It'd be ideal if you could take a snapshot of the screen, save it to disk, and then e-mail it to your colleagues. As a JavaScript developer, however, you don't have access to the pixel data on the screen—there are no libraries for encoding images, and there's no way to save data locally. As an Adobe AIR developer, however, you do have access to the pixel data.
As it turns out, Adobe Flash Player can actually access the pixel data of its display area (since Flash Player 8). Although it doesn't include libraries to encode image data, the Flash community has written just such a utility for various file formats to include JPEG and PNG files. Because you're developing your application on Adobe AIR, you not only have local file access to save the image to disk—you also have access to all that Flash has to offer—right from JavaScript. The HTML file yahoomaps.html and the maps.css and prototype.js files linked in the code below are provided in the sample files folder.
<html>
<head>
<title>Yahoo! Maps<title>
<link href="maps.css" type="text/css" rel="stylesheet" />
<!-- Use Prototype for element measurement and positioning -->
<script src="prototype.js" type="text/javascript"></script>
<script
src="http://api.maps.yahoo.com/ajaxymap?v=3.4&appid=[YOUR_MAP_ID]" type="text/javascript"></script>
<script type="text/javascript">
// Static property used to seed map location
var HOME_GEO = 'Denver, CO';
// Member property for map
var map = null;
// Called when the document finishes loading
function doLoad()
{
// Create a Yahoo! map object
// Setup the desired controls
// Initialize the display of the map
map = new YMap( document.getElementById( 'map' ) );
map.addTypeControl();
map.addPanControl();
map.addZoomShort();
map.drawZoomAndCenter( HOME_GEO, 8 );
}
</script>
</head>
<!-- Listen for the document to finish loading -->
<body onLoad="doLoad();">
<!-- Yahoo! Maps content holder -->
<div id="mapholder" class="box">
<div id="map"></div>
</div>
</body>
</html>
With a map already on hand, the first thing that needs to happen is the capturing of the pixel data of the display area. Flash Player includes a BitmapData class which has a draw() method. The BitmapData.draw() method can be pointed at an object on the display and grab that pixel data. There's also a Matrix class that can be used for cropping as well as various filters such as BlurFilter and DropShadowFilter, see mapsroot.html in the sample files.
var bmp = new air.BitmapData( rect.width - 2, rect.height - 2 );
var matrix = new air.Matrix();
matrix.translate( 0 - ( rect.x + 1 ), 0 - ( rect.y + 1 ) );
bmp.draw( window.htmlLoader, matrix );
With the pixel data on hand, the next step is to encode that data into something useful. Available on Google Code is the ActionScript Core Library project. This project includes numerous valuable functionalities, among which are JPEG and PNG image encoders. You can include the Flash SWF file from this project in a SCRIPT tag in your HTML code, and leverage any of the functionality directly from JavaScript (see mapsroot.html and library.swf in the sample files folder).
<!-- Include AS3 Core Library assets to encode PNG -->
<script src="library.swf" type="application/x-shockwave-flash"></script>
...
var file = air.File.desktopDirectory.resolvePath( 'map.png' );
var png = null;
var stream = new air.FileStream();
png = runtime.com.adobe.images.PNGEncoder.encode( bmp );
stream.open( file, air.FileMode.WRITE );
stream.writeBytes( png, 0, 0 );
stream.close();
With an image of the screen in memory, the last step is to save the file to disk. The FileStream class mentioned earlier supports binary file IO, so this is a perfect reason to use it. However, Yahoo! Maps has a resolution limit, so it'd be nice to restrict the overall size of the native window itself. As it turns out, the Adobe AIR APIs offer the ability to generate and control numerous aspects of native OS windows. One such property is the maximum size of a window, as seen in the mapsroot.html sample file.
// Configure placement and maximum size of native window
window.nativeWindow.x = ( air.Capabilities.screenResolutionX - window.nativeWindow.width ) / 2;
window.nativeWindow.y = ( air.Capabilities.screenResolutionY - window.nativeWindow.height ) / 2;
window.nativeWindow.maxSize = new air.Point( 640, 480 );
Where to go from here
This brings the application full circle. What was once an excellent web application has now become an amazingly full-featured desktop application. By leveraging the best of both HTML and JavaScript alongside the features available in Flash, a new class of application and developer is created. You're no longer a JavaScript developer, you're an Adobe AIR developer. Welcome to the desktop!
For more information about the AIR runtime, visit the Adobe AIR product page.
For more inspiration, check out the sample applications in the Adobe AIR Developer Center, as well as the apps showcase.
To start building HTML-based apps on Adobe AIR refer to Getting Started for HTML/JavaScript developers or refer to Building Adobe AIR applications.
| 04/11/2012 | Surround sound 5.1 with Air 3.2 on desktop app? |
|---|---|
| 12/12/2011 | Live Streaming H.264 Video on iOS using AIR |
| 04/17/2012 | HTMLLoader - Google Maps? |
| 04/12/2012 | Tabindex in forms on mobile? |
