Notes on Ajax Tags

If your web application is J2EE compliant and you would like to incorporate AJAX features, you might want to look at AJAX Tags for seamless integration with JSP pages. The implementation is a combination of Java Tag Libraries and JavaScript. Features include auto complete, dynamic drop down and updating form fields. The Installation Guide is quite comprehensive.

Here is a summary of my attempt to follow the Installation Guide.

System Information
Windows XP running BEA Weblogic Server 8.1

• Download Ajax Tag Binaries. I chose version 1.1.5, which happens to be the latest stable release as of today. The file name was ajaxtags-1.1.5.zip
  
  
• As per the release notes you require ajaxtags-{version}.jar to be in your build path (in case you venture into extending the features) and/or your application server class path (most probably WEB-INF/lib). However you might end up importing a number of dependency libraries from the exploded lib directory of the above mentioned zip file. These jar files are referenced by the ajaxtag libraries and may result in runtime errors if they are missing. If your application already refers to some of them you might want to skip them from the following list
  

  
  
  • commons-beanutils-1.7.0.jar
  
  
  • commons-lang-2.1.jar
  
  
  • jericho-html-1.5-dev1.jar
  
  
  • jsp-api-2.0-20040521.jar
  
  
  • jstl-1.0.6.jar
  
  
  • log4j-1.2.8.jar
  
  
  • servletapi-2.4-20040521.jar
  
  
  • standard-1.0.6.jar
  
  
  • struts-1.2.4.jar
    
  
  
• Copy ajaxtags.tld from the zip file to your WEB-INF directory

• Add the Ajax Tag description in your web.xml.
  
  As per the installation document the entry should be…
  
  

  <!-- START AJAX Tags --> <taglib> <taglib-uri>http://ajaxtags.org/tags/ajax</taglib-uri> <taglib-location>/WEB-INF/ajaxtags.tld</taglib-location> </taglib> <!-- END AJAX Tags -->

  
  
  However you might want to edit the <taglib-uri> entry to point to the WEB-INF location
  
  

  <taglib-uri>/WEB-INF/ajaxtags.tld</taglib-uri>

  
  
  
  
  
• Install the JavaScript files (.js) in your web directory (E.g.: /webapp/<application>/js).
  
  

  • prototype-1.3.1.js
  
  
  • ajaxtags-1.1.5.js

  
  The zip file did not include prototype-1.3.1.js. I had to download the source for the same. The name of the source file I used was ajaxtags-demo-1.1.5-src.zip.
  
  
  
• Install the Cascaded Style Sheets in your web directory.(E.g.: /webapp/<application>/css).
  

  
  
  • ajaxtags-sample.css
  
  

  
  I used the css files bundled with the source instead. (v.i.z)
  

  
  
  • ajaxtags.css
  
  
  • displaytag.css
  
  

  
  
• Some of the examples use images such as throbber.gif in the autocomplete busy signal and close.png in the portlet toolbar. You might want to copy them over to your web directory (E.g.: /webapp/img) if you intend to use them.
  
  
  
• You are now ready to embed AJAX Tags in your jsp pages. The following entries need to be made in your jsp to use it. You can reuse the references by adding them in a common jsp and including it in the implementation jsp (or tiles).
  
  
  
• Include reference to the tag library
  
  

  <%@ taglib uri="/WEB-INF/ajaxtags.tld" prefix="ajax" %>

  
  
• Include reference to the js files noting that prototype-1.3.1.js precedes ajaxtags-1.1.5.js
  
  

  <script src="/js/prototype-1.3.1.js" type="text/javascript" language="JavaScript"></script> <script src="/js/ajaxtags-1.1.5.js" type="text/javascript" language="JavaScript"></script>

  
  
• Include reference to css files
  
  

  <link href="/css/ajaxtags.css" type="text/css" rel="stylesheet"/> <link href="/css/displaytag.css" type="text/css" rel="stylesheet"/>

  
  
• Add the Ajax Tag you require in the relevant section.
  
  E.g.
  
  
  

  <ajax:anchors target="ajaxFrame" ajaxFlag="ajaxFrame"> <!-- Ajax this link --> </ajax:anchors> <ajax:area id="ajaxFrame" style="width:300px; min-height:100px; height:100px;" styleClass="textArea" ajaxAnchors="true" ajaxFlag="ajaxFrame"> This is the first area and should be refreshed only when the first link or the link inside itself is clicked: </ajax:area>