Article
About the Author
Akash Mehta
Akash Mehta is a web developer and freelance writer specializing in web application development. Check out his other work at http://bitmeta.org/.
Learn Adobe AIR, Part I: Build A Note Storage App
The Adobe Integrated Runtime (AIR) platform changes the game for web developers, taking standard web technologies such as HTML, CSS, and JavaScript, and bringing them into a desktop application environment. In this tutorial, I’ll show you how to build a personal notes database with Adobe AIR.
Make sure you pay close attention though—there will be a quiz at the end! The first 100 people to complete the quiz will win a copy of the pocket guide Adobe AIR For JavaScript Developers, delivered to their front door for FREE, thanks to Adobe. You can also download the book in PDF format for free for a limited time, so get cracking!
In this article, we’re going to explore the client-side capabilities of Adobe AIR by building a simple, local notes database—think of it as your own personal paste bin. We’ll walk through the process of setting up an AIR development workflow, putting together a basic interface, and then enabling it with many of AIR’s front-end and back-end features.
If you’re new to Adobe AIR, have a read through my previous article, Walk on AIR: Create a To-do List in Five Minutes—it will give you a good head start. For the application we’re about to build, I’ll assume you’ve at least dabbled with the Adobe AIR platform, and you’re comfortable with HTML and object oriented programming in JavaScript too.
Also, if you’re planning on playing along at home, you’ll want to grab the code archive for this article. I’ve made available the skeleton files from which to start, the completed application, and the final packaged AIR app.
A Powerful Tool for Building AIR Apps
We’ll use Aptana Studio to build our application—if you haven’t installed this tool yet, download and install Aptana Studio before reading any further.
We’ll also install the AIR plugin for Aptana. When you first launch Aptana, you’ll be asked to choose a workspace. Create a new folder to store your AIR projects (it can always be changed later, should you need to). You’ll see the welcome screen when Aptana loads, as displayed below.
Select Download and install to install the AIR plugin, and select the Adobe AIR Support check box, as I’ve done below.
You’ll need to restart Aptana for the plugin to take effect.
Additional Tools
In my previous article, I introduced the command line tools that Adobe make available as part of the AIR Software Development Kit (SDK). To refresh your memory, there are two main tools:
- The AIR Debug Launcher (ADL), which allows us to run AIR applications on-the-fly, and monitor debug output.
- The AIR Developer Tool (ADT), which provides a set of tools to package applications for distribution.
If you’re not sold on using Aptana, feel free to explore these alternatives. The official Adobe AIR documentation contains more details.
Aptana conveniently abstracts the ADL and ADT tools for us. There are some additional utilities in the SDK that we’ll also take advantage of—the AIR Introspector and the AIR Source Viewer. When we start a new AIR project, Aptana includes the JavaScript references for these tools in our <head> section of the HTML:
<!-- Uncomment the following line to add introspection. When running the application hit F12 to bring up the introspector -->
<script type="text/javascript" src="AIRIntrospector.js"></script>
<!-- Uncomment the following line to use the AIR source viewer -->
<script type="text/javascript" src="AIRSourceViewer.js"></script>
With the AIRIntrospector.js reference in place, you can display the Adobe AIR HTML/JS Application Introspector by pressing F12 while running an AIR application, shown below:
Look familiar? Think of it as Firebug for Adobe AIR—it has a JavaScript console, a page inspector with point-and-click element selection, a DOM Inspector, and all the usual tools you’d expect. If you’ve used Firebug, you’ll pick up this tool up in no time; if not, you might want to check out the Introspector documentation.
Here’s a demonstration of the tool in action—check out the source viewer by using the JS Console in the Introspector – just call air.SourceViewer.getDefault().viewSource():
This tool is highly configurable using JavaScript – check out the official documentation page for more details.
Working with a Database
We’ll use an SQLite database in our sample application, and fortunately AIR comes with a built-in SQLite driver. While we can construct our database on-the-fly, it’s more practical (and more efficient) to distribute a pre-populated database. I recommend using the open source SQLite Database Browser to get up and running quickly (also available as a Firefox extension). It runs on Windows, OS X, and GNU/Linux, and the binary packages work straight out of the box. Grab a copy from the SourceForge download page.
If you haven’t used SQLite before, it functions similarly to most relational databases—with a few exceptions; in particular, it applies data types to values (cells), rather than containers (columns) – read more about SQLite and data types on the SQLite web site.
Building a Personal Notes Database Application
OK, let’s begin! For a personal notes database, we need to be able to view our notes, create new ones, and delete existing ones. While we build this application, we’ll make use of the many client-side features for powerful UI functionality in AIR. We’ll use the jQuery library for some basic interface work, but we could just as well have used Prototype, MooTools, or even Adobe Spry. Most JavaScript frameworks can be used reliably inside AIR.
In terms of our app’s functionality, we’ll be touching on each of the following areas:
- native menus
- file system management
- local SQLite databases
- clipboard operations, native copy-and-paste
- user interface niceties
We’ll start by creating a template for our user interface, and then we’ll add each of the above features progressively.
Defining the User Interface
AIR’s built-in browser uses the WebKit rendering engine, which does a fantastic job of adhering to web standards. I find it practical to build the prototype of my interface in HTML, then test it in Firefox. Doing so means I can rely on the eternally useful Firebug tool to iron out any kinks. I’ve mocked up a basic interface for our Notes application in HTML, which is shown below. It includes a New note form, which we’ll hide when it’s not needed.
As you can see, it’s a fairly simple layout; each note contains:
- a title
- a listing in a box
- a timestamp of when it was created
- a red Delete button showing a minus sign (courtesy of the Silk icon set)
For us developers who write lots of code, the ability to store monospaced text notes would be really handy, so we’ll surround our actual note contents with <pre> tags.
I’ve prototyped this in Firefox, but I’ve taken the actual screenshot in an AIR window itself. Notice how AIR adds some default chrome to some of the elements (that grey area around the edge) This is optional (see the AIR documentation for more details). We’re also displaying containers with rounded corners in our app; since we know that our app will always run within an AIR window, we don’t have the same cross-browser compatibility woes that we experience on the Web. We can therefore make use of WebKit’s many special CSS properties—in this case, the –webkit-border-radius property.