AJAX Tutorial for Java Programmers

AJAX Tutorial for Java Programmers

Working with JavaScript

We have already seen how to add JavaScript verifiers to click handlers in order to reduce client-server round trips and server load.

Jaxcent also allows other mechanisms for working with JavaScript.

The method execJavaScriptCode in JaxcentPage class executes JavaScript code. It can either be given just some chunk of code, or a function name that takes 1 or more arguments. For example:

    execJavaScriptCode( "alert( \"Hello\" );", false, null );

    execJavaScriptCode( "alert", false, new Object[]{ "Hello" } );

The arguments are specified as an Object-array, and besides the primitive type-wrappers (Integer, Boolean etc) and String, can also include Jaxcent HTML element objects e.g. HtmlInputText, HtmlPara etc.

The second parameter is false in these examples. If it is specified as true, the arguments are passed as a single parameter to the JavaScript function. The single parameter is a JavaScript array containing the actual list of arguments.

In addition to execJavaScriptCode, there is an evalJavaScriptCode method, which is similar but waits for the result from the JavaScript evaluation, and returns the result.

Client-driven Jaxcent Framework

In Jaxcent, normally the program logic is driven from the server side. But parts of, or the entire framework, can be client-side driven as well.

Jaxcent provides the JavaScript function JaxcentServerRequest to the client side. This function can be called with 0 or more parameters by JavaScript code on the client side.

Jaxcent provides the corresponding Java method onJavaScriptRequest in the JaxcentPage class. This method can be over-ridden to process messages coming from JaxcentServerRequest. It will be called with two null parameters, or a command and optionally an array of arguments.

Exercise: Create an HTML file Jstest.html, with the Jaxcent JavaScript include statement in it. Also add the following JavaScript code in the HEAD section.

<SCRIPT LANGUAGE="JavaScript">
<!--

function identify( element )
{
    oldColor = element.style.backgroundColor;
    elementToReset = element;
    element.style.backgroundColor = "red";
    setTimeout( "resetIdentified()", 1000 );
}

function factorial( n )
{
    if ( n < 2 ) {
        return 1;
    }
    return n * factorial( n-1 );
}

var oldColor;
var elementToReset;

function resetIdentified()
{
    elementToReset.style.backgroundColor = oldColor;
}

var iter = 1;

function callServer()
{
    JaxcentServerRequest( "Test", "Calling", "Server", iter++ );
    setTimeout( "callServer()", 10000 );
}

setTimeout( "callServer()", 10000 );

-->
</SCRIPT>

Add a FORM, add an INPUT TEXT field to the form, and two BUTTONs with an id each. The text for the first button is "Identify Text Field", the text for the second button is "Compute Factorial 5".

The JavaScript function "identify" can be called with an HTML element as argument. It will identify the element on the page by briefly turning it red. Add a Java handler to the first button. In the handler, call the JavaScript "identify" function to identify the INPUT TEXT field.
Add a handler to the second button. In the handler, call the JavaScript function "factorial" with the argument "5" and print out the result in the output window.
The JavaScript code given above, calls "JaxcentServerRequest" every 10 seconds. Retrieve the command and its arguments from the Java side, and print them out to System.out.

Next Step: Hiding and Showing Page Elements

Contents