Five minutes to your first mobile AIR Application

This post is more than 2 years old.

A few days back I blogged about my mobile AIR application. I talked a bit about how darn easy it was but I had to be bit vague as I was still under NDA. Now that MAX has passed everyone has the opportunity to build mobile AIR applications and I thought I'd show just how easy it is. To be clear, you do not need an Android device to play/learn.

To begin, first you want to download the new Flash Builder "Burrito" from Adobe Labs. Technically this may take you more than five minutes, but hopefully not too much longer. Don't worry if you already have Flash Builder installer - Burrito will stand on it's own. (Assuming a stand alone install of course.)

Once you've got Burrito up and running, create a new Flex Mobile project:

You may notice that you can also build an ActionScript Mobile Project as well. Flash Builder will now begin prompting you about the project. I named mine HelloWorld. You can leave everything else as is.

Ok, so now you should have your code up, specifically a file called HelloWorldHome.mxml. If you've never seen Flex before, well, you've got a bit to learn later. (I recommend: Flex 4 in Action: Revised Edition of Flex 3 in Action) If you do know Flex, note that AIR 2.5 adds new features specifically for mobile. For now though let's keep it simple. Add a s:label tag as shown below.

<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="Home"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations>

&lt;s:Label text="Hello, Mobile World!" /&gt;

</s:View>

Ok, next up, let's run this baby. Click the pretty little green button on top:

This will load up the run configuration screen (the first time only - after that it will remember your options). You have two options here. If you don't have an Android device, you will select "On desktop" and pick any of the device simulators. If you have an Android device, ensure it is connected via USB and that you've enabled USB Debugging. Flash Builder is smart enough to recognize if you don't have AIR installed on the device and will take care of that for you.

Finally, you can see your lovely little mobile app running:

And that's it. Obviously there is a lot more to learn, but the actual mechanics of this is frackin easy as pie, which I really like. Later this week I'll post the actual source code to my Death Clock mobile application. I'd also like to hear from you guys what you would like to see next. Don't forget Adobe Labs has quite a few links to docs and examples as well.

Quick Tip: Using the mobile simulator? ctrl+r will rotate your application and you can see how your application reacts to orientation changes.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Dan Vega posted on 11/1/2010 at 4:47 PM

There is a great test drive tutorial on devnet (http://www.adobe.com/devnet... for mobile. This is a really great getting started tutorial that will get you up and running right away. What I really enjoyed about it was you end up building a real world application and you learn step by step the process for building mobile applications. I highly recommend it for anyone looking to get started building mobile applications using Flash Builder.

Comment 2 by Raymond Camden posted on 11/1/2010 at 4:56 PM

Damn good link there, thank Dan.

Comment 3 by Derek posted on 11/2/2010 at 7:55 PM

Stinks. Says I don't have the correct version of Windows. Using 7 64bit. Tried different compatibility modes and still gives error.

Comment 4 by Raymond Camden posted on 11/2/2010 at 7:56 PM

I'm using Win7 64 bit as well - no problems here.

Comment 5 by Raymond Camden posted on 11/2/2010 at 7:57 PM

May make sense to raise it on the forums: http://forums.adobe.com/com...

Comment 6 by Max posted on 11/3/2010 at 10:21 PM

There seems to be no connection between Flash Catalyst and Flash Builder when it comes to mobile development. If I create this HelloWorld application in Flash Builder, then select Project>Flash Catalyst>Export Flash Catalyst Project..., my mobile application project is not available as an option in the project select box.

Besides mobile, my understanding is that round trip editing (between FB and FC) has been part of the focus for this release. I'm curious to know why the two applications are still isolated with regard to the new mobile project type.

Also, the concept of mobile seems missing entirely from Flash Catalyst Panini.

Can you shed some light on this?

Thanks!

Comment 7 by Raymond Camden posted on 11/3/2010 at 11:21 PM

Sorry - while I think Catalyst is cool, I've not done any testing on it. Your best bet would be to post to the support forums linked to from the labs page and see whats up.

Comment 8 by Max posted on 11/4/2010 at 3:45 AM

Thanks for responding! Just thought you might have some insight. I have posted on the support forums as well.

FYI, I was able to find a single sentence, at Adobe Developer Connection, that seems to answer my question.

"In subsequent releases, we plan to bring the power of Flash Builder's integrated design/development workflow with Flash Catalyst to mobile development as well."

http://www.adobe.com/devnet...

Comment 9 by Raymond Camden posted on 11/4/2010 at 3:46 AM

That's good to hear. I've got a lot of respect for FC, and if it could be used in mobile too that would kick some butt.

Comment 10 by cole posted on 11/30/2010 at 4:36 AM

I can't get the ADL menu to come up when running app. any thoughts? the app runs in air. i can hit control r and it rotates. but i can't for the life of me see a ADL menu with more options. maybe i am missing something. i have clicked back to flash builder, but still no ADL menu like i see in the video tutorials.

Comment 11 by Raymond Camden posted on 11/30/2010 at 7:10 AM

I'm sorry - but what ADL menu?

Comment 12 by cole peterson posted on 11/30/2010 at 9:58 AM

ADL = the AIR Debugger Launcher.
the adl.exe

in the diff video tutorials out there i see a menu on top that has different options like rotate etc.

I do not get that menu when i run my app and can't figure out why.

Comment 13 by Raymond Camden posted on 11/30/2010 at 5:08 PM

I thought you meant that - but I still don't get what you mean by the menu. Can you share the URL of one of the videos so I can see what you mean?

Comment 14 by cole peterson posted on 11/30/2010 at 9:38 PM

http://tv.adobe.com/watch/a...

check out 8:35

he says he is using the device menu in the ADL.

Comment 15 by Raymond Camden posted on 11/30/2010 at 9:50 PM

I'm running the mobile app now in the desktop simulator. On top of the app, I have a Device menu. I can click that and do the rotate operations. You don't see that?

Comment 16 by Raymond Camden posted on 11/30/2010 at 9:52 PM

You can see a screen shot here:

http://www.coldfusionjedi.c...

Comment 17 by cole peterson posted on 11/30/2010 at 9:58 PM

i am an idiot.
thanks for your time.
cp

Comment 18 by Raymond Camden posted on 11/30/2010 at 9:59 PM

No worries. In the video it was in the top part of the screen. So maybe it changed between the video and the public Labs release.