AJAX Tutorial for Java Programmers

Hello, World

The tutorial server is already set up with two files:
  • A HelloWorld.html file
  • A HelloWorld.java file
In addition, the default JaxcentConfig.xml file already map these two -- in other words, it tells Jaxcent to connect the HelloWorld.html file with the HelloWorld.java code.

The first task is, therefore, very simple: Modify the HelloWorld.java so that it puts the words "Hello, World!" in the browser instead of the text already there. It has to be done dynamically, instead of modifying the HelloWorld.html file. The HelloWorld.html file has to stay unchanged, but the browser text should change!

To accomplish this, first examine the HelloWorld.html file in a text viewer such as notepad. You will notice the P tag has an "id" attribute. The P tag is also closed with a matching /P tag.

Both of these are important. Your Java code needs a way to identify the text to change. There are various ways to do this, but the best approach is to put an "id" attribute with a unique tag.

Secondly, if you don't close the P tag with a matching /P, in some browser versions the paragraph will not be closed, and the subsequent HTML will be treated as a child of that paragraph! In AJAX programming, this can lead to occasional surprises. So if you write a paragraph with the intention of changing it dynamically, it is a good idea to have the habit of closing the tag.

Now let us examine the HelloWorld.java file. You will see it contains just a framework, but doesn't actually do anything.

First change we need to make is to declare a variable that references our paragraph, as follows: 


    HtmlPara para = new HtmlPara( this, "text" );
The second argument here identifies the text used for the "id" attribute of the para, so the framework can match it up with actual HTML on the page.

Now add a constructor (public, no args) in the Java code, and in the constructor, put in the code 


    para.setInnerHTML( "Hello, World!" );
That's it! (Well, almost. In these tutorial pages, you are expected to find the final issues yourselves by actually doing it.)

Compile the HelloWorld.java code (the resulting .class file must go in C:\Jaxtut\java\tutorial\HelloWorld.class. If you specify the "-d C:\Jaxtut\java" option to javac, it will place it there.)

After a successful compilation, revisit or refresh the HelloWorld page in your browser (you do not need to restart the tutorial server, but it must be running.) If everything is done correctly, you should see your output!

Exercise:  Get this to work, then add a para following the first para, and dynamically change its text to say "Goodbye, World!".
 
Next Step: A dancing Hello, World