AJAX Tutorial for Java Programmers

Listening to Hello, World Events

What about input and interactive programming in AJAX?

You may be familiar with HTML forms and processing input at the server upon the click of a button. Using AJAX, you can do much more than that. You don't have to depend upon form submissions. You can listen to a whole selection of events. This includes events on the familiar FORM elements, but is not restricted to them.

In this exercise, we will be listening to mouse clicks that occur on our good old "Hello, World" text itself.

To do this, we just need to override a method named "onClick" that's provided for HtmlPara objects. This can be done right at the declaration of "para".

    HtmlPara para = new HtmlPara( this, "text" ) {
        protected void onClick() {
            System.out.println( "Click!" );
        }
    };

That's it, make this change, and give it a try (Note: When you change and recompile a Java class, just refreshing the page in the browser will load your new version.)

If everything is fine, then everytime you click on the para, you should see an output in the Tutorial Server's output window. (Of course, if you have done the previous exercise, you would have to make sure to catch the Hello, World text first!)

All event handling in Jaxcent is like this, by overriding methods. Mouse and button clicks are important for various user interactions. Also important are page load and unload events. We have been doing output in the constructor, but in the constructor, we cannot receive the value or attributes of a tag. For that, we must wait until the page has been loaded in the browser and connected to Jaxcent. Such things can be done in the page load handler.

Page unload handler is important for cleanups.

You may have noticed that the output window in your Jaxcent Tutorial Server shows exception stack traces like this one whenever you close your browser window or point it to some other location:

Exception in thread "Thread-1040" 
	jaxcent.PageUnloadedError: Page has already unloaded
	at jaxcent.JaxcentPage.sendPageQuery(JaxcentPage.java:1753)
	at jaxcent.JaxcentHtmlElement.setStyle(JaxcentHtmlElement.java:198)
	at tutorial.HelloWorld$HelloThread.run(HelloWorld.java:32)

It is now time to get rid of these stack traces!

What is happening is that you have a thread that starts in the page constructor. When the user closes the browser window, or navigates away from the HelloWorld url, the page unloads. After the page has unloaded, Jaxcent throws a PageUnloadedError

This has the effect of terminating your thread. This works, but is obviously not very graceful!

For a controlled graceful termination of the thread, we can take advantage of the page unload handler. This handler is provided by the jaxcent.JaxcentPage class, so we can override it in our HelloWorld class.

    protected void onUnload()
    {
    }

We need to have some boolean variable which is initially set to true. The page unload handler sets it to false. The thread checks this variable, and when it is set to false, stops its main loop.

In addition, we can interrupt the thread by calling Thread.interrupt after setting the boolean variable. This will wakeup the thread from a sleep state.

This makes for a nice tidy shutdown of our thread. In some cases there may be windows where the Error may still be raised, but we don't need to worry too much about such situations because in the worst case, the thread will still be terminated by the error being thrown!

Exercise:  Add the click handler and the page unload handler and verify these are working. Then add a handle for page loading. In this handler, get the inner HTML for the para and print out the inner HTML. (If you try doing this in the constructor, you will get an exception.)


Next Step: Adding a new page
Contents