REVERT TO CONSOLE

Scenario: A simple jsp page with a standard drop down box. A Selection criteria (could be another drop down box and a couple of check boxes) to change the values in these drop down box dynamically, without submitting the page.

What you will learn:

Configure dwr.xml with spring beans
Configure application contexts for dwr beans
The basic structure of the jsp for dwr
The necessary js that executes the ajax call along with the code for rendering the new drop down values
Finally, the facade (ajax handler) in Java, for the action

1. Configure dwr.xml with spring beans

<?xml version="1.0" encoding="UTF-8"?>
<dwr>
<allow>
	<create creator="spring" javascript="ListOptionsAjaxFacade">
		<param name="beanName" value="listOptionsAjaxFacade" />
	</create>
	<convert converter="bean" match="com.reverttoconsole.domain.*" />
</allow>
</dwr>

listOptionsAjaxFacade is the bean name you would want configure in Spring’s application context. The advantage of using beans and creator=”spring” here is that all your dependencies can be autowired by default with your existing Spring container. So if you have two dao dependencies in listOptionsAjaxFacade, you can now use your existing application context to resolve dependencies. Simply add autowire=”byType”. The converter=”bean” above ensures that all Types are converted to your domain object types. I assume a package structure for domain which are the only return types of my ajax handlers.

2.Configure application contexts for dwr beans

<?xml version="1.0" encoding="utf-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="
    http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.0.xsd">
	<description>
		This file defines DWR Ajax Facade Beans.
	</description>
	<bean id="listOptionsAjaxFacade" class="com.reverttoconsole.domain.ListOptionsAjaxFacade" autowire="byType"/>
</beans>

I assume, you already have an application context(s) for all your controller, dao, services beans etc

3.The basic structure of the jsp for dwr

<html>
<head>
<!-- dwr ajax scripts-->
<script src="\'dwr/interface/ListOptionsAjaxFacade.js\'"></script>
<script src="\'dwr/engine.js\'"></script>
<script src="\'dwr/util.js\'"></script>
</head>
<body>
// contents of your jsp

<select name="listOptions" id="listOptions">
    <c:forEach items="${listOptions}" var="item">
        <option value="${item.id}">${item.description}</option>
    </c:forEach>
</select>

<select name="groupBy" id="groupBy">
       <option value="name">first name</option>
       <option value="name">last name</option>
       <option value="name">age</option>
       <option value="name">city</option>
</select>
<input type="checkbox" name="isAscending"> Ascending
<input type="button" value="Refresh" onclick="processListOptions()"/>

// other parts of jsp
</body>
</html>

As you see, include 3 js files on the top of your jsp. The js ListOptionsAjaxFacade.js is actually the name of the handler that you
will see in a moment. The button ‘refresh’ has a js handler processListOptions.

4.The necessary js that executes the ajax call along with the code for rendering the new drop down values
Add the following js in the jsp

<script>
     function processListOptions(){
     	// get sortBy, isAscending values from current jsp elements
	    ListOptionsAjaxFacade.processListOptions(sortBy, isAscending,function(data){
		dwr.util.removeAllOptions("listOptions");
		DWRUtil.addOptions("listOptions",data,"id","description");});
     }
</script>

It retrieves the values of groupBy and ascendingorder fields from the current jsp and calls the ajax method processListOptions. Once retrieved, it uses the handy dwr.util method to replace all the list options with the new values. Note the callback function(date) used for this. Dwr replaces the return call from processListOptions and puts them in data (The complete java object collection)

5.Finally, the facade (ajax handler) in Java, for the action

public class ListOptionsAjaxFacade {
      private PersonDao personDao;

      public List processListOptions(String sortBy, boolean isAscending) {
       	return personDao.getAll(sortBy, isAscending);
      }

      //setters & getters
}

Ofcourse, this is a happy-day-flow with no exception handling either in client side or server side, but you can add that later. Read the docs for DWR.
Thats it. You should now be able to retrieve the lists dynamically

Essential Reading:
Read more on dwr.util package. Just like drop down lists, you can pretty
much create any other dynamic form element. The basic structure remains the same as above. Try using scriptaculous for fancy js effects in combination with the above code. For instance, on click of Refresh, you can fade in fade out the dropdown box.
(and charge the customer an additional 8 hours for implementing the same)

Step by Step Tutorials – DWR with Spring, Ajax – Dynamic drop down lists

Post a Comment