AJAX Tutorial for Java Programmers

AJAX Tutorial for Java Programmers

Navigation in Web Applications

You may have noticed that in the previous application, all navigation between pages was done using normal A HREF links.

Using Ajax, this is quite sufficient to save and load data. In fact, the data will be saved even if the user navigates away somewhere else using the browser buttons or the browser address bar, or even just closes the browser. But this behavior is different from the traditional behaviors of forms with buttons called Reset and Submit. As such, this behavior may be unsettling to users who expect that nothing is saved anywhere until they click a nice solid-looking button.

The Reset button is useful in any case, as users may want to undo the changes they have made on the page.

Adding a RESET Button

The old-style RESET feature available with FORM tags, is likely to only conflict with Ajax. Therefore a RESET button needs to be added and handled in Java.

To implement a RESET feature, do not use the INPUT TYPE=RESET, simply create a BUTTON (can be outside FORM) or INPUT TYPE=BUTTON (has to be inside FORM) element, label it "Reset", and add a variable and handler for it on the Java side.

    HtmlButton /* or HtmlInputButton */
      resetButton = new HtmlButton( this, "reset" ) {
        protected void onClick() {
            resetFromSession();
        }
    };

That's enough, this will reset the items on the page from session, getting rid of any changes the user has made.

Navigating using a button

To navigate using a button instead of using A HREF links, there are several approaches:

Make the button a SUBMIT button, and specify the new URL as the ACTION of the FORM. (This will cause form data to show up in the browser address bar, unless the METHOD is POST.) Of course, the new URL will just ignore the form data if it is the URL is an HTML file, so there will be no harm from the data.
Add JavaScript code on the button to do the navigation.
Add a handler on the Java side, and do the navigation in this handler.

SUBMIT button behavior

The contract of the old-style SUBMIT button is -- any changes the user makes are not sent to the website until the user clicks the SUBMIT button. If instead of clicking SUBMIT, the user navigates away from the form, the data will never been seen.

This behavior can also be enabled in Jaxcent. To duplicate this behavior:

Add a button with the desired label, but it must not be an INPUT TYPE=SUBMIT button. It can be a BUTTON or INPUT TYPE=BUTTON element.
In the page constructor, call
```
    setFormSaveEnabled( false );
```

In the button click handler, call

    setFormSaveEnabled( true );
    navigate( "/NewUrl.html" );

This will stop Jaxcent from saving the form data in the session, until the user clicks the button.

Before calling the setFormSaveEnabled and the navigation, the button handler can also check if any required form data is missing/wrong etc.

Exercise: Add Reset and Submit (for old-style submit) buttons to the http://localhost/Name.html page. This will require changing the XML map for Name.html, and adding a Java class.

Next Step: Data Verification

Contents