Use Flex Builder 3 to create a JavaScript AIR application.

I have tried today to create an AIR application. My tool of choice was Flex Builder 3 as I knew you can create AIR applications using it.

So let’s see what I have done.

Of course, first I have created the AIR project:

New Flex Project - MyAirApp

From the beginning I have spotted a problem in this picture: there was no mention to HTML or JavaScript or anything. Adobe AIR has the capabilities to render HTML and one of the strongest points of this framework is that a web developer can basicaly hit the ground running and just program his way into the desktop world using HTML and JavaScript.

Going forward, I have search resources to see what is the tooling support for this and I found in Adobe’s documentation an entry about this: AIR development tools. Obviously, even if is not mentioned in that chapter of documentation, Flex Builder 3 has suppor for creating AIR applications so let’s persue this further and set up the environment.

If we run the application right now, MyAirApp window shows up as a Flex AIR application. We need to change that so MyAirApp to render html.

First let’s create index.html and set it up to be used by the AIR application. To do that the bin-degug/MyAirApp-app.xml file should be edited and change two tags: content and visible. Yes I now, is not a very elegant thing to do. Is just the first thing that helped me. I’ll try to find a less hackish way to this. If you already know one please share it with us.

Running now the application will render:

So here is my first HTML AIR application. OK, I said JavaScript AIR application into the title. This is only the first step to get there. More will come soon.

Have fun coding.

6 comments so far

  1. Nice tutorial and interesting point of view

  2. [...] Use Flex Builder 3 to create a JavaScript AIR application - I have tried today to create an AIR application. My tool of choice was Flex Builder 3 as I knew you can create AIR applications using it. [...]

  3. Fernanda Gomez June 6, 2008 5:29 am

    Didn’t know it was that simple, thanks for sharing

  4. geraud June 6, 2008 11:53 am

    I tried it but it didn’t work for me.
    It shows an empty window.
    May be it is because Flex builder needs a main.mxml file to compile the application. May be it is because you forgot a step in your explanations

    I don’t know, but I followed your step by step instructions and it didn’t work at all.

  5. Remus Stratulat June 6, 2008 3:02 pm

    Hi geraud,

    so you say that running the application shows you an empty window. Please check bin-degug/MyAirApp-app.xml file. If inside the “content” tag it says MyAirApp-app.swf you should change that to index.html

    Let me know if it works for you.

Leave a comment

Please be polite and on topic. Your e-mail will never be published.