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);
}
}

2 thoughts on “Learning JDojo Part 1

  1. good post .. can you detail me the steps on what project i need to create in eclipse. i installed the software update from jazz site and created a java project , will hello world and enabled the project for dojo .. but it gives me compilation errors as i can’t find JDOJO library..

    Like

  2. It is just a plug-in project. You will need to follow the site instructions for a more in depth tutorial. You will also need to add the JDojo packages to your workspace and install the JDojo tools into your Eclipse IDE.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s