Article
Walk on AIR: Create a To-do List in Five Minutes
The Application Front End
Next, we have to put together the HTML file that will serve as the front end. We’ll start with a basic “Hello world” in HTML:
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Copy the above markup into your text editor and save it as index.html, in the same folder as application.xml.
Once we’ve got our application descriptor file and initial HTML page ready, we’re all set. Run your first AIR application by typing the following at the command line:
/path/to/adl /path/to/application.xml
Because I’m on Windows, I would type this:
C:\air\sdk\bin\adl C:\air\projects\hello_world\application.xml
Of course, you should substitute the appropriate paths to both the adl binary and the application.xml file). And if you’re working in Windows, you can even just drag your application.xml file onto the adl executable to achieve the same thing.
This results in a console window opening, with our “Hello World” web application displayed in a basic window, as shown here.
Congratulations—your first AIR application is complete!
This mysterious adl executable is the AIR Debug Launcher (ADL). The black console window that opens with it allows the ADL to provide you with debug information—for example, most JavaScript errors will produce one or two ADL console messages. You can also generate your own debug messages for the ADL.
Working with AIR
As we’ve just seen, getting started with AIR is easy. However, the fun really begins once you’ve found your way around the runtime. Let’s build a simple to-do list application, using a sampling of HTML, CSS, and JavaScript.
Interface Niceties
We’ll need our application to look a little more glamorous than our “Hello World” page. I won’t worry much about CSS styling in this tutorial, as that’s something you can easily add to your application later. We’ll just put together a bare-bones interface to demonstrate the basics.
If you’re retro-fitting a web page into an AIR application, chances are your existing web page styles will render just fine. Be wary of copying your web site design entirely, though—desktop applications have rather different user interface needs. Keep in mind that a desktop application will probably be run in a window, whereas a web browser window is often maximized to fill the entire screen. Another point of difference is that, on the desktop, users scroll smaller elements and input fields, whereas on the Web users (generally) scroll the entire page.
Open up the index.html file from earlier, and update it with our new to-do list layout code, shown below:
<html>
<head>
<title>Todo List!</title>
<style type="text/css">
body {
margin: 20px;
}
h1 {
font-family: sans-serif;
}
</style>
</head>
<body>
<h1>Todo Items</h1>
<p><input type="text" id="new_text" />
<input type="submit" id="add_item" /></p>
<ul id="todo_items">
<li>Learn AIR</li>
<li>Buy milk</li>
<li>Stock up on coffee</li>
</ul>
</body>
</html>
Run your application again (either from the command line or by dragging your application.xml onto adl.exe) and your application should look like this figure.
Now hover over the input box and the Submit button—you’ll notice the AIR runtime has applied some styles to both, including a nice hover effect. If you want to, you can override these styles just as you would override any web browser’s default styles, but we’ll stick with this effect.
JavaScript: AIR Gone Wild!
Next, we need to add our actual list management functionality. By allowing us to code in JavaScript, AIR provides us with immense power; just take a look at the size of the JavaScript Language Reference for AIR. From working with the file system to checking the contents of the clipboard and even interfacing with attached cameras and microphones, it’s all there. There’s just so much available to you, courtesy of AIR!
For now, we’ll perform some basic interface bindings to create our to-do list functionality. We’ll create a simple list of items, and allow the user to remove each item from the list by clicking on it. The JavaScript is fairly straightforward; here’s the interface code:
function remove_todo(element) {
element.parentNode.removeChild(element);
}
window.onload = function() {
document.getElementById('add_item').onmousedown = function() {
item_text = document.getElementById('new_text').value;
new_item = document.createElement('li');
new_a = document.createElement('a');
new_a.onmousedown = function() {
remove_todo(this.parentNode);
}
new_a.innerHTML = item_text;
new_item.appendChild(new_a);
document.getElementById('todo_items').appendChild(new_item);
}
}
This is all very standard DOM stuff, and could just as well have been written for a web application. In fact, I used Firebug and Firefox to do some quick checks on this same page while putting it together. The code isn’t pretty, and it probably isn’t as fast as it could be, but it’ll do for now. Stick this into a <script> tag in the head section of your index.html.
Putting it All Together
Here’s our final UI code:
<html>
<head>
<title>Todo List!</title>
<style type="text/css">
body {
margin: 20px;
}
h1 {
font-family: sans-serif;
}
</style>
<script type="text/javascript">
function remove_todo(element) {
element.parentNode.removeChild(element);
}
window.onload = function() {
document.getElementById('add_item').onmousedown = function() {
item_text = document.getElementById('new_text').value;
new_item = document.createElement('li');
new_a = document.createElement('a');
new_a.onmousedown = function() {
remove_todo(this.parentNode);
}
new_a.innerHTML = item_text;
new_item.appendChild(new_a);
document.getElementById('todo_items').appendChild(new_item);
}
}
</script>
</head>
<body>
<h1>Todo Items</h1>
<p><input type="text" id="new_text" /><input type="submit" id="add_item" /></p>
<ul id="todo_items">
</ul>
</body>
</html>
Update your index.html file with this code, run it through ADL—and voila! Our application is fully functional! It should look something like this.
If the user inserts items, they are added to the list, and clicking on them causes them to disappear from the list, as expected. Our interface could certainly do with some improvements, but overall the application was quick and easy to build, and we have a reasonable Adobe AIR application ready.
But wait—what do we do now?