Using the Adobe AIR Install Badge
Lately I have developed several small AIR application for clients. Sometimes the apps are the actual project, sometimes they are a tool to allow the clients to do something with project. Either way I find myself building quite a few smaller AIR widget applications for clients lately. David Tucker’s 10 common mistakes when building AIR applications lists not using the badge install for your AIR app at number seven. I have been happy with the results of using the badge install to distribute apps to clients.
The Badge Install is a mechanism that allows the user to install you AIR application from a browser. If the user doesn’t have the necessary AIR runtime installed, it will first install the AIR runtime followed by your AIR application. If the user already has your AIR application installed, it allows the user to choose to re-install, or simply launch the already installed application.
While there are examples of using the latest install badge that Grant Skinner put together. I haven’t seen any examples that use the latest SWFObject (v2.1) and produce html results that validate. The process is actually quite simple. You can download a finished example here
Build your HTML file
Build a simple HTML file with your DOCTYPE, head and body.
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'> <html xmlns='http://www.w3.org/1999/xhtml'lang='en' xml:lang='en'> <head> <title>Number Converter AIR application</title> <meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' /> <script type='text/javascript' src='js/swfobject.js'></script> </head> <body> <div id='badge_div'> To install this application you will need the <a href='http://www.adobe.com/products/flashplayer/'>Adobe Flash Player</a> </div> </body> </html>
In the head I bring in the SWFObject with a relative path via the “js” directory. In the body I have created a div with an id of ‘badge_div’, this is the div that will get replaced with the Install Badge SWF file.
Set up the SWFObject
I usually like to place all my SWFObject JavaScript in an individual .js file. For this example I am using the following JavaScript in a file named ‘badgeInstall.js’.
var flashvars = {}; flashvars.airversion = '1.1'; flashvars.appname = 'Number Converter'; flashvars.appurl = 'http://www.knomedia.com/air/numberConverter/NumberConverter.air'; flashvars.imageurl = 'assets/NumberConverter.jpg'; var params = {}; var attributes = {}; swfobject.embedSWF('install_swf/AIRInstallBadge.swf', 'badge_div', '205', '170', '9.0.115', 'install_swf/expressInstall.swf', flashvars, params, attributes);
These are the required flashvars parameters required to get the badge working:
- airversion is the AIR runtime version required to run your application
- appname is the name of your AIR application
- appurl is the absolute address of your .air file
- imageurl is the address (absolute or relative) of an image file to display in the badge. The image should be 205px by 170px.
The last line is simply using the SWFObject to replace the appropriate div with your Badge Install SWF file.
Back in the HTML head you need to include a reference to the badgeInstall.js which results in the following finalized HTML document:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'> <html xmlns='http://www.w3.org/1999/xhtml'lang='en' xml:lang='en'> <head> <title>Number Converter AIR application</title> <meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' /> <script type='text/javascript' src='js/swfobject.js'></script> <script type='text/javascript' src='js/badgeInstall.js'></script> </head> <body> <div id='badge_div'> To install this application you will need the <a href='http://www.adobe.com/products/flashplayer/'>Adobe Flash Player</a> </div> </body> </html>
There are lots of optional parameters that can be passed as a flashvar to the badge to customize the badge like changing the button label color, the application name color, etc. For a listing of all of these, see the demo included with the badge install swf.
Badge Builder
I’m actually finishing up a small AIR app called ‘Badge Builder’ that facilitates writing all the necessary HTML, JavaScript, etc to quickly create a Badge Install page. I’ll post it up as soon as I’m finished. Stay tuned.
jason
Jason Madsen is a web developer who teaches OOP and Flex and acts as a Department Chair at a private university in Orlando, FL.
You are the man! I was impressed by the badge you made, and then I discovered the Badge Builder. I haven’t tried it yet, but it looks like a killer app!
Thanks a bunch!
/Johan
Johan Nyberg
2 Oct 08 at 4:48 am
Great information. I tried using the example from the Air site, but it seemed a little out of date and wasn’t working correctly. Thanks a ton!
Dean Logan
5 Mar 09 at 1:50 pm
Jason, thanks for putting together BadgeBuilder. I’ve been using it and it works very well.
I’m having some trouble reading flashvars.installarg and flashvars.launcharg within my Air app.
In the first frame, top layer of my app I put:
function loaderComplete(myEvent:Event){
var flashVars:Object = LoaderInfo(this.root.loaderInfo).parameters;
for (keyStr in flashVars) {
valueStr = String(flashVars[keyStr]);
trace(keyValuPair);
}
}
The loaderComplete() method does get call but doesn’t report any variables on launch or install from the badge.
I’ve also added this to the first frame, top layer:
NativeApplication.nativeApplication.addEventListener(BrowserInvokeEvent.BROWSER_INVOKE, onBrowserInvoke);
function onBrowserInvoke(e:BrowserInvokeEvent):void{
var arg:String;
for (arg in e.arguments){
trace(arg);
}
}
But again, haven’t seen any vars… in fact the onBrowserInvoke() function never gets called.
I’ve verified in badgeInstall.js that the vars I set are listed properly.
Any tips/guidance?
Thanks,
Joe Reger
Joe Reger
17 Jul 09 at 1:28 pm
You have saved my life… again. Thanks!
Max
27 Jul 09 at 10:34 pm
W00t! I love it when I find answers to obscure problems quickly. “air installbadge swfobject”
Nick
5 Sep 09 at 9:22 pm
Really made my install process easy. Thanks a million!
James
24 Sep 09 at 3:40 pm
Hello Jason, I am having trouble trying to auto launch an installed air app from the browser, would you happen to know how to do it? I can detect successfully if the app is installed, but when I call “launchApplication(appID, pubID, arguments)”
nothing happens. I’ve been battling this for a few days now, any help you can provide would be greatly appreciated
Bala
1 Mar 10 at 11:39 am
@Bala,
My first suggestion would be to ensure that your AIR application has the ‘allowBrowserInvocation’ set to true in your application descriptor file. By default it is false, and any calls to ‘launchApplication()’ will simply fail.
Jason
jason
1 Mar 10 at 9:37 pm
Hey jason, thanks for the suggestion. i do in deed have that in my descriptor file.
I was able to narrow my problem, I think it is a scope issue, maybe you can help ( I am a .NET developer, not so much AS3)
This code snippet is from the AIRBadge.as provided in the AIR SDK
This code works:
private var _appURL: String;
private var _appName: String;
private var _airVersion: String;
private var appID:String = “com.dbala.me.appid”;
private var pubID:String = “”; //
private var launch_args:Array = ["launchFromBrowser"];
private function onButtonClicked(e:Event):void {
_air.installApplication( _appURL, _airVersion );
}
This code does NOT work:
private function onButtonClicked(e:Event):void {
_air.getApplicationVersion(appID, pubID, versionDetectCallback);
}
private function versionDetectCallback(version:String):void
{
if (version == null)
{
//this message displays
root.statusMessage.htmlText = "blablabla installing";
//this function DOES NOT execute
_air.installApplication( _appURL, _airVersion );
//this message displays
root.statusMessage.htmlText = "blablabla after installing";
}
else
{
//this message displays
root.statusMessage.htmlText = "Launching Application..";
//this function DOES NOT execute
_air.launchApplication(appID, pubID, launch_args);
}
}
Bala
2 Mar 10 at 2:45 pm
i figured out my problem
for anyone else struggling with this: http://forums.adobe.com/message/110535#110535
You can no longer call installApplication() or launchApplication() outside the context of a user-initiated event such as a button click. This change was made to improve the security of the browser API.
Bala
5 Mar 10 at 5:02 pm
Hi! Thanks for great util!
I’ve some problem when creating badge install with it.
When i load index.html there is message – Error. Invalid installer parameters.
So, i have my .air file locally,
C:\seamless\badge\myapp.air
Can this be a problem?
Igor
20 Mar 10 at 5:32 am
@Igor … My understanding ( and I could be wrong here ), is that you will need to have an absolute path to your AIR application on a web server. Not a local file path. That is to say that your path should start with ‘http://www….’
Hope that helps.
Jason
jason
20 Mar 10 at 12:18 pm
Thanks Jason! It looks like you are right. I place my .air file to friend’s web server, so appurl now like that
http://www.somesite.com/MyAirApp.air
Ok, then index.html load without errors and I able to click Install Now button, Installer seem to be stars, but anothre message appear.
The application could not be installed. Try installing it again. If the problem persists, contact the application author. Error # 2032. Here is screen
http://www.clickonf5.org/wp-content/uploads/2009/09/tweetdeck_problem.gif
Strange, withoun badge .air installation run perfectly/
Igor
21 Mar 10 at 2:50 am
Hm… a little Googling point me to this:
‘You can do this by adding the following line to the .htaccess file for your server: (I’m not a server guru, so this may not work in all cases, but it works on the Apache server I’m using.)
AddType application/vnd.adobe.air-application-installer-package+zip .air’
Ok, i just have access to FTP, friend’s site hosts on foreign company server, so I look around at ftp://somesite.com and not find .htaccess file…
Igor
21 Mar 10 at 3:07 am
It’s clear… I need to contact their system administrator)
Igor
21 Mar 10 at 3:34 am
[...] Using the Adobe AIR Install Badge [...]
Quick Tip: Checking The Version Of An Installed AIR Application at Jozef Chúťka's blog
25 Aug 10 at 11:11 am