Blog

How to make Displaytag ajax enabled using DWR?

10 Dec, 2007

Displaytag is an open source suite of custom tags with which you can easily display a collection of Objects as a table including direct support for paging and sorting. Normally selecting a new page, or sorting the tables leads to a complete page-refresh. It is more user-friendly to refresh only the data in the table using Ajax technology, however Displaytag doesn’t offer this out-of-the-box. But we can of course try to add support for this using one of the many Ajax frameworks that are currently available.
A non ajax enabled Displaytag would do a request to a controller for every action such as a sorting or selecting a next page. This would result in a complete page refresh (step 1-8 ). When we Ajax enable the Displaytag we skip the page refresh and only refresh a specific piece of the page using an exposed service which provides the updated HTML fragment (step 1a-8a).

flow
In the example I am going to use the following technologies:

The senario is as follows: We want to display episodes in a table. We want to do this in an Ajax way by using DWR. But where do we start?
Well, first of all we create a domain object called Episode.

public class Episode {
   long id;
   String show;
   String name;
   String episode;
   String airDate;
....
}

Next we create a repository.

public class EpisodeRepository extends HibernateDaoSupport {
    public List getAllEpisodes(int firstResult, int maxResults, String orderBy,
    boolean ascending) {
        Criteria criteria = getSession().createCriteria(Episode.class)
            .setFirstResult(firstResult)
	    .setMaxResults(maxResults)
	    .addOrder(ascending ? Order.asc(orderBy) : Order.desc(orderBy));
	    return criteria.list();
	}
    public int getNumberOfEpisodes() {
        Criteria criteria = getSession().createCriteria(Episode.class);
	criteria.setProjection(Projections.count("id"));
	return (Integer)criteria.uniqueResult();
    }
}

And a Jsp containing the Displaytag for presenting the collection of Episodes.
<display:table id="ep" name="eps" sort="external" requestURI="replaceURI" pagesize="30" partialList="true" size="${nrOfEps}">
    <display:setProperty name="basic.empty.showtable" value="true" />
    <display:column title="Show" property="show" sortable="true" sortName="show" />
    <display:column title="Name" property="name" sortable="true" sortName="name" />
    <display:column class="Episode" property="episode" sortable="true" sortName="episode" />
    <display:column title="Airdate" property="airDate" sortable="true" sortName="airDate" />
</display:table>

Note that I use replaceURI as requestURI. This is very important because we are going to replace this with a call to a javascript method. Displaytag creates links like <a href=”repaceURI?d-2332-o=1….”> and this should be replaced by <a href=”javascript:update(‘d-2332-o=1…’)> so that we the links will be Ajax enabled too. Unfortunatly this is not the only thing that we need to update. We need to update the range we are displaying, the page we are currently on and how the data is sorted.
So how do we do that?
Well, we need to expose a service using DWR. DWR is an Ajax toolkit which make it possible to expose services which can then be called from JavaScript. I created an abstract generic class so that you can use it to enable any service you like. The abstract class contains the following method:

public abstract class AbstractExposedDisplayTagService implements InitializingBean {
    public void afterPropertiesSet() throws Exception {
        ....
    }
    public String findAllObjects(String criteria) {
        WebContext wctx = WebContextFactory.get();
	HttpServletRequest request = wctx.getHttpServletRequest();
	// split results and set values;
	int maxResults = Integer.parseInt(getCriterionValue(criteria, "maxResults", DEFAULT_MAXIMUM_RESULTS));
	int page = Integer.parseInt(getCriterionValue(criteria, displayTagPage, "1"));
	boolean ascending = Integer.parseInt(getCriterionValue(criteria, displayTagSortOrder, "1")) == 1 ? true : false;
	String orderBy = getCriterionValue(criteria, displayTagOrderBy, "id");
	int firstResult = (page - 1) * maxResults;
	int numberOfObjects = getNumberOfObjects();
	// set the episodes on the request so dwr can reload the jsp part.
	request.setAttribute(getObjectsName(), getObjects(firstResult, maxResults, orderBy, ascending));
	request.setAttribute(getNumberOfObjectsName(), numberOfObjects);
	try {
	    String html = wctx.forwardToString(viewFragment);
	    html = DisplayTagReplacementUtil.updatePagingHtml(html, page, maxResults, numberOfObjects, displayTagPage);
	    html = DisplayTagReplacementUtil.updateSortOrderHtml(html, ascending, displayTagSortOrder);
	    html = DisplayTagReplacementUtil.updateHtmlLinks(html);
	    return html;
	} catch (ServletException e) {
	    return "";
	} catch (IOException e) {
	    return "";
	}
}
}

And here is the implementation.

public class EpisodeService extends AbstractExposedDisplayTagService {
	private EpisodeRepository episodeRepository;
	@Override
	public int getNumberOfObjects() {
		return episodeRepository.getNumberOfEpisodes();
	}
	@Override
	public String getNumberOfObjectsName() {
		return "numberOfEpisodes";
	}
	@Override
	public List getObjects(int firstResult, int maxResults, String orderBy, boolean ascending) {
		return episodeRepository.getAllEpisodes(firstResult, maxResults, orderBy, ascending);
	}
	@Override
	public String getObjectsName() {
		return "episodes";
	}
	public void setEpisodeRepository(EpisodeRepository episodeRepository) {
		this.episodeRepository = episodeRepository;
	}
}

Now you see that the findAllObjects method calls 3 static update methods on the DisplayTagReplacementUtil class.
These are responsible for the actual Ajax enabling. They use regular expressions to update the links, sorting etc..
Finally we need to add some JavaScript to be able to call the exposed service methods.
The following piece of code should be in the head of the jsp , in which you include the jsp containing the displaytag shown above in.
<script type='text/javascript' src='<c:url value="/dwr/interface/EpisodeService.js"/>'></script>
<script type='text/javascript' src='<c:url value="/dwr/engine.js"/>'></script>
<script type='text/javascript' src='<c:url value="/dwr/util.js"/>'></script>
<link rel="stylesheet" type="text/css" href='<c:url value="/css/displaytag.css"/>' />

and the javascript:
<script type="text/javascript">
function update(criteria) {
EpisodeService.findAllObjects(criteria, function(data) {
dwr.util.setValue("displayTable", data, { escapeHtml:false });
});
}
update("");
</script>

It is now a simple matter of extending the abstract class and you have Ajax enabled your Displaytag .
I have attached the example project here so you can look into the code yourself.

guest
24 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
trackback

[…] How to make Displaytag ajax enabled using DWR? By Mischa Dasberg update(""); </script>. It is now a simple matter of extending the abstract class and you have Ajax enabled your Displaytag . I have attached the example project here so you can look into the code yourself. Xebia Blog – http://blog.xebia.com […]

Balaji D Loganathan
14 years ago

Very well written and useful.
Good one Mischa.

Bart Guijt
14 years ago

Well done, Mischa! I like the illustration.

Krish
Krish
14 years ago

hi,
liked the article… i was wondering if you can provide a struts based path.. I am new to struts and my application is written in struts. Cant change the arch 🙁
Thanks,
Krish

Krishna
Krishna
14 years ago

Where is the EpisodeService.js and what does it contain?
U said exposing the class functionality (EpisodeService.findAllObjects(criteria, function(data)). How to do that?

Ana
Ana
14 years ago

Amazing article! Just what I was looking for. Thanks!

Alan
Alan
13 years ago

I do not see where
public void setViewFragment(String viewFragment)
is being called? What is expected to be passed in the viewFragment?

amurray
amurray
13 years ago

In the sample code I do not see where
public void setViewFragment(String viewFragment) {
this.viewFragment = viewFragment;
}
is being called. What is the viewFragment? Is it the entire table before displayTag has processed it or after displayTag processed it?

Rahul
Rahul
13 years ago

Hi,
Is it required to have two files , episode.jsp and index.jsp?
Can’t we just include/manually copy the episode.jsp in the index.jsp…
What will be the effects….
Anyways, very nice article..
rahul

amurray
amurray
13 years ago

Mischa thanks for the clarification on the viewFragment. I have made a lot of headway since then. The question that I have now is how do you handle exports with this approach? The link:
javascript:updateTableL4(‘d-5302-e=2&6578706f7274=1’) is not sufficient to cause the save as dialog to open.
Thanks for your help,
Alan

ck
ck
13 years ago

really nice, but i don’t know how to make it work, any more easier way and less codes to do it?

ppl
ppl
13 years ago

Hi Mischa
Very good example of ajax and displaytag. I got your example working fine but when I extended it I found that the criteria keep being null so my links broke. Any ideas?
Thanks
PPL

Sarav
Sarav
13 years ago

Excellent work.. I learnt a new Idea.. going to implement in my project.. Great work. Appreciate your knowledge sharing.. thank you once again..

kilicool
kilicool
11 years ago

Hello,
Excellent example, thanks a lot !
I saw just a bug, when you order ASC or DESC a column and go next page (or previous page), the ordering is lost !
Can you fix it ?
Regards !

Jean
Jean
11 years ago

Hi,
I’m using Dwr and i get this error: a popup show “The specified call count is not a number”
Any ideas?
Thx for your help

Nikunj Mulani
Nikunj Mulani
11 years ago

No need to do much more you just write following code in “displaytag-properties”
paging.banner.page.link={0}
You can call ajax using AjaxCall method
Enjoy!!!!
Keep smiling!!!

Krishna
Krishna
10 years ago

Appreciate your knowledge sharing.. thank you

XCOSMOS
XCOSMOS
10 years ago

Your ideas are great. I need the full example source of above article. Where do I download?

reddy
reddy
10 years ago

Can you please send me complete source code. I am planning to implement similar functionality using struts and display Tag.. I hope I will get answer AEAP. Nice article.
Thanks,
Reddy

Lio
Lio
10 years ago

I have the problems with that example, i have the same implementation but error in the deployment runtime, my web.xml is:
app-example-dwr


javax.servlet.jsp.jstl.fmt.localizationContext
ApplicationResources


javax.servlet.jsp.jstl.fmt.fallbackLocale
en
contextConfigLocation
classpath*:/**/application-datasource.xml
classpath*:/**/application-platform-hibernate.xml
classpath*:/**/application-security-hibernate.xml
classpath*:/**/application-rules-hibernate.xml
classpath*:/**/application-platform-service.xml
charsetFilter
org.springframework.web.filter.CharacterEncodingFilter
encoding
UTF-8
forceEncoding
true
charsetFilter
/*
org.springframework.web.context.ContextLoaderListener
dwr
org.directwebremoting.spring.DwrSpringServlet
debug
true
1
displaytag
org.springframework.web.servlet.DispatcherServlet
contentConfigLocation
/WEB-INF/displaytag-servlet.xml
2
dwr
/dwr/*
displaytag
*.html
The error is:
avax.servlet.ServletException: No DWR configuration was found in your application context, make sure to define one
and other error:
(FrameworkServlet.java:229) – Context initialization failed
[java][/java] org.springframework.beans.factory.BeanCreationException: Error creating bean with name ‘dwrConrtoller’: Cannot resolve reference to bean ‘__dwrConfiguration’ while setting bean property ‘configurators’ with key [0]; nested exception is org.springframework.beans.factory.NoSuchBeanDefinitionException: No bean named ‘__dwrConfiguration’ is defined

Explore related posts