jQuery and AIR: Transparent AIR applications with custom chrome

andyMatthews.net

jQuery and AIR: Transparent AIR applications with custom chrome

Most AIR application developers put lots of time and effort into the functionality of an app. It does lots of things, it slices, it dices, it juliennes. The problem is that, like many websites, those same developers don't put much time into, or even give much thought to, the interface. The AIR SDK provides a lot of power to developers when designing the look and feel of an app. In this article I'm going to show you how easy it can be to design, and use, transparency and custom buttons in your AIR application. Let's get started, but first, as always, here's a link to download the entire Aptana project. Oh, and here's what you'll need to follow along.

Project Requirements

Aptana (standalone, or the Eclipse plugin)
Fireworks / Photoshop (or some image editor capable of exporting transparent PNG-24 files)

First thing we'll need to do is to create a new Aptana project. During the project creation process make sure you do the following.
1. Make the dimensions of the application 400 x 300
2. Make sure that you select Custom Chrome (transparent) as the Window Style
3. Make sure that both airaliases.js and jQuery 1.3 are included in the project
I'll be using Fireworks CS4 for this tutorial, for several reasons.
1. It has some nice functionality when it comes to manipulating images for the web
2. I'm trying to give it an honest evaluation when compared to Photoshop. It'll never replace PS for me, but if it can improve efficiency then I'm all for it
Start by opening Fireworks, and create a new file.
Next we need to draw a shape...for fun let's make it non-rectangular. Go for a circle, triangle, parallelogram, anything that's not equilateral. Try to leave a shape somewhere near the top left, or right that lends itself to holding some buttons. After drawing a series of ovals using the vector shape tool, highlighed in the image to the right, this is what I've ended up with.
Once you've got a shape you're happy with, we need to flatten that shape, and add a drop shadow to it. In Fireworks, select all of the layers in the layers palette, then right click on the layer name and select "Flatten Selection". This will convert your shapes into one bitmapped layer. With that layer still selected, open the Properties palette and click the + next to Filters. Select Shadow & Glow > Drop Shadow, then use settings similar to those in the screenshot to the right. You should end up with something like this.
Let's go ahead and export our background image now. Make sure the shape you drew is selected, then click Window > Optimize and select PNG 32 from the type dropdown. Then select File > Export. Browse to the images folder in your Aptana project, then under the Export dropdown, select Images Only, then click Save.
Next we need to draw some shapes which can be used as buttons, again, use your imagination. We'll need 3 shapes, one each for the close, minimize, and maximize buttons. I decided to keep it simple and use flat colors for the buttons, ala OS X. We also need to have some area which can be used as the draggable spot for the app. I'm just using text.
The last thing we need to do before exporting the buttons is to create slices around our interface elements. We're going to select the slice tool, then draw rectangular shapes around each portion of our interface. You can see the slice tool selected in the image to the right. If the buttons are close enough to each other, make sure the sides of the slices abutt each other. You might have something similar to this when you're done.
Select each slice in turn and do the following
1. Name it. We've got 4 names to choose from: draggable, close, minimize, and maximize. You can also pick your own names, but use only letters, numbers, dashes, or underscores. Name the slice using the Properties palette
2. Optimize it. AIR uses the Webkit engine which means we can always use alpha transparency ala PNG 32. Click each slice in turn and make sure that PNG 32 is selected in the Optimize palette, just like you did with the background image.
Now we need to export the interface elements. Select File > Export using the following settings. Save these images into the same folder as the background image.

Now we're going to close Fireworks and open Eclipse / Aptana. Besides the images we've already created, we'll only be using 3 files for this project. Index.html (the main application file), styles.css, and the JavaScript file containing our interface bindings. Let's finish this up. In addition to posting the ZIP file containing all of the project files, I'm going to display the contents of each of those files here inline.

index.html

 
 
&lt;html&gt;
&lt;head&gt;
	&lt;title&gt;Transparency and Custom Chrome&lt;/title&gt;
	&lt;link href="styles.css" rel="stylesheet" type="text/css" /&gt;
	&lt;script type="text/javascript" src="lib/air/AIRAliases.js"&gt;&lt;/script&gt;
	&lt;script type="text/javascript" src="lib/jquery/jquery-1.3.2.min.js"&gt;&lt;/script&gt;
	&lt;script type="text/javascript" src="app.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;div id="appBody"&gt;
		&lt;div id="chrome"&gt;
			&lt;h1&gt;&lt;img src="images/draggable.png" id="draggable" title="drag me" /&gt;&lt;/h1&gt;
			&lt;img src="images/maximize.png" id="maximize" title="maximize me" /&gt;
			&lt;img src="images/minimize.png" id="minimize" title="minimize me" /&gt;
			&lt;img src="images/close.png" id="close" title="close me" /&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

styles.css


#appBody {
	width: 400px;
	height: 300px;
	background: url('images/transparent.png') no-repeat;
	position: absolute;
}
	#chrome {
		position: absolute;
		top: 21px;
		left: 59px;
	}
		#chrome h1 {
			margin: 0px;
		}
		#chrome img {
			float: left;
			cursor: pointer;
		}

app.js


$(document).ready(function(){
	$('#draggable').bind('mousedown',function(){
		nativeWindow.startMove();
	});
	$('#maximize').bind('click',function(){
		nativeWindow.maximize();
	});
	$('#minimize').bind('click',function(){
		nativeWindow.minimize();
	});
	$('#close').bind('click',function(){
		nativeWindow.close();
	});
});

I'm not going to cover the HTML or CSS here because it's fairly straightfoward. I will mention, yet again, that because we only have to work with a single rendering engine, Webkit, developing in HTML and CSS is AS EASY as laying out a design in Flex. The JavaScript file is the only one that gets our attention here. You can see that the AIR SDK makes it SUPER easy for us to access methods on the nativeWindow object. So easy in fact, that there's only 14 lines of code here, which could technically be even shorter without the line breaks I add for better readability. Once you've got all the files in place in your project, run it and you should get your fancy-schmancy new AIR app.

So that's it...one more tutorial down, hundreds more to cover. Hit the comments section if you've got questions, or run into problems. Peace out!