AJAX Tutorial for Java Programmers

AJAX Tutorial for Java Programmers

A Dancing Hello, World

Changing HTML dynamically is a very useful ability, but we could have done this just by editing the HTML file, so you may wonder what is the advantage.

We can do much more than just change HTML elements. In this case, we are going to change the style of the HTML on the fly. But we are going to do this continuously, in a Java Thread.

Here is the thread definition, which can be added to the Java file.

     private class HelloThread extends Thread {
         public void run()
         {
             // Thread processing.
         }
     }

     HelloThread helloThread = new HelloThread();

and in the constructor, we just need to add

    helloThread.start();

to start the thread.

In the thread, we are going to change the "style" of the HtmlPara element. But instead of doing it once, we are going to change it continuously.

The style is "font-size", and its values are given in various units, e.g. "px" for "pixel". Here is a Java statement to set the font-size to 10 pixels.

    para.setStyle( "font-size", "10px" );

Given all this, the assignment in this tutorial is to add code in the thread that runs continuously. The tasks are:

Add a
```
   for (;;) {
   }
```
or "while (true)" loop to the code.
Add
```
    Thread.sleep( 10 );
```
at the beginning or end of each iteration.
Maintain a direction variable, which can be "increasing" or "decreasing". (You can use a boolean "increasing", set to true for increasing, false for decreasing.)
In each Iteration, If the direction is increasing:
- Increment the font size by 1 pixel.
- If the font size has reached 100, reverse the direction.
else if the direction is decreasing:
- Decrement the font size by 1 pixel.
- If the font size has reached 8, reverse the direction.
Set the para to the new font-size (add "px" after the size.)

Start the direction as increasing at start, and the size at 10.

We are still using the HelloWorld page so you can just modify and compile the existing HelloWorld.java file.

Exercise: Get the font-size changes to work. Then at each direction change, change the "color" style to one of "red", "black", "green" and "blue", cycling through the colors at each change.

Next Step: Listening to Hello, World Events

Contents