Using jQuery to Customize Your Adobe AIR Application
- Basic jQuery Syntax Usage
- jQuery Core Capabilities
- Extending jQuery to Create Tabs
- Using Ajax to Fetch XML Data
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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.
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:
- Provide some content using tabs (see Figure 1)
- Have an area for a special message that can be hidden or revealed (see Figure 2)
- Perform an Ajax request to populate a table (see Figure 3)
)
Figure 1 Content accessed in tabs.
)
Figure 2 The message text can be revealed or hidden.
)
Basic jQuery Syntax Usage
To start, of course, you need to download the jQuery library (it's a single file) and include it in your primary HTML document:
<script src="js/jquery-1.3.1.min.js" type="text/javascript" charset="utf-8" />
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.
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.