Tag Archive for Flex Builder at On the Stre@m

June 12, 2008 No comments

Adobe AIR
debugging
Flex Builder
JavaScript

Use Flex Builder 3 to create a JavaScript AIR application - debugging.

In the first part of this article I wrote about how Flex Builder 3 can be used to create a JavaScript AIR application and how to set up the environment.

Going forward, one big part of developing an application is debugging it. The instrospector tool I am talking about does not help to debug an application in the same way the JDT debugger helps debug Java applications. Actually it works more like Firebug.

First you need to copy one file into the source folder of your project:

“c:\Program Files\Adobe\Flex Builder 3\sdks\3.0.0\frameworks\libs\air\AIRIntrospector.js”

copy AIRIntrospector.js into your project

The second step is to include it into your application:

import AIRIntrospector into your project

If you run the application right now, nothing will happen. The introspector is not started unless it is used. So let’s use it to see how it works. For that I will add the following piece of code just above the <body> tag.

<script>
air.Introspector.Console.log(window);
</script>

I made it a little bit interesting by logging the window object to see the power of this introspector.

Adobe AIR Introspector

You are now able to explore the entire structure of the window object to see exactly the value for each member. This console is a very powerful tool. As you can see there are more features there and we will explore those later. More about Adobe AIR Introspector can be found on the Adobe help resource center here.

June 4, 2008 6 Comments

Adobe AIR
Flex Builder
JavaScript

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.

March 20, 2008 No comments

Education
Flex
Flex Builder