HomeApache Page 3 - Tapestry and AJAX: Autocompleter and InlineEditBox
Enabling JavaScript - Apache
Although the term "AJAX" was coined not so long ago, AJAX-like functionality has already been available in Tapestry for quite some time. In Tapestry 4.0 we can use Tacos, a rich and interesting library of custom Tapestry components that includes a number of AJAX-driven components. Tapestry 4.1 has Dojo JavaScript library built into it, so it comes with some core AJAX-enabled components.
Before running the application, don't forget to provide the required support for JavaScript, otherwise Autocompleter won't work:
1. Turn the <html> element of the Web page into a Shell component. This will ensure that the required JavaScript libraries are available for the page. In the current version of Tapestry we also need to disable debugging (I would say it should be disabled by default, but it isn't), otherwise Dojo will print ugly error messages straight across the page. Here is how everything should look:
2. Turn the <body> element into the Body component. This will show Tapestry where to place any JavaScript it might want to write for us:
<body jwcid="@Body">
3. Mark the existing <DOCTYPE> and <head> elements for removal as they will be added by the Shell component and we don't want them to be duplicated:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
jwcid="$remove$">
...
<head jwcid="$remove$">
...
</head>
Now, the moment of truth has arrived. Run the application and navigate to the page with the table of celebrities. You will see that the text box that we've used in the mock up became something different, something which looks like a drop-down list:
Try typing the character g into this fancy control (well, that's because we have two celebrities with surnames starting with "G") and you should see how Autocompleter works. It's AJAX in action!