Thursday, August 5, 2010

AjaxTags

As I continue to work through Deepak Vohra's Ajax in Oracle JDeveloper book, I was very impressed not only by the book (thanks Mr. Vohra!), but also AjaxTags.  I must be tag/jsp-oriented, because I tend to view just using javascript to do Ajax as being kind of messy.

It has not taken me very long to get the example in this book which demonstrates AjaxTags up and running.  There were a few gotchas.  For example, in the example there were only three javascript files which needed to be included in the jsp page using script tags with source attributes.  The book was written in 2006.  Now in 2010, using the next major version of AjaxTags there are 7 or 8 javascript files, which I had to include.   Also Vorha-ji used a "button" tag, which in my browser issued a submit.  If you are doing Ajax you don't want to use a button that automatically submits, so I switched to using an <input> tag with a type attribute with the value of "button".

With this example I could register a select list and a button to do Ajax transactions with (in the jsp) only the following two tags:

<ajax:htmlContent baseUrl="formservlet" source="catalogId" target="validationMessage"
parameters="catalogId={catalogId}"/>

<ajax:updateField action="updateForm" baseUrl="formupdateservlet"
parameters="catalogId={catalogId}" source="catalogId"
target="journal,publisher,edition,title,author"
parser="new ResponseXmlParser()"/>
So, in this example, you had to define two servlets, one called formservlet and one called formupdateservlet.  The ajax:htmlContent tag above made it so that if you changed the selected value of a select list with the id of catalogId, it would "doGet" on formservlet with the request parameter which has that selected value.  The value of the element with the id of "validationMessage" (as specified in the ajax:htmlContent tag above) is set to the text of the response of this servlet.  That is a lot of meaning to pack into a little tag...but that "meaning" is just what we want, time and time again...isn't it...with AJAX.

The second tag, ajax:updateField, keys off of a button whose id is updateForm (see the action attribute of the tag above).  This button click does a doGet on formupdateservlet, again passing the parameter of the current value of a select list with the id of catalogId.  The target attribute is a comma-delimited list of element ids in our form of various fields we have.  This servlet (formupdateservlet) produces XML, unlike the formservlet, which just produced text.  So we specify a parser in the tag above to handle the XML.  I think then that you just have to make your servlet produce elements which match these target element ids.  Again...very compact...but exactly what we are looking for.  The only javascript involved is the script tags which include the AjaxTags javascript libraries.  These are the ones I had to include:

<script src="prototype.js" type="text/javascript"></script>

<script src="scriptaculous.js" type="text/javascript"></script>
<script src="overlibmws.js" type="text/javascript"></script>
<script src="effects.js" type="text/javascript"></script>
<script src="controls.js" type="text/javascript"></script>
<script src="ajaxtags_controls.js" type="text/javascript"></script>
<script src="ajaxtags_parser.js" type="text/javascript"></script>
<script src="ajaxtags.js" type="text/javascript"></script>
Scriptaculous is used to make some of this happen, and is part of AjaxTags.  It has some support javascript files which I did not include.  It would probably be safest just to include all of them, since there are not that many.

That's it! 

I would like to explore this a bit more (since this example does not begin to cover AjaxTags functionality fully) and see how it performs when incorporated into JSF pages.

No comments: