I was adding a bit of UI zing to a web application yesterday, and decided that a particular requirement would benefit from some AJAX capabilities.
I’ve used a bit of AJAX in the past, and was pleasantly surprised at how relatively easy it was. At that time, I cut and pasted some JavaScript from the web. This time I decided to try my hand at a pre-canned AJAX framework.
So I downloaded DWR, and dropped it into my application. I wanted to dynamically fill a selection list with some values from the server; this is a pretty common requirement, and there’s even an example in the DWR documentation.
Here’s all it took:
First, I created a Java class that could provide my selection values. The initial dumb implementation looked like this:
public class UserAjaxService { public String[] getSelections() { return new String[] { "Fred", "Barney", "Wilma" }; } }
There were no special interfaces or coding conventions that needed to be worried about.
Next, I created a DWR configuration file:
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd"> <dwr> <allow> <create creator="new" javascript="UserAjaxService"> <param name="class" value="ca.intelliware.example.ajax.UserAjaxService"/> </create> </allow> </dwr>
I put this file (called “dwr.xml”) in my web application’s WEB-INF. I also dropped the dwr.jar file in my WEB-INF/lib and added a small number of additions to my web.xml file.
Then I started up my app. By going to:
http://localhost:8080/myApp/dwr/
I could see my UserAjaxService listed on a page generated by DWR. A link took me directly to a page describing the methods available in my service, and allowed me to invoke those methods via automatically-generated JavaScript.
That same page instructed me on how to get the same functionality on my application page. Just copy a few <script> references onto my page:
<script type='text/javascript' src='/dwr/interface/UserService.js' />
<script type='text/javascript' src='/dwr/engine.js' />
<script type='text/javascript' src='/dwr/util.js' />
I didn’t create any of these scripts; they’re auto-generated by the DWR engine.
Lastly, I added a bit script on a particular button:
<input name="searchCriteria" id="searchCriteria" type="text" value=""> <input type="button" value="Look Up>>" onclick="UserService.getUserNames(getInputValue('searchCriteria'), fillList);" /> <script> var fillList = function(data) { DWRUtil.removeAllOptions("myList"); DWRUtil.addOptions("myList", data); } </script> <select size="4" id="myList" name="user"></select>
And that was it. In minutes, I had the AJAX functionality up and running.