Snippley - A Demonstration AIR Application

Posted on April 8, 2008.

The second AIR application we’ll be looking at this week is Snippley created by .

I’ve chosen this as it’s aimed at developers in two senses. First of all, Snippley is used for storing and organising code snippets and secondly the source code is available which makes it an excellent candidate for deconstructing and learning more about Adobe AIR.

If you’re not a developer but want to understand more about what an AIR application is you can check out yesterday’s review of Shifd.

What’s Snippley Got Going For It?

If you look at Snippley as an AIR learning tool, there are several features of interest in Snippley:

It’s pure HTML / Javascript / CSS and it’s an example of implementing a JavaScript library (MooTools) in an AIR application.
It replicates the look and feel of Apple applications such as iTunes and the new Finder.
It uses local data storage via SQLite

At first glance Snippley doesn’t appear very feature rich (I mean that in a nice way) and the developers have said it’s their first attempt to create something robust using AIR. But it’s apparent lack of features means that you can easily get to grips with analyzing the source code.

What Does Snippley Do?

I’m not writing this post to recommend that you store all your code using Snippley. The focus here is on giving you pointers to a good project that you can give you insights into how easy it is to create an AIR application of you’re already creating web sites using HTML/Javascript/CSS.

A quick overview though. Snippley let’s you add groups (essentially folders or categories) in a sidebar on the left hand side of the screen (a bit like folders and playlists in iTunes).

Snippley

These groups are containers for any code snippets that you add.

It’s very AJAX-like in it’s feel, with in-place editing being the give away.

adding a group stage 2

In-place editing isn’t just used for naming groups, it’s prevalent throughout the entire application.

You can also specify which (programming) language your snippet is written in and it’ll provide syntax highlighting.

In the screenshot above, we see that the application has a mix of Windows XP and Apple OS X about it. We see the standard Windows Minimize/Maximize buttons on the top right. This is because the developers have opted to set the chrome of the application to “standard”. This is the default option for all AIR applications and sets the applications chrome to the standard system chrome. So if I’d taken a screenshot of Snippley running on my Mac, the Minimize/Maximize buttons would be on the left and use the OS X colour scheme. On Linux, it would use the Linux system chrome and so on. You can set the application so that no chrome appears, in which case you’d have to create your own buttons for controlling the application. All of the application settings are to be found in application.xml and this is the case for any AIR app.

Dig Into Some AIR Code

If you unzip the source files, you’ll see only 2 files in the root directory, application.html and application.xml

unzipping snippley source code on ubuntu

All of the applications settings are contained in the application.xml file. Application.xml is provided with the AIR SDK and is the basis for any AIR application you build. Examine it, it’s well commented and it’ll give you an idea of what you can configure and just how easy it is to create an AIR app. The entire interface is contained in application.html This file can be given any name. When you open it you’ll see it’s just a regular html file. Just like a web site, all of the JavaScript that provides the functionality is provided by file includes in the header.

Apple Look and Feel

All of the glitz is provided by a small CSS stylesheet and 20 PNGs (most to recreate Mac style scrollbars), and all of the application logic is in the javascript files. The JavaScript folders have been organised to separate out the standard files that you have to include with any air application; aliases.js and introspector.js They’ve also included MooTools to provide some of the polish to the application.

Then using all of these assets, they’ve written the custom code that is the app. You’ll find all of this in the scripts/snippley folder. There are 6 files in there totalling about 23Kb. Each file is named according to the group of functions it carries out. For example there’s snippely.groups.js which handles creating and renaming of groups etc. Then there’s snippely.database.js which is a good primer in how to start working with AIR’s embedded SQLite database. This is the same database that is used in Google Gears and on most Nokia phones so it’s useful to understand how it works and it’s limitations (no stored procedures, no foreign keys).

Snippley comes out of the MooTools stable and therefore it looks great. The guys at MooTools produce very polished work and the Apple look used on Snippley is no exception.

It’s a great base application for you to play around with, change and then repackage to test your new AIR skills. The source is hosted on Google’s code repository for open source projects and you can join and add to the development of this project.