AppFuseAjaxWithDWR

        <convert converter="bean" match="org.appfuse.*"/>
        <create creator="spring" javascript="personDetailDWRManager">
        	<param name="beanName" value="personDetailManager"></param>
        </create>

The tag will tell DWR what objects will be allowed for usage with dwr. For simplicity I used a wildcard here that will let DWR convert all objects in the packages org.appfuse an beneath. From a security perspective of course you would only allow conversion of the objects you really need.

By default DWR will assume your managers return Strings and lists of Strings. So if you would like to send something else to your page like Integers you will have to define a signature within dwr.xml for each method call.

The tag will tell how to name the JavaScript manager that can be use on the client side and what object should respond to calls on that JavaScript object. Things will lighten up very soon. Now you can run ant deploy and start you Tomcat. Login to you app and navigate to http://localhost:8080/appfuse/dwr/ and have a look at a really cool feature of DWR. It provides a page showing all managers known to DWR and even let's you test calls to that managers. Try it: Click on the personDetailManager and look for the getPets() and getJob() methods. If you execute one of the methods with an id of an existing person the corresponding data should be shown in a JavaScript alert. Take a moment to read the page, it will give you some additional information on DWR, especially some frequently made errors (don't use overloaded methods, how to fix missing converters). It also tells you what url you have to include to make use of the personDetailManager. When you verified that you manager behaves as expected you're ready for the [last part]...

Create the client code [#4]

First we will have to rewrite the existing person table that is constructed using the tag. I do that because I don't know how to add onClick and onMouse behaviour using the tag. If anybode knows about that please let me know at josip (at) esistegalaber (dot) de. The table itself is rather simple: Iterate over the persons property of the PersonAction and create a row for each person.

<table cellspacing="0" cellpadding="0" class="list" border="1">
 <thead>
  <tr>
	<th bgcolor="#CCCCCC"><fmt:message key="person.firstName"/></th>
	<th bgcolor="#CCCCCC"><fmt:message key="person.lastName"/></th>
	<th bgcolor="#CCCCCC"><fmt:message key="person.id"/></th>
  </tr>
 </thead>
  <tbody id="personList">
  <ww:iterator value="persons">
   <tr>
	 <td>
	 		<ww:property value="firstName"/>
	 </td>
	 <td>
	 		<ww:property value="lastName"/>
	 </td>
	 <td>
	 <ww:property value="id"/> 
         <a href='<c:url value="editPerson.html?"/>id=<ww:property value="id"/>'><fmt:message key="person.edit"/></a>
	 </td>
   </tr>
  </ww:iterator>
 </tbody>
</table>

Well, it won't win any designer awards, but I'm not a designer anyway :-) Next I add an additional hidden div that will contain another 2 tables (beeing empty when the page is loaded) where we will put the person details in on mouseover. Append the following code in the personList.jsp:

<div id="detailDiv" style="visibility:hidden">
	<table cellspacing="0" cellpadding="0" class="list">
		<thead>
			<tr>
				<th width="50%"><fmt:message key="person.jobname.heading"/></th>
				<th width="50%"><fmt:message key="person.jobdesc.heading"/></th>
			</tr>
		</thead>
		<tbody id="jobTable">
		</tbody>
	</table>
	<br/>
	<table cellspacing="0" cellpadding="0" class="list">
		<thead>
			<tr>
				<th width="50%"><fmt:message key="person.petname.heading"/></th>
				<th width="50%"><fmt:message key="person.pettype.heading"/></th>
			</tr>
		</thead>
		<tbody id="petTable">
		</tbody>
	</table>
</div>

So now we are ready to get to the behaviour part. Add a link around the person's first an last name with onmouseover and onmouseout behaviour:

	 <a 
	 	href="#" 
	 	onmouseover="javascript:getDetails('<ww:property value="id"/>', '<ww:property value="firstName"/>')" 
	 	onmouseout="javascript:hideDetailDiv()">
	 		<ww:property value="firstName"/>
	 </a>

and the same for the lastName property

	 <a 
	 	href="#" 
	 	onmouseover="javascript:getDetails('<ww:property value="id"/>', '<ww:property value="firstName"/>')" 
	 	onmouseout="javascript:hideDetailDiv()">
	 		<ww:property value="lastName"/>
	 </a>

It's time to get to the JavaScript. We'll write a function called getDetails() that will call the DWR manager we exported in [3]. Therefore we have to include the following script:

<script type='text/javascript' src='/ajax-tutorial/dwr/interface/personDetailDWRManager.js'></script>
<script type='text/javascript' src='/ajax-tutorial/dwr/engine.js'></script>
<script type='text/javascript' src='/ajax-tutorial/dwr/util.js'></script>

	//a global variable to store the person's first name between server-calls.
	//calls to DWR-Managers perform asynchrounasly...
	var pickedPerson;

	//#
	//# This function gets called onMouseOver and retrieves the data from the server.
	//#
	function getDetails(personID, firstName)
	{
		//store the picked person name for further use
		pickedPerson = firstName;
		//retrive the job details from the server.
		personDetailDWRManager.getJob(personID, showJob);
		//show the div containing the details table.
		document.getElementById("detailDiv").style.visibility='visible';
	}

	//#
	//# A callback funtion beeing called from DWR. The parameter is inserted by DWR and
	//# will be the result of the personDetailManager.
	//# It inserts the job information into the jobTable. This is done using DWRUtil.addRows.
	//#
	function showJob(job)
	{
		//clear all inner html from the table containing the job information.
		clearHtml(document.getElementById("jobTable"));
                //append a row in our jobTable for each job
		DWRUtil.addRows("jobTable", [job], [appendJobName, appendJobDescription]);
	}

	//#
	//# Utility function clearing a HTML-element of all children.
	//# Called to clear any previouse entered information from the detail tables.
	//#
	function clearHtml(node)
	{
		while(node.firstChild != null)
		{
			node.removeChild(node.firstChild);
		}
	}

	//#
	//# Another callback function beeing called from DWRUtil.addRows.
	//# It simply returnes the job's name.
	//#
	function appendJobName(job)
	{
		return pickedPerson + "'s job: " + job.jobname;
	}

	//#
	//# Yet another callback function beeing called from DWRUtil.addRows.
	//# It simply returns the job's description.
	//#
	function appendJobDescription(job)
	{
		return job.jobdesc;
	}

For the person's pets exactly the same procedure can be executed:
DWR-call -> callback function using addRows -> callback function to insert stuff into the table.
Either write it yourself or take a look at my complete personList.jsp here

Well that's it. Of course the same result could have been created without DWR but there are many cases where AJAX will improve the look and feel and the usage of your AppFuse webapps very much as it's simply unbeatable fast. Have fun!

Some open questions about DWR/JavaScript. [#5]

Security

I18N

ajax-tutorial.rar

77712 bytes