AjaxTags Tutorial (Part 2)

Creating an Autocomplete Textbox

One of the cool tags of AjaxTags is ajax:autocomplete. We will use this tag in this following JSP example.

<fieldset>
<legend>ajax:autocomplete example</legend>
<form>
<label for=”country”>Country Name: </label>
<input type=”text” name=”country” id=”country”/>
</form>

<ajax:autocomplete
source=”country”
target=”country”
baseUrl=”country_list.view”
parameters=”country={country}”
className=”autocomplete”
minimumCharacters=”1″/>
</fieldset>

Our objective here is to make an autocomplete for the textbox country. We have a Servlet which will return a list of country names that starts with the value of country textbox.
This tag must appear after the form tag. Attribute source is the id of the input textbox. Attribute target is the id of the target textbox; target may be same as source or different than source. Attribute baseUrl specifies the server side code. One important attribute for ajax:autocomplete is minimumCharacters, it specifies character count after which AjaxTags will request for country_list.view with country name as a parameter.

.autocomplete {
position: absolute;
color: #333333;
background-color: #ffffff;
border: 1px solid #666666;
font-family: Arial;
overflow: hidden;
}

This is a sample style sheets entry for ajax:autocomplete.

Now we need to create the server response for this tag. Sample response would be like following. Assuming we entered ‘A’ in country textbox.

<?xml version=”1.0″ encoding=”UTF-8″?>
<ajax-response>
<response>
<item>
<name>America</name>
<value>America</value>
</item>
<item>
<name>Angola</name>
<value>Angola</value>
</item>
<item>
<name>Austria</name>
<value>Austria</value>
</item>
<item>
<name>Australia</name>
<value>Australia</value>
</item>
</response>
</ajax-response>

In Part I, I discussed AjaxTags helper classes. First we need to add following import statements in your Servlet code.

import org.ajaxtags.helpers.*;
import org.ajaxtags.servlets.*;

Next you need to extend your class from BaseAjaxServlet.

public class CountryCompleter extends BaseAjaxServlet

BaseAjaxServlet is included in ajaxtags.jar.

We define a string of country names that will be used for autocomplete source.

private static final String countries = “America,Angola,Austria,Australia,Bahama,Bangladesh,Bermuda,Canada,Chad,
Cyprus,Denmark”;

We will spilt this string using “,” as separator into an array.

private static final String[] countryNames = countries.split(“,”);

We need to override getXmlContent function to generate XML response. Here is an example.

public String getXmlContent(HttpServletRequest request,
HttpServletResponse response)
throws Exception {
//Gets country prefix from request object
String countryPrefix = request.getParameter(“country”);

//Generate country names’ list as XML
String countryList = makeCountryList(countryPrefix);

//Returns XML list as string
return countryList;
}

Now we need to develop a private class named makeCountryList for generating XML response with all the country names starts with the country prefix as entered by the user.

private String makeCountryList (String countryPrefix) {
AjaxXmlBuilder builder = new AjaxXmlBuilder();
for(String country: countryNames) {
if(country.toUpperCase().startsWith
(countryPrefix.toUpperCase())) {
builder.addItem(country, country);
}
}
return builder.toString();
}

Compile the class. Add entries in your web.xml. First a Servlet entry like below.

<servlet>
<servlet-name>CountryCompleter</servlet-name>
<servlet-class>CountryCompleter</servlet-class>
</servlet>

Then add a Servlet mapping entry in web.xml.

<servlet-mapping>
<servlet-name>CountryCompleter</servlet-name>
<url-pattern>/country_list.view</url-pattern>
</servlet-mapping>

You now have everything ready for this example. Try for yourself and you will learn how to use ajax:autocomplete tag.

//break//

This server side code in some cases may take too much time. In such instances you can show an indicator or progress bar while processing. To do this you need to set the indicator attribute of ajax:autocomplete. The Indicator attribute usually points to a div or span element that will be enabled while the results are being loaded. It is disabled at start, and disabled again when results come back. The div or span element usually contains an animated GIF showing progress like progress bar.

<fieldset>
<legend>Autocomplete with indicator</legend>
<form>
<label for=”country”>Country Name:</label>
<input type=”text” name=”country” id=”country”/>
<span id=”indicatorRegion” style=”display:none;”>
<img src=”images/progress_bar.gif”/>
Loading…
</span>
</form>

<ajax:autocomplete
source=”country”
target=”country”
baseUrl=”country_list.view”
className=”autocomplete”
minimumCharacters=”1″
indicator=”indicatorRegion”/>
</fieldset>

Creating Cascading Drop Downs

Using AjaxTags you can create cascading drop downs (when first one changes, result is sent to server and used to compute values for second) easily. This can be done using ajax:select tag.

<fieldset>

<legend>ajax:select example</legend>

<form>
<label for=”make”>Make:</label>
<select id=”make”>
<option value=”">Select Make</option>
<option value=”Nokia”>Nokia</option>
<option value=”SonyEricsson”>SonyEricsson</option>
<option value=”BenQ”>BenQ</option>
<option value=”O2″>O2</option>
<option value=”Motorola”>Motorola</option>
<option value=”Apple”>Apple</option>
<option value=”HTC”>HTC</option>
</select>
<label for=”model”>Model:</label>
<select id=”model” disabled=”disabled”>
<option value=”">Select Model</option>
</select>
</form>

<ajax:select
source=”make”
target=”model”
baseUrl=”model-finder.ajax”
parameters=”make={make}” />
</fieldset>

Here you can see two drop down elements, one is make and other is model. If you select anything from make then corresponding models will be loaded to model drop down. Remember, you must add a dummy option at the beginning. Ajax requests will be triggered after select value changes. So, you need the dummy option. 2nd Select element is disabled at beginning. If first select value changes, AjaxTags will request for server response and populate second select accordingly. This tag must appear after form tag. All the tags those require id values in source and target must appear after form tag.

htmlContent Tag

Ajax:htmlContent must be placed below form. When some source element (like button) clicked, server-side resource is invoked and return values placed inside html area (usually a div or span). Attribute source is the id
of the button or other element that will trigger submission. Attribute target is the id of the html element where results from server will go. Server side resource should return regular HTML, not XML. Here is an example of single trigger.

<fieldset>
<form>
<label for=”make”>Make:</label>
<select id=”make”>
<option value=”">Select Make</option>
<option value=”Nokia”>Nokia</option>
<option value=”SonyEricsson”>SonyEricsson</option>
<option value=”BenQ”>BenQ</option>
<option value=”O2″>O2</option>
<option value=”Motorola”>Motorola</option>
<option value=”Apple”>Apple</option>
<option value=”HTC”>HTC</option>
</select>
<label for=”model”>Model:</label>
<select id=”model” disabled=”disabled”>
<option value=”">Select Model</option>
</select>
<input type=button id=showprice value=”SHOW PRICE”>
<span id=”price”></span>
</form>

<ajax:select
source=”make”
target=”model”
baseUrl=”model-finder.ajax”
parameters=”make={make}” />
<ajax:htmlContent
baseUrl=”price-finder.ajax”
source=”showprice”
target=”price”
parameters=”model={model},make={make}”/>
</fieldset>

Here showprice is used for single trigger. We can use multiple triggers for ajax:htmlContent. To do this we need to remove source attribute and add sourceClass attribute. Value of sourceClass is the CSS class of an element. All the elements that have a CSS class name same as sourceClass can be used for trigger. Example of multiple triggers is below.

<form>
…
<input type=”button” value=”Show Price” class=”trigger”/>
<a href=”javascript://no-op” class=”trigger”>Show Price</a>
<input type=”radio” class=”trigger”/>Show Price
…
<span id=”price”></span>
</form>

<ajax:htmlContent
baseUrl=”price-finder.ajax”
sourceClass=”trigger”
target=”price”
parameters=”model={model},make={make}”/>

The other tags are –

ajax:area
Defines a region and forces all links to be loaded back inside same region instead of refreshing the entire page.

ajax:callout
The callout tag associates a callout or popup balloon to any HTML element supporting an onClick event. AjaxTags uses OverLIBMWS JavaScript library for ajax:callout tags.

ajax:displayTag
The displayTag is similar to the area tag. Allow pagination and sorting.

ajax:portlet
It defines a portion of the page that expects content from another location using Ajax with or without a periodic refresh.

ajax:toggle
The toggle tag uses a single image to represent the display of the ratings with the help of CSS to manage the mouseover or mouseout.

ajax:tree
Generate JavaScript code to build a tree.

For more information about the attributes and parser please go to AjaxTags usage page at http://ajaxtags.sourceforge.net/usage.html. You will also find all the necessary JavaScript libraries, demo war files and CSS style sheets in AjaxTags download pages.