I have seen a few workarounds, but none as simple as a tip I overheard on Twitter from Ted Patrick. So here it is, either read on, or watch a quick two minute screen-cast I put together.

1. Create a new Flex Project in Flash Builder.

2. In the New Flex Project Wizard, give your project a name

3. Choose Desktop (runs in Adobe AIR)

4. Select “Next >” in the wizard

5. Still in the Wizard click “Next >” again to bypass the Ouptut folder ( you can change it if you feel so inclined )

6. Still in the Wizard change the file extension of your Main application file from .mxml to .as

7. Select Finish

When you compile, and run the application in ADL, you won’t actually see the native window. Here is where the tip from Ted Patrick comes in. In your application-descriptor.xml file, change the visible tag to true. Compile and run. You should have a nice native window showing up. You can set the initial width, height, backgroundColor, and frameRate using the [SWF] annotation / meta-tag.

Optionally, if you would rather wait to have the native window be visible, you can do so using ActionScript by setting the visible property of the nativeWindow instance of the stage like so:

stage.nativeWindow.visible = true

I checked permissions, restarted. Tried again, no luck. Tried again, and what? It tells me that I already have 1.5.3 installed. Huh? On which of the failed attempts did that happen? So I thought I would check the version number somehow. After a bit of googling. I found no easy way to verify the version number. You can do it programatically from within ActionScript. To do so you simply look at the following:

NativeApplication.nativeApplication.runtimeVersion

Looking at that property from within your IDE will tell you which version of the runtime you have in your installed SDK. To see which actual version of AIR is installed for AIR apps that you are running on the machine you need to execute the code within that environment.

So I built a quick little widget that displays the installed runtime version. Nothing too fancy here, just a utility. Feel free to install and use it via the badge installer below…

You can install the widget from the install badge above, or you can download the .air installer here

Anyhow, in my readings about MAX, I have come across the Tour De Flex application that a few of the Adobe evangelists have put together. It’s an AIR application that gives you samples on using everything Flex, from the very basics, to some interesting third party components, and even some cloud API’s. It has working examples for everything. A great application. They even have a system in place to allow developers to showcase their own work through a submission process. I can see this application being helpful for people just getting into Flex, or as a reference for Flex developers for those ‘how does that component work again…’ moments.

There is also an Eclipse plug in. It allows you to search for components. It will bring up a list of search results, double clicking the result opens Tour De Flex and displays examples, and descriptions.

I’m going to put the install badge in the widgets bar to the right for a while. Feel free to install it directly from the badge, or visit the Tour De Flex page, where they have the same badge in effect.

Jason

If you are free on November 3rd, and in Orlando, come check it out.

jason

So it was bound to happen. I put out a version of the Badge Builder, and Adobe and Grant Skinner soon there after release a similar application.

It is called Badger, it has a cool flying badger icon, and does a few really cool things. For example when you select your AIR application it will pull your publisher ID, and application ID out of the AIR file itself. Very nice touch.

While I haven’t researched much further yet, it also appears that you can use various template badge SWF files. Doing so should allow you to build your own custom template for use with the application.

You can check out Grant’s post on Badger here

-jason

You can toggle between the necessary, and optional parameters. It has a built in preview function that will open your browser and display the HTML file. Once you are satisfied with your settings, you simply build the file to the folder of your choice. All of the fields have tool-tips to get you up to speed quickly on the information that is needed. The application is just another way to be more productive.

I’ve set up a page with an Install Badge, screen shots, and a bit more by way of features here.

I have been testing it as I develop and use it. So far is has been pretty stable for me. If you find any issues, please let me know.

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

]]> http://knomedia.com/blog/2008/08/29/using-the-adobe-air-badge-install/feed/ 16 http://knomedia.com/blog/2008/07/23/simple-number-converter/ http://knomedia.com/blog/2008/07/23/simple-number-converter/#comments Thu, 24 Jul 2008 02:16:42 +0000 jason http://knomedia.com/blog/?p=11 I put together a simple AIR app in Flex for a co-worker the other day. It’s a simple panel that allows the user to enter a number in any form (binary, octal, decimal, hexadecimal) and it will display all of the other number types for you. At first I didn’t think it was all that useful. But in a recent project I needed to double check that a value that I had entered as hex was correct. When I traced out the value, the output window displayed it as a decimal number… Hey, my little app came in handy!!! I thought I’d make it available.

The icons were made using Clockmaker Icon Generator another widget type AIR app.

One of the things I love about AIR and Flex is how quickly you can put together a simple little ‘widget’ type of app like this. As I continue to learn more and more about the Flex framework, the more I’m liking it.

You can download the application using the install badge below. (If you haven’t seen it yet, you should check out Peter Elst’s AIR Badge WordPress plugin)

Please upgrade your Flash Player In order to view this content you will need to have the latest version of the Adobe Flash Player.

jason

]]> http://knomedia.com/blog/2008/07/23/simple-number-converter/feed/ 1