file with the
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
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
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:
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.
HtmlPara para = new HtmlPara( this, "text" );
Now add a constructor (public, no args) in the Java code, and in the constructor, put in the code
That's it! (Well, almost. In these tutorial pages, you are expected to find the final issues yourselves by actually doing it.)
para.setInnerHTML( "Hello, World!" );
HelloWorld.java code (the resulting .class file must go
in C:\Jaxtut\java\tutorial\HelloWorld.class. If you specify the
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|