Wednesday, April 19, 2006

AjaxTags for Java Server Pages

AjaxTags is a JSP tag library that provides a set of tags for Java EE developers to create Ajax-enabled web forms. AjaxTags depends on Javascript-based Prototype framework, and the scriptaculous library, it also depends on the DHTML-based OverLIBMWS library. All you have do to create an Ajax-enabled Web form is to include the library in your classpath, define the tld in web.xml and include the required Javascript core in your JSP. An additional event handler (a Java servlet) has to be written to handle the client events. The following is a list of tags provided in the current release (1.2):
  1. Autocomplete Retrieves a list of values that matches the string entered in a text form field as the user types.
  2. Callout Displays a callout or popup balloon, anchored to an HTML element with an onclick event.
  3. HTML Content Replace Builds the JavaScript required to hook a content area (e.g., DIV tag) to a link, image, or other HTML element's onclick event.
  4. Portlet Portlet-style capability from a AJAX-enabled JSP tag.
  5. Select/dropdown Based on a selection within a dropdown field, a second select field will be populated.
  6. Tab Panel Enable an AJAX-based set of property pages.
  7. Toggle Uses images to create either a single on/off toggle or a sequential rating system.
  8. Update Field Updates one or more form field values based on response to text entered in another field.
  9. Area and Anchor Shows how to AJAX-enable any area of your page.
  10. Ajax DisplayTag Shows how to AJAX-enable DisplayTag
Demos for the tags can be viewd at the live demos site, they also have the source code used for the demos. Some more resources for Ajax, as applicable to Java developers, can be found at my previous post: Ajax Resources.

3 comments:

  1. hi Abhi have a problem in ajaxtags-1.2-beta2.js and scriptaculous.js

    in both the js file some error is coming
    (1) Class is undefined in ajaxtags-1.2-beta2.js

    (2)Exception thrown and not caught in scriptaculous.js

    ReplyDelete
  2. Class is undefined means that u need the set of javascript libraries to be defined before the ajaxtags javascript libraries.

    <script src="${pageContext.request.contextPath}/js/prototype_1_5_0.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/scriptaculous/scriptaculous.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/overlibmws/overlibmws.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/overlibmws/overlibmws.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/overlibmws/overlibmws_hide.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/overlibmws/overlibmws_iframe.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/overlibmws/overlibmws_shadow.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/ajax/ajaxtags.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/ajax/ajaxtags_controls.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/ajax/ajaxtags_parser.js" type="text/javascript"></script>

    ReplyDelete
  3. I am new to this ajaxtags. I want to add new fields based on the responce comming from backend. How can I using this ajaxtags to add new rows

    ReplyDelete