My site on ICE

Recently, to support the testing effort for the Adobe InContext Editing, I have changed all my site to benefit from this new service from Adobe. I was pretty bored with the old design so my site has a new look also.

my site on ice

My site on ICE

Adobe InContext Editing is an online service, available at no charge during the free preview period. It is a RIA application combining both Flex and JavaScript to create a very useful and simple tool to be used by both content contributors and web designers.

Basically what you do is create an HTML page and add some ICE editable regions from Dreamweaver CS4. Then you go in your browser at the same page and hit Ctrl+E and voila.. you can edit that page (in the image above is my Java page after I have done just that). If you need a similar page (let’s say Ajax in my case) you just hit the “duplicate page” button and that is all (aside from additional editing of that page).

Twitter client in AIR

I am not a big user of Twitter, however I wanted to have a Twitter client installed on my laptop, just in case. And, of course :), I searched for an AIR one. What I found was Spaz, a Twitter client written in JavaScript as an AIR application.

Spaz is a Twitter client for users who value free, open-source software, attractive design, and customizability

Spaz is a Twitter client for users who value free, open-source software, attractive design, and customizability.

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.

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.

Free Adobe® Flex™ Builder 3 Pro for Education.

Ted Patrick writes on his blog that Flex Builder 3 Pro is free for Education.

So if you are a student of a professor just go to FlexRegistration.com claim your copy.

Fluid - web on your desktop

… for Leopard users at least.

After Mozilla found a new use for their technology, the XUL platform, in the form of Prism, somebody has found this technology inspiring and developed Fluid.

That somebody is not Apple as one first thought might be, but a web enthusiast, Todd Ditchendorf.

Mozilla Prism

I just found out about this project on the Mozilla labs site.

Mozilla Prism

What is this project all about? Well it can create a desktop application from basically any web application. I just moved my Gmail onto my desktop. That’s quite something.

Their next step will be to integrate Prism with Firefox (3.0?)and then the user will be able to just go into the menu and choose “Convert into application”.

Right now this is just a demo, a project, a showcase of the XUL platform, but interesting things are foreseeable in the future.

Some good thoughts about this project can be found on Mike Chambers blog.

JSEclipse 1.5 is out">JSEclipse 1.5 is out

Its benefits are visible from the simplest tasks like editing small sections of code for your site to the more complex ones like working with the next big AJAX library or developing plugins for a product that embeds JavaScript like Dreamweaver or Photoshop.

JSEclipse :: Features

Code Completion

  • Contextual code completion
  • Support for major JavaScript libraries
  • Code completion uses Rhino for better accuracy
  • Use of JSDoc and inline parameter comments to detect parameter type
  • Suggest parameters to be filled
  • Project dependent code completion
  • Reads all classes in current project
  • Reads classes in currently opened files
  • Scan current file for words
  • Reads XML files for class definitions
  • Add your own XML with class definitions

Productivity

  • Content Outline
  • Code templates
  • Syntax Highlighting
  • Syntax based code folding
  • Open declaration
  • Occurence marker
  • Integration with ATF
  • Error reporting
  • Reference library

Editing assistance

  • Code editing helpers
  • Edit in JSEclipse
  • Word Wrap
  • JavaDoc, multiline comments

AJAX tools and toolkits - must have

As the AJAX is the buzz word of the day more and more developers are looking for a good tool for developing an AJAX application. But what are the tool’s features to be considered an AJAX development tool.

First let see an “AJAX ready” tools’ list, in no particular order:

  • Open AJAX group backed by BEA, IBM, Google, Oracle, Mozilla, Red Hat, Eclipse, and more. This is actually not a tool yet, is only an initiative but is worth keeping an eye on it.
  • Sun Studio Creator 2
  • MyEclipse 4.1 was released with Ajax support
  • IntelliJ IDEA
  • Microsoft Visual Studio 2005 - they are planing an add-on layer to ASP.NET but only for Atlas.
  • Eclipse WTP
  • JSEclipse from InterAKT

As we can see from the list, anyone that has a name in a WEB development related bussiness has jumped into the wagon.

From all this major players you may be wandering why I have included JSEclipse. Will see about that later.

What have come to my attention is that all this tools are AJAX ready because all have a JavaScript editor. There are too few other features to make one tool better in the AJAX development (I will not include here Visual Studio as I did not tested it yet).

Sun Studio Creator comes with AJAX JSF Components a library of AJAX components. This seems to be a nice addition.

So, with respect to JavaScript editing, JSEclipse seems to be a very good tool:

http://www.andrewwooldridge.com/blog/2006/02/jseclipse-powerful-javascript-editor.html
http://ajaxian.com/archives/jseclipse-javascript-editor-with-code-completion

Right now the AJAX tools market is new and while developers are still trying to figure out what web 2.0 is and how AJAX can help them to implement a web 2.0 application, the tool developers are also in a foggy place (just have come out of the dark) trying to understand the needs of their clients. What is certain is that AJAX means JavaScript and XML and while the XML will be generated by the server, the JavaScript must be written by somebody and that somebody will need a good JavaScript editor. That is how far the tool makers have gone. It is also sure that they will not stay here. This is only a transit station and the first one to arrive at destination will write history (aka “MAKE THE BIG BUCKS”).

Creating a beta testing group - JSEclipse">Creating a beta testing group - JSEclipse

I’d just had the opportunity to create my first beta testing group.

For JSEclipse 1.5 release InterAKT opened on it’s site a new beta testing program to let JavaScript developers have an early preview on the next version and let the actual users become involved in shaping a great product.