Ajax Bible

You’ve gotten the gist of how things work with PHP-based frameworks: you write your PHP and then let the framework generate the JavaScript that connects that PHP to your code in the browser. It’s time now to take a look at Java-based frameworks.

Using Direct Web Remoting and Java

Direct Web Remoting (DWR) is an Ajax framework that lets you call Java methods on the server, using JavaScript code to call those methods. Using DWR, you can access the full power of Java on the server behind the scenes-which is great, because Java is a far more powerful language than JavaScript, and includes all kinds of support for databases.

DWR works much like the PHP frameworks you’ve already seen in this chapter: you can call server-side code, and DWR handles the details of connecting your code to those functions. After your data has been downloaded, DWR calls the callback function you’ve specified.

Take a look at the DWR example shown in Figure 7.5, which you can access at http://getahead.ltd.uk/dwr/examples/text.This example downloads and displays information about the server behind the scenes, using Ajax, and displays that information in the Web page.

Figure 7.5: Using DWR

When you click the Execute button, the server information is downloaded and displayed, as you can see in Figure 7.6.

Figure 7.6: Using DWR to download text

There’s also an Ajax chat example on the DWR Web site at http://getahead.ltd.uk/dwr/examples/chat. You can see this example in Figure 7.7. Just type your message in the text field and click the Send button.

Figure 7.7: The DWR chat application

When you do, your message appears in the chat box, all without a page refresh (Figure 7.8).

Figure 7.8: Using the DWR chat application

Another DWR example is available at http://getahead.ltd.uk/dwr/examples/table. This example allows you to edit the text in a table in your browser, and make changes without a page refresh. To edit a record, just click that record’s Edit button, which loads the data into the editing fields as shown in Figure 7.9.

Figure 7.9: Editing a table in the DWR table application

After you make your edits, click the Save button, which loads the new data into the table, as you see in Figure 7.10-all without a page refresh.

Figure 7.10: Saving a change in the DWR table application

One more example, located at http://getahead.ltd.uk/dwr/examples/lists, displays a set of numbers in a drop-down list box, as shown in Figure 7.11. When you check the Big Numbers checkbox, however, a set of big numbers are loaded into the list box using Ajax techniques, as shown in Figure 7.12.

Figure 7.11: The DWR list application

Figure 7.12: Reloading the list box in the DWR list application

As you can see, DWR offers all the Ajax functionality, this time using Java on the server.

Using Ajax Tags and Java

Another Java Ajax framework is the Ajax Tag Library, which is an Ajax framework that relies on JavaServer Pages (JSP) custom tags to create the JavaScript you need.

The Ajax Tag Library comes with the following set of JSP tags ready to use in Ajax applications:

• Autocomplete: Gets a list of terms that matches the text the user has entered into a field for autocompletion.

• Callout: Displays a pop-up balloon connected to an element in a Web page.

• Select/dropdown: Sets the contents of a drop-down control according to the user’s selection in another drop-down control.

• Toggle: Lets you switch between two different images.

• Update Field: Updates the text in a field based on the data the user enters in another field.

You can see demos of the Ajax Tag Library at http://ajaxtags.no-ip.info. For example, one demo displays a drop-down list of car types when you enter a partial search term, as shown in Figure 7.13. When you select an item in the drop-down list, the specific car make appears in the lower text field, as shown in Figure 7.14.

Figure 7.13: The Ajax Tag Library cars application

Figure 7.14: Selecting a car make in the Ajax Tag Library application

Another example is shown in Figure 7.15-a speed converter that translates from miles per hour to kilometers per hour. When you enter a speed to convert in miles per hour and click the Calculate button, the results appear in the Web page, as shown in Figure 7.16.

Figure 7.15: Using the Ajax Tag Library speed converter

Figure 7.16: Converting a speed with the Ajax Tag Library speed converter

You can also create Ajax-enabled callouts with the Ajax Tag Library, as shown in Figure 7.17, where you see a balloon appear when the mouse hovers over a hyperlink. The text in that balloon was fetched using Ajax.

Figure 7.17: Callouts created with the Ajax Tag Library

Using SWATO with Java

Another Java-based Ajax framework is SWATO. SWATO comes with built-in components for common Ajax operations, such as an autocomplete text field, a live form, live lists, and so on. You can see the autocomplete control in an example that comes with SWATO in Figure 7.18.

Figure 7.18: A SWATO autocomplete example

When you enter a partial search term, corresponding to a partial country name, in the search box, this example searches for matches and displays them, as you see in Figure 7.19.

Figure 7.19: Matches are displayed.

Another SWATO example-an Ajax form example-is shown in Figure 7.20. When you enter data in a text field in this form and click outside the text field, the data sent to the server is displayed in the Web page, as you see in Figure 7.21.

Figure 7.20: Using SWATO in an Ajax form example

Figure 7.21: Data is displayed.

That does it for PHP and Java-based Ajax frameworks. Are there any other ones? There sure are-plenty, including Ruby on Rails, coming up next.