Wednesday, July 04, 2007

Flex and AIR application with one codebase

written by Marcel Panse

I'm creating my first AIR application, or better i'm porting my existing webapplication to an AIR project. The application is all about online imaging and the one thing it is missing is local file access; a perfect setup for an AIR application.

First i wanted to just make my Flex project AIR compatible.. but weird enough that is not possible. I added a Apollo buildcommand and apollo nature to my project file, but flexbuilder can't handle both a flex nature and a apollo nature, so he just picks one and youre project isn't flex compatible anymore (you get an error when lauching through the Run... buttons).

So i went for the next approuch, too seperate projects with the same codebase. There are several options to achieve this.
1. Create libraries and modules for common code
2. Create a symlink to the source dir

The first one looks the best option but needs a lot of refactoring at the moment in the project, thats what we are going to do when there is more time (this is a proof of concept).
The latter is the easyest solution. I Created an AIR project and created a symlink by clicking:
New -> Folder -> Advanced -> 'Link folder to the file system'
and linked it to the source dir.

Now i still continue to work on my Flex Project and once in a while i can create an AIR Installer file by simply clicking the button in the other project.

Next i created a 'Seamless Installer'. This piece of code simply checks wether the user has the AIR runtime and let the user install your application including the runtime or just the application.

You create this 'badge' by copying the badge.swf from
'sdks/moxie/samples/badge/badge.swf'
and create a html file like:
<html>
<head>
<title>title</title>
</head>
<body>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="217" height="180" id="badge" align="middle">
<param name="allowScriptAccess" value="all" />
<param name="movie" value="badge.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" />
<param name="FlashVars" value="appname=ApplicationTitle&appurl=http://localhost/application.air&airversion=1.0.M2&buttoncolor=008811&messagecolor=000000" />
<embed src="badge.swf" quality="high" bgcolor="#FFFFFF" width="217" height="180" name="badge" align="middle" allowScriptAccess="all" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" FlashVars="appname=ApplicationTitle&appurl=http://localhost/application.air&airversion=1.0.M4&buttoncolor=008811&messagecolor=000000"/>
</object>
</body>
</html>

Simply use the flashVars to config the badge.
BTW. If you want to adjust the badge, the .fla is also in the samples dir..

2 comments:

pmedina said...

Hello!!

I´m building a project on flex by using ant with custom tasks.
At the moment i´m having some kind of trouble by coding one method for my custom task which uses CompcTask (flextasks).
I want to compile a large set of assets into a swc file by using compc, but i´m having problems to set the files dynamically to compile into the swc.

Do u have experience in that??

Greetings!

Marcel Panse said...

Sure, check out the antennae project: http://code.google.com/p/antennae/

Really good ant build scripts for flex projects containing all the features you need.