Home › Blogs › bricemason's blog ›

Adobe AIR Series - Layouts, Styles, and Logic

Enable the Subscriptions block here!

Continuing on with the next installment of our series covering Adobe AIR (Adobe Integrated Runtime) development, this post will demonstrate how to hook in the styles and scripts we use for web development in our AIR desktop applications.

This post will continue the development of our firstApp sample application we created last Friday. If you haven't dug in yet, don't worry. This is only the second post in this series so a quick brush up from last week will suffice.

Certainly the application created last week was simple but very important if you're just starting out as an Adobe AIR developer. We learned the following concepts which will serve as a good base in becoming solid AIR developers.

  • Created a projects directory to maintain all of our applications, and to provide a consistent build platform.
  • Created a certificate to bundle with our AIR application.
  • Learned about the application descriptor file used to provide basic configurations for our AIR application.
  • Used the adt utility to build and sign our application, preparing it for distribution.

In the spirit of maintaining and building from this foundation, we'll now move on to discussing some common workflows we use as web developers and how they relate to AIR development.

Layouts and Styles

Unlike some products that will ship their own HTML rendering engine, AIR uses the WebKit open source rendering engine. This provides for a more predictable environment as any of the HTML, CSS, JavaScript, DOM capability supported by this engine will function in your AIR applications. While you do have access to some built-in classes for AIR which provide the rich desktop software capability, your core HTML/CSS/JavaScript will function as it did in its native environment.

While your code generally won't need to change for simple applications, the methods by which we include them in our program is different when we build the application. To demonstrate, we'll add some styles to our firstApp and compile them in. Start off by ensuring your firstApp project directory is like that found in Figure 1 below. 

<air_sdk_root>
   +--- projects
          +--- firstApp
                  +--- scripts
                  |       +--- main.js
                  +--- styles
                  |       +--- main.css
                  +--- index.html
                  +--- application.xml
Figure 1 - Application project directory

You can see, we added two directories scripts and styles with their corresponding style and JavaScript files below them. Don't worry about the JavaScripts for now, we'll cover those in a bit. This directory structure should be familiar to you as a web developer, they're just simple directories used to house our external assets for our application. Next, add the CSS from Listing 1 to the main.css file. These styles will be applied to the new HTML structure we've defined for the index.html in Listing 2. 

body {
	margin: 0px;
	font-family: helvetica;
	font-size: 0.85em;
}

#cntr_outer {
	border: 1px solid #000000;
}

#cntr_header,
#cntr_main,
#cntr_footer {
	border: 1px dashed #000000;
}

#cntr_header,
#cntr_footer {
	background-color: #8d8d8d;
}

#cntr_main {
	height: 150px;
	background-color: #ededed;
}
Listing 1 - Main CSS styles 
<html>
<head>

<title>Adobe AIR Series - Introduction</title>
<link rel="stylesheet" type="text/css" href="styles/main.css" />

</head>
<body>

	<div id="cntr_outer">
    
    	<div id="cntr_header">
        	header
        </div>
        
        <div id="cntr_main">
        	main
        </div>
        
        <div id="cntr_footer">
        	footer
        </div>
    
    </div>

</body>
</html>
Listing 2 - index.html

The styles are simple and are meant to demonstrate the familiar capabilities of the AIR development environment. Now that we have some basic styles defined and linked in to our index page, we'll need to build a new release which includes the styles directory. From your bin directory under the AIR SDK root, run the command in Listing 3. 

adt -package -certificate ../firstAppCert.pfx -password superSecret ../projects/firstApp/firstApp.air
 ../projects/firstApp/application.xml -C ../projects/firstApp index.html styles
Listing 3 - Building the application with styles

The only difference between this command the one from last week's post is that at the end, we're including the styles directory. This will enable our styles to process, creating the application found in Figure 2 below.


Figure 2 - Basic styles applied

Next, use the code from Listing 4 below in the main.js file. To add these scripts to your AIR app, use the command in Listing 5. You will need to link in the script to your index page in a <script /> tag. 

window.onload = function() {

	var msg       = "";
	var elOuter   = document.getElementById( "cntr_outer" );
	var elHeader  = document.getElementById( "cntr_header" );
	var elMain    = document.getElementById( "cntr_main" );
	var elFooter  = document.getElementById( "cntr_footer" );

	// report on the contents of the main divs.
	msg += "cntr_header: " + elHeader.innerHTML + "\n";
	msg += "cntr_main:   " + elMain.innerHTML   + "\n";
	msg += "cntr_footer: " + elFooter.innerHTML + "\n";

	// change the border style of the outer container
	elOuter.style.border = "2px solid #ff0000";
	
	// show the div contents in an alert box
	alert( msg );

}
Listing 4 - main.js 
adt -package -certificate ../firstAppCert.pfx -password superSecret ../projects/firstApp/firstApp.air
 ../projects/firstApp/application.xml -C ../projects/firstApp index.html styles scripts
Listing 5 - Command to include scripts

The JavaScript hooks in to the onload event of the Window and reports on the innerHTML property of the main divs of the application. Further, a runtime style is applied to the outer div's border property, creating a solid red border. You can see the results of this in Figures 3 and 4 below.


Figure 3 - window.onload event firing


Figure 4 - Runtime style applied to the outer div

I hope this post has demonstrated and stressed the fact that much of your AIR development truly can go unchanged from your traditional workflows. The only added consideration when using AIR is to include the proper directories when building the application. For more information on AIR and this series, check out the following resources:

Introduction | Layouts, Styles, and Logic | Advanced Features | Truveo Sample Application

» Submitted by bricemason on November 13, 2007 - 10:18am.