This article uses the classical "Hello World" example to demonstrate how to develop JavaScript application in Java mode by using Java2Script plugin. This article is mainly for Java or JavaScript programmer or those whose is interested in the technology of Java2Script.
1. Eclipse 3.1.1 SDK (Maybe Eclipse 3.1 SDK also be OK)
2. Java2Script 0.5.0+ for Eclipse 3.1.* (Go to the download page for more details about downloading and installing J2S 0.5.0+)
First, please create a Java project with source folder of "src", and create a class net.sf.j2s.hello.HellJ2SWorld with one statement
System.out.println ("Hello J2S World");inside the main method. That's the classical "Hello world" example.
Here is the Java source.
package net.sf.j2s.hello;
public class HelloJ2SWorld {
/**
* @param args
*/
public static void main(String[] args) {
System.out.println("Hello from J2S world.");
}
}
Try to run the "HelloJ2SWorld" by right clicking on the class and choosing "Run as ..." and "Java Application". You should get "Hello J2S World in the console view.
Before you can run "HelloJ2SWorld" in Java2Script Application mode, you should configure the project as a "Java2Script Project": Open the properties page of the project, you will see a "Java2Script Compiler" page.
Enable the Java2Script Compiler for the project. And you should also select the "Common" pattern. And you will get an automatically build and the *.js will be generated for you automatically.
And you should already notice that in the sub menu of "Run as ...", there is a menu item says "Java2Script Application".
Now it is time to click on that menu item to make a try.
For the first time, you run J2S application, the J2S console will take about one or two seconds on opening the view and initializing the Browser widget. And once the view is on, you will get as following.
Or, you can view the online demo of "Hello J2S World".
That is the "Hello J2S World".
Refresh your project in the package explorer, you will find a new file "net.sf.j2s.hello.HelloJ2SWorld.html", try to "Open With" -> "Text Editor", you wil see the source of the generated HTML as following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>net.sf.j2s.hello.HelloJ2SWorld</title>
<link rel="stylesheet" href="j2slib/console.css"/>
<script type="text/javascript" src="j2slib/j2s-core-common.jz"></script>
<script type="text/javascript" src="bin/net/sf/j2s/hello/HelloJ2SWorld.js"></script>
</head>
<body>
<div id="_console_" class="consolewindow"></div>
<script type="text/javascript">
net.sf.j2s.hello.HelloJ2SWorld.main([]);
</script>
</body>
</html>
The line
<link rel="stylesheet" href="j2slib/console.css"/>and the line
<div id="_console_" class="consolewindow"></div>is there to make the black console inside the Browser window.
And the line
<script type="text/javascript" src="j2slib/j2s-core-common.jz"></script>is the J2S core library, which is about 18K (Or use j2slib/j2s-core-bare.jz, which is less than 10k). The javascript sources are packed by packer of http://dean.edwards.name/packer/. Source of these library files can be found in the package of release J2S 0.3.0. And you also can find them here: j2s-core-common.js and j2s-core-bare.js.
The line
<script type="text/javascript" src="bin/net/sf/j2s/hello/HelloJ2SWorld.js"></script>is to include the net.sf.j2s.hello.HelloJ2SWorld class. The Java class net.sf.j2s.hello.HelloJ2SWorld is now compiled as "bin/net/sf/j2s/hello/HelloJ2SWorld.js".
The lines
<script type="text/javascript">is the main entry of calling the HelloJ2SWorld.
net.sf.j2s.hello.HelloJ2SWorld.main([]);
</script>
As result, "Hello J2S World" is printed in the console.
Here it is:
Clazz.declarePackage ("net.sf.j2s.hello");
net.sf.j2s.hello.HelloJ2SWorld = function () {
Clazz.instantialize (this, arguments);
};
net.sf.j2s.hello.HelloJ2SWorld.__CLASS_NAME__ = net.sf.j2s.hello.HelloJ2SWorld.prototype.__CLASS_NAME__ = "net.sf.j2s.hello.HelloJ2SWorld";
Clazz.defineMethod (net.sf.j2s.hello.HelloJ2SWorld, "main",
function (args) {
System.out.println ("Hello from J2S world.");
}, "Array");
net.sf.j2s.hello.HelloJ2SWorld.main = net.sf.j2s.hello.HelloJ2SWorld.prototype.main;
In order to view the generated JavaScript source, you have to two ways. First, you can find the *.js file in relative folder. Second, you can open "J2S View" and generated JavaScript codes.
The following will take some times in the generated JavaScript codes. It's for further understanding of the J2S inside out. User do not need to know anything about the syntax, as these codes is generated by J2S toolkit.
The first line
Clazz.declarePackage ("net.sf.j2s.hello");declares the package for the class.
The lines
net.sf.j2s.hello.HelloJ2SWorld = function () {declares the class of HelloJ2SWorld. As there are no non-static methods and no constructors, the body of class contains only one statment "Clazz.instantialize (this, arguments);", which is there in the purpose of intantialize the class when the default constructor is called.
Clazz.instantialize (this, arguments);
};
The line
net.sf.j2s.hello.HelloJ2SWorld.__CLASS_NAME__ = net.sf.j2s.hello.HelloJ2SWorld.prototype.__CLASS_NAME__ = "net.sf.j2s.hello.HelloJ2SWorld";is a maybe-redundant way to declare the class name of the class. In Java2Script, finding out the class name of an instance is somewhat different from the Java codes. So that is why the above line is there.
The lines:
Clazz.defineMethod (net.sf.j2s.hello.HelloJ2SWorld, "main",declares the main method with one parameters of Array type. The method "System.out.println" is already overriden inside the j2slib/j2s-core-common.jz. The println method will call HTML DOM's document.appendChild method to print the text. For more details, please study the source of j2s-core-common.jz.
function (args) {
System.out.println ("Hello from J2S world.");
}, "Array");
The last line
net.sf.j2s.hello.HelloJ2SWorld.main = net.sf.j2s.hello.HelloJ2SWorld.prototype.main;is declaring that the method "main" in a static way beside the non-static way.
OK. Someone may say "Hei, do we need this complexity?" or may say "Hi, we want our own script." Simple things, such as this "Hello World" example for the demonstration of the J2S Application concept, should not be messed up with J2S.
Once things go complicated, J2S, by standing on the shoulder of Eclipse JDT giant, will provide ways for refactoring the sources and provide great convenience for Object-Oriented inheritance management such as searching and document generating.
Later tutorial articles will give you more examples of J2S in Eclipse for your own answer of "Is it necessary to use J2S?". Stay tunned.
Tutorial of J2S in Eclipse (2): Hello Simple User -- More about Hello World
Tutorial of J2S in Eclipse (3): Inheritance Example by User and Pet -- We Need This Complexity
Tutorial of J2S in Eclipse (4): How to Use java.util.* -- Resuing Java Codes
Tutorial of J2S in Eclipse (5): How to Use org.eclipse.swt.* -- Tour to UI
Tutorial of J2S in Eclipse (6): How to Use ajax.* -- A Simple RSS Reader
Down the net.sf.j2s.hello project files (zip) (61k)
Have problems while reading through these articles? Or find some errors between the words? Or have some ideas on the Java2Script technology? Please make comments or discussions here in the blog.
Zhou Renjian: Initial contributor of Java2Script.