AJAX Tutorial for Java Programmers

AJAX Tutorial for Java Programmers

Adding a New Page

We have been able to do a lot just with a "Hello, World" program. Now it's time to add in another page.

Adding a page in Jaxcent has three components:

The HTML page itself.
The Java source code.
The XML mapping.

The HTML Page

The HTML page is like any normal HTML page, except that the HEAD section must contain the following:

  <SCRIPT TYPE="text/javascript" SRC="/jaxcent21.js">
   </SCRIPT>

This is very important. If you are doing Jaxcent programming, and you visit a new page and nothing happens, check if you are missing the JavaScript include! Other errors may cause some sort of alarm, but this error will silently fail. But if this include statement is missing, the page will not be connected to Jaxcent, and nothing will happen.

The Java Source Code

Typically, there will be a Java class connected to every HTML page, for doing all AJAX handling. (Though there does not have to be a class and sometimes you can just use the base class jaxcent.JaxcentPage.)

This Java class must derive from the jaxcent.JaxcentPage class. In most cases, there will be one or more variables declared that refer to tags on the HTML page. These variables are of type Html<Tag> where <Tag> refers to the HTML tag those variables match on the page. E.g. HtmlPara, HtmlInputText, HtmlInputButton, HtmlForm etc.

When you initialize these variables, the constructor tells Jaxcent how to find the matching HTML element on the HTML page.

We have already seen initializations of the form

    HtmlPara p = new HtmlPara( this, "text" );

where "text" matches the "id" attribute of the HTML tag on the HTML page.

There are other search methods available, e.g.

    HtmlPara p = new HtmlPara( this, SearchType.SearchByTag, "P", 2 );

This refers to the 3rd element on the page with a "P" tag. The searching index is 0-based, so the "2" actually is the third by count. You can omit the last argument, in which case it defaults to 0, i.e. the first such tag. For INPUT elements, there are more search types, e.g.

    HtmlInputText text = new HtmlInputText( this, 
		SearchType.SearchByName, "FirstName" );

    HtmlInputText text = new HtmlInputText( this, 
		SearchType.SearchInputByType, "TEXT", 1 );

which will find the second INPUT TEXT on the page. You can even search by input value,

    HtmlInputText text = new HtmlInputText( this, 
		SearchType.SearchInputByValue, "ok" );

which may be useful in searching for checkboxes or radio buttons.

Each variable initialization can also be followed by event over-rides.

Finally, in the Java code, there can be a constructor and over-rides of form load, unload methods.

Processing can start in the constructor or in one of the over-ridden methods.

The XML Mapping

The HTML page must be connected to the Java class.

This is done by adding a Page node in the Jaxcent XML configuration file. There are two sub-nodes, a PagePath that specifies the URL path (starting with a "/" and usually ending in ".html") of the HTML file, and a PageClass that specifies the fully qualified name of the class. In addition to PagePath and PageClass, an AutoSessionData node with the value true can be added. This tells Jaxcent to provide automatic forms data management.

The Jaxcent XML configuration file in C:\Jaxtut already contains a sample mapping. Other mappings follow the similar format.

If there is no Java source required (this can be the case if AutoSessionData is set, and you are using Jaxcent on that HTML page just for managing forms data), the PageClass node must still be present, but it just contains jaxcent.JaxcentPage which is the base class.

Exercise:

Write a new HTML page MyPage.html.
- Add the JavaScript INCLUDE to the HEAD section.
- Add a SELECT tag with with id "mySelect" and nothing inside the tag (we will be fillng the SELECT from Java.)
```
  <SELECT id="mySelect">
  </SELECT>
```
- Add a BUTTON tag with id "myButton".
```
  <BUTTON id="myButton">My Button</BUTTON>
```
- Add a P tag, then add a TABLE tag with border set to 2 and id "myTable", but nothing inside the tag (we will also be filling the table from Java.)
```
  <TABLE id="myTable" border=2>
  </TABLE>
```
Write a Java class MyPage.java. The package name is "tutorial". Declare and initialize a variable myTable of type HtmlTable that connects to the table, a variable mySelect of type HtmlSelect that connects to the SELECT, and a variable myButton of type HtmlButton that connects to the button. Add a click handler to myButton that calls
```
    showMessageDialog( "Button Clicked" );
```
Modify the Jaxcent configuration file, adding a new Page node that connects the HTML page /MyPage.html to the tutorial.MyPage Java class.
Compile the Java class and make sure the class file is in C:\Jaxtut\java\tutorial\MyPage.class.
Make sure the Tutorial Server is running and visit your page http://localhost/MyPage.html in the browser. If there are any error messages, fix them. If everything is working, you should see the message from your button when you click it. You won't see your TABLE and the SELECT will look strange because they are both empty -- that's ok.

Next Step: Working with Tables and Lists

Contents