Friday, January 25, 2013

Displaytags Integration With Spring MVC3

When it comes to displaying database records as a list view(table) in jsp, we need to provide sorting and pagination functionalists. Basically what we do is use ajax  with pure java script  or using JQuery and call controllers to get the job done. This becomes complicated when you need to provide sorting functionality  for multiple columns. I recently found a tag-library "displaytags" which can take care of pagination and sorting stuff in Client side.
Following is the view of functionality we want to come up with using displaytags. 

   
First you need to include tag declaration in your jsp.
 
<%@ taglib uri="http://displaytag.sf.net" prefix="display" %>
And the following will take care of generating table for list view.
 
   
    
    
     
    
The name of the display table attribute(which is name==persons) is binded with a list of Persons and it is assigned in MVC controller class.  
final ModelAndView persons = new ModelAndView(VIEW_ALL_PERSONS);
  persons .addObject("persons", getPersonList(request));
                request.setAttribute("personListSize", personService.getRowCount());
  request.setAttribute("pageSize", pageSize);
And the property attribute of display column which is (property="designationName") is binded with the property of the model in MVC pattern. And also you need to set other request parameters which are used to construct the table by display tag library.
public class PersonDetails {
 
 private String designationName;
 
 public String getDesignationName() {
  return designationName;
 }

 public void setDesignationName(String designationName) {
  this.designationName = designationName;
 }
}
Lets say you want to add an attribute which is not in you model class, then display tags allows you to use a decorator and use that attribute in display columns.I have used personLink and editLink property with a decorator and those properties are not included in my model class(PersonDetails). In the display table you can see a property called decorator and its value.(ecorator="se.nextodo.web.util.LinkDecorator"). Properties which are not included in the model class are retrieved from the decorator class. Advantage of using this is you can add a image links or icons in to the table.
import org.displaytag.decorator.TableDecorator;
import com.mycompany.model.PersonDetails;

public class LinkDecorator extends TableDecorator {

 public String getPersonLink() {
  final PersonDetails personDetails = (PersonDetails) getCurrentRowObject();
  final String link = ""+  "";
  return link;
 }

 public String getEditLink() {
  final PersonDetails personDetails = (PersonDetails) getCurrentRowObject();
  final String link = "" +"";
  return link;
 }
}
You can define button icon in you style sheet (in this case edit-btn) and it will render the images as expected.

       Now we are almost done with the creating table in client side and its time to consider how to implement sorting and pagination functionality in server side. From the server side we need to know the field that the client wanted to sort. It is the sortName property in the table column(sortName="firstName). display tag library set request parameter for this, so that we can retrieve it from the server side as follows.
final String attribute = request.getParameter(new ParamEncoder(tableId)   .encodeParameterName(TableTagParameters.PARAMETER_SORT));
In the same way you can retrieve the sorting order (ascending or descending).
 
final String orderKey = request.getParameter(new ParamEncoder(tableId)
    .encodeParameterName(TableTagParameters.PARAMETER_ORDER));
The remaining fact you want to get from the client is the current page position on the jsp.
  final String page = request.getParameter(new ParamEncoder(tableId)
    .encodeParameterName(TableTagParameters.PARAMETER_PAGE));
So its time to implement our dao functionality.
 @SuppressWarnings("unchecked")
 @Override
 public List getPersons(String orderedBy,
   String order, int startPosition, int maxResult) {

  final String queryString = "select p from Person p ORDER BY "
    + orderedBy + " " + order;

  final Query query = entityManager.createQuery(queryString);
  query.setFirstResult(startPosition);
  query.setMaxResults(maxResult);
  return query.getResultList();
 }
Dao call from the controller looks like bellow.
private Collection getPersonList(
   HttpServletRequest request) {

  final String tableId = "personList"; 
  final int pageSize = 10; 

  return personService.getModels( attribute,orderKey,(page - 1) * pageSize),pageSize);
 }
Reference : diplay tag website

2 comments:

  1. Could you please also explain how to achive pagination and sorting at cliet side?

    ReplyDelete
  2. Hi Eshan,

    Could u pls provide the solution so as to have two dynamic links in Struts2.0 using org.displaytag.decorator.LinkDecorator decorator

    ReplyDelete