Using jQuery to Customize Your Adobe AIR Application

Larry Ullman shows how to use the free jQuery JavaScript framework to add professional features and functionality to any Adobe AIR application. Learn the basics for using jQuery as Larry explains, demonstrates in code, and shows in corresponding images exactly what you need to know to get up to speed fast.

From the author of

Although it's important for web and AIR developers to know how to program in JavaScript from scratch, it doesn't take long to realize that true productivity comes from using a framework. In my book Adobe AIR with Ajax: Visual QuickPro Guide book, I discuss how to integrate a framework into an AIR application, and then run through a demonstration using the Yahoo! User Interface Library (YUI). By contrast, in this article I turn to jQuery, a fast-rising framework with a different approach.

NOTE

Click here to download a zip file containing the complete source files for use with this article.

Here are some of the jQuery features I like best:

Relatively small footprint (less important for AIR applications than websites, but still...)

Ease of use (once you know what's possible)

Extendibility (in case a feature that you need is missing)

Ability to play nicely with other frameworks and JavaScript code

In this article, I'll walk through the mechanics and syntax for using jQuery in an AIR application. For the specific example, I'll create part of an interface that a program might need:

Obviously, the src value will change based on the version of jQuery you're using and where you've placed it relative to this file. I put my JavaScript files within a folder named js.

NOTE

I'm using a "minified" version of jQuery, which strips out white space and comments, making it a smaller download, but otherwise the same as the full version.

Much of the JavaScript in Rich Internet Applications (RIA) and AIR programs is executed after the page has loaded. In fact, any JavaScript code that references Document Object Model (DOM) elements must wait until the page has loaded, or else the referenced elements won't exist. To accomplish this in standard JavaScript, you might do something like the following:

window.onload = function() {
// Initial setup.
}

jQuery has a special syntax for doing the same thing:

$(function() {
// Initial setup.
});

jQuery's syntax is cryptic and can be confusing at first, but its simplicity is rewarding in its own right. The above code says, "When the document is ready, run the code in the following anonymous function." Here's a slightly more verbose jQuery version of the same code:

$(document).ready(function() {
// Initial setup.
});

For this application, the setup function needs to generate the tab layout, start the Ajax request to get the XML data, and establish a system for displaying and hiding a block of text (refer to Figures 1, 2, and 3 to see this effect).

Much of what you'll do in jQuery involves executing commands in the syntax of subject.action, where the subject is the element(s) to which the action should be applied. To identify the subject, which might be anything with a specific ID value, a particular class value, or of a certain kind of HTML tag, you use a selector. In jQuery, the selector function is written as $(), which is an alias for the eponymous jQuery() function. Within the parentheses, you provide a description of what you want to select. You can start by using the same syntax as you do in CSS:

$('#thisThing')

selects an element with an id value of thisThing.

$('.someClass')

selects all elements that have a class value of someClass.

$('p')

selects every paragraph.

There's a lot more to selectors in jQuery, but just knowing these three common options will more than suffice for now.