search
top

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.

14 Responses to “Use Flex Builder 3 to create a JavaScript AIR application.”

  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. Didn’t know it was that simple, thanks for sharing

  4. geraud says:

    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. 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.

  6. RAWAN says:

    hello sir

    this side rawan I am a farsher in flex and now I went to use flex for website so can you help me if you have any type of information in flex

    plz send me that information in my mail

    thank
    sir

    rawan

  7. Rawan,

    A good starting point to learn Flex are the following two sites:
    http://www.adobe.com/devnet/flex/?sdid=ZFCT and
    http://flex.org/

    From there you can go and explore the Flex world. Another site that just got out on the market is http://stackoverflow.com/ where you can place your questions and other developers will answer.

    I hope this helps you.
    Remus

  8. Nice. That was what I needed.

    I’ll let you know if I ever finish the app I need to build with this :)

  9. rohit says:

    yes it is working

    but my air code means code in is not going to display

  10. Selvagk says:

    Hi Remus,

    Great piece of information, but am facing some problem, while exporting my application into .AIR file. It shows a blank screen,i believe that flex builder automatically references SWF file to the app.xml.
    (please note:The application runs perfectly well while running and debugging).
    please do kindly share info, regarding deployment of AIR release build.

    Thanks in advance

  11. Hi Selvagk,

    I no longer have a Flex Builder installed on my computer so I can not really test. If I remember correctly there are two app.xml in your project, one in bin-debug folder and another one, I do not remember where. Please check to see if both have a reference to your html file before exporting.

  12. minty says:

    hi,

    Can anyone tell me how to transfer a project from one workspace to another?

  13. Go into the containing workspace and delete the project from Package Explorer or Navigator specifying on the “Confirm Project Delete” dialog “Do not delete contents”.

    Then you go into the target workspace, import the project (File > Import; General > Existing Projects into Workspace) and you can also specify to “Copy projects into workspace” it you want to move the project location on the disk.

    That’s it.

Leave a Reply

top