One of the topics I spoke on at 360|Flex was how to add an "Install Now" button to a page, using the AIR install badge from Adobe. This is very easy to do, even though this post is long-ish. Explaining what is happening takes longer than the dozen lines of JavaScript required to get this to work.
I have an example "Install Now" button for DryerFox in the blog sidebar. This button will provide a one-click install experience for your users.
Quick-n-dirty summary for adding an "Install Now" button.
Copy foo.air to your web folder. This is your app's AIR application bundle.
Create a 215 x 100 image of your app, and save it as foo_badge.jpg in your web folder.
Copy swfobject.js to your web folder. Thanks to Geoff Stearns for the fabulous SWFObject.
Copy badge.swf to your web folder.
Add the following HTML snippet to your page:
<script type="text/javascript" src="swfobject.js"></script>
<div id="foo_flashcontent">
Whoa. You need to install <a href="http://www.adobe.com/go/flashplayer">Adobe Flash Player</a>.
</div>
<script type="text/javascript">
var so = new SWFObject("badge.swf", "badge", "217", "180", "6.0.65", "#FFFFFF");
so.addVariable( "appname", "Foo" );
so.addVariable( "appurl", "foo.air" );
so.addVariable( "imageurl", "foo_badge.jpg" );
so.addVariable( "airversion", "1.0.M4" );
so.addVariable( "buttoncolor", "008811" );
so.addVariable( "messagecolor", "000000" );
so.write("foo_flashcontent");
</script>
Details - Under the hood
The SWFObject script will replace the <div> section labeled "foo_flashcontent" with the badge SWF, and populate its required Flashvars with your apps resources. Note that it is important to include some sort of fallback text in the <div> in case no Flash player is found.
Flashvar name |
Description |
|---|
| appname | The name of your app. This name will be displayed by the badge in various messages below the "Install Now" button. Messages like "In order to install FooApp, the AIR runtime will also be installed". |
| appurl | The URL of your app's AIR bundle. The URL can be relative to the same folder as the page, or can be an absolute URL pointing to some other domain. |
| imageurl | The URL of the 215 x 100 image (JPG/PNG) to display inside the badge. As with the app URL, this URL can be relative or absolute. |
| airversion | The version of the AIR runtime required by your app, as specified in Foo-app.xml. For Moxie beta 1, this is "1.0.M4". |
| buttoncolor | The color of the "Install Now" text in hex RRGGBB format. |
| messagecolor | The hex RRGGBB color of the message text displayed below the badge. |
Clicking the badge will do the following:
Auto-update the Flash player. The user's current Flash player version is examined and the script will update to the latest Flash Player if required. This bootstrap works as far back as Flash player 6.0.65 (released in December 2002), so that gives pretty good coverage. Will a 2002-era computer run a useful AIR app? Hmm. Probably not.
Auto-install the AIR runtime. Verify that the AIR runtime required by your app is installed, and auto-install it when missing. Each AIR app is tied to a specific runtime release, and the install badge knows how to deal with this correctly.
Auto-install your AIR app. This is, of course, what you really wanted to do in the first place.
Security Issues
Just to be clear, all of the above installation operations take place in the context of the active operating system user account. No OS security restrictions are bypassed, so the user will need admin or install privileges to succeed. This is a good thing.
Churn, Churn, Churn
The badge.swf example was added to the Flex SDK as part of the Flex 3 (Moxie) public prerelease, but that version of badge.swf was rather buggy. Adobe quickly released a patch and you will need to use the patch and avoid the one included in the SDK. I'm sure this will be fixed in the next public code drop. For now, avoid the code in INSTALLROOT/sdks/moxie/samples/badge.
Update:
Also make sure your web server is configured to know the mime-type of .air files. (*.air=application/vnd.adobe.apollo-application-installer-package+zip) More detail on the mime type is found in Mike Chamber's post here.
Resources:
Tom Cornilliac's
excellent post on the AIR install badge. (It is just missing the SWFObject example)
