JDojo is not GWT!

After my two previous posts I have received a lot of questions and interest in JDojo so I figure I would pass on a section of the Jazz site that explains what JDojo is compared to GWT.

GWT is a cross-compiler, web runtime and window toolkit.

However, Jazz ships Dojo as a web runtime and window toolkit, greatly enhanced by home-brew server side logic to support OSGi web bundles, dynamic merging and shrinking of JavaScript code etc. While it would certainly be possible to integrate GWT in the Jazz architecture, it would not be a perfect fit. Additionally, it is hard to provide a “growth path” to migrate from the current Web UI story to GWT, it is an all or nothing approach.

Additionally, the code generated by GWT is object-oriented bytecode – it is not meant to be read by humans nor does it provide a growth path for gradually migrating an existing JavaScript web application into a GWT applications. Last but not least, integrating the generated code into an Eclipse environment would be much harder.

That page also explains that JDojo is a work in progress as is the ScriptEngine.  For JDojo to be successful it definitely needs more resources and open its doors to the open source community.  I think this is an excellent concept and being a Java developer the only thing I need to do is really learn the Dojo framework.

Who uses the E4 Rhino JavaScript debugger?

I hear a lot of people use Firebug and other means to debug their JavaScript or they are starting to use other things like GWT based development to debug.  The JDojo site promotes the use of the E4 Rhino JavaScript debugger and I have not used this as of yet. You can read more about E4 here on the site.

What combination or technique do you use?

Learning JDojo Part 1

I started going through the different pages on the JDojo site and decided to go ahead and set up a dev environment to play with this cool technology a little more.  I started by installing what I consider the best tools for JavaScript development tools:

I will say, the only thing I really wanted to do was write Java and compile it to JavaScript.  Because you set the project type to enable the JDojo nature and builder it automatically puts your files into a resource folder – so every time you save, it re-compiles the code automatically.  This was the easy part.  I basically re-did the same sample that is shown on the Jazz site – the Hello World sample.  My code is almost identical and I added two more listeners just to play around.

Here is a copy of the code:

package net.balfes.jdojo.example.hello;

import static com.ibm.jdojo.dom.BrowserEnvironment.window;

import com.ibm.jdojo.dijit._Templated;
import com.ibm.jdojo.dijit._Widget;
import com.ibm.jdojo.dom.HTMLButtonElement;
import com.ibm.jdojo.dom.HTMLDocument;
import com.ibm.jdojo.dom.events.IEventHandler;
import com.ibm.jdojo.dom.events.MouseEvent;
import com.ibm.jdojo.dom.events.MouseEventType;

public class HelloWorld extends _Widget implements _Templated {

	public String templateString= "<h1>Hello, JDojo!</h1>"; //$NON-NLS-1$

	@Override
	public void postCreate() {
		// TODO Auto-generated method stub
		super.postCreate();

        HTMLDocument doc= window.document;

        final HTMLButtonElement button= (HTMLButtonElement) doc.createElement("button"); //$NON-NLS-1$

        button.appendChild(doc.createTextNode(Messages.HelloWorld_0));
        connect(button, MouseEventType.CLICK, new IEventHandler<MouseEvent>() {
            public void handle(MouseEvent e) {
                window.alert(Messages.HelloWorld_1);
            }
        });

        connect(button, MouseEventType.MOUSE_OVER, new IEventHandler<MouseEvent>(){
            public void handle(MouseEvent e) {
                button.value = Messages.HelloWorld_2;
            }
        });
        connect(button, MouseEventType.MOUSE_OUT, new IEventHandler<MouseEvent>(){
            public void handle(MouseEvent e) {
                button.value = Messages.HelloWorld_0;
            }
        });
        domNode.appendChild(button);
	}
}

One key to the code is it is type safe Java and there is complete type ahead and syntax checking.  With support for generics, type safety and all of the cool Java tooling available in Eclipse this makes the entire concept a very viable approach to JavaScript development.

As you can see it looks just like the code from the sample but you may have noticed a few differences. One difference is I used the “Open JDojo NLS Wizard…” option on the HelloWorld.java and resourced out all of my strings to a Messages.java.  This is business as usual for resourcing strings in Eclipse, the file generated is pretty straightforward, you will quickly notice the @LocalizationBundle() function added for the compiler:

package net.balfes.jdojo.example.hello;

import com.ibm.jdojo.lang.DojoObject;
import com.ibm.jdojo.lang.annotations.LocalizationBundle;

@LocalizationBundle()
public class Messages extends DojoObject {
	public static final String HelloWorld_0 = "Click me!"; //$NON-NLS-1$
	public static final String HelloWorld_1 = "JDojo ROCKS!"; //$NON-NLS-1$
	public static final String HelloWorld_2 = "CLICK ME!"; //$NON-NLS-1$

}

The compiler puts the generated translation files into an nls directory under the specific package path (see the screen shot below of the directory structure), here is what that file looks like:

// NOTE: THIS IS A GENERATED FILE. DO NOT EDIT DIRECTLY!

({
	"HelloWorld_0": "Click me!", //$NON-NLS-1$ //$NON-NLS-2$
	"HelloWorld_1": "JDojo ROCKS!", //$NON-NLS-1$ //$NON-NLS-2$
	"HelloWorld_2": "CLICK ME!" //$NON-NLS-1$ //$NON-NLS-2$
})

I then added two more event handlers to show a simple mouse over event where I change the button text ( I felt I need to code something!).  The generated JavaScript is pretty straightforward, I highlighted the localization and new events:

// NOTE: THIS IS A GENERATED FILE. DO NOT EDIT DIRECTLY!
dojo.provide("net.balfes.jdojo.example.hello.HelloWorld"); //$NON-NLS-1$

dojo.require("dijit._Templated"); //$NON-NLS-1$
dojo.require("dijit._Widget"); //$NON-NLS-1$

dojo.requireLocalization("net.balfes.jdojo.example.hello", "Messages"); //$NON-NLS-1$ //$NON-NLS-2$

(function() {
var _Templated= dijit._Templated;
var _Widget= dijit._Widget;
var Messages= dojo.i18n.getLocalization("net.balfes.jdojo.example.hello", "Messages"); //$NON-NLS-1$ //$NON-NLS-2$

dojo.declare("net.balfes.jdojo.example.hello.HelloWorld", [ _Widget, _Templated], { //$NON-NLS-1$

	templateString: null,

	constructor: function() {
		this.templateString= "<h1>Hello, JDojo!</h1>"; //$NON-NLS-1$
	},

	postCreate: function() {
		this.inherited("postCreate", arguments, []); //$NON-NLS-1$
		var doc= window.document;
		var button= doc.createElement("button"); //$NON-NLS-1$
		button.appendChild(doc.createTextNode(Messages.HelloWorld_0));
		this.connect(button, 'click', dojo.hitch(this, function(e) { //$NON-NLS-1$
			window.alert(Messages.HelloWorld_1);
		}));
		this.connect(button, 'mouseover', dojo.hitch(this, function(e) { //$NON-NLS-1$
			button.value= Messages.HelloWorld_2;
		}));
		this.connect(button, 'mouseout', dojo.hitch(this, function(e) { //$NON-NLS-1$
			button.value= Messages.HelloWorld_0;
		}));
		this.domNode.appendChild(button);
	}
});

})();

Just to get something up and running I copied all of the Dojo files to the resource directory so they could easily be referenced, then I created a simple HTML file where my JavaScript is referenced.  This was the easiest way to get my code up and running for now, my next post will be about launching and debugging right from the IDE.  I also added the extension point to my plugin.xml to tell the builder to compile my JavaScript to the fully qualified path of the package:

<?xml version="1.0" encoding="UTF-8"?>
<?eclipse version="3.4"?>
<plugin>
   <extension
         point="net.jazz.ajax.webBundles">
         	<resource base-name="resources/net/balfes/jdojo/example/hello" />
   </extension>
</plugin>

So my resources directory has this structure:


The helloWorld.html is also pretty basic – essentially just a test to see it in action:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

http://dojo/dojo.js

	dojo.require("net.balfes.jdojo.example.hello.HelloWorld");


</head>
<body>
	
This is our test application.
</body> </html>

Here is a picture of the page and the dialog after I clicked the button:

Mouse Move Video

package net.balfes.jdojo.example.hello;

import static com.ibm.jdojo.dom.BrowserEnvironment.window;

import com.ibm.jdojo.dijit._Templated;
import com.ibm.jdojo.dijit._Widget;
import com.ibm.jdojo.dom.HTMLButtonElement;
import com.ibm.jdojo.dom.HTMLDocument;
import com.ibm.jdojo.dom.events.IEventHandler;
import com.ibm.jdojo.dom.events.MouseEvent;
import com.ibm.jdojo.dom.events.MouseEventType;

public class HelloWorld extends _Widget implements _Templated {

public String templateString= “<h1>Hello, JDojo!</h1>”; //$NON-NLS-1$

@Override
public void postCreate() {
// TODO Auto-generated method stub
super.postCreate();

HTMLDocument doc= window.document;

final HTMLButtonElement button= (HTMLButtonElement) doc.createElement(“button”); //$NON-NLS-1$

button.appendChild(doc.createTextNode(“Click me!”));
connect(button, MouseEventType.CLICK, new IEventHandler<MouseEvent>() {
public void handle(MouseEvent e) {
window.alert(“JDojo ROCKS!”);
}
});

connect(button, MouseEventType.MOUSE_OVER, new IEventHandler<MouseEvent>(){
public void handle(MouseEvent e) {
button.value = “CLICK ME!”;
}
});
connect(button, MouseEventType.MOUSE_OUT, new IEventHandler<MouseEvent>(){
public void handle(MouseEvent e) {
button.value = “Click me!”;
}
});
domNode.appendChild(button);
}
}

Introducing jDojo!

Ok, I don’t really have any authority or any involvement whatsoever with jDojo but I figured I would introduce it on my site.  I am going to be checking it out more closely going forward and seeing what benefit it really gives us.

You will need to register to get into the jDojo site so go ahead – I think it is well worth it.  The latest version now has support for Dojo 1.4 – which tells me these guys are making sure the community has the ability to support very current API’s.  I didn’t get to see the EclipseCon session Michael gave but it looked very interesting and also gives a great summary of what jDojo is.

“The programmer does not program against the Java JDK classes, but against Dojo and JavaScript stubs that JDojo provides.”

I would really like to see a good comparison to how jDojo compares to GWT and the advantages and disadvantages of both – I have some high level ideas but it is clear these two projects are attempting to do something similar (make web 2.0 development easier).   It is very clear that large enterprise JavaScript applications are a bear to manage and tools like these kinds of tools make it very easy to quickly create cross browser applications based on HTML, CSS and JavaScript.  The thing I love best about jDojo is the code you write looks almost exactly like JavaScript so you aren’t really “compiling” per say.  The benefits you get are typed programming and error checking right within Eclipse.  From the main page of the jDojo site here is a summary of the key benefits:

The benefits in summary..

  • The JDojo programmer can now write its Web UI code using the features of the Eclipse Java tooling.
  • The JDojo compiler ensure that correct Dojo and JavaScript code is generated (no missing/unnecessary commas, brackets etc) but also automatically handles things like the list of ‘required’ statements.
  • Type information is now part of the code, and not of the documentation anymore.
  • The programmer still deals with the DOM, browser environment etc, having the full control over all the details.
  • Existing code can be easily integrated by writing a JDojo stub for it.
  • The generated JavaScript code matches the style of the existing code and can co-exist easily in the same project.