With the launch of Adobe new AIR (Adobe Integrated runtime) and Google Gears it would seem the web is coming off-line, indeed you might have been surprised at launch of 2 similar applications a week apart in truth Google and Adobe have been collaborating on the data storage system used in both Gears and AIR (formally Apollo) since Apollo alpha release when it emerged it did not have any DB support.
To help would be developers get started with AIR we thought we would introduce it via a familiar tutorial technique…
Hello World
This is a slightly modified version of the tutorial in the developers guide but designed to get you started in less steps.
Before we start you will need to download AIR player this ultimately will be part of the flash player but for the time being its a separate run time and is availble from Adobe Labs site currently only availble for Windows and Mac we will concentrate on windows platform for this demo, run the downloaded exe it will take only a few seconds and then you can run the examples on the adobe web site.
Installing the SDK
Download the SDK for Windows its a large ZIP (10mb) I would also include the documentation while your at it,
extract the files to
C:\Program Files\Adobe\AIRSDK
Next you will need to add some environment variables this is not always obvious how to do this
open
Control Panel - System - Advanced
and click Environment Variables Find Classpath and click edit, presuming you set up the files in the above location add the following to your classpath
;C:\Program Files\Adobe\AIRSDK\bin\adl.exe;C:\Program Files\Adobe\AIRSDK\bin\adt.bat
So that’s the SDK taken care off, now create a new work area, so create a directory in your normal development area call it hello (We will be developing a simple HTML application rather then flash the next stage is different for flash) copy AIRAliases.js to the folder we just created.
Create a new file called
hello-app.xml
This files is the descriptor, below is an example file which should make it easy to see what’s happening.
<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.0.M4"
appId="com.wordpress.ventureskills.HelloWorld" version="0.1">
<name>Hello World </name>
<rootContent systemChrome="standard" visible="true">hello.html</rootContent>
</application>
Various important bits here the App ID this is the applications unique identifier and the recommended standard is based on reverse DNS hence the com.wordpress.ventureskills to declare domain followed by the app name HelloWorld the root content is the location of the first file of the application in this case hello.html talking of hello.html lets create that file now
<html>
<head>
<title>Hello World</title>
<script src="AIRAliases.js" type="text/javascript"></script>
<script type="text/javascript">function appLoad(){
if(window.runtime){
air.trace("Hello World.");
}
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "request.txt",true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
document.getElementById(’replace’).innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null)
}
</script>
</head>
<body onLoad="appLoad();">
<h1>Sample Application</h1>
<div id="replace">
<p>You shouldn’t see this</p>
</div>
</body>
</html>
Again all pretty straightforward if your wondering what the code does, it will simply replace whats between the div replace with contents from request.txt if you haven’t already jumped the gun create a request.txt and place some content in it I suggest…
Hello World
Save and your done at least for this mini application, now we need to debug and compile it.
open up a command prompt - CMD and navigate to your working folder cd /your folder now if you set your environment variables correctly then you can debug using the following
adl hello-app.xml
So if you didn’t set up your variable correctly or chose not to you got an error and are now crying, fear not you can still debug using the following:
C:\progra~1\Adobe\AIRSDK\bin\adl.exe hello-app.xml
Presuming the Debug went well its time to compile
Same process as before
adt -package hello.air hello-app.xml hello.html AIRAliases.js request.txt
or
C:\progra~1\Adobe\AIRSDK\bin\adt.bat -package hello.air hello-app.xml hello.html AIRAliases.js request.txt
notice hello.air guess what that is, yes the compiled installer package, go look its in your working directory, you just got your first app up an running…
So what’s the fuss about
AIR is being touted as the next big thing in web applications the ability to take applications offline is a powerful idea, imagine what you could do with gmail offline for example this soon to be freedom will either terrify you or liberate you, I for one are enjoying Google Gears in Google Reader the ability to listen to new blog posts in the car is fantastic, though buggy, AIR will allow developers to build similar applications with no major issues. But as the online world goes offline how will it cope in today’s web2.0 interdependent sites, mashups and remote storage? and what will advertisers do in this new world? (thats a whole post in itself I think)
Link Love
Subscribe to The Venture Skills Blog by Email
All our Posts are audio subscribed for more information see here, and to access the podcast feed here
This blog is moving soon, make sure you move with us by using our Feedburner RSS feed, if you have used the autodiscovery button in your browser you may need to swap feeds, simply delete the old feed and add, http://feeds.feedburner.com/VentureSkills For a more detailed explanation on feeds and recieving our content in various formats click here
Subscribe to our Feedburner RSS Today!
Subscribe to our Odiogo Audio Feed
June 11, 2007 at 10:32 am
I am not sure if this is going to work. Personally I use another solution. It is provided by netwerk.gr and it is a encoded browser witch can have apache+encrypted php+mysql embedded in order to give offline tools to your clients.
The good thing of this solution is that you are using the exact same application with the web. The only thing that you need to add is the synchronization module.
June 11, 2007 at 10:36 am
The nice thing about AIR is it will be part of the flash player so once the next flash player out your visitor need to download anything extra except the air file.
I guess adobe hopes the fact it is packed with flash will make people use it
June 11, 2007 at 7:49 pm
You really think it will be part of the next Flash Player? I just installed AIR beta and it was 9mb. It’s not humongously big but it’s way bigger than the Flash Player.
June 11, 2007 at 8:10 pm
I suspect their is a lot of replication between the run time and the flash player hopefully this final stage of development will concentrate on code optimisation.
June 12, 2007 at 1:00 am
[...] Developing Hot AIR [image] With the launch of Adobe new AIR […] [...]
June 13, 2007 at 2:13 pm
[...] Tim reviewed a new product, Adobe Air, and published this review on his The Venture Skills Blog. [...]
June 18, 2007 at 12:51 am
I can’t understand why you should need to add an .exe or .bat file to a CLASSPATH, which is for Java class files or jars…. Are you sure you didn’t mean to add those to your PATH env. variable?