Building desktop applications with HTML and JavaScript

This session at Adobe AIR Camp introduced traditional HTML and JavaScript developers to the AIR SDK and how to use the the various binaries (ADL and ADT) to develop, test, and package desktop applications. The session included a basic introdu

ction to the AIRAliases.js file and it’s importance when coding against the AIR runtime with JS.

What I find really helpful is the Adobe AIR Language Reference for JavaScript developers. This is a subset of the ActionScript 3.0 Language Reference and includes all the AIR specific features that you as a JavaScript developer can access within the AIR runtime.

For the basic application seen below you can develop using your favorite text editor and the Adobe AIR SDK, download the Adobe AIR extension for Dreamweaver CS3, or even try developing with Aptana. I really like Aptana as it can be installed as a plugin for Eclipse and sit right beside my Flex development perspective.

For other AIR development tools click here.

Download the source code for the application below.

Your first desktop application with HTML and JavaScript

<html>
 
<head>
<title>Our first HTML AIR application</title>
 
<script src="AIRAliases.js" ></script>
<script>
   function doLoad()
   {
      alert("Simple alert to show we can include regular JS scripting");
   }
 
   function writeFile()
   {
      var file = air.File.desktopDirectory.resolvePath("sample.txt");
	  var stream = new air.FileStream();
 
	  stream.open( file, air.FileMode.WRITE );
	  stream.writeMultiByte( document.getElementById('textInput').value , air.File.systemCharset );
	  stream.close();   
   }
 
</script>
 
</head>
 
<body onLoad="doLoad()">
   <h2>AIR HTML/JavaScript Sample</h2>
   <p>This sample application will take a simple text input entry and write this out to the contents of a file on the users desktop</p>
   <input type="text" id="textInput" value="www.flexdaddy.info"/>
   <input type="button" onClick="writeFile()" value="Save to desktop" />
</body>
 
</html>

And the application descriptor/manifest file

< ?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.0">
    <id>com.flexdaddy.samples.htmlair</id>
    <version>v1</version>
    <filename>aircamp_sample</filename>
    <initialwindow>
        <content>airsample.html</content>
        <visible>true</visible>
        <width>400</width>
        <height>350</height>
    </initialwindow>
</application>

Download the source code for this application.

Latest Images

Trending Articles

Latest Images