On the Stre@m

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:

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.

JSEclipse has make it on Adobe labs. After InterAKT was acquired by Adobe, JSEclipse was one of the products that caught their attention and after a long period of review it landed on the Labs.

JSEclipse is a new plugin for the Eclipse environment that helps developers code JavaScript faster and with no errors. With JSEclipse, you can complete a variety of tasks, from editing small sections of code to working with the next big AJAX library or developing plug-ins for a product that embeds JavaScript snippets.

What all this Ajax frameworks have in common? JSEclipse 1.5.2 that has the capability to understand all their idioms and propose all the classes for code completion.

JSEclipse 1.5 includes a new feature, pretty common in other editors: code templates (also known as code snipets).

JSElispe comes with a set of predefined templates.

I am proposing here to add a new and useful template for the AJAX developers, particularly for the ones that are using prototype.js. The template is for creating and extending a class. The code (straight from prototype.js source code) looks like this:


Form.Observer = Class.create();
Form.Observer.prototype = Object.extend(new Abstract.TimedObserver(), {
  getValue: function() {
    return Form.serialize(this.element);
  }
});



To add a new template just go to Window/Preferences.. and then JSEclipse/Templates. The New… button will open the dialog for adding a new template.

After pasting the code inside the Pattern text area all that remain is to replace parts of the code with template variables: The next image is showing the result.

Now there is only one thing. Test the template into a JavaScript page:

After selecting the template and typing MyClass in the first box this is how the editor looks like:

It can be noticed one thing: typing MyClass in the first box also changes the value of the first box from the next row. These two boxes were created with ${ClassName} and their values are bound. To move to the next box to be edited just hit Tab.

So, if you are using prototype.js this little template will be quite useful.

In all programming languages writing comments is a good practice. In JSEclipse, writing comments is not just a good practice is a best practice.

JSEclipse takes into account code comments in many ways. First let’s take a look at a situation:

If we add now a comment to the initialize method, that comment will be displayed along with the proposed completions.

We can go further in specifying our comments, we can use JSDoc comments. Let’s specify a type for our parameters and try code completion on them inside the method:

Another method to specify parameter types is the following: